Catégories
FCS1-exos

Activités sur la structure HTML d’une page Web

Vous trouverez ci-dessous plusieurs activités vous permettant de consolider vos connaissances sur la structure élémentaire d’une page Web.

1 – Collecter des images sur la structure HTML élémentaire

Avant de lancer l’éditeur de code Brackets, je vous propose d’aller faire un tour sur le Web et de collecter des images qui mettent en évidence la structure élémentaire dont il a été question jusqu’ici.

Allez dans Google Images et saisissez “html structure” ou “structure html” (non, vous n’obtiendrez pas les mêmes résultats…). Vous allez très vite constater que les structures présentées sont loin d’être élémentaires et qu’elles concernent souvent la structure des contenus placés dans le « body », le corps de la page.

Collectez seulement les images qui se rapportent à la structure élémentaire. Laissez les autres images de côté pour le moment (celles montrant des structures avec « header », « main », « section », « aside », et d’autres encore…).

Placez les images collectées dans un dossier nommé « images » ou « img », en ayant soin de renommer correctement chaque image (sans majuscule ni lettres accentuées ni espace). Les 3 formats d’images acceptés sont .jpg (ou .jpeg), .png et .gif.

2 – Compléter les dialogues d’un diaporama pédagogique

Comme vous avez déjà eu l’occasion d’utiliser l’éditeur de code Brackets, de manière intuitive, pour remplacer des textes aux endroits que je vous avez indiqués, vous êtes capables de réaliser cet exercice.

Pour remplacer ou compléter des textes (affichés en noir dans Brackets), il faut d’abord les repérer. Ils sont placés dans le <body> entre les balises <p> et </p> (balises de paragraphe). La balise <br> (autofermante), souvent utilisée, force le retour à la ligne (br = abréviation de « break »).