Structure d'un document HTML
Un article de Mangue.org, l'encyclopéde libre.
Qu'est ce qu'une page HTML ? Telle est la question... Un document HTML est essentiellement composé d'entêtes, d'un corps, et bien sûr d'un contenu tel que du texte, mais une page web ne se compose pas à la va vite. En effet, une page non correctement structurée pourra être "ininterprétable" par un navigateur. Dans cet article, nous verrons les points essentiels à la bonne constitution d'une page HTML.
| Sommaire |
Notion de balises et d'attributs
Les documents HTML sont remarquablement structurés. Ceux-ci sont composés de balises qu'on pourrait qualifier de symétriques. En effet, la plupart des balises, à part quelques exceptions, sont de la forme :
<!-- Début de la balise -->
<Ma_Balise>
............
<!-- Fin de la balise -->
</Ma_Balise>
On appelle également ce genre de balises des conteneurs du fait qu'elles contiennent des morceaux de code.
Notion d'attributs
La plupart des balises comportent des attributs. Ces attributs viennent compléter les définitions des balises et ainsi permettent d'agir sur des éléments tels que du texte, des images, de liens...
C'est à dire que grâce à des attributs, on peut changer la couleur de fond d'une page HTML, ou encore modifier la taille d'une image ou sa source, mais aussi la position du texte sur une page web. Ceux-ci viennent intégrer les conteneurs. Les attributs les plus souvent rencontrés sont :
align / color / face / size / src...
<!-- Exemples d'attributs -->
<font size="5" color="FFFF00">
Mais il en existe encore beaucoup d'autres. Toutes les significations de ces attributs seront vues tout au long du cours d'HTML (Certains d'entre eux sont obligatoires, d'autres sont facultatifs).
| Remarque, La balise des commentaires |
< !-- Commentaires -- >
Tout ce qui se trouve au milieu de ce conteneur n'est pas interprété par les navigateurs. Ce conteneur est appelé : balise commentaire. Comme son nom l'indique, elle permet de laisser des commentaires qui octroient la faculté de laisser des indications sur les pages telles que le nom de son auteur, des indications sur certaines balises et leur utilité et rôle dans le code... On retrouvera ce conteneur tout au long des différents cours, celui-ci précédant la majorité des listings ! |
Cette remarque est valable pour tous les cours suivants ! Ceci étant dit, nous pouvons continuer...
Structure d'un fichier HTML
Certains conteneurs sont indispensables à la composition d'un fichier HTML :
Balise <html>
Les balises <html> et </html> font partie de cette catégorie. En effet, tout fichier HTML doit commencer par la balise <html> et doit finir par </html>. Ces 2 balises, respectivement, permettent d'ouvrir et fermer un document HTML. (On peut bien entendu placer des commentaires avant ou après ce conteneur.).
<!-- Balise obligatoire pour un
document HTML -->
<html>
</html>
Balise <head>
Ces balises, en fait, ne sont pas vraiment indispensables. Elles détiennent tous types de renseigements concernant une page ainsi que d'autres balises. Par exemple, on peut y mettre le titre de la page :
<html>
<head>
<title>Notre premier exemple</title>
</head>
</html>
ou encore des indications qui pourront être récupérées par les robots des différents moteurs de recherche, qui sont placées entre les balises <meta> et </meta> (la notion de balise META fera l'objet d'un prochain cours) :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
</html>
Et également une partie comprise entre < script > et < /script > qui permet d'insérer, comme le nom de la balise l'indique, des scripts ( JScript ou VBScript ) qui agiront sur l'ensemble de la page. (La notion de script sera l'objet d'un prochain cours).
Entrez le texte non formatté ici== Balise <body> ==
Ce conteneur est le corps du fichier, c'est à dire tout son contenu. C'est cette partie qui va contenir textes, images, tableaux, liens, qui seront affichés ensuite sur la page HTML. Ce conteneur possède quelques attributs (tous facultatifs) :
- bgcolor : cet attribut permet de définir la couleur de fond du document, en RGB ( Red / Green / Blue ). Les couleurs RGB sont composées de 3 chiffres en mode hexadécimal, le premier représentant le rouge, le second le vert et enfin le dernier le bleu. Le chiffre sera précédé du signe #.
<html>
<head>
<title>Exemple Background ( couleur d'arrière plan )</title>
</head>
<!-- fond en jaune -->
<body bgcolor="FFFF00">
</body>
</html>
- Text : cet attribut fonctionne de la même façon que bgcolor, sauf que cela définit une couleur pour le texte du document.
<html>
<head>
<title>Exemple d'une couleur de texte</title>
</head>
<!-- texte du document en noir -->
<body text="#000000">
</body>
</html>
- Background : cet attibut permet de définir, à la place d'une couleur en fond d'écran, une image. Background peut être également associé à bgproperties, qui peut prendre comme argument fixed, ce qui désigne une image fixe en arrière plan.
<html>
<head>
<title>Exemple d'une image en arrière plan fixe</title>
</head>
<!-- "mon_image" en arrière plan -->
<body background="mon_image" bgproperties=fixed>
</body>
</html>
- Leftmargin et Topmargin : ces 2 attributs désignent respectivement les marge de haut et de gauche d'une page HTML, exprimées en pixels.
<html>
<head>
<title>Exemple de marge</title>
</head>
<!-- marge de gauche à 100 pixels / marge du haut à 200 pixels -->
<body leftmargin="100px" topmargin="200px">
</body>
</html>
- link / vlink / alink : ces attributs permettent de désigner, respectivement la couleur du lien, la couleur des liens déjà visités, la couleur des liens lorsque le curseur passe au-dessus d'eux.
<html>
<head>
<title> Link / aLink / vLink </title>
</head>
<!-- lien en rouge, lien visité en jaune, lien vert au passage du curseur -->
<body link=red alink=yellow vlink=green>
</body>
</html>
Bien évidemment, on peut combiner tous ces attributs dans une balise <body>. Ce qui peut donner quelque chose du genre :
<html>
<head>
<title> Mélanges des différents attributs </title>
</head>
<!-- mon_image.jpg en arrière plan / couleur du texte noir -->
<!-- marge à gauche de 100 pixels / lien blanc -->
<!-- lien visité rose -->
<body background="mon_image.jpg" text="#000000"
leftmargin="100px" link=white vlink=#FF99FF>
</body>
</html>
| Remarque |
| Dans cette section, on peut remarquer des notions différentes telles que les liens, l'insertion d'image ... Ceux-ci seront explicités dans les cours suivants. |
Conclusion
Ceci clôture le 1er article sur le langage HTML. Ce qu'il faut absolument retenir de celui-ci, c'est que le HTML fonctionne grâce à des balises et des attributs qui permettent de les personnaliser. Il faut aussi impérativement savoir que ces pages web nécéssitent 3 balises dites obligatoires qui sont <html> </html> (ouvre et ferme la page HTML), <head> </head> (l'entête de la page), <body> </body> (le corps de la page), celle-ci permettant de structurer une page HTML.
