Tu Primera Página HTML

¡Hora de escribir código! Vamos a crear una página desde cero.

¿Qué es HTML?

HTML = HyperText Markup Language

No es un lenguaje de programación, es un lenguaje de marcado. Define la estructura de la página:

Qué es título
Qué es párrafo
Dónde está la imagen
Qué es un enlace

Estructura Básica

html

<!DOCTYPE html><html lang="es"><head>    <meta charset="UTF-8">    <title>Mi Página</title></head><body>    <h1>¡Hola Mundo!</h1></body></html>

Entendamos cada parte:

Etiqueta	Función
`<!DOCTYPE html>`	Dice que es HTML5
`<html>`	Envuelve todo
`<head>`	Metadatos (no visibles)
`<body>`	Contenido visible
`<title>`	Título en pestaña del navegador

Las Etiquetas Funcionan en Pares

La mayoría de las etiquetas tienen apertura y cierre:

html

<p>Este es un párrafo</p>   ↑ apertura          ↑ cierre (con /)

Algunas etiquetas son "auto-cerradas":

html

<br>      <!-- salto de línea --><img>     <!-- imagen --><input>   <!-- campo de formulario -->

Etiquetas Esenciales

Títulos

html

<h1>Título Principal</h1><h2>Sección</h2><h3>Subsección</h3><h4>Tema</h4><h5>Subtema</h5><h6>Detalle</h6>

¡Usa solo un h1 por página!

Párrafos y Texto

html

<p>Este es un párrafo.</p><p>Este es otro párrafo.</p> <strong>Texto en negrita</strong><em>Texto en cursiva</em>

Enlaces

html

<a href="https://google.com">Haz clic aquí</a> <!-- Abrir en nueva pestaña --><a href="https://google.com" target="_blank">Google</a>

Imágenes

html

<img src="foto.jpg" alt="Descripción de la foto"> <!-- De internet --><img src="https://sitio.com/imagen.png" alt="Descripción">

¡alt es importante para accesibilidad!

Listas

html

<!-- No ordenada (viñetas) --><ul>    <li>Item 1</li>    <li>Item 2</li></ul> <!-- Ordenada (números) --><ol>    <li>Primero</li>    <li>Segundo</li></ol>

Práctica: Página Personal

Crea un archivo sobre.html:

html

<!DOCTYPE html><html lang="es"><head>    <meta charset="UTF-8">    <title>Sobre Mí</title></head><body>    <h1>Tu Nombre</h1>    <p>¡Hola! Estoy aprendiendo a programar.</p>     <h2>Sobre Mí</h2>    <p>Escribe algo sobre ti aquí.</p>     <h2>Mis Metas</h2>    <ul>        <li>Aprender HTML</li>        <li>Aprender CSS</li>        <li>Aprender JavaScript</li>        <li>Conseguir un trabajo en tecnología</li>    </ul>     <h2>Contacto</h2>    <p>Email: <a href="mailto:tu@email.com">tu@email.com</a></p></body></html>

¡Abre con Live Server y ve el resultado!

Resumen

HTML define la estructura de la página
Las etiquetas generalmente tienen apertura <etiqueta> y cierre </etiqueta>
head = metadatos, body = contenido visible
Siempre usa alt en imágenes

¡En la próxima lección, aprenderemos a estructurar mejor HTML con elementos semánticos! 🚀