Maintenant que le langage HTML et CSS commence à devenir un petit peu plus concret, nous sommes prêt à faire une petite parenthèse de théorie qui vous permettra de mieux vous approprier le langage.

Le langage HTML est organisé autour de la mise en place de différents élements sous forme de balises, comme vous l’avez déjà remarqué avec les balises head et body par exemple. Ces balises doivent respecter un certain format pour être bien formé. Au dela des mots clés et des noms de balises, c’est la norme XML qui doit être respectée.

Un peu de vocabulaire

On appelle élément un block XML, celui ci est composé d’une balise ouvrante, d’une balise fermante et de tout ce qu’il y a entre les deux. Exemple :
<title>La norme XML</title>
Ici, l’élément title est composé de la balise ouvrante title (<title>) du texte “La norme XML” et de la balise fermante title (</title>)

On appelera une balise autofermé la balise suivante <meta/> qui représente un élément (vide dans notre exemple) à lui tout seul. Il faut bien la distinguer de la balise fermante (</balise>) qui ferme un élément et est indissociable de la balise ouvrante associée (<balise>).
la balise autofermé se termine par un / alors que la balise fermante commence par un /. La balise autofermé est généralement une contraction et il n’est pas obligatoire de l’utiliser. par exemple <balise></balise> et <balise/> sont deux notations totalement équivalentes.

On appelera attribut une sorte d’option supplémentaire d’une balise. Exemple :
<meta name=”description” content=”Formation à la norme XML”/>
Ici, l’élément meta contient deux attributs. Le premier attribut name à pour valeur description et le second attribut content aura pour valeur Formation à la norme XML.

La structure d’un fichier XML

Un fichier XML bien formé est donc en embriquement d’éléments un peu à la manière des poupés russes. Chaque élément peut contenir autant d’éléments qu’on le souhaite.
L’exemple suivant est valide, les différents élement forment une sorte d’arborescence :
<toto>
<tata>hello world</tata>
<tata>hello <titi>world</titi></tata>
</toto>

Je ne l’ai pas encore dit explicitement, mais il est très important de fermer chaque balise ouverte. par exemple le fichier suivant est incomplet et non valide :
<toto>
<tata>coucou
</toto>

Car l’élément tata commence mais ne se termine jamais. Il manque la balise fermante </tata>.
Nous rappelons qu’il existe des balise autofermés qui s’ouvrent et se ferment en même temps.

De même l’exemple suivant est non valide :
<toto>
<tata>coucou
</toto>
</tata>

Car l’élément tata est inclu dans l’élément toto. La balise fermante </tata> aurait du se trouver avant la balise fermante </toto>

Du XML au HTML.

Le XML est un langage libre offrant une infinité de possibilité car il n’y a pas de règle de nommage pour les balises. Vous pouvez les nommer comme bon vous semble. Le HTML est un langage basé sur la norme XML mais pour lequel chaque balise doit porter un nom bien précis.

Nous allons pour conclure ce paragraphe décortiquer l’entête précédemment créée :
<head>
<title>Ma super page de vente en HTML</title>
<meta name="description" content="Ceci est le descriptif de ma page de vente, sur cette page vous trouverez une formation complète sur le HTML / CSS vous permettant de créer votre premier site web”/>
<meta charset="UTF-8">
</head>

L’élément head contient 3 éléments : 1 élément title et 2 éléments meta. Ces deux éléments méta sont des balises autofermés, la première contient les attribut name et content, la seconde contient l’attribut charset… Chaque balise est bien fermé, la norme XML est donc bien respectée.

Cet article vous a plu ? N'hésitez pas à le partager avec vos amis...
Categories: Programmation Web

Ne partez pas sans laisser un commentaire


This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.