HTML est un langage de «balisage» SGML (langage normalisé de balisage généralisé).
Encore une fois, le principe fondamental sur lequel repose le SGML est la séparation complète entre :
- la structure logique d’un document (titres, chapitres, paragraphes, illustrations,…), qui est identifiée par des balises insérées dans le document lui-même,
- de sa mise en page, qui dépend du support de présentation (livre, journal, écran… ) et qui est définie en dehors du document dans une ou plusieurs feuilles de style (police, style, taille et couleur des caractères, alignement et espacement des paragraphes…).
Le principe du balisage est simple
Chaque niveau d’information est identifié par un marqueur de début et un marqueur de fin (les balises).
Les exemples et illustrations qui suivent sont extrêmement « basiques » et n’ont d’autre objectif que de donner une image la plus claire possible des principes du langage, il n’ont absolument pas la prétention d’être exhaustifs.
Vous trouverez dans la page ressource les liens vers les sites de référence listant toutes les balises et leurs attributs
La structure de base du «code source» d’une page HTML est la suivante (en cours de navigation vous pouvez visualiser le code source de la page que vous visitez en choisissant dans le menu de votre navigateur «affichage» «source» (ou «code source»)
Une page web HTML 4.01 est marquée au début par la balise <html> et à la toute fin par </html> .
Cette balise permet au navigateur de «savoir» qu’il est bien en train d’interpréter une page au langage HTML.
Puis arrive une section d’en-tête balisée par <head> </head>. Cette section d’en-tête contient des informations qui s’appliquent à tout le document et qui ne sont pas affichées dans le corps du texte :
- par exemple le titre de la page inclus entre les balises <title> </title>
Puis vient le corps lui même du document placé entre les balises <body> </body>
Nous pouvons y trouver (liste non exhaustive) :
- Des titres et sous titres hiérarchisés niveau 1 à 6 qui sont placés entre les balises <h1> </h1>, <h2> </h2>…
- Des paragraphes <p> </p>
- Des liens hypertextes <a…> </a>
- Des images <img… />
- Des tableaux de données <table> </table>
… qui eux mêmes comprennent des lignes délimitées par <tr></tr>, puis des cellules de titre de colonne <th></th>, et des cellules de données <td></td>
Voilà ci dessous un exemple de code d’une page HTML où les balises sont mises en évidence en gras :
<html>
<head>
<title>page de test html sans feuille de style</title>
</head>
<body>
<h1>voici le titre de premier niveau</h1>
<h2>ici le premier sous titre de niveau 2</h2>
<p>voila un simple paragraphe </p>
<p>et un second dans lequel est imbriqué un lien hypertexte vers <a href="http://www.3w3t.com/"> l'accueil du site 3w3t </a></p>
<p>et ici une image du drapeau français
<img src="fr.gif" /></p>
<h2>ici le second sous titre de niveau 2</h2>
<p>exemple de tableau</p>
<table>
<tr>
<th>titre de la colonne 1</th>
<th>titre de la colonne 2</th>
<th>titre de la colonne 3</th>
</tr>
<tr>
<td>valeur de la ligne 1 colonne 1</td>
<td>valeur de la ligne 1 colonne 2</td>
<td>valeur de la ligne 1 colonne 3</td>
</tr>
<tr>
<td>valeur de la ligne 2 colonne 1</td>
<td>valeur de la ligne 2 colonne 2</td>
<td>valeur de la ligne 2 colonne 3</td>
</tr>
</table>
</body>
</html>
Lorsque un internaute charge cette page avec son navigateur il voit ceci
Ce n’est pas bien joli… mais l’information est parfaitement hiérarchisée, et, par exemple, un logiciel de synthèse vocale destiné à des personnes malvoyantes saura parfaitement décrire la structure de la page, en mentionnant les titres et les sous-titres, les en-tête de colonne …
Publier un commentaire