Curso HTML – Módulo 1: Introducción a HTML

Publicada el por

Módulo 1: Introducción a HTML

Bienvenido al primer módulo del curso de HTML. En esta sección, descubrirás qué es HTML, cómo ha evolucionado a lo largo del tiempo y por qué es la base fundamental del desarrollo web.

Exploraremos la estructura básica de un documento HTML, aprenderemos sobre etiquetas, elementos y atributos esenciales, y entenderemos cómo HTML interactúa con otras tecnologías como CSS y JavaScript.

A medida que avances, aplicarás estos conceptos en ejercicios prácticos que te ayudarán a construir tus propias páginas web desde cero. ¡Es hora de dar el primer paso en el mundo del desarrollo web!

Definición y Concepto de HTML

HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto) y es el lenguaje estándar utilizado para crear y estructurar páginas web.

En esta introducción a HTML, aprenderás los conceptos básicos sobre este lenguaje de marcado utilizado para estructurar páginas web.

Es un lenguaje de marcado, lo que significa que utiliza etiquetas para definir elementos dentro de un documento, como títulos, párrafos, imágenes, enlaces, etc.

  • Etiquetas: Las etiquetas son palabras clave rodeadas por corchetes angulares (< >). Por ejemplo, <p> define un párrafo y </p> lo cierra.
  • Elementos: Un elemento HTML está compuesto 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, <img src="imagen.jpg" alt="Descripción">.

Ejemplo básico de un documento HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Mi primera página web</title>
  </head>
  <body>
    <h1>Bienvenido a mi página</h1>
    <p>Este es un párrafo de ejemplo.</p>
  </body>
</html>

Historia y Evolución de HTML

HTML fue creado por Tim Berners-Lee en 1991 como una forma de compartir documentos científicos en la web. Desde entonces, ha evolucionado significativamente:

  • HTML 2.0 (1995): Primera versión estandarizada por el IETF (Internet Engineering Task Force).
  • HTML 3.2 (1997): Introdujo mejoras como tablas y applets.
  • HTML 4.01 (1999): Añadió soporte para hojas de estilo (CSS) y scripting.
  • XHTML (2000): Una versión más estricta y basada en XML.
  • HTML5 (2014): La versión más reciente y poderosa, que incluye soporte para multimedia, gráficos y aplicaciones web complejas.

Hitos importantes:

  • 1991: Tim Berners-Lee crea HTML.
  • 1995: Lanzamiento de HTML 2.0.
  • 2014: HTML5 se convierte en un estándar oficial.

Importancia de HTML en el Desarrollo Web

HTML es la base de cualquier sitio web. Sin HTML, no habría estructura para mostrar contenido en la web. Es el primer paso en el desarrollo web y se complementa con:

  • CSS (Cascading Style Sheets): Para dar estilo y diseño a las páginas.
  • JavaScript: Para agregar interactividad y dinamismo.

Ejemplo de integración:

<!DOCTYPE html>
<html>
  <head>
    <title>Página con CSS y JavaScript</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      h1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Hola, Mundo!</h1>
    <p>Este es un ejemplo de HTML con CSS.</p>
    <button onclick="alert('Hiciste clic!')">Haz clic aquí</button>
  </body>
</html>

Estructura Básica de un Documento HTML

Un documento HTML tiene una estructura jerárquica que incluye:

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

Ejemplo detallado:

<!DOCTYPE html> 
<html>
   <head>
      <title>Mi primera página web</title>
      <meta charset="UTF-8">
      <meta name="description" content="Una página de ejemplo">
      <link rel="stylesheet" href="estilos.css">
   </head>
   <body>
      <header>
         <h1>Bienvenido a mi sitio web</h1>
         <nav>
            <ul>
               <li><a href="#">Inicio</a></li>
               <li><a href="#">Acerca de</a></li>
            </ul>
         </nav>
      </header>
      <main>
         <p>Este es un párrafo de ejemplo.</p>
      </main>
      <footer>
         <p>Derechos reservados © 2025</p>
      </footer>
   </body>
</html>

Ejercicios Propuestos

Línea de tiempo de HTML:

    • Investiga en Internet los hitos más importantes en la historia de HTML.
    • Crea una línea de tiempo que incluya las versiones más relevantes (HTML 2.0, HTML 4.01, HTML5, etc.).

Presentación en HTML:

    • Crea una página web que explique qué es HTML, su historia y su importancia.
    • Incluye al menos:
      • Un título principal (<h1>).
      • Dos párrafos (<p>).
      • Una imagen relacionada con HTML.
      • Un enlace a un recurso externo.

Práctica de Estructura:

    • Escribe un documento HTML que incluya:
      • Un encabezado (<header>).
      • Una sección principal (<main>).
      • Un pie de página (<footer>).
      • Usa etiquetas semánticas como <article>, <section>, y <nav>.

Recursos Adicionales