Reprenons notre éditeur de texte (dans mon cas Notepad++). Je vous invite à écrire ou à copier-coller le code source ci-dessous dans Notepad++. Ce code correspond à la base d'une page web en HTML5 :
1
2
3
4
5
6
7
8
9
10
11
| <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Titre</title> </head> <body> </body></html> |
Copié dans Notepad++, cela donne la figure suivante.
Vous noterez que les balises s'ouvrent et se ferment dans un ordre précis. Par exemple, la balise
<html> est la première que l'on ouvre et c'est aussi la dernière que l'on ferme (tout à la fin du code, avec </html>). Les balises doivent être fermées dans le sens inverse de leur ouverture. Un exemple :<html><body></body></html>: correct. Une balise qui est ouverte à l'intérieur d'une autre doit aussi être fermée à l'intérieur.<html><body></html></body>: incorrect, les balises s'entremêlent.
Euh, on pourrait avoir des explications sur toutes les balises que l'on vient de copier dans l'éditeur, m'sieur ?
Bien sûr, c'est demandé si gentiment.
Ne prenez pas peur en voyant toutes ces balises d'un coup, je vais vous expliquer leur rôle !
Ne prenez pas peur en voyant toutes ces balises d'un coup, je vais vous expliquer leur rôle !
Le doctype
1
| <!DOCTYPE html> |
La toute première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML.
Ce n'est pas vraiment une balise comme les autres (elle commence par un point d'exclamation), vous pouvez considérer que c'est un peu l'exception qui confirme la règle.
Ce n'est pas vraiment une balise comme les autres (elle commence par un point d'exclamation), vous pouvez considérer que c'est un peu l'exception qui confirme la règle.
La balise </html>
1
2
3
| <html></html> |
C'est la balise principale du code. Elle englobe tout le contenu de votre page. Comme vous pouvez le voir, la balise fermante
</html> se trouve tout à la fin du code !
L'en-tête <head> et le corps <body>
Une page web est constituée de deux parties :
- L'en-tête
<head>: cette section donne quelques informations générales sur la page comme son titre, l'encodage (pour la gestion des caractères spéciaux), etc. Cette section est généralement assez courte. Les informations que contient l'en-tête ne sont pas affichées sur la page, ce sont simplement des informations générales à destination de l'ordinateur. Elles sont cependant très importantes ! - Le corps
<body>: c'est là que se trouve la partie principale de la page. Tout ce que nous écrirons ici sera affiché à l'écran. C'est à l'intérieur du corps que nous écrirons la majeure partie de notre code.
Pour le moment, le corps est vide (nous y reviendrons plus loin). Intéressons-nous par contre aux deux balises contenues dans l'en-tête…
L'encodage (charset)
1
| <meta charset="utf-8" /> |
Cette balise indique l'encodage utilisé dans votre fichier
.html.
Sans rentrer dans les détails, car cela pourrait vite devenir compliqué, l'encodage indique la façon dont le fichier est enregistré. C'est lui qui détermine comment les caractères spéciaux vont s'afficher (accents, idéogrammes chinois et japonais, caractères arabes, etc.).
Il y a plusieurs techniques d'encodage portant des noms bizarres et utilisées en fonction des langues : ISO-8859-1, OEM 775, Windows-1253… Une seule cependant devrait être utilisée aujourd'hui autant que possible : UTF-8. Cette méthode d'encodage permet d'afficher sans aucun problème pratiquement tous les symboles de toutes les langues de notre planète ! C'est pour cela que j'ai indiqué
utf-8 dans cette balise.
Il faut aussi que votre fichier soit bien enregistré en UTF-8. C'est le cas le plus souvent sous Linux par défaut mais, sous Windows, il faut généralement le dire au logiciel.
Le titre principal de la page
1
| <title> |
C'est le titre de votre page, probablement l'élément le plus important ! Toute page doit avoir un titre qui décrit ce qu'elle contient.
Il est conseillé de garder le titre assez court (moins de 100 caractères en général).
Il est conseillé de garder le titre assez court (moins de 100 caractères en général).
Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet du navigateur). Enregistrez votre page web et ouvrez-la dans votre navigateur. Vous verrez que le titre s'affiche dans l'onglet, comme sur la figure suivante.
Il faut savoir que le titre apparaît aussi dans les résultats de recherche, comme sur Google (figure suivante).
Autant vous dire que bien choisir son titre est important !
0 commentaires:
Enregistrer un commentaire