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 – Manipuler le code source avec l’éditeur de code Bracket

Pour prendre un peu d’aisance dans la manipulation du code source, je vous propose quelques activités avec l’éditeur de code Brackets. Cliquez sur le bouton ci-dessous pour accéder au cours.

Dans le cours propoé, vous allez étudier le code source du site “Pangrammes” et personnaliser un petit site nommé “Ma couleur préférée”.

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

Si vous avez déjà eu l’occasion d’utiliser l’éditeur de code Brackets pour modifier des pages simples (voir ci-dessus), vous êtes capables de réaliser l’exercice qui suit.

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 »).

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 : https://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 (la modification des dialogues déjà en place est facultative…) et les diapositives à compléter par vos soins. J’espère ainsi vous donner le ton du dialogue et des expressions utilisables pour effectuer votre travail.

Vous pouvez cependant choisir d’adopter un autre ton, mais il faudra alors adapter la rédaction des 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 !

Pour visualiser plusieurs micro-diapositives afin d’en choisir une et l’afficher en taille normale, appuyer sur la touche “O” puis cliquer sur la diapositive choisie. Utiliser les flèches du clavier pour naviguer parmi les micro-diapositives.

4 – Recherche de vidéos sur la structure HTML é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 !

Astuce : construisez une page Web simple pour lister vos liens vers les vidéos sélectionnées. Vous irez plus vite en utilisant Deskyo mais vous en apprendrez plus en créant vous-même votre page de liens 😉