HTML : structure et contenu d'une page web
Les pages web sont des documents rédigés en utilisant comme base le langage HTML (pour HyperText Markup Language). Il permet de donner le contenu et la structure de la page, et le rôle de chaque élément : titre, paragraphe, image, ...
Le HTML n'est pas un langage de programmation, mais un langage de description de contenu structuré, dit de balisage (Markeup en anglais). Il permet de donner des indications au navigateur sur la manière d'afficher le contenu de la page web à l'écran.
Boîtes et balises
En HTML, on voit les éléments comme des boîtes, que l'on peut emboîter les unes dans les autres. Par exemple, l'élément suivant
LOREM IPSUM
Lorem Ipsub 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fringilla quam sit amet metus varius lacinia. Aenean ornare lorem non sem pretium, quis blandit turpis ultrices.
Etiam ac nunc nisl. Nullam maximus nunc eu ex euismod, vel aliquet ipsum vestibulum. Donec ullamcorper viverra sem, a tincidunt eros lobortis tristique.
Lorem Ipsub 2
Quisque faucibus mollis odio sit amet elementum. Nam sit amet dolor interdum, consectetur diam quis, vulputate diam.
Nunc sagittis elit in urna aliquam, ut cursus felis luctus. Aliquam et euismod augue.
Integer metus augue, ultrices vitae vulputate luctus, ultrices pulvinar diam. Donec id auctor est. Nulla facilisi.
Comporte de nombreuses boîtes:
LOREM IPSUM
Lorem Ipsub 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fringilla quam sit amet metus varius lacinia. Aenean ornare lorem non sem pretium, quis blandit turpis ultrices.
Etiam ac nunc nisl. Nullam maximus nunc eu ex euismod, vel aliquet ipsum vestibulum. Donec ullamcorper viverra sem, a tincidunt eros lobortis tristique.
Lorem Ipsub 2
Quisque faucibus mollis odio sit amet elementum. Nam sit amet dolor interdum, consectetur diam quis, vulputate diam.
Nunc sagittis elit in urna aliquam, ut cursus felis luctus. Aliquam et euismod augue.
Integer metus augue, ultrices vitae vulputate luctus, ultrices pulvinar diam. Donec id auctor est. Nulla facilisi.
La structure en boîte permet de facilement découper des zones dans une page web : section, article, titre, ... Et de définir une hiérarchie dans les éléments. Ainsi, un titre de section appartient à la section, parce qu'il est contenu dans la boîte de la section. Celà permet aussi de grouper les éléments. Si deux articles sont dans la même section, alors ils ont probablement quelque-chose qui les lie.
Titre document
Titre section 1
Paragraphe 1 section 1
Paragraphe 2 section 2
Titre section 2
Paragraphe section 2
Paragraphe gauche bloc diviseur
Paragraphe droit bloc diviseur
L'emboîtement a un autre avantage : il est représentable avec un langage relativement simple.
Vocabulaire langage
Un langage de programmation ou de balisage est une convention qui permet d'exprimer une idée, un concept, par le biais d'un texte (le code), et est composé de deux aspects très importants :
- La syntaxe du langage, qui est la manière dont on arrange les "mots" pour former des "phrases".
- La sémantique du langage, qui définit le sens que l'on donne à une "phrase" qui est correcte du point de vue de la syntaxe.
Le principe est que chaque élément, par exemple une section, a deux "balises" correspondantes : une qui marque son début (balise ouvrante), une qui marque sa fin (balise fermante). On peut alors écrire le contenu de l'élément entre les deux balises :
Pour la section 2 de notre exemple plus haut, ça donne :
début section
début titre
(le texte du titre)
fin titre
début paragraphe
(le texte du paragraphe)
fin paragraphe
fin section
En HTML, une balise ouvrante s'écrit avec le nom de l'élément de la balise entre chevrons <>.
La balise fermante s'écrit de la même manière, mais avec une barre oblique (slash) / juste avant le nom de la balise.
Pour la section 2 de l'exemple, ça donne (avec h5 un élément titre, et p un paragraphe):
Le HTML
Le HTML définit donc des éléments qu'on peut utiliser pour construire une page web, et la structure générale du code de la page.
HTML nous permet aussi d'écrire des commentaires. Un commentaire est un morceau de texte qui est ignoré par le navigateur, et donc ne sera pas affiché à l'écran. Les commentaires sont utiles pour transmettre des informations aux autres programmeurs. un commentaire commence par <!-- et finis par --> :
Exemple :
<p>
Ceci est du texte qui s'affichera à l'écran.
<!-- Ceci est un commentaire qui sera ignoré -->
</p>
Je me servirai beaucoup des commentaires dans la suite de ce cours, pour expliquer le code HTML qui sera montré. Sauf mention contraire, les commentaires décriront la ou les lignes qui sont en dessous d'eux si ils sont seuls sur leurs lignes, ou la ligne de code si ils sont sur une ligne de code :
<p> <!-- C'est la balise ouvrante de l'élément p -->
<!-- Ci dessous, du texte. -->
Ceci est du texte qui s'affichera à l'écran.
</p>
La structure générale d'un page HTML est la suivante :
<!doctype html> <!-- Indique la version de HTML au navigateur. Ici, HTML5 -->
<html> <!-- La balise "html" indique que le document commence -->
<head> <!-- l'élément head permet de renseigner des infos comme l'auteur de la page, la date d'édition, ... -->
</head>
<body> <!-- l'élement body contient le contenu de la page qui sera affiché -->
<!-- ici le contenu de la page -->
</body>
</html>
Pour le moment, on va laisser l'élement head de côté, et se concentrer sur l'élément body et ce qu'on peut mettre dedans. Remarque : en anglais, balise html se dit html tag. Voici quelques unes des balises que l'on peut mettre dans le body1.
Remarque : l'aspect des aperçu peut être différent en fonction du navigateur et d'autres paramètres.
Balises de structure
<section></section> <!-- Section, Sert à diviser une page en grande parties -->
<article></article> <!-- Article, Sert à diviser les sections en sous-parties -->
<p></p> <!-- Paragraphe, permet de diviser les paragraphes -->
<header></header> <!-- En-tête, sert à créer un élément d'en tête-->
<footer></footer> <!-- Bas de page, sert à créer un élément de bas de page-->
<nav></nav> <!-- Menu, sert à créer un menu -->
<div></div> <!-- Division, sert à créer d'autres structures-->
<!-- REMARQUE : Ces éléments ne sont pas toujours
utilisés comme ceci, et souvent les div sont utilisé pour
la totalité de la structuration de la page -->
Gestion du texte
Titres
Formattage du texte
Liens
Eléments graphiques
<img> <!-- Image. Cette balise est autofermante, elle n'a pas de fermeture -->
<svg></svg> <!-- Du SVG, un format graphique vectoriel -->
Créons une petite page web
Création fichier HTML
Ouvrez Notepad++.
Sélectionnez file dans le menu en haut à gauche, puis Save As.
Une fenêtre s'ouvre. Dans la barre de navigation de gauche, séléctionnez Desktop (ou Bureau), puis, dans le champs de texte en bas, entrez page pour nommer le ficher.
ATTENTION
Si vous êtes sur des machines de votre lycée, vous risquez de devoir réutiliser la même machine d'une séance à l'autre pour retrouver votre fichier, sauf si vous pouvez l'enregistrer sur le stockage réseau.
Il existe déjà peut etre un fichier nommé page.html ou page sur la machine, dans ce cas là trouvez lui un autre nom, par exemple page2
Déroulez la liste des formats (sous le champs de nom de fichier), puis choisissez HyperText Markup Language file ... dans la liste. Ils sont classés par ordre alphabétique.
Cliquez sur le bouton save en bas à droite.
Normalement le fichier à été créé sur le bureau. Ne fermez pas l'éditeur, vous en aurez besoin par la suite.
Premiers pas
Copiez-collez cette base dans le fichier, puis enregistrez.
Ecrivez n'importe quoi entre les deux balises body.
Faites un clic droit sur le fichier, sélectionnez ouvrir avec, puis votre navigateur favori. Dans mon cas firefox.
Une page devrait apparaître sous vos yeux, avec marqué n'importe quoi.
Ajout d'un titre et d'un paragraphe
Remplacez votre n'importe quoi par un élément h1 et son texte.
Ajoutez également un paragraphe p à la suite du titre et remplissez le de texte.
Astuce
Si vous n'avez pas d'idée, vous pouvez utiliser un extrait de lorem ipsum
Ajout d'un lien
Ajoutez un lien dans votre site web. La syntaxe est la suivante :
Par exemple, ce lien vers la page d'accueil du cours s'écrit :
la partie href="..." est ce qu'on appelle un attribut. C'est une manière d'ajouter des informations sur ce que contient l'élement.
L'inspecteur de code
Les navigateurs modernes fournissent des outils pour les développeurs pour analyser plus facilement une page web.
On affiche ces options en utilisant la touche F12 du clavier sous Firefox et sous Chromium. il faut aller dans l'onglet inspecteur, qui est normalement affiché par défaut.
Une colonne présente le code HTML de la page. Survoler ce code avec la souris met en surbrillance les éléments correspondants sur la page.
Essayez d'utiliser l'inspecteur de code sur la page que vous avez créé, et repérez le titre, le lien, et un paragraphe dans le code.
Vous pouvez aussi directement ouvrir l'inspecteur sur un élément en faisant clic droit sur l'élément, puis en sélectionnant inspecter.
-
une liste plus complète peut se trouver ici : https://www.w3schools.com/tags/default.asp ↩