Nous allons voir dans ce cours comment se structure simplement une page HTML. Nous collecterons des informations sur le sujet. Nous verrons ensuite comment créer une page Web en récupérant un code simple et en l’intégrant dans un fichier avec l’éditeur de code Brackets. Je vous inviterai alors à personnaliser le contenu rédactionnel du code source.
La structure élémentaire d’une page Web
Voici deux schémas présentant la structure élémentaire d’une page HTML (on dit aussi page Web…). Le premier est un schéma en arbre, le second un schéma en cadres imbriqués. Dans la « vraie vie », il s’agit de lignes de code positionnées les unes sous les autres.
Dans le second schéma, les textes sont en anglais. Le premier texte (Page title) est placé entre <title> et </title>, deux balises HTML indiquant au navigateur où commence et où se termine le titre de la page. Ce titre de page s’affiche dans l’onglet de la fenêtre active.
Attention à ne pas confondre le titre de la page avec le titre des contenus de la page (entre balise <h1> et </h1>).
Le titre de la page est placé dans la tête du code source. La tête de code source est délimitée par les balises <head> et </head>.
Attention à ne pas confondre <head> et <header>. La balise <head> délimite l’entête de la page. La balise <header> délimite l’entête d’un article ou d’une section dans le corps de la page. Dans les schémas simplifiés présentés dans ce cours, la balise <header> n’est pas utilisée.
Le titre des contenus de la page (le GRAND titre devant sauter aux yeux du lecteur…) se trouve positionné entre les balises <h1> et </h1>, au tout début de la boîte délimitée par <body> et </body>. Dans le schéma en boîte présenté plus haut ce titre est en anglais (This is a heading), autrement dit “Ceci est un titre”.
Attention à ne pas confondre <header> (la balise HTML) et le mot anglais “header” ou le mot anglais “heading” signifiant tous les deux “entête”.
Sous le grand titre, nommé aussi “titre de niveau 1” (header one), se trouvent deux paragraphes. Je vous montre maintenant ce que cela donnerait sous la forme « code source », après traduction des textes en français (pour les balises elles-même : défense absolue de les traduire, les navigateurs ne comprennent pas le français…). Les lignes roses montrent les boîtes ou cadres imbriqués.
Je vous montre maintenant la structure HTML d’une page Web simple , disponible sur le site w3schools.com… en anglais. En cliquant sur le bouton “Try It Yourself”, vous pourrez visualiser un aperçu de cette page Web dans une fenêtre de prévisualisation.
Attention : si vous demandez la traduction automatique du site w3schools, les balises seront traduites sur la page du site. Elles resteront en anglais si vous cliquez sur le bouton “Essayez-le vous-même”.
Les flèches bleues montrent les éléments HTML déjà rencontrés dans la structure élémentaire étudiée plus haut. Je vous rappelle que la balise <!DOCTYPE html> indique au navigateur que la page est codé en langage HTML version 5.
En complément de ce cours, j’ai mis en ligne un autre cours dans lequel j’aborde de manière un peu différente le même sujet (la structure HTML élémentaire). Le cours s’intitule Manipuler le code source avec un éditeur de texte/code et propose d’examiner le code source d’une page Web consacrée aux pangrammes pour se familiariser avec le langage HTML.
J’ai réalisé une courte BD en ligne pour insister sur les fonctions du “head” et du “body”, de façon plus “cool”…
➜ Vous pouvez aussi visionner la courte vidéo du cours consacré à la structure HTML sur apprendre-a-coder.com.
En savoir plus à ce sujet (en bonus…)
Référence incontournable en matière de documentation sur les langage de codage pour le Web, le site de la fondation Mozilla, MDN web docs, est LE site où tout est dit. On y trouve un tutoriel intitulé Écrire une simple page HTML. Cela commence assez facilement… mais vous verrez que les choses se compliquent rapidement.
Le site w3schools.com, que nous avons mentionné plus haut, permet d’apprendre seul le HTML et de nombreux autres langages de codage. Un des points fort de ce site est son outil de test du code ou bac à sable (bouton “Try it Yourself” ou “Essayez-le vous-même” ).
Pour les plus intéressés d’entre vous, je recommande vivement de s’inscrire aux cours gratuits de codecademy.com. Le cours de HTML est très bien conçu. Codecademy propose aussi des cours payants, à un niveau plus élevé.
Pour les inconditionnels de la vidéo, il existe de bonnes chaînes YouTube consacrées au sujet Pour les plus exigeants, allez plutôt voir du côté de grafikart.fr, c’est gratuit, c’est sur YouTube mais c’est plus professionnel… et donc un peu plus difficile à appliquer.
Il existe aussi une série de vidéos payantes sur le site udemy.com (mais avec des échantillons gratuits qui traitent des bonnes raisons d’apprendre à coder).
Test de connaissance (facultatif)
Un petit test de connaissances est disponible sur ce site. Vérifiez vos connaissances fraîchement acquises en allant sur Identifier les éléments de la structure HTML