Sección 1.1: Historia de HTML y su Evolución
HTML (Hypertext Markup Language) es el lenguaje fundamental de la web. Desde su creación en 1990 por Tim Berners-Lee, HTML ha evolucionado significativamente para adaptarse a las demandas cambiantes de la internet. La transición a HTML5 marcó un hito importante en la evolución de la web. A continuación, exploraremos las etapas clave de esta evolución:
HTML 1.0 (1993): La primera versión de HTML introdujo la idea de documentos hipertextuales y enlaces. Sin embargo, era bastante básica en términos de estructura y diseño.
HTML 2.0 (1995): Esta versión incluyó soporte para formularios y tablas, lo que permitió una mayor interacción en las páginas web.
HTML 3.2 (1997): La adición de hojas de estilo en cascada (CSS) permitió un mejor control de la presentación, y la web comenzó a verse más profesional.
HTML 4.01 (1999): Esta versión trajo más mejoras de diseño y presentación. También introdujo el modelo de programación DOM (Document Object Model).
XHTML (2000): XHTML combinó las reglas de XML con HTML y promovió una estructura más rigurosa y una mejor separación de contenido y presentación.
HTML5 (2014): HTML5 fue un gran salto. Introdujo numerosas características nuevas, incluyendo elementos semánticos, audio y video nativos, geolocalización y soporte para aplicaciones web progresivas (PWAs).
Sección 1.2: Conceptos Básicos de HTML5
HTML5 es un lenguaje de marcado que se utiliza para estructurar el contenido de una página web. A diferencia de sus predecesores, HTML5 se centra en la semántica, lo que significa que los elementos tienen un significado intrínseco que describe su función en la página. A continuación, algunos conceptos clave:
- Elementos HTML: Los elementos son las etiquetas utilizadas para definir la estructura de una página web. Comienzan con una etiqueta de apertura y terminan con una etiqueta de cierre. Por ejemplo:
· <h1>Este es un encabezado</h1>· <p>Este es un párrafo.</p>
- Atributos: Los atributos proporcionan información adicional sobre los elementos HTML. Por ejemplo, el atributo «src» se utiliza en la etiqueta «img» para especificar la fuente de una imagen.
· <img src=»imagen.jpg» alt=»Descripción de la imagen»>
Sección 1.3: Preparación del Entorno de Desarrollo
Antes de sumergirse en la creación de páginas web con HTML5, es esencial tener un entorno de desarrollo adecuado configurado. Esto incluye un editor de código y un navegador web para visualizar tus páginas en tiempo real. Aquí hay algunas recomendaciones para preparar tu entorno:
Editor de Código: Puedes utilizar una variedad de editores de código para escribir HTML5, desde opciones gratuitas como Visual Studio Code, Atom o Sublime Text hasta soluciones más avanzadas como WebStorm. Estos editores ofrecen características como resaltado de sintaxis y autocompletado para hacer tu codificación más eficiente.
Navegador Web: HTML5 es compatible con la mayoría de los navegadores modernos, como Google Chrome, Mozilla Firefox, Microsoft Edge y Safari. Asegúrate de tener al menos uno de estos navegadores instalado para probar tus páginas web mientras las desarrollas.
Sección 1.4: Creación de la Estructura Básica de una Página Web
La estructura básica de una página web HTML5 consta de elementos esenciales que son cruciales para que un navegador pueda interpretar y mostrar correctamente tu contenido. A continuación, te mostraré cómo crear la estructura básica de una página web:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Primera Página HTML5</title>
</head>
<body>
<header>
<h1>Bienvenido a mi página web</h1>
</header>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
<main>
<section>
<h2>Sobre Nosotros</h2>
<p>Somos una empresa dedicada a...</p>
</section>
<section>
<h2>Nuestros Productos</h2>
<ul>
<li>Producto 1</li>
<li>Producto 2</li>
<li>Producto 3</li>
</ul>
</section>
</main>
<footer>
<p>© 2023 Mi Empresa. Todos los derechos reservados.</p>
</footer>
</body>
</html>
A medida que avanzas en el estudio, aprenderás a agregar estilos, interactividad y contenido dinámico a tus páginas.
