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 un éditeur de code et de modifier le code source d’une page HTML, 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 corps de la page (et non la structure élémentaire proprement dite).
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…).
Voici une des images que vous pouvez collecter :
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.
Ce dossier pourra vous servir ultérieurement si vous envisagez d’intégrer les images collectées dans une page Web réalisée par vos soins (activité facultative).
Vous placerez alors, dans un dossier nommé “structure-html”, le dossier “images” ou “img” contenant les images collectées. Ensuite, au même niveau que le dossier contenant les images, vous placerez le fichier “index.html” dans lequel seront intégrées les images et les textes d’accompagnement.
2 – Recherche de vidéos sur la structureHTML élémentaire
Rien de tel que de savoir se documenter soi-même en sélectionnant de bon documents. Je vous invite à faire une recherche sur les vidéos traitant de la structure élémentaire d’une page HTML. Je vous mets sur la piste, un peu plus haut dans ce cours. 😉 Vous réviserez les bases de la structuration d’une page Web pendant que vous tenterez d’évaluer la pertinence et le niveau de difficulté du contenu de la vidéo. Priorité aux approches simples, claires, et non soporifiques !
Proposition : construisez une page Web simple pour lister vos liens vers les vidéos sélectionnées. Utilisez par exemple StackEdit pour structurer en Markdown le contenu de la page. Exportez ensuite votre contenu, stylisé, avec ou sans TOC.
3 – Compléter les dialogues d’un diaporama pédagogique
Si vous avez déjà eu l’occasion d’utiliser un éditeur de code comme Brackets/Phoenix, pour remplacer des textes aux endroits indiqués, vous êtes capables de réaliser cet exercice.
Pour remplacer ou compléter des textes (affichés en noir dans Brackets/Phoenix), 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 »).
Il s’agit de finaliser le dialogue imaginaire entre le code source d’une page HTML, d’une part, et un navigateur (auquel le code source s’adresse), d’autre part.
Tout est prêt côté codage… vous pouvez télécharger le dossier du diaporama à cette adresse : http://graphizm.fr/fcil/dixit-code.zip/.
Pensez bien à décompresser le fichier .zip avant d’ouvrir le dossier « dixit-code » avec Brackets.
Je vous montre ci-dessous le diaporama intégrant quelques diapos complètes et les diapositives à compléter par vos soins. La modification des dialogues déjà en place est facultative.
Je vous donne le ton du dialogue et des expressions utilisables pour effectuer votre travail. Si ce ton ne vous convient pas vous pouvez modifier les textes que j’ai saisi à titre de démonstration dans les premières diapositives.
Attention : veillez à faire en sorte que ce soit bien le code source qui s’adresse au navigateur. Il s’agit de se mettre « dans la peau » du code source ! Quand le navigateur prend connaissance des instructions que lui transmet le code source, les instructions sont déjà rédigées (codées). En vérité, le navigateur n’a pas d’autre choix que de prendre en compte les instructions que le code lui transmet !