Lab Blog HTML
Loading...
</> HTML Blog Lab
Studio de design web 01 de 04
Presenter mode

LABO BLOG HTML · 01

Construire une page de blog avec le HTML.

Le HTML donne un foyer à chaque idée. Aujourd'hui, nous allons transformer une idée de blog en une page claire et accueillante — un élément significatif à la fois.

✦

Tout le monde peut contribuer : esquisser, parler, taper, pointer, poser une question ou travailler en binôme.

01PlanifierChoisissez ce dont les lecteurs ont besoin en premier.
02ConstruireUtilisez des balises pour façonner la page.
03Prendre soinRendez-la accessible à plus de personnes.
HTML
+
IDEAS

Une page est une conversation avec un lecteur.

ÉTAPE 1 · STRUCTURE

Commencez par le squelette.

Les balises HTML décrivent le rôle de chaque partie. Un squelette sémantique aide les navigateurs, les lecteurs d'écran et les camarades de classe à comprendre votre page.

Essayez ceciPointez chaque balise et dites ce dont elle est responsable.
<header><nav><main><article><footer>
blog.htmlHTML
<!DOCTYPE html>
<html>
  <body>
    <header>
      <h1>Notes de terrain</h1>
      <nav>À propos · Archives</nav>
    </header>
    <main>
      <article>
        <h2>Qu'est-ce qui fait une bonne page ?</h2>
      </article>
    </main>
  </body>
</html>
Des balises significatives facilitent la navigation sur la page.

ÉTAPE 2 · CONTENU

Donnez à la page une voix.

Les balises contiennent le contenu, mais ce sont les gens qui apportent le point de vue. Ajoutez un titre, un lien utile et une image avec des mots qui racontent l'histoire.

✓Un titre qui définit les attentes
✓Un paragraphe avec une idée claire
✓Un lien qui indique où il mène
Conseil de binômeLisez votre titre à haute voix. Donne-t-il envie d'entrer ?
our-blog.local / journal•••

UN JOURNAL PARTAGÉ

À quoi ressemble une bonne
page web ?

Une collection de petites observations, de notre studio au vôtre.

Lire l'entrée↗

ÉTAPE 3 · SOIN ET ACCÈS

Faites de la place pour tout le monde.

Un bon HTML ne consiste pas seulement à avoir un aspect correct. Il permet à davantage de personnes d'avoir une chance équitable de lire, de comprendre et de participer à la conversation.

AaTitresCréez un chemin clair.
↗LiensDécrivez la destination.
▧ImagesAjoutez un texte alternatif utile.
À votre tourEsquissez une section de blog, puis choisissez la balise HTML qui lui servira de support.
Je remarque…
Je me demande…
Je peux essayer…
←Retour
Suivant→