Ver mapa completo
Copiar y editar mapa Copiar

Unidad 3:

Otros
Photo
Eloy Garcia
Comienza Ya. Es Gratis
ó regístrate con tu dirección de correo electrónico
Rocket clouds
Mapas Mentales Similares Esbozo del Mapa Mental
Unidad 3: por Mind Map: Unidad 3:

1. . Estructura de un documento web: HTML:

1.1. HTML -> HyperText Markup Language (Lenguaje de marcas de hipertexto)

1.2. Hipertexto: "herramienta con estructura no secuencial que permite crear, agregar, enlazar y compartir información de diversas fuentes por medio de enlaces asociativos."

1.3. HTML se usa para crear la estructura de las páginas web.

1.4. No se considera un lenguaje de programación.

1.5. Puede venir acompañado de dos lenguajes:

1.6. CSS: define el formato de la página web

1.7. JavaScript: lenguaje de programación, añade dinamismo

2. Etiquetas:

2.1. Tienen un nombre que va entre los símbolos < y >. Ejemplo: <p>

2.2. Algunas etiquetas tienen contenido, para delimitarlo se usa el nombre de la etiqueta entre </ y >. Ejemplos:

2.3. <p>Esto es un párrafo</p>

2.4. <strong>Este texto se vería en negrita</strong>

2.5. Las etiquetas sin contenido pueden llevar el símbolo / antes de > Ejemplo:

2.6. <br />

2.7. Algunas etiquetas pueden contener a otras. Las internas debe cerrarse antes de las externas. Ejemplo:

2.8. <p>Todo el texto se vería normal, excepto <strong>este texto</strong><p>

3. Atributos:

3.1. Los atributos pueden modificar características de las etiquetas

3.2. Tiene un nombre que indica que propiedad modifican, y un valor entrecomillado

3.3. Son opcionales, pueden usarse o no.

3.4. Se añaden en la etiqueta de apertura

3.5. Ejemplos:

3.6. <img src="foto1234.jpg" />

3.7. <img src="foto2134.jpg" alt="Dia soleado en el campo" />

3.8. <p align="right">Párrafo alineado a la derecha.</p>

4. Estructura básica de una página web HTML:

4.1. Para crear un documento HTML podemos usar cualquier editor de texto plano. Por ejemplo:

4.2. Bloc de notas

4.3. Notepad++: Resalta con colores las etiquetas HTML y podemos abrir varios documentos en pestañas.

4.4. Componentes básicos de la estructura HTML:

4.5. DOCTYPE: Indica qué tipo de archivo es. Ejemplo: <!DOCTYPE html>

4.6. <html>: Etiqueta raíz que contiene el resto de etiquetas

4.7. <head>: Primera etiqueta tras <html>. Contiene información sobre la página web. Dentro se encuentra la etiqueta <title> que indica cuál es el título.

4.8. <meta charset="UTF-8" />: Indica la codificación usada

4.9. <body>: Va a continuación de <head>. Incluye el cuerpo de la página web.

5. Estructura básica de una página web HTML (II):

5.1. Estructura básica: <!DOCTYPE html> <html> <head> <title>Título de la página</title> <meta charset="UTF-8"> </head> <body> Contenido de la página </body> </html>

6. Tipos de elementos:

6.1. Ocupan todo el ancho del elemento que los contiene Los elementos van tras de ellos se visualizan debajo Pueden contener otros elementos de bloque Ejemplos: <p> párrafo <div> bloque <ul> lista sin orden <ol> lista ordenada <table> tabla Ver ejemplo (pulsar 'run')

7. Etiquetas básicas:

7.1. <div> Divide la página en secciones </div>

7.2. <p> Párrafo </p>

7.3. <span> Sirve para agrupar elementos en línea </span>

7.4. <u> Subrayado </u>

7.5. <em> Cursiva o énfasis </em>

7.6. <strong> Negrita o destacado </strong>

7.7. <sub> Subíndice </sub>

7.8. <br> Salto de línea

7.9. <hr> Línea de separación horizontal

8. Listas:

8.1. <li> Representa cada uno de los items de la lista </li>

8.2. <ol> Representa una lista ordenada </ol>

8.3. <ul> Representa una lista sin orden </ul>

8.4. Sintaxis:

9. Listas ordenadas:

9.1. Las listas ordenadas tienen varios atributos propios:

9.2. Reversed : invierte el orden de la lista

9.3. Start: establece en qué número o letra empieza la lista. Ejemplo: <ol start=“2”>

9.4. Type: indica el tipo de numeral a utilizar. Ejemplo: <ol type=“a”> o <ol type=“i”>

10. Listas anidadas:

10.1. Una lista puede estar dentro de otra lista La lista interna formaría parte de un ítem de la lista externa Ejemplo

11. Encabezados:

11.1. Los encabezados son títulos para las diferentes secciones de una página web

11.2. Son: <h1> <h2> <h3> <h4> <h5> <h6>

11.3. El número indica la importancia del título (tamaño). El 1 el más importante.

12. Tablas:

12.1. Las tablas son un elemento de bloque

12.2. Se crean con la etiqueta <table>

12.3. Las filas se crean con la etiqueta <tr> (table row)

12.4. Las filas contienen celdas que se crean con la etiqueta <td>

12.5. Atributo border: se usa indicar el ancho de los bordes de la tabla

12.6. Ejemplo:

12.7. <table>

12.8. <tr>

12.9. <td>Fila 1 Columna 1</td> <td>Fila 1 Columna 2</td>

12.10. </tr>

12.11. <tr>

12.12. <td>Fila 2 Columna 1</td> <td>Fila 2 Columna 2</td>

12.13. </tr>

12.14. </table>

13. Unir celdas:

13.1. Atributos de la etiqueta <td> para unir celdas:

13.2. colspan = "numero_de_columnas" : une varias celdas ocupando varias columnas

13.3. rowspan = "numero_de_filas" : une varias celdas ocupando varias filas

13.4. Ejemplo 1:

13.5. <td colspan="2">esta celda ocupa dos columnas</td>

13.6. Ejemplo 2:

13.7. <td rowspan="3">esta celda ocupa tres filas</td>

14. Imágenes:

14.1. Las imágenes son un elemento en línea

14.2. Etiqueta: <img>

14.3. Atributos:

14.4. Alt: texto alternativo

14.5. Src: ruta de la imagen a visualizar. Generalmente las imágenes se almacenan en una carpeta diferente a la de las páginas. Ejemplos:

14.6. Imagen.jpg : la imagen se encuentra en la misma carpeta de la página

14.7. Img/imagen.jpg : la imagen se encuentra dentro de la carpeta Img

14.8. ../imagen.jpg : la imagen se encuentra en la carpeta superior o padre

14.9. Ejemplo:

14.10. <img src="../imagenes/image.jpg" alt="bosque" />

15. Enlaces:

15.1. Son vínculos a otras páginas

15.2. Pueden ser:

15.3. Locales (dentro del sitio web)

15.4. Externos (en otro sitio web)

15.5. Etiqueta <a>

15.6. Atributos:

15.7. href : URL de la página de destino

15.8. Target="_blank" : abre la página de destino en una nueva pestaña

15.9. Ejemplos:

15.10. <a href="http://www.calasancioalicante.org">Calasancio Alicante</a>

15.11. <a href="otrapagina.html"></a>

16. Personalización del estilo: CSS:

16.1. CSS es el lenguaje utilizado para definir el modo en que se presenta el código HTML de una página web

16.2. Permite separar la estructura (HTML) de la presentación (CSS).

16.3. Ventajas de usar archivo CSS:

16.4. Con un solo archivo CSS podemos modificar varias páginas HTML

16.5. A la hacer cambios sólo se modifica en el archivo CSS (y no en todas las páginas HTML)

17. Colocación del código CSS:

17.1. El código CSS se puede vincular a una estructura HTML de tres formas diferentes:

17.2. En un atributo HTML, con el atributo style <div style="width: 100px; height: 100px; background-color: red;"></div>

17.3. Con la etiqueta <style> <style type="text/css"> div {

17.4. width: 100px; height: 100px; background-color:red; } </style>

17.5. En un archivo independiente: <link rel="stylesheet" href="css/estilo.css" type="text/css" />

18. Selectores básicos:

18.1. Los selectores determinan qué elementos HTML se verán afectados por el código CSS

18.2. Tipos de selectores:

18.3. Por tipo : Etiqueta HTML. Ejemplo: p { color: green; }

18.4. class: (varios elementos) .botonesRojos { background-color: red;}

18.5. id: (un elemento) #primerParrafo { color: gray; }

18.6. En caso de que un elemento esté afectado por varios selectores, la prioridad es:

18.7. Id

18.8. Clase

18.9. Tipo

18.10. <p id="primerParrafo" class="botonesRojos">Lorem ipsum</p>

19. Colores:

19.1. Propiedades:

19.2. color: modifica el color de texto

19.3. background-color: modifica el color de fondo

19.4. Nombres: red, orange, blue, brown, cyan, black, white, gray, darkgray... más colores

19.5. RGB (Red Green Blue): colores formados mezclado estos 3 indicando proporción de cada uno:

19.6. #FF0000 : tres números hexadecimales (rojo)

19.7. rgb(255,0,0) : decimales de 0 a 255

19.8. rgb(100%,0,0) : porcentajes

19.9. rgba(255,0,0,0.5) : tres números de 0 a 255 y un número de 0 a 1 que indica el nivel de tranparencia (0 = transparente, 1 = opaco

20. Propiedades del texto:

20.1. text-align : left, right, center o justify

20.2. text-decoration : underline, none, overline o line-through

20.3. text-transform : uppercase, lowercase y capitalize

20.4. font-size : 12px, 12pt o x-small, small, mediuum, large o x-large

20.5. font-family : serif, sans-serif, monospace, Verdana, Helvetica, etc.

20.6. font-style : italic o normal

20.7. font-weight : bold o normal

20.8. text-shadow : -4px 2px 5px grey; 4px a la izquierda, 2px hacia abajo, 5px difuminado y color de sombra.

21. Tamaño:

21.1. Recuerda

21.2. Tamaño horizontal por defecto:

21.3. Elementos de bloque: ocupan todo el ancho disponible

21.4. Elementos en línea: ocupan en función de su espacio

21.5. Tamaño vertical por defecto: ambos casos depende de su contenido

21.6. Con CSS podemos modificar el tamaño de la mayoría de elementos

21.7. display: block. Visualizar como elemento de bloque.

21.8. display: inline. Visualizar como elemento en línea.

21.9. display: inline-block. Visualizar como elemento en línea pero además podemos modificar ancho y largo

21.10. width, height, max-width, max-height, min-width y min-height

21.11. Sus valores se fijan en pixeles o en porcentajes

22. Bordes:

22.1. border-width : se establece en pixels

22.2. Border-left-width, border-right-width, border-top-width, border-bottom-width

22.3. border-style: solid, dashed (línea discontinua), dotted, double (línea doble)

22.4. border-left-style, border-right-style, border-top-style, border-bottom-style

22.5. border-color:

22.6. border: 2px solid red;

22.7. border-radius: radio del borde en px

23. Márgenes:

23.1. margin: distancia con otros elementos que lo rodean

23.2. padding: margen interno entre el elemento y su contenido

23.3. Tanto el margin como el padding se suma al width

24. Márgenes individuales:

24.1. Para modificar márgenes externos (margin) o internos (padding) podemos:

24.2. añadir -left –right –top –bottom

24.3. Ejemplo: margin-left: 10px;

24.4. Establecer cada una de las medidas en orden: arriba derecha abajo izquierda. Ejemplo:

24.5. Ejemplo: margin: 10px 5px 30px 5px;

25. Posicionamiento:

25.1. position: static -> posicionamiento por defecto

25.2. position: relative -> Ocupa el mismo espacio que static pero nos permite desplazarlo usando top left right bottom

25.3. position: absolute -> posición dentro del documento

25.4. Position: sticky -> sitúa al elemento basado en el scroll

25.5. Position: fixed -> posición dentro de la ventana del navegador

26. Imagen de fondo:

26.1. Podemos fijar una imagen de fondo en un elemento usando estas propiedades:

26.2. background-image : url ('imagen.png');

26.3. background-image : url ('../imagen.png');

26.4. background-position: left top; /* posición horizontal y vertical */

26.5. background-position: center center;

26.6. background-position: right bottom;

26.7. background-repeat: repeat;

26.8. background-repeat: no-repeat;

26.9. background-repeat: repeat-x;

26.10. background-repeat: repeat-y;