# Proyecto Terrario Parte 1: Introducción a HTML
```mermaid
journey
title Tu viaje de aprendizaje de HTML
section Fundamentos
Crear archivo HTML: 3: Student
Añadir DOCTYPE: 4: Student
Estructurar documento: 5: Student
section Contenido
Añadir metadatos: 4: Student
Incluir imágenes: 5: Student
Organizar diseño: 5: Student
section Semántica
Usar etiquetas adecuadas: 4: Student
Mejorar accesibilidad: 5: Student
Construir terrario: 5: Student
```
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, o Lenguaje de Marcado de Hipertexto, es la base de cada sitio web que hayas visitado. Piensa en HTML como el esqueleto que da estructura a las páginas web: define dónde va el contenido, cómo se organiza y qué representa cada pieza. Mientras que CSS más adelante "vestirá" tu HTML con colores y diseños, y JavaScript le dará vida con interactividad, HTML proporciona la estructura esencial que hace posible todo lo demás.
En esta lección, crearás la estructura HTML para una interfaz virtual de terrario. Este proyecto práctico te enseñará conceptos fundamentales de HTML mientras construyes algo visualmente atractivo. Aprenderás a organizar contenido usando elementos semánticos, trabajar con imágenes y crear la base para una aplicación web interactiva.
Al final de esta lección, tendrás una página HTML funcional que muestra imágenes de plantas organizadas en columnas, lista para ser estilizada en la próxima lección. No te preocupes si se ve básica al principio, eso es exactamente lo que HTML debería hacer antes de que CSS añada el acabado visual.
```mermaid
mindmap
root((Fundamentos de HTML))
Structure
Declaración DOCTYPE
Elemento HTML
Sección Head
Contenido Body
Elements
Etiquetas y Atributos
Etiquetas Autocerradas
Elementos Anidados
Bloque vs Inline
Content
Elementos de Texto
Imágenes
Contenedores (div)
Listas
Semantics
Etiquetas Significativas
Accesibilidad
Lectores de Pantalla
Beneficios SEO
Best Practices
Anidación Adecuada
Marcado Válido
Texto Alt Descriptivo
Estructura Organizada
```
## Cuestionario Previo a la Clase
[Cuestionario previo a la clase](https://ff-quizzes.netlify.app/web/quiz/15)
> 📺 **Mira y Aprende**: Consulta este video útil para una visión general
>
> [](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
## Configurando Tu Proyecto
Antes de sumergirnos en el código HTML, vamos a configurar un espacio de trabajo adecuado para tu proyecto de terrario. Crear una estructura de archivos organizada desde el inicio es un hábito crucial que te servirá durante todo tu camino en el desarrollo web.
### Tarea: Crea La Estructura de Tu Proyecto
Crearás una carpeta dedicada para tu proyecto terrario y agregarás tu primer archivo HTML. Aquí tienes dos formas de hacerlo:
**Opción 1: Usando Visual Studio Code**
1. Abre Visual Studio Code
2. Haz clic en "Archivo" → "Abrir carpeta" o usa `Ctrl+K, Ctrl+O` (Windows/Linux) o `Cmd+K, Cmd+O` (Mac)
3. Crea una nueva carpeta llamada `terrarium` y selecciónala
4. En el panel Explorador, haz clic en el ícono "Nuevo archivo"
5. Nombra tu archivo `index.html`
**Opción 2: Usando comandos en la Terminal**
```bash
mkdir terrarium
cd terrarium
touch index.html
code index.html
```
**Esto es lo que hacen estos comandos:**
- **Crea** un nuevo directorio llamado `terrarium` para tu proyecto
- **Navega** dentro del directorio terrarium
- **Crea** un archivo vacío `index.html`
- **Abre** el archivo en Visual Studio Code para editarlo
> 💡 **Consejo profesional**: El nombre de archivo `index.html` es especial en desarrollo web. Cuando alguien visita un sitio, los navegadores buscan automáticamente `index.html` como la página predeterminada para mostrar. Esto significa que una URL como `https://misitio.com/projects/` servirá automáticamente el archivo `index.html` de la carpeta `projects` sin necesidad de especificar el nombre del archivo en la URL.
## Entendiendo la Estructura del Documento HTML
Cada documento HTML sigue una estructura específica que los navegadores necesitan para entender y mostrar correctamente. Piensa en esta estructura como una carta formal: tiene elementos requeridos en un orden particular que ayudan al destinatario (en este caso, el navegador) a procesar el contenido adecuadamente.
```mermaid
flowchart TD
A[""] --> B[""]
B --> C[""]
C --> D[""]
C --> E["<meta charset>"]
C --> F["<meta viewport>"]
B --> G["<body>"]
G --> H["<h1> Encabezado"]
G --> I["<div> Contenedores"]
G --> J["<img> Imágenes"]
style A fill:#e1f5fe
style B fill:#f3e5f5
style C fill:#fff3e0
style G fill:#e8f5e8
```
Comencemos agregando los fundamentos esenciales que todo documento HTML necesita.
### La Declaración DOCTYPE y el Elemento Raíz
Las primeras dos líneas de cualquier archivo HTML sirven como la "introducción" del documento para el navegador:
```html
<!DOCTYPE html>
<html></html>
```
**Entendiendo qué hace este código:**
- **Declara** el tipo de documento como HTML5 usando `<!DOCTYPE html>`
- **Crea** el elemento raíz `<html>` que contendrá todo el contenido de la página
- **Establece** estándares web modernos para un renderizado adecuado en navegadores
- **Garantiza** una visualización consistente en diferentes navegadores y dispositivos
> 💡 **Consejo VS Code**: Pasa el cursor sobre cualquier etiqueta HTML en VS Code para ver información útil de MDN Web Docs, incluyendo ejemplos de uso y detalles de compatibilidad en navegadores.
> 📚 **Aprende Más**: La declaración DOCTYPE evita que los navegadores entren en "modo peculiar", usado para soportar sitios muy antiguos. El desarrollo web moderno usa la simple declaración `<!DOCTYPE html>` para asegurar un [renderizado conforme a estándares](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode).
### 🔄 **Chequeo Pedagógico**
**Pausa y Reflexiona**: Antes de continuar, asegúrate de entender:
- ✅ Por qué cada documento HTML necesita una declaración DOCTYPE
- ✅ Qué contiene el elemento raíz `<html>`
- ✅ Cómo esta estructura ayuda a los navegadores a renderizar páginas correctamente
**Autoevaluación Rápida**: ¿Puedes explicar con tus propias palabras qué significa "renderizado conforme a estándares"?
## Agregando Metadatos Esenciales al Documento
La sección `<head>` de un documento HTML contiene información crucial que los navegadores y motores de búsqueda necesitan, pero que los visitantes no ven directamente en la página. Piensa en ella como la información "detrás de escena" que ayuda a tu página web a funcionar correctamente y a aparecer bien en diferentes dispositivos y plataformas.
Estos metadatos indican a los navegadores cómo mostrar tu página, qué codificación de caracteres usar y cómo manejar distintos tamaños de pantalla; todo esto es esencial para crear páginas web profesionales y accesibles.
### Tarea: Agrega el Head del Documento
Inserta esta sección `<head>` entre tus etiquetas de apertura y cierre `<html>`:
```html
<head>
<title>Welcome to my Virtual Terrarium
```
**Desglose de lo que logra cada elemento:**
- **Establece** el título de la página que aparece en las pestañas del navegador y resultados de búsqueda
- **Especifica** la codificación UTF-8 para mostrar el texto correctamente en todo el mundo
- **Asegura** compatibilidad con versiones modernas de Internet Explorer
- **Configura** el diseño responsivo al definir el viewport para ajustarse al ancho del dispositivo
- **Controla** el nivel inicial de zoom para mostrar contenido en su tamaño natural
> 🤔 **Piensa en Esto**: ¿Qué pasaría si defines una meta etiqueta viewport así: ``? ¡Esto forzaría la página a tener siempre 600 píxeles de ancho, rompiendo el diseño responsivo! Aprende más sobre [configuración correcta del viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
## Construyendo el Cuerpo del Documento
El elemento `` contiene todo el contenido visible de tu página web — todo lo que los usuarios verán e interactuarán. Mientras que la sección `` daba instrucciones al navegador, la sección `` contiene el contenido real: texto, imágenes, botones y otros elementos que crean tu interfaz de usuario.
Agreguemos la estructura del body y entendamos cómo las etiquetas HTML trabajan juntas para crear contenido significativo.
### Entendiendo la Estructura de Etiquetas HTML
HTML usa etiquetas pareadas para definir elementos. La mayoría tienen una etiqueta de apertura como `
` y una etiqueta de cierre como `
`, con contenido intermedio: `
¡Hola, mundo!
`. Esto crea un elemento párrafo que contiene el texto "¡Hola, mundo!".
### Tarea: Agrega el Elemento Body
Actualiza tu archivo HTML para incluir el elemento ``:
```html
Welcome to my Virtual Terrarium
```
**Esto es lo que proporciona esta estructura completa:**
- **Establece** el marco básico del documento HTML5
- **Incluye** metadatos esenciales para un renderizado adecuado en navegadores
- **Crea** un cuerpo vacío listo para tu contenido visible
- **Sigue** las mejores prácticas modernas de desarrollo web
Ahora estás listo para añadir los elementos visibles de tu terrario. Usaremos elementos `
` como contenedores para organizar diferentes secciones de contenido, y elementos `` para mostrar las imágenes de las plantas.
### Trabajando con Imágenes y Contenedores de Diseño
Las imágenes son especiales en HTML porque usan etiquetas "autocerradas". A diferencia de elementos como `` que envuelven contenido, la etiqueta `` contiene toda la información necesaria dentro de la propia etiqueta usando atributos como `src` para la ruta del archivo de imagen y `alt` para la accesibilidad.
Antes de agregar imágenes a tu HTML, necesitarás organizar tus archivos del proyecto correctamente creando una carpeta de imágenes y añadiendo los gráficos de plantas.
**Primero, configura tus imágenes:**
1. Crea una carpeta llamada `images` dentro de la carpeta de tu proyecto terrario
2. Descarga las imágenes de plantas desde la [carpeta solución](../../../../3-terrarium/solution/images) (14 imágenes de plantas en total)
3. Copia todas las imágenes de plantas en tu nueva carpeta `images`
### Tarea: Crea el Diseño para Mostrar las Plantas
Ahora añade las imágenes de las plantas organizadas en dos columnas entre tus etiquetas ``:
```html
```
**Paso a paso, esto es lo que ocurre en este código:**
- **Crea** un contenedor principal de la página con `id="page"` para contener todo el contenido
- **Establece** dos contenedores para columnas: `left-container` y `right-container`
- **Organiza** 7 plantas en la columna izquierda y 7 plantas en la columna derecha
- **Envuelve** cada imagen de planta en un div `plant-holder` para posicionamiento individual
- **Aplica** nombres de clase consistentes para estilos CSS en la próxima lección
- **Asigna** IDs únicas a cada imagen de planta para interacción con JavaScript después
- **Incluye** rutas correctas apuntando a la carpeta de imágenes
> 🤔 **Considera Esto**: Observa que todas las imágenes tienen el mismo texto alternativo "plant". Esto no es ideal para accesibilidad. Los usuarios de lectores de pantalla oirían "plant" repetido 14 veces sin saber qué planta específica muestra cada imagen. ¿Puedes pensar en textos alternativos mejores y más descriptivos para cada imagen?
> 📝 **Tipos de Elementos HTML**: Los elementos `
` son "de nivel bloque" y ocupan todo el ancho disponible, mientras que los `` son "inline" y solo ocupan el espacio necesario. ¿Qué crees que pasaría si cambiaras todos estos `
` por ``?
### 🔄 **Chequeo Pedagógico**
**Entendiendo la Estructura**: Tómate un momento para revisar la estructura HTML:
- ✅ ¿Puedes identificar los contenedores principales en tu diseño?
- ✅ ¿Entiendes por qué cada imagen tiene un ID único?
- ✅ ¿Cómo describirías el propósito de los divs `plant-holder`?
**Inspección Visual**: Abre tu archivo HTML en un navegador. Debes ver:
- Una lista básica de imágenes de plantas
- Imágenes organizadas en dos columnas
- Diseño simple y sin estilos
**Recuerda**: ¡Esta apariencia sencilla es exactamente cómo HTML debe verse antes de aplicar estilos CSS!
Con este marcado agregado, las plantas aparecerán en pantalla, aunque no se verán pulidas aún — eso es tarea de CSS en la próxima lección. Por ahora, tienes una sólida base HTML que organiza correctamente tu contenido y sigue las mejores prácticas de accesibilidad.
## Usando HTML Semántico para la Accesibilidad
HTML semántico significa elegir elementos HTML según su significado y propósito, no solo su apariencia. Cuando usas marcado semántico, comunicas la estructura y el sentido de tu contenido a navegadores, motores de búsqueda y tecnologías de asistencia como lectores de pantalla.
```mermaid
flowchart TD
A[¿Necesita añadir contenido?] --> B{¿Qué tipo?}
B -->|Título principal| C["
