1. Définition
Les balises se repèrent facilement. Elles sont entourés de << chevrons >>, c'est-à-dire des symboles < et >, comme ceci: < balise >
Les balises indiquent la nature du texte qu'elles encadrent. Elles veulent dire par exemple: ceci est le titre de la page, ceci est une image, ceci est un paragraphe, etc.
2. Types de balises
Les balises en paires
Elles s'ouvrent, contiennent du texte, et se ferment plus loin. Voici à quoi elles ressemblent:
< title > ceci est un titre < /title >
On distingue une balise ouvrante (< title >) et une balise fermante (< /title >) qui indique que le titre se termine. Cela signifie pour l'ordinateur que tout ce qui n'est pas entre ces deux balises n'est pas un titre.
Les balises orphelines
Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par exempls une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire à l'ordinateur Insère une image ici.
Une balise orpheline s'écrit comme suit:
< img/ >
On distingue une balise ouvrante (< title >) et une balise fermante (< /title >) qui indique que le titre se termine. Cela signifie pour l'ordinateur que tout ce qui n'est pas entre ces deux balises n'est pas un titre.
3. Les attributs
< balise attribut="valeur" >
A quoi cela sert-il? Prenons la balise < img /> que nous venons de voir. Seule, elle ne sert pas à grand chose. On pourrait rajouter un attribut qui indique le nom de l'image à afficher:
< img src="gaston.jpg" />
Dans le cas d'une balise fonctionnant par paireon ne met les attributs que dans la balise ouvrante et pas dans la balise fermante. Par exemple, ce code indique que la ciation est Neil Armstrong et qu'elle date du 21 juillet 1969.
< citation auteur="Neil Armstrong" date="21/07/1969">
Ceci est un petit pas pour l'homme, mais un bond de géant pour l'humanité.
< /citation >
3. Structure d'une page HTML
< !DOCTYPE html >
< html >
< head >
< meta charset="utf-8" />
< title >Titre< /title >
< /head >
< body >
< /body >
< /html >
Vous noterez que balises s'ouvrent et se ferment dans un ordre précis. Par exemple, la balise < html > est la première 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.
Le doctype
< !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'exclammation), vous pouvez considérer que c'est un peu l'exception qui confirme la rèle.
La balise html
< html > < /html >
C'est la balise principale d code. Elle englobe tout le contenu de votre page. Comme vous pouvez le voir, la balise fermante < /html > se trouve à 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'ordianteur. 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 écririons ici sera affiché à l'écran. C'est à l'intérieur du corps que nous écririons la majeure partie de notre code.
L'endocage (charset)
< meta charset="utf-8" />
Cette balise indique l'encodage utilisé dans votre fichier .html.
L'encodage indique la façon dont le fichier est enregistré. C'est lui qui détermine comment les caractères spéciaux vons 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és en fontions des langues: ISO-8859-1, OEM 775, Windows-1253... Une seule cependant devrait être utlilisé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!
Le titre principal de la page
< title > < /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).
Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet du navigateur). Il faut savoir que le titre apparait aussi dans les résultats de recherche, comme sur Google.
Les commentaires
Un commentaire est une balise HTML avec une forme bien spéciale:
Le titre ne s'affiche pas dans votre page mais en haut de celle-ci (souvent dans l'onglet du navigateur). Il faut savoir que le titre apparait aussi dans les résultats de recherche, comme sur Google.