HTML Blog Lab
Loading...
</> HTML Blog Lab
Web design studio 01 di 04
Presenter mode

HTML BLOG LAB · 01

Costruisci una pagina blog con l'HTML.

L'HTML dà a ogni idea una casa. Oggi trasformeremo l'idea di un blog in una pagina chiara e accogliente, un elemento significativo alla volta.

✦

Tutti possono contribuire: schizzare, parlare, digitare, indicare, fare domande o lavorare in coppia.

01PianificaScegli ciò di cui i lettori hanno bisogno per primo.
02CostruisciUsa i tag per dare forma alla pagina.
03 CuraRendila accessibile a più persone.
HTML
+
IDEAS

Una pagina è una conversazione con il lettore.

PASSAGGIO 1 · STRUTTURA

Inizia con lo scheletro.

I tag HTML descrivono la funzione di ogni parte. Uno scheletro semantico aiuta i browser, i lettori di schermo e i compagni di classe a comprendere la tua pagina.

Prova cosìIndica ogni tag e spiega di cosa è responsabile.
<header><nav><main><article><footer>
blog.htmlHTML
<!DOCTYPE html>
<html>
  <body>
    <header>
      <h1>Note di campo</h1>
      <nav>Chi siamo · Archivio</nav>
    </header>
    <main>
      <article>
        <h2>Cosa rende una pagina efficace?</h2>
      </article>
    </main>
  </body>
</html>
I tag significativi rendono la pagina più facile da navigare.

PASSAGGIO 2 · CONTENUTO

Dai alla pagina una voce.

I tag contengono i contenuti, ma sono le persone a dare il punto di vista. Aggiungi un titolo, un link utile e un'immagine con parole che raccontino la storia.

✓Un titolo che definisca le aspettative
✓Un paragrafo con un'idea chiara
✓Un link che indichi dove conduce
Suggerimento per la coppiaLeggi il titolo a voce alta. Invita qualcuno a entrare?
our-blog.local / journal•••

UN DIARIO CONDIVISO

Cos'è che rende una buona
pagina web efficace?

Una raccolta di piccole osservazioni, dal nostro studio al vostro.

Leggi la voce↗

PASSAGGIO 3 · CURA E ACCESSIBILITÀ

Fate spazio a tutti.

Un buon HTML non serve solo a dare l'aspetto giusto. Offre a più persone una possibilità equa di leggere, comprendere e partecipare alla conversazione.

AaIntestazioniCrea un percorso chiaro.
↗LinkDescrivi la destinazione.
▧ImmaginiAggiungi un testo alternativo utile.
Tocca a teAbbozza una sezione del blog, poi scegli il tag HTML che le fornisca una collocazione.
Noto che…
Mi chiedo…
Posso provare a…
←Indietro
Avanti→