Petite leçon de HTML (1/4)

Introduction

Si vous êtes arrivés jusqu'ici, c'est que vous savez ce qu'est le Web : un ensemble de pages connectées entre elles par des liens hypertextes. Ces pages sont écrites dans un langage, le HTML. Le HTML est un langage de balisage, c'est-à-dire qu'on indique entre des balises pré-déterminées l'information que l'on souhaite publier afin que les navigateurs Web puissent l'afficher.

Qu'est-ce qu'une balise ? Elle se présente de manière générique sous la forme : <balise attribut1="valeur1" attribut2="valeur2">Texte</balise>. Parfois les attributs sont facultatifs, parfois ils sont indispensables, voire requis.

La balise <p> permet par exemple d'indiquer un paragraphe comme ceci :

<p>Ceci est un paragraphe.</p>

Le HTML est un langage destiné à publier du contenu. Le HTML n'est pas destiné à mettre en forme le contenu. L'idée fondamentale et que vous devez toujours respecter, c'est de séparer le contenu (et sa structure) de la forme (couleurs, positions, polices, etc.). Le contenu s'affiche avec du HTML, la mise en forme se fait grâce aux CSS. Pour éviter les mauvaises habitudes des logiciels WYSIWG, qui vous inciteront à mélanger contenu et présentation, je vous recommande de coder vous-même vos pages. Vous verrez, ce n'est pas si compliqué. Vous pouvez utiliser n'importe quel éditeur de texte comme Notepad par exemple (mais pas Word !) ou le très pratique Notepad2 (gratuit) ; ou recourir à des éditeurs dédiés, par exemple le très bon Maguma Studio (gratuit).

 

Je vous propose d'acquérir sur cette page les connaissances nécessaires pour écrire une page simple et conforme aux standards HTML. Dans une autre leçon, je vous montrerai comment la mettre en forme. Et si j'ai le courage, je ferai aussi une leçon pour expliquer comment mettre en ligne votre chef-d'œuvre.

 

Commencer une page HTML

La première chose que beaucoup négligent, c'est d'indiquer au navigateur que la page que vous écrivez est une page HTML. Je ne rentre pas dans les détails ; contentez-vous d'insérer ceci à la première ligne de votre document :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Nous pouvons maintenant commencer l'écriture de la page proprement dite. Quand vous écrivez votre code, n'hésitez pas à sauter des lignes et à utiliser des tabulations pour rendre votre code plus facile à lire (cela n'apparaîtra pas à l'affichage dans un navigateur). Les balises vont souvent par deux : l'une ouvre débute une information, l'autre la termine. Elles s'écrivent : <balise></balise>. Dans notre tout premier exemple, vous aurez remarqué que les balises <p> et </p> vont ensemble. L'une commence le paragraphe, l'autre le finit.

De même, votre code HTML commence par une balise <html> et se terminera par la balise fermante correspondante : </html>. Votre page Web contient donc pour l'instant :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	Votre code HTML
</html>

 

La structure d'une page HTML

Une page HTML contient deux parties obligatoires, indiquées par des balises correspondantes. La première partie, entre les balises <head> et </head>, contient des informations destinées aux navigateurs, aux moteurs de recherches et autres agents du Web. C'est par exemple là que l'on indique le titre de la page ou son auteur. C'est ce qu'on peut appeler l'en-tête de la page.

La seconde partie, que l'on peut appeler corps de la page, est contenue sans grande surprise entre les balises <body> et </body>. C'est dans cette partie que vous indiquerez les informations à afficher à l'écran.

La structure d'un document HTML est toujours celle-ci :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		En-tête de la page
	</head>

	<body>
		Corps de la page
	</body>
</html>

Vous devez toujours respecter cette structure. Elle est indispensable pour que tous les navigateurs comprennent correctement votre page. (Vous pouvez déjà voir comme les tabulations permettent d'identifier plus facilement la structure de votre code, ce qui accélère sa relecture.)

 

Sauvegardez votre page avec le nom de votre choix. Comme extension, utilisez .html afin d'indiquer qu'il s'agit d'une page HTML. Maintenant que vous maîtrisez la structure de base d'une page HTML, nous allons pouvoir la remplir, en commençant par remplir l'en-tête.

 

Dernière mise à jour le 01-01-1970.

Page conforme aux specifications XHTML 1.1 Contrat Creative Commons
L'intégralité du site, y compris les photos, fait l'objet d'un contrat Creative Commons.
A note to those who do not read French