1.1. Los atributos pueden modificar características de las etiquetas
1.2. Tiene un nombre que indica que propiedad modifican, y un valor entrecomillado
1.3. Son opcionales, pueden usarse o no.
1.4. Se añaden en la etiqueta de apertura
1.5. Ejemplos:
1.6. <img src="foto1234.jpg" />
1.7. <img src="foto2134.jpg" alt="Dia soleado en el campo" />
1.8. <p align="right">Párrafo alineado a la derecha.</p>
2. Estructura básica de una página web HTML:
2.1. Para crear un documento HTML podemos usar cualquier editor de texto plano. Por ejemplo:
2.2. Bloc de notas
2.3. Notepad++: Resalta con colores las etiquetas HTML y podemos abrir varios documentos en pestañas.
2.4. Componentes básicos de la estructura HTML:
2.5. DOCTYPE: Indica qué tipo de archivo es. Ejemplo: <!DOCTYPE html>
2.6. <html>: Etiqueta raíz que contiene el resto de etiquetas
2.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.
2.8. <meta charset="UTF-8" />: Indica la codificación usada
2.9. <body>: Va a continuación de <head>. Incluye el cuerpo de la página web.
3. Estructura básica de una página web HTML (II):
3.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>
4. Etiquetas básicas:
4.1. <div> Divide la página en secciones </div>
4.2. <p> Párrafo </p>
4.3. <span> Sirve para agrupar elementos en línea </span>
4.4. <u> Subrayado </u>
4.5. <em> Cursiva o énfasis </em>
4.6. <strong> Negrita o destacado </strong>
4.7. <sub> Subíndice </sub>
4.8. <br> Salto de línea
4.9. <hr> Línea de separación horizontal
5. Listas ordenadas:
5.1. Las listas ordenadas tienen varios atributos propios:
5.2. Reversed : invierte el orden de la lista
5.3. Start: establece en qué número o letra empieza la lista. Ejemplo: <ol start=“2”>
5.4. Type: indica el tipo de numeral a utilizar. Ejemplo: <ol type=“a”> o <ol type=“i”>
6. Encabezados:
6.1. Los encabezados son títulos para las diferentes secciones de una página web
6.2. Son: <h1> <h2> <h3> <h4> <h5> <h6>
6.3. El número indica la importancia del título (tamaño). El 1 el más importante.
7. Unir celdas:
7.1. Atributos de la etiqueta <td> para unir celdas:
7.2. colspan = "numero_de_columnas" : une varias celdas ocupando varias columnas
7.3. rowspan = "numero_de_filas" : une varias celdas ocupando varias filas
7.4. Ejemplo 1:
7.5. <td colspan="2">esta celda ocupa dos columnas</td>
7.6. Ejemplo 2:
7.7. <td rowspan="3">esta celda ocupa tres filas</td>
8. Enlaces:
8.1. Son vínculos a otras páginas
8.2. Pueden ser:
8.3. Locales (dentro del sitio web)
8.4. Externos (en otro sitio web)
8.5. Etiqueta <a>
8.6. Atributos:
8.7. href : URL de la página de destino
8.8. Target="_blank" : abre la página de destino en una nueva pestaña
10.5. RGB (Red Green Blue): colores formados mezclado estos 3 indicando proporción de cada uno:
10.6. #FF0000 : tres números hexadecimales (rojo)
10.7. rgb(255,0,0) : decimales de 0 a 255
10.8. rgb(100%,0,0) : porcentajes
10.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
11. Tamaño:
11.1. Recuerda
11.2. Tamaño horizontal por defecto:
11.3. Elementos de bloque: ocupan todo el ancho disponible
11.4. Elementos en línea: ocupan en función de su espacio
11.5. Tamaño vertical por defecto: ambos casos depende de su contenido
11.6. Con CSS podemos modificar el tamaño de la mayoría de elementos
11.7. display: block. Visualizar como elemento de bloque.
11.8. display: inline. Visualizar como elemento en línea.
11.9. display: inline-block. Visualizar como elemento en línea pero además podemos modificar ancho y largo
11.10. width, height, max-width, max-height, min-width y min-height
11.11. Sus valores se fijan en pixeles o en porcentajes
12. Márgenes:
12.1. margin: distancia con otros elementos que lo rodean
12.2. padding: margen interno entre el elemento y su contenido
12.3. Tanto el margin como el padding se suma al width
13. Posicionamiento:
13.1. position: static -> posicionamiento por defecto
13.2. position: relative -> Ocupa el mismo espacio que static pero nos permite desplazarlo usando top left right bottom
13.3. position: absolute -> posición dentro del documento
13.4. Position: sticky -> sitúa al elemento basado en el scroll
13.5. Position: fixed -> posición dentro de la ventana del navegador
14. . Estructura de un documento web: HTML:
14.1. HTML -> HyperText Markup Language (Lenguaje de marcas de hipertexto)
14.2. Hipertexto: "herramienta con estructura no secuencial que permite crear, agregar, enlazar y compartir información de diversas fuentes por medio de enlaces asociativos."
14.3. HTML se usa para crear la estructura de las páginas web.
14.4. No se considera un lenguaje de programación.
14.5. Puede venir acompañado de dos lenguajes:
14.6. CSS: define el formato de la página web
14.7. JavaScript: lenguaje de programación, añade dinamismo
15. Etiquetas:
15.1. Tienen un nombre que va entre los símbolos < y >. Ejemplo: <p>
15.2. Algunas etiquetas tienen contenido, para delimitarlo se usa el nombre de la etiqueta entre </ y >. Ejemplos:
15.3. <p>Esto es un párrafo</p>
15.4. <strong>Este texto se vería en negrita</strong>
15.5. Las etiquetas sin contenido pueden llevar el símbolo / antes de > Ejemplo:
15.6. <br />
15.7. Algunas etiquetas pueden contener a otras. Las internas debe cerrarse antes de las externas. Ejemplo:
15.8. <p>Todo el texto se vería normal, excepto <strong>este texto</strong><p>
16. Tipos de elementos:
16.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')
17. Listas:
17.1. <li> Representa cada uno de los items de la lista </li>
17.2. <ol> Representa una lista ordenada </ol>
17.3. <ul> Representa una lista sin orden </ul>
17.4. Sintaxis:
18. Listas anidadas:
18.1. Una lista puede estar dentro de otra lista La lista interna formaría parte de un ítem de la lista externa Ejemplo
19. Tablas:
19.1. Las tablas son un elemento de bloque
19.2. Se crean con la etiqueta <table>
19.3. Las filas se crean con la etiqueta <tr> (table row)
19.4. Las filas contienen celdas que se crean con la etiqueta <td>
19.5. Atributo border: se usa indicar el ancho de los bordes de la tabla
