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
