Laboratorio de Blog HTML
Loading...
</> HTML Blog Lab
Estudio de diseño web 01 de 04
Presenter mode

LAB DE BLOG HTML · 01

Construye una página de blog con HTML.

HTML le da un hogar a cada idea. Hoy convertiremos la idea de un blog en una página clara y acogedora, elemento por elemento.

✦

Todos pueden contribuir: bosquejar, hablar, escribir, señalar, hacer una pregunta o trabajar en pareja.

01PlanificarElige qué necesitan los lectores primero.
02ConstruirUsa etiquetas para dar forma a la página.
03CuidarHaz que sea utilizable para más personas.
HTML
+
IDEAS

Una página es una conversación con un lector.

PASO 1 · ESTRUCTURA

Comienza con el esqueleto.

Las etiquetas HTML describen la función de cada parte. Un esqueleto semántico ayuda a los navegadores, lectores de pantalla y compañeros de clase a entender tu página.

Prueba estoSeñala cada etiqueta y di de qué es responsable.
<header><nav><main><article><footer>
blog.htmlHTML
<!DOCTYPE html>
<html>
  <body>
    <header>
      <h1>Notas de campo</h1>
      <nav>Acerca de · Archivo</nav>
    </header>
    <main>
      <article>
        <h2>¿Qué hace que una página sea buena?</h2>
      </article>
    </main>
  </body>
</html>
Las etiquetas significativas hacen que la página sea más fácil de navegar.

PASO 2 · CONTENIDO

Dale a la página una voz.

Las etiquetas contienen el contenido, pero las personas aportan el punto de vista. Agrega un título, un enlace útil y una imagen con palabras que cuenten la historia.

✓Un título que genere expectativas
✓Un párrafo con una idea clara
✓Un enlace que indique a dónde dirige
Sugerencia en parejaLee tu titular en voz alta. ¿Invita a alguien a entrar?
our-blog.local / journal•••

UN DIARIO COMPARTIDO

¿Cómo se siente una buena
página web?

Una colección de pequeñas observaciones, desde nuestro estudio al tuyo.

Leer la entrada↗

PASO 3 · CUIDADO Y ACCESO

Hagan espacio para todos.

Un buen HTML no se trata solo de verse bien. Le da a más personas una oportunidad justa de leer, comprender y unirse a la conversación.

AaEncabezadosCrea un camino claro.
↗EnlacesDescribe el destino.
▧ImágenesAgrega texto alternativo útil.
Tu turnoEsboza una sección del blog y luego elige la etiqueta HTML que le asigne un lugar.
Me doy cuenta de que…
Me pregunto si…
Puedo intentar…
←Atrás
Siguiente→