Curso HTML – Módulo 2: Fundamentos de HTML

Publicada el por

Módulo 2: Fundamentos de HTML

En este módulo, exploraremos los fundamentos esenciales de HTML, el lenguaje base de la web. Aprenderás cómo estructurar correctamente un documento HTML, entenderás la función de etiquetas clave como <html>, <head> y <body>, y conocerás la importancia de los atributos y comentarios en el código.

Este conocimiento te permitirá construir páginas web bien organizadas, semánticamente correctas y listas para ser estilizadas con CSS o mejoradas con JavaScript. Al finalizar, pondrás en práctica lo aprendido creando tu propio documento HTML completo. ¡Comencemos a construir la web desde sus cimientos!

Estructura de un Documento HTML

Un documento HTML tiene una estructura clara y bien definida:

  • <!DOCTYPE html>: Declara el tipo de documento y la versión de HTML (HTML5 en este caso).
  • <html>: Es el contenedor principal de todo el contenido.
  • <head>: Contiene metadatos como el título, la codificación de caracteres y enlaces a recursos externos.
  • <body>: Aquí va el contenido visible de la página, como texto, imágenes y enlaces.

Ejemplo de estructura básica:

<!DOCTYPE html> 
<html>
   <head>
      <meta charset="UTF-8">
      <title>Fundamentos de HTML</title>
   </head>
   <body>
      <h1>Título Principal</h1>
      <p>Este es un párrafo de ejemplo.</p>
   </body>
</html>

Etiquetas, Elementos y Atributos

  • Etiquetas: Palabras clave rodeadas por corchetes angulares (< >). Por ejemplo, <p> para párrafos y <h1> para títulos.
  • Elementos: Compuestos por una etiqueta de apertura, contenido y una etiqueta de cierre. Por ejemplo: <h1>Título</h1>.
  • Atributos: Proporcionan información adicional sobre los elementos. Por ejemplo, class, id, src, etc.

Ejemplo con atributos:

<p class="destacado">Este es un párrafo con una clase.</p>
<img src="imagen.jpg" alt="Descripción de la imagen" />

Comentarios en HTML

Los comentarios son útiles para documentar el código y hacer anotaciones que no se muestran en el navegador.

La sintaxis es la siguiente:

<!-- Este es un comentario en HTML -->

Ejemplo práctico:

<!DOCTYPE html> 
<html>
   <head>
      <meta charset="UTF-8">
      <title>Comentarios en HTML</title>
   </head>
   <body>
      <!-- Este es un comentario que describe la sección principal --> 
      <h1>Título Principal</h1>
      <p>Este es un párrafo con <span style="color: blue;">texto resaltado</span>.</p>
   </body>
</html>

Ejemplo Práctico: Crear un Documento HTML Completo

Vamos a crear un documento HTML que incluya:

  • Una estructura completa.
  • Comentarios explicativos.
  • Atributos en las etiquetas.
<!DOCTYPE html> 
<html>
   <head>
      <meta charset="UTF-8">
      <title>Fundamentos de HTML</title>
   </head>
   <body>
      <!-- Encabezado de la página --> 
      <header>
         <h1 id="titulo-principal">Bienvenido a mi página</h1>
      </header>
      <!-- Contenido principal --> 
      <main>
         <p class="destacado">Este es un párrafo con una clase.</p>
         <img src="imagen.jpg" alt="Descripción de la imagen" /> 
      </main>
      <!-- Pie de página --> 
      <footer>
         <p>Derechos reservados © 2025</p>
      </footer>
   </body>
</html>

Ejercicios Propuestos

Crear un Documento HTML:

  • Escribe un documento HTML con una estructura completa.
  • Añade comentarios que expliquen cada sección del código.

Experimentar con Atributos:

  • Usa atributos como class, id, y src en diferentes etiquetas.
  • Observa cómo afectan al comportamiento o estilo de los elementos.

Práctica de Comentarios:

  • Documenta un código HTML existente usando comentarios para explicar su funcionalidad.