HTML : une petite introduction
Un peu d’histoire
A l’origine, Tim Berners-Lee voulait créer un langage servant à décrire la structure d’un document et totalement indépendant de la plateforme ou de l’outil utilisé pour l’affichage.
Il y avait donc des balises pour indiquer les titres, les sous-titres et les paragraphes, mais pas de notion de marge, de couleur, de police ou de taille des caractères. Libre aux concepteurs des navigateurs de choisir la meilleure façon d’afficher un document.
A cette époque, les utilisateurs étaient essentiellement des chercheurs et des universitaires qui s’intéressaient davantage au contenu du document qu’à la façon dont il était présenté.
Pour aller plus loin
Mais le succès du web a rapidement élargit son audience au grand public et à l’utilisation commerciale, pour qui la présentation est un élément marketing de première importance. Le langage HTML original ne permettant pas de satisfaire aux besoins en terme de design, les développeurs de navigateurs web ont rapidement introduit leurs propres éléments HTML, comme l’attribut background ajouté à la balise <body> par Netscape pour permettre l’affichage d’une image de fond.
Bien que l’introduction d’éléments de présentation dans le langage HTML aille complètement à l’encontre de sa vocation première (indépendance vis-à-vis des outils d’affichage), il a fallu très vite intégrer un grand nombre des ces nouveaux éléments dans le standard HTML, pour éviter que chaque éditeur ne développe sa propre version du langage.
Mais dès 1994, le W3C proposait une ébauche de solution avec les feuilles de style qui permettaient de conserver les éléments de présentation à l’extérieur du code HTML et de faciliter la définition (ou la modification) d’un style de présentation commun à l’ensemble des pages d’un site.
Les navigateurs Arena et emacs/W3 furent en 1995 les premiers à implémenter ce modèle de feuilles de style, suivis en 1996 par MicroSoft Internet Explorer (MSIE).
D’autres éditeurs avaient créé leurs propres versions des feuilles de style, mais utilisables uniquement sur leurs navigateurs. Il était donc indispensable, pour respecter l’esprit d’ouverture du web, que le W3C définisse une norme acceptée par tous. Ce fut fait avec la norme CSS 1.0 (Cascading Style Sheets) proposée en décembre 1996 mais qui ne connut vraiment son plein essor qu’avec l’arrivée de la spécification HTML 4.0 début 1998.
Balises, attributs, éléments
En se baladant sur différents forums consacrés au développement web ou au référencement, on lit fréquemment des inepties liées à l’emploi inapproprié des termes de base : balise (ou tag), attribut, élément.
Pour être tout à fait clair, une balise (en anglais, tag) est un marqueur qui commence par le signe “<” et de termine par le signe “>”.
<html> est une balise, au même titre que <head>,<body> ou <a> ou encore <div>Ecrire qu’« un title tag ne doit pas dépasser 80 caractères », comme j’ai pu le lire de la part d’un gourou autoproclamé du référencement est donc une ineptie. Il faisait en réalité référence soit à l’élément title
<title>Ceci est un élement title compris entre une balise titre de début et une balise titre de fin</title>soit à l’attribut title tel qu’on peut en trouver à l’intérieur d’une balise <img>.
<img src="/images/pic001.gif" title="ceci est un attribut title dans une balise img" />C’est bon ? Vous avez bien assimilé ces 3 termes ? On peut donc passer à la suite des réjouissances.
Structure d’un document HTML
Un document HTML se décompose en 2 parties, la partie HEAD qui contient des informations au sujet du document, à l’usage des navigateurs et des moteurs de recherche, et la partie BODY qui est le corps du document, ce qui sera affiché à l’écran. Le tout est encadré entre une balise <html> qui indique le début du code HTML et une balise </html> qui indique la fin du document.
Le minimum syndical qu’on devrait donc retrouver dans tout document HTML aura donc une structure ressemblant à ceci :
<html>
<head>
<title>Ceci est le titre de mon document</title>
</head>
<body>
<h1>Ceci est un titre (heading) de niveau 1 qui sera affiché à l'écran</h1>
<p>Vous pouvez ne rien mettre entre <body> et </body>, vous obtiendrez une belle page blanche, mais est-ce bien utile?</p>
</body>
</html>Vous remarquerez que je n’ai utilisé que des minuscules pour mes balises : ceci est obligatoire dans la spécification XHTML, même si pour l’instant les navigateurs se contrefichent que vous utilisiez des minuscules ou des majuscules. Mais autant prendre tout de suite de bonnes habitudes.
J’en vois au fond de la classe qui lèvent le doigt avec une question qui leur brûle les lèvres : « et le DOCTYPE ? »
Bonne question, je vous remercie de l’avoir posée....et nous y reviendrons dans un prochain épisode.
Les éléments de présentation
Comme je l’ai indiqué plus haut, le langage HTML n’était pas destiné à l’origine à gérer la manière dont le document s’affichait, mais simplement à décrire la structure du document : en tètes, chapitres, sections, paragraphes, etc.
Mais pour répondre à une demande croissante de présentation du contenu, des éléments de présentations ont été ajoutés au langage, soit sous la forme de nouvelles balises, soit sous la forme d’attributs ajoutés aux balises existantes.
Par exemple, la balise <center> inventée par Netscape mais reconnue par la majorité des navigateurs, permet de centrer le texte au milieu de la page.
On arrive également au même résultat en utilisant l’attribut align ="center" associée par exemple à la balise <p>
Ainsi les deux portions de code suivantes seront affichées de la même manière.
<center>
<p>Ceci est un paragraphe aligné au centre de la page avec la balise <center></p>
</center>
<p align="center">Ceci est un paragraphe aligné au centre de la page avec l'attribut align="center"</p>Il serait fastidieux de lister tous les attributs et toutes les balises liées à la présentation, mais je vais vous donner encore un exemple pour bien vous faire comprendre l’intérêt de séparer les éléments de style du code HTML.
La balise <body> supporte un grand nombre d’attributs de présentation qui s’applique à l’ensemble du contenu affichable.
On peut par exemple utiliser :
<body bgcolor="#6262a4" background="images/pic001.gif" bgproperties="fixed" alink="#ff0000">l’attribut bgcolor définit la couleur du fond de ma page, l’attribut background indique l’image de fond à utiliser, l’attribut bgproperties définit la manière dont mon image de fond se déplace par rapport à mon contenu quand j’utilise la barre de défilement, et l’attribut alink conditionne, quant à lui, la couleur des liens contenus dans ma page.
Et il en existe plusieurs dizaines du même acabit.
En utilisant une feuille de style (CSS), je définirais ces éléments une fois pour toutes pour l’ensemble des pages de mon site.
Fichier CSS style.css
body {
color:black;
background-color:#6262a4;
background-image:url(images/pic001.gif);
background-attachment:fixed;
margin:0
}
a:link { color: blue }
a:visited { color: red }
a:active { color: #ff0000 }Code HTML
<html>
<head>
<title>code débarassé de ses attributs de style</title>
<link rel="stylesheet" type="text/css" href="../style.css" />
</head>
<body>
Il n'est pas allégé, mon code?
</body>
</html>Si vous n’avez qu’une seule page, cela ne présente effectivement pas un grand intérêt, mais imaginez que vous désiriez changer la couleur de fond sur un site de plusieurs centaines de page : une simple modification dans le fichier CSS, et toutes vos pages sont à jour. Elle est pas belle, la vie ?
D’où mon insistance à vous inciter à mener en parallèle l’apprentissage du CSS et du langage XHTML pour partir sur de bonnes bases et ne pas vous encombrer la tête de balises déjà obsolètes ou qui le seront bientôt.
Pour aller plus loin
Il existe de très nombreuses ressources en ligne pour apprendre le langage XHTML et CSS, et dans la plupart de mes articles, j’invite le lecteur à consulter ceux qui me semblent les plus appropriés.
Mais si comme moi vous aimez posséder un ouvrage de référence, je ne peux que vous conseiller XHTML et CSS : Cours et exercices
Et bien sûr, repassez souvent par ici.....
Commentaires