HTML5 para principiantes y Visual Studio Code

Tema 1: Introducción a HTML5

• Subtema 1.1: ¿Qué es HTML?

• Breve historia y contexto de HTML.

La historia y el contexto de HTML son fundamentales para comprender su evolución y
su lugar en el desarrollo web. Aquí tienes un resumen:

HTML, o HyperText Markup Language, es el lenguaje estándar utilizado para crear y

diseñar páginas web desde su creación a principios de la década de 1990. Fue
concebido por Tim Berners-Lee, un científico de la computación británico, mientras
trabajaba en el CERN (Organización Europea para la Investigación Nuclear), como una
forma de compartir y vincular documentos científicos a través de una red de
computadoras.

En 1989, Berners-Lee propuso un sistema de gestión de la información basado en

hipertexto, que eventualmente se convertiría en la World Wide Web. HTML se desarrolló
como el lenguaje utilizado para escribir documentos web, permitiendo la creación de
hipervínculos que conectan documentos entre sí y con otros recursos en línea.

La primera especificación de HTML se publicó en 1993 como HTML 1.0, estableciendo

las bases para la estructura de un documento HTML mediante etiquetas de marcado. A
lo largo de los años, HTML ha evolucionado con la introducción de nuevas versiones,
cada una con mejoras en funcionalidad, soporte multimedia y semántica.

HTML 2.0 se lanzó en 1995, seguido por HTML 3.2 en 1997, que introdujo mejoras
significativas como tablas y formularios. HTML 4.01 se convirtió en una recomendación
del W3C (World Wide Web Consortium) en 1999, proporcionando una estructura más
sólida y definida para el desarrollo web.

La mayor revolución llegó con HTML5, cuya primera especificación se publicó en 2008.
HTML5 no solo trajo nuevas características como etiquetas semánticas, elementos de
audio y video, y capacidades de almacenamiento local, sino que también se centró en
mejorar la interoperabilidad entre navegadores y proporcionar una plataforma más
sólida para aplicaciones web ricas y móviles.
 Hoy en día, HTML5 es la versión predominante de HTML utilizada en el desarrollo web,
respaldada por una amplia gama de tecnologías complementarias como CSS
(Cascading Style Sheets) y JavaScript. Además, HTML sigue siendo un estándar abierto y
en constante evolución, con esfuerzos continuos para mejorar la accesibilidad, la
compatibilidad y las capacidades multimedia en la web.
• Conceptos básicos: etiquetas, elementos, atributos.
En HTML5, los conceptos básicos son fundamentales para entender cómo se
estructuran y presentan los contenidos en una página web. Aquí tienes una descripción
de cada uno de ellos:

1. **Etiquetas:**
Las etiquetas son elementos fundamentales de HTML que se utilizan para definir la
estructura y el contenido de una página web. Las etiquetas están delimitadas por `<` y
`>` y pueden tener contenido entre ellas. Por ejemplo:
html
<p>Este es un párrafo de texto</p>

En este ejemplo, `<p>` y `</p>` son las etiquetas de apertura y cierre,

respectivamente, que rodean al texto "Este es un párrafo de texto".

2. **Elementos:**
Un elemento en HTML se compone de una etiqueta de apertura, contenido y una
etiqueta de cierre (en el caso de elementos que tienen contenido). Juntos, forman una
unidad que define un tipo específico de contenido en la página. Por ejemplo:
html
<h1>Este es un encabezado de nivel 1</h1>

Aquí, `<h1>` es la etiqueta de apertura, "Este es un encabezado de nivel 1" es el

contenido y `</h1>` es la etiqueta de cierre. En conjunto, forman el elemento `<h1>`.

3. **Atributos:**
Los atributos proporcionan información adicional sobre un elemento y se especifican
dentro de la etiqueta de apertura. Los atributos constan de un nombre y un valor,
separados por un signo igual (`=`). Por ejemplo:
html
<img src="imagen.jpg" alt="Descripción de la imagen">
 En este caso, `src` y `alt` son atributos del elemento `<img>`. `src` especifica la ruta de
la imagen que se va a mostrar, mientras que `alt` proporciona una descripción
alternativa de la imagen para usuarios que no pueden verla.

Comprender estos conceptos básicos es esencial para trabajar con HTML5 de manera
efectiva, ya que te permiten crear y estructurar el contenido de tus páginas web de
manera semántica y organizada.

• Subtema 1.2: Estructura básica de un documento HTML

• La estructura básica de un documento HTML5.

La estructura básica de un documento HTML5 proporciona el esqueleto inicial que todo
documento HTML debe seguir. Esta estructura define los elementos esenciales necesarios para
que un navegador web interprete correctamente el contenido de la página. Aquí tienes la
estructura básica de un documento HTML5:

Ahora, vamos a desglosar cada parte de esta estructura:

<!DOCTYPE html>:
Esta es la declaración del tipo de documento (DOCTYPE declaration) que indica al
navegador que el documento sigue la especificación HTML5. Esencialmente, le dice al
navegador qué versión de HTML se está utilizando.

<html lang="es">:
Aquí comienza el elemento <html>, que envuelve todo el contenido de la página. El
atributo lang especifica el idioma principal del contenido de la página. En este ejemplo,
"es" representa el español.
 <head>:
Dentro del elemento <head> se incluyen metadatos y enlaces a recursos externos que
no son visibles directamente en la página. Esto puede incluir etiquetas meta para
especificar la codificación de caracteres (<meta charset="UTF-8">), la vista en
dispositivos móviles (<meta name="viewport" content="width=device-width, initial-
scale=1.0">), y el título de la página (<title>Título de la página</title>).

<title>:
Esta etiqueta define el título de la página, que se muestra en la barra de título del
navegador y en los resultados de búsqueda. Es importante que cada página tenga un
título descriptivo y único.

<body>:
El elemento <body> contiene todo el contenido visible de la página web, como texto,
imágenes, enlaces, formularios, etc. Aquí es donde se coloca todo lo que los usuarios
verán y con lo que interactuarán en la página.

Dentro del elemento <body>, se coloca todo el contenido visible de la página web,
como texto, imágenes, enlaces, formularios, etc.

Esta estructura básica proporciona un punto de partida sólido para crear documentos
HTML5. Puedes agregar y modificar contenido según sea necesario, pero es importante
asegurarse de mantener la estructura básica para garantizar la compatibilidad y la
interpretación correcta por parte de los navegadores web.

• Uso de etiquetas <html>, <head> y <body>.

En HTML5, las etiquetas `<html>`, `<head>` y `<body>` juegan roles fundamentales en
la estructuración y presentación de una página web. Aquí te explico cómo se utilizan
estas etiquetas:

1. **`<html>`:**
La etiqueta `<html>` es la envoltura principal de todo el contenido de la página web.
Marca el comienzo y el final del documento HTML. Es dentro de esta etiqueta donde se
encuentra todo el contenido visible y los metadatos del documento. Un documento
HTML5 típico comenzará con `<html>` y terminará con `</html>`. Ejemplo:
 html
<!DOCTYPE html>
<html lang="es">
<!-- Contenido del documento -->
</html>

Nota:
- El atributo `lang` especifica el idioma principal del contenido de la página.
- Aunque no es obligatorio, es una buena práctica definir el atributo `lang` para
mejorar la accesibilidad y la interpretación de la página por parte de los motores de
búsqueda.

2. **`<head>`:**
La etiqueta `<head>` contiene metadatos y enlaces a recursos externos que no se
muestran directamente en la página web, como la codificación de caracteres, la
descripción de la página, las hojas de estilo CSS y los scripts JavaScript. Ejemplo:

html
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
<link rel="stylesheet" href="styles.css">
</head>

Nota:
- La etiqueta `<meta charset="UTF-8">` define la codificación de caracteres utilizada
en el documento como UTF-8, que es ampliamente compatible y admite una amplia
gama de caracteres.
- La etiqueta `<title>` establece el título de la página que se muestra en la barra de
título del navegador y en los resultados de búsqueda.
- La etiqueta `<link>` se utiliza para vincular una hoja de estilo externa (`styles.css`) al
documento HTML.
 3. **`<body>`:**
La etiqueta `<body>` contiene todo el contenido visible de la página web, como texto,
imágenes, enlaces, formularios, etc. Es dentro de esta etiqueta donde se coloca todo lo
que los usuarios verán y con lo que interactuarán en la página. Ejemplo:

html
<body>
<h1>¡Bienvenido a mi página web!</h1>
<p>Este es un párrafo de texto.</p>
<img src="imagen.jpg" alt="Descripción de la imagen">
<a href="pagina.html">Enlace a otra página</a>
</body>

Nota:
- Todo el contenido visible de la página web debe estar dentro de la etiqueta
`<body>`.
- Los elementos dentro de `<body>` son los que se renderizarán en el navegador y
serán visibles para los usuarios.

Estas etiquetas proporcionan la estructura básica para crear un documento HTML5

válido y bien estructurado. Es importante comprender cómo y cuándo utilizar cada una
para garantizar una correcta interpretación por parte de los navegadores y una
experiencia de usuario óptima.
• Declaración del tipo de documento (<!DOCTYPE html>).
En HTML5, la declaración del tipo de documento (`<!DOCTYPE html>`) es una
instrucción especial que se utiliza al comienzo de un documento HTML para informar al
navegador sobre el tipo de documento que está a punto de procesar. Aquí te explico
más sobre su uso:

1. **Propósito:**
La declaración del tipo de documento (DOCTYPE declaration) indica al navegador web
la versión de HTML que se está utilizando en el documento. En el caso de HTML5, la
 declaración `<!DOCTYPE html>` especifica que el documento sigue las reglas y
estándares definidos por HTML5.

2. **Sintaxis:**
La declaración del tipo de documento se escribe como una instrucción independiente
al inicio del documento HTML, antes de cualquier otra etiqueta. Aquí tienes un ejemplo
de cómo se ve:

html
<!DOCTYPE html>

Esta línea se coloca típicamente en la parte superior del documento HTML, incluso
antes de la etiqueta `<html>`, y no tiene etiqueta de cierre.

3. **Compatibilidad y Validación:**
Incluir la declaración del tipo de documento es esencial para garantizar que el
navegador interprete correctamente el documento HTML y aplique los estándares de
HTML5. Además, muchos validadores HTML utilizan esta declaración para verificar si el
documento cumple con la especificación de HTML5.

4. **Simplificación:**
En comparación con las versiones anteriores de HTML, la declaración del tipo de
documento en HTML5 es mucho más simple y concisa. Ya no es necesario especificar
una URL o un sistema de identificación de DTD (Document Type Definition), como se
hacía en versiones anteriores de HTML.

En resumen, la declaración del tipo de documento (`<!DOCTYPE html>`) es una parte

crucial de cualquier documento HTML5, ya que establece el contexto para el navegador
sobre cómo interpretar el código HTML que sigue. Es una línea simple pero
fundamental que asegura la consistencia y la compatibilidad entre los diferentes
navegadores y herramientas de desarrollo web.

Tema 2: Etiquetas y elementos HTML esenciales

• Subtema 2.1: Etiquetas de texto

• Uso de etiquetas <h1> a <h6> para encabezados.

En HTML5, las etiquetas `<h1>` a `<h6>` se utilizan para definir los encabezados de un
documento web. Estas etiquetas son importantes tanto para la estructura del
documento como para mejorar la accesibilidad y la comprensión del contenido por
parte de los usuarios y los motores de búsqueda. Aquí te explico cómo se utilizan estas
etiquetas:

1. **`<h1>` a `<h6>`:**
- `<h1>` se utiliza para el encabezado principal de la página, siendo el más
importante y con el tamaño de texto más grande.
- `<h2>` a `<h6>` se utilizan para los encabezados secundarios, siendo cada uno de
ellos de importancia descendente y con tamaños de texto más pequeños a medida que
aumenta el número.

Ejemplo de uso:

html
<h1>Este es un encabezado de nivel 1</h1>
<h2>Este es un encabezado de nivel 2</h2>
<h3>Este es un encabezado de nivel 3</h3>
<h4>Este es un encabezado de nivel 4</h4>
<h5>Este es un encabezado de nivel 5</h5>
<h6>Este es un encabezado de nivel 6</h6>

Notas:
- Es importante utilizar los encabezados de manera semántica, es decir, `<h1>` para el
título principal, `<h2>` para subsecciones importantes, y así sucesivamente.
- Los motores de búsqueda y las tecnologías de asistencia utilizan estos encabezados
para comprender la estructura y la jerarquía del contenido de la página, por lo que es
fundamental utilizarlos correctamente.

2. **Jerarquía y Estructura:**
La utilización adecuada de los encabezados ayuda a establecer una jerarquía clara en
el contenido de la página, lo que facilita la navegación y la comprensión del usuario
sobre la relación entre diferentes secciones del documento.
 3. **Estilo y Presentación:**
Aunque los encabezados tienen un estilo predeterminado que varía según el
navegador, es común aplicar estilos personalizados mediante hojas de estilo CSS para
adaptar su apariencia al diseño general de la página.

Ejemplo de estilo CSS:

css
h1 {
color: #333; /* Color del texto */
font-size: 24px; /* Tamaño de la fuente */
font-weight: bold; /* Peso de la fuente */
}

h2 {
color: #666;
font-size: 20px;
font-weight: bold;
}

/* Estilos para h3, h4, h5, h6 */

Nota: Los estilos pueden personalizarse según las preferencias y el diseño específico
de cada sitio web.

En resumen, las etiquetas `<h1>` a `<h6>` son elementos importantes en HTML5 para
estructurar y organizar el contenido de una página web de manera semántica y
accesible. Es crucial utilizarlos correctamente para mejorar la experiencia del usuario y la
comprensión del contenido por parte de los motores de búsqueda.
• Etiquetas de párrafo <p>.
En HTML5, la etiqueta de párrafo `<p>` se utiliza para definir un párrafo de texto en un
documento web. Esta etiqueta es fundamental para estructurar el contenido textual y
dividirlo en unidades lógicas, lo que facilita la lectura y la comprensión por parte de los
usuarios. Aquí te explico cómo se utiliza la etiqueta `<p>`:

1. **Sintaxis básica:**
La etiqueta `<p>` se utiliza para marcar el comienzo y el final de un párrafo de texto
en HTML5. El texto que se encuentra entre las etiquetas `<p>` y `</p>` se considera
parte del párrafo y se muestra como un bloque de texto separado en la página web.

Ejemplo de uso:

html
<p>Este es un párrafo de texto.</p>

2. **Encadenamiento de párrafos:**
Se pueden utilizar múltiples etiquetas `<p>` para encadenar varios párrafos de texto
en una página web. Cada `<p>` representa un nuevo párrafo y se muestra como un
bloque separado en la página.

Ejemplo de múltiples párrafos:

html
<p>Este es el primer párrafo de texto.</p>
<p>Este es el segundo párrafo de texto.</p>

3. **Estilo y presentación:**
Los párrafos se muestran típicamente con un margen superior e inferior, lo que los
separa visualmente del contenido que los rodea. El estilo de los párrafos puede
personalizarse utilizando hojas de estilo CSS para ajustarse al diseño general de la
página web.

Ejemplo de estilo CSS para párrafos:

 css
p{
margin-top: 10px; /* Margen superior */
margin-bottom: 10px; /* Margen inferior */
line-height: 1.5; /* Espaciado entre líneas */
}

4. **Usos comunes:**
- Los párrafos se utilizan para presentar bloques de texto continuo, como
introducciones, descripciones, párrafos de texto en artículos o secciones de contenido.
- También se pueden utilizar para dividir el texto en unidades lógicas, lo que facilita la
lectura y la comprensión del contenido.

En resumen, la etiqueta `<p>` es una herramienta esencial en HTML5 para estructurar y

organizar el contenido textual en páginas web. Utilizarla adecuadamente mejora la
legibilidad y la accesibilidad del contenido, lo que contribuye a una experiencia de
usuario más satisfactoria.
• Etiqueta de línea horizontal <hr>.
En HTML5, la etiqueta `<hr>` se utiliza para crear una línea horizontal, también conocida
como "regla horizontal" o "separador". Esta etiqueta es útil para dividir visualmente el
contenido de una página web en secciones o para marcar un cambio temático en el
contenido. Aquí te explico cómo se utiliza la etiqueta `<hr>`:

1. **Sintaxis básica:**
La etiqueta `<hr>` se coloca en el lugar donde se desea insertar la línea horizontal en
la página web. No tiene una etiqueta de cierre y se considera una etiqueta de
"autocierre", lo que significa que no tiene contenido entre etiquetas. Se muestra como
una línea continua que se extiende horizontalmente a lo ancho del contenedor.

Ejemplo de uso básico:

html
<p>Este es un párrafo de texto.</p>
<hr>
 <p>Este es otro párrafo de texto.</p>

2. **Atributos opcionales:**
La etiqueta `<hr>` no tiene atributos obligatorios en HTML5, pero se pueden utilizar
atributos opcionales para personalizar el aspecto de la línea horizontal. Algunos
atributos comunes incluyen:
- `color`: Define el color de la línea horizontal.
- `size`: Define el grosor de la línea horizontal.
- `width`: Define el ancho de la línea horizontal en relación con el contenedor.

Ejemplo de uso con atributos:

html
<hr color="blue" size="2" width="50%">

3. **Estilo y presentación:**
Aunque la etiqueta `<hr>` crea una línea horizontal por defecto, su estilo puede ser
personalizado utilizando hojas de estilo CSS para adaptarse al diseño general de la
página web. Se pueden definir propiedades como color, grosor, estilo de línea, etc.

Ejemplo de estilo CSS para la etiqueta `<hr>`:

css
hr {
border: none; /* Elimina el borde predeterminado */
height: 1px; /* Grosor de la línea */
background-color: #ccc; /* Color de la línea */
}

4. **Usos comunes:**
 - La etiqueta `<hr>` se utiliza comúnmente para separar secciones de contenido en
una página web, como entre párrafos, entre artículos, entre encabezados y contenido,
etc.
- También se utiliza a menudo como un divisor visual entre elementos relacionados
pero distintos, como en formularios o listas.

En resumen, la etiqueta `<hr>` es una herramienta útil en HTML5 para crear líneas
horizontales que ayudan a organizar y dividir el contenido de una página web de
manera visualmente atractiva y estructurada. Puede personalizarse según las
necesidades específicas de diseño utilizando atributos y estilos CSS.