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 »).
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 (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 !
3 – 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 !
Astuce : construisez une page Web simple pour lister vos liens vers les vidéos sélectionnées.
4 – Utiliser l’éditeur de code Brackets pour récupérer du code personnalisable
Pour manipuler le code source d’une page Web (ou page HTML), je vous ai recommandé d’utiliser l’éditeur de code Brackets, téléchargeable gratuitement sur brackets.io.
Un cours sur la personnalisation de Brackets est disponible à cette adresse : http://graphizm.fr/greta/fcs/personnaliser-brackets/
Nous avons déjà utilisé Brackets pour modifier le rédactionnel d’une page Web (exercices de personnalisation des diaporamas construits avec BIG). Lors de ces exercices, nous avons focalisé notre attention sur les paragraphes (sur le texte qui devait s’afficher dans le navigateur).
Nous allons maintenant utiliser Brackets pour mettre en place une page Web simple, tout en gagnant du temps pour ne pas avoir à coder toutes les informations nécessaires. Pour cela, nous allons récupérer un code simple existant et le copier dans un nouveau fichier de code source créé avec Brackets.
En procédant par copier-coller, il est facile de créer une nouvelle page Web. Le tout est de savoir réaliser les opérations suivantes :
- trouver une page Web avec un code source simple (voir plus bas)
- afficher le code source de la page dans un navigateur
- copier ce code source
- ouvrir Brackets
- créer un nouveau fichier dans Brackets
- coller le code source copié précédemment dans le nouveau fichier créé dans Brackets
- enregistrer le fichier en .html (en rajoutant soi-même l’extension) en le nommant de manière explicite (structure-elementaire.html, par exemple…).
- ouvrir le fichier (double clic) pour l’afficher dans un navigateur
4a – Trouver des codes sources simples
Première opération listée : trouver une page Web avec un code source simple. Deux solutions s’offrent à nous. Soit on trouve des sites nous présentant directement le code à copier, soit on trouve de sites dont le code source (assez simple) peut être copié.
➜ Solution 1
On trouve des codes simples sur plusieurs sites mentionnés dans ce cours, notamment sur w3schools.com. Vous en trouverez également sur cette fiche : La structure HTML.
Sur ces sites, les codes sont présentés directement sur les pages ou dans des fenêtres spéciales accessibles en un clic. Il suffit alors de sélectionner le code affiché à tel ou tel endroit, de le copier, puis de le coller dans un nouveau fichier créé avec Brackets.
➜ Solution 2
Voici maintenant des pages construites avec des codes sources simples :
Le code source de ces pages n’est pas affiché dans la page. Il s’agit cette fois-ci du code source de la page elle-même. Il est donc nécessaire, pour le récupérer, de l’afficher au préalable dans le navigateur.
Pour afficher le code source d’une page Web ouverte dans le navigateur Chrome, allez dans Afficher > Options pour les développeurs > Code source.
Dans la plupart des navigateurs, un clic-droit puis “Afficher le code source de la page” s’avère très pratique.
Les raccourcis claviers pour afficher le code source dans un navigateur sont ctrl-U sur PC et cmd-alt-U sur Mac.
Kezako ?
Quand vous voyez dans le code source la suite de caractères vous êtes face à un espace insécable. Quand vous rencontrez ‑ vous croisez le grand copain du premier, le tiret insécable !
4b – Récupération d’un code source
Je vous demandede récupérer le code source d’une des pages proposées plus haut (dans « trouver des codes sources simples… ») puis de placer ce code dans un nouveau fichier créé dans Brackets.
Pour rendre le contenu plus intéressant, je vous demande également de personnaliser le contenu rédactionnel du code source.
Vous pouvez remplacer les textes du code source par des textes choisis par vos soins (textes trouvés sur Wikipedia, par exemple, si vous ne vous sentez pas l’âme d’un rédacteur ou d’une rédactrice Web) !
Simplifiez les textes longs en retirant les phrases qui ne s’avèrent pas indispensables à la compréhension du message essentiel. Équilibrez la longueur des paragraphes. Respectez la structure rédactionnelle du modèle HTML choisi (h1 + p + h2 + p + p + h2 + p + p… par exemple)
Pour que tout se passe correctement il est indispensable, dans Brackets, de créer une nouvelle page (vide). Pour mémoire : menu Fichier > Nouveau (raccourci ctrl-N sous Windows et Linux, cmd-N sous MacOs). La page créée est appelée « sans-titre » mais elle n’existe pas vraiment tant qu’elle n’est pas enregistrée et que vous ne lui avez pas attribué d’extension.
Brackets ne dispose pas d’un format de fichier par défaut. C’est à vous de saisir, au moment de l’enregistrement, à la fin du nom de fichier, l’extension correspondant au langage de codage de votre page. Dans notre cas, l’extension sera .html !
Petite précision importante : pour nommer le fichier .html, comme pour les images, n’utilisez pas de majuscules (en début de nom de fichier), ni de lettres accentuée, ni d’espaces (remplacer les espaces par des tirets bas ou haut, tirets du 6 ou tirets du 8 sur PC).
N’utilisez pas de point avant celui qui sépare le nom du fichier de son extension (ni aucun autre symboles, mis à part les tirets, et surtout pas de slash ! )
Une chose est sûre, le résultat affiché dans le navigateur est minimaliste (aussi minimaliste que les pages nues dont je vous ai communiqué les liens un peu plus haut). Nous verrons (ou nous avons vu) dans un autre cours comment améliorer la présentation d’une page Web avec des instructions CSS. Pour le moment, l’important est la mise en place de la structure HTML et rédactionnelle de la page (ce n’est pas le look de la page…).
Si vous avez choisi un des fichiers proposés plus haut, toute l’information de la page est contenue dans le seul fichier .html que vous avez créé et nommé convenablement.
Easter eggs (œufs de Pâques)
Il y a un « easter egg » dans l’url des fichiers page-web-nue.html et page-pangrammes-nue.html… à vous de le découvrir 😀
➜ Faites une recherche avec « easter egg informatique » si vous ne savez pas de quoi il s’agit. Ici, pour les fichiers que je vous ai indiqués, il ne s’agit pas de combinaison de touches mais de navigation…