¿Qué es HTML? (10 minutos)
Explicación:
HTML (HyperText Markup Language) es el lenguaje estándar para crear páginas web. Define la estructura y el contenido de una página, como títulos, párrafos, listas o imágenes. No se encarga del diseño (eso es CSS) ni de la lógica (eso es JavaScript o PHP), sino de organizar la información que ve el usuario.
Analogía: HTML es como el esqueleto de una casa: da forma y sostiene todo, mientras que CSS (la pintura) y JavaScript/PHP (la electricidad) añaden estilo y funcionalidad.
Cómo funciona:
- HTML usa etiquetas (tags) para marcar contenido. Ejemplo: <p> para un párrafo, <h1> para un título.
- Las etiquetas suelen tener una apertura (<p>) y un cierre (</p>), aunque algunas, como <img>, no requieren cierre.
- Una página HTML es un archivo con extensión .html que los navegadores interpretan.
Punto clave: En Laravel, usarás HTML en las vistas (archivos Blade) para mostrar datos dinámicos, como listas de usuarios o formularios.
Actividad rápida (2 minutos):
Piensa en una página web que te guste (por ejemplo, un blog). Escribe en papel 3 elementos que podría contener (títulos, párrafos, imágenes, etc.). Ejemplo:
- Un título grande.
- Un párrafo de texto.
- Una lista de enlaces.
Estructura básica de una página HTML (15 minutos)
Explicación:
Toda página HTML sigue una estructura estándar que incluye las siguientes etiquetas principales:
- <!DOCTYPE html>: Declara que el documento es HTML5 (va al inicio).
- <html>: Contenedor principal de la página, con el atributo lang para el idioma (por ejemplo, lang="es" para español).
- <head>: Contiene metadatos (información sobre la página, como el título o enlaces a CSS), no visible en la página.
- <body>: Contiene el contenido visible (títulos, párrafos, listas, etc.).
Estructura mínima:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi Página Web</title>
</head>
<body>
<!-- Contenido visible aquí -->
</body>
</html>
Detalles:
- <title> (dentro de <head>): Define el título que aparece en la pestaña del navegador.
- Los comentarios (<!-- texto -->) ayudan a documentar el código sin afectar la página.
- La indentación (espacios o tabulaciones) hace el código más legible, aunque no es obligatoria.
Punto clave: Esta estructura es la base de cualquier página web, incluyendo las vistas de Laravel, donde el <body> contendrá datos dinámicos.
Actividad rápida (3 minutos):
Escribe en papel la estructura básica de una página HTML (solo las etiquetas principales, sin contenido). Solución sugerida:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Ejemplo práctico: Crear una página con título y párrafo (15 minutos)
Explicación:
Ahora crearemos una página HTML simple con un título en la pestaña y un párrafo visible, aplicando la estructura aprendida.
Ejemplo práctico (como pide la lección):
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi Primera Página</title>
</head>
<body>
<h1>Bienvenido a mi página</h1>
<p>Este es un párrafo de ejemplo para aprender HTML.</p>
</body>
</html>
Cómo funciona:
- <!DOCTYPE html> asegura compatibilidad con HTML5.
- <html lang="es"> define el idioma español.
- <title> establece "Mi Primera Página" en la pestaña del navegador.
- <h1> crea un encabezado principal.
- <p> añade un párrafo de texto visible.
Cómo probarlo:
- Abre VS Code (o cualquier editor de texto).
- Crea un archivo llamado index.html.
- Copia el código anterior y guárdalo.
- Ábrelo en un navegador (haz doble clic o arrástralo a Chrome/Firefox).
- Alternativa: Pega el código en CodePen (selecciona la pestaña HTML) y revisa la vista previa.
Resultado esperado:
- En la pestaña del navegador: "Mi Primera Página".
- En la página: Un título grande ("Bienvenido a mi página") y un párrafo debajo ("Este es un párrafo de ejemplo...").
Punto clave: Este ejemplo es similar a cómo estructurarás vistas en Laravel, donde el <body> contendrá contenido dinámico generado por Blade.
Actividad rápida (3 minutos):
Modifica el ejemplo (en papel o editor) para cambiar el título a "Hola, Mundo" y el párrafo a "Aprendo HTML". Solución sugerida:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Hola, Mundo</title>
</head>
<body>
<h1>Bienvenido a mi página</h1>
<p>Aprendo HTML.</p>
</body>
</html>
Resumen y preparación para la tarea (10 minutos)
Resumen:
- HTML: Lenguaje para estructurar contenido web usando etiquetas.
- Estructura básica: <!DOCTYPE html>, <html>, <head> (metadatos), <body> (contenido visible).
- Ejemplo práctico: Creamos una página con título (<title>) y contenido (<h1>, <p>).
- Esta base es esencial para Laravel, donde las vistas Blade extienden HTML con datos dinámicos.
Preparación para la tarea:
La tarea pide escribir un HTML con encabezados (<h1> a <h3>) y una lista. Introduzcamos estas etiquetas:
- Encabezados: <h1> (principal), <h2> (secundario), <h3> (terciario). Representan jerarquía, como títulos y subtítulos.
- Listas:
- No ordenadas (<ul>): Usan viñetas. Cada elemento es <li> (list item).
- Ordenadas (<ol>): Usan números. También usan <li>.
- Ejemplo de lista no ordenada:
<ul> <li>Elemento 1</li> <li>Elemento 2</li> </ul>
Punto clave: Las listas y encabezados son comunes en vistas de Laravel para mostrar menús, títulos de secciones o datos estructurados.
Tarea práctica: Escribe un HTML con encabezados (h1-h3) y una lista
Instrucciones:
- Crea un archivo HTML (tarea.html) que incluya:
- La estructura básica (<!DOCTYPE>, <html>, <head>, <body>).
- Un título en la pestaña (por ejemplo, "Mi Tarea HTML").
- Al menos tres encabezados: <h1>, <h2>, <h3> con texto de tu elección.
- Una lista (puede ser <ul> o <ol>) con al menos 3 elementos.
- Usa el siguiente formato como guía:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi Tarea HTML</title>
</head>
<body>
<h1>Encabezado Principal</h1>
<h2>Subencabezado</h2>
<h3>Sub-subencabezado</h3>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</body>
</html>
- Prueba el archivo:
- Guarda el código en tarea.html.
- Ábrelo en un navegador para verificar que se vean los encabezados y la lista.
- Alternativa: Pega el código en CodePen y revisa la vista previa.
Ejemplo de solución esperada:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi Tarea HTML</title>
</head>
<body>
<h1>Mi Lista de Tareas</h1>
<h2>Pendientes para Hoy</h2>
<h3>Detalles</h3>
<ul>
<li>Estudiar HTML</li>
<li>Comprar víveres</li>
<li>Llamar a un amigo</li>
</ul>
</body>
</html>
Resultado esperado:
- Pestaña del navegador: "Mi Tarea HTML".
- Página: Un título grande ("Mi Lista de Tareas"), un subtítulo ("Pendientes para Hoy"), un subtítulo menor ("Detalles"), y una lista con viñetas ("Estudiar HTML", "Comprar víveres", "Llamar a un amigo").
Tiempo estimado: 15-20 minutos (puedes hacerlo después de la lección).
Entregable: Archivo tarea.html funcional que muestre encabezados y una lista. Puedes compartir el código o describirlo para que lo revise.
Consejo: Experimenta añadiendo más elementos, como un segundo párrafo o una lista ordenada (<ol>), para practicar.