🟢 DÍA 5: HTML AVANZADO + CSS BÁSICO (2/5)

🎯 Objetivo del día:

Avanzar en el dominio de HTML incluyendo elementos semánticos, formularios enriquecidos y estructuras profesionales, al tiempo que iniciamos el diseño visual con CSS básico.
Comenzamos a dar vida, forma y color a la web que estructuraste ayer. Hoy tu página empieza a tomar forma real.

📺 Segmento del vídeo para este día:

Curso: Desarrollo Web 24h
Minutos a cubrir: 1:56:45 – 5:38:02
Duración estimada: 3 h 40 min aprox.

🔍 Contenidos a estudiar

🧱 HTML AVANZADO:

  • meta, comentarios, favicon.
  • textarea, label, select, datalist, fieldset, legend.
  • details / summary.
  • Tablas: estructura, encabezados, celdas.
  • Multimedia: audio, video, lazyloading.
  • HTML semántico y etiquetas obsoletas.
  • Accesibilidad: uso correcto de label, atributos aria, jerarquías.

🎨 CSS BÁSICO:

  • Introducción al CSS.
  • Selectores básicos: por etiqueta, clase, id.
  • Propiedades de texto, fuente y tipografía externa.
  • Box model, márgenes, rellenos, bordes.
  • Colores, unidades relativas y absolutas.
  • Fondos, degradados, sombras.
  • Primer ejercicio práctico.

🧠 Apuntes Técnicos recomendados

HTML enriquecido

<label for="email">Correo:</label>
<input type="email" id="email" name="email" required aria-required="true">

<fieldset>
  <legend>Preferencias</legend>
  <input type="checkbox" id="news" name="news">
  <label for="news">Recibir noticias</label>
</fieldset>

<details>
  <summary>Leer más...</summary>
  <p>Contenido oculto que mejora la experiencia sin saturar visualmente.</p>
</details>

CSS básico

body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  background: #f8f9fa;
  color: #333;
}

h1 {
  font-size: 2.5rem;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

🛠️ Proyecto Práctico

Sigue trabajando sobre tu archivo index.html o tu estructura local.

✅ HTML:

  • Mejora el formulario agregando select, textarea, fieldset, datalist, y details.
  • Añade una tabla de ejemplo (por ejemplo, precios, comparativas, horarios).
  • Incorpora elementos de audio o video (puedes usar contenido libre de Pixabay).

✅ CSS:

  • Crea tu archivo style.css (si no lo hiciste ayer) y enlázalo al HTML.
  • Aplica estilos al formulario, tabla y elementos básicos.
  • Experimenta con fuentes de Google Fonts.
  • Aplica al menos:
    • Márgenes (margin) y rellenos (padding).
    • Sombras (box-shadow o text-shadow).
    • Colores de fondo y tipografía.
    • Gradientes simples (lineales o radiales).

📄 Entrega y Evidencias (PAF)

Crea un documento PDF o carpeta comprimida que contenga:

  • ✅ Capturas de:
    • La estructura de carpetas de tu proyecto.
    • El aspecto visual de tu página (vista general y detalle del formulario, tabla y estilos aplicados).
  • ✅ Código fuente (HTML y CSS) organizado y comentado.
  • ✅ Notas personales:
    • ¿Qué aprendiste de HTML avanzado?
    • ¿Qué selector o propiedad CSS te pareció más interesante?
    • ¿Tuviste alguna dificultad con rutas, selectores o etiquetas nuevas?

🎯 Resultado esperado al finalizar el día

✅ Dominio de formularios HTML avanzados.
✅ Primeros pasos sólidos con CSS.
✅ Web funcional, estructurada y visualmente personalizada.
✅ Sensibilidad a buenas prácticas de accesibilidad.

💪 Cierre

¡Muy bien hecho! 💻
Hoy has empezado a darle personalidad a tu sitio web. Ya no es solo funcional, ahora también transmite una experiencia visual.
Estás aprendiendo a construir sitios útiles, accesibles y bien presentados.
¡A seguir avanzando!
Mañana entraremos en CSS intermedio, Flexbox y posicionamiento profesional. 🔥