II. HTMLÂ : Structurer le document▲
II-A. Introduction▲
Les trois notions fondamentales :
- le fichier est au format HTMLÂ ;
- le document est à destination de l'internaute ;
- l'outil est un navigateur Web.
II-A-1. Vue d'ensemble▲
Le HTML (HyperText Markup Language) est le « langage » qui permet à un navigateur Web d'afficher un document Web selon une certaine structure. Il ne s'agit pas d'un langage à proprement parler (dans le sens « interprété » ou « compilé »), mais plutôt d'un format de document.
Une page Web est généralement écrite dans un fichier en HTML (ou assimilé). Ce fichier est en fait du texte, formaté en suivant certaines règles. Ainsi, lorsqu'un fichier HTML est ouvert avec Notepad, on voit du code HTML pur ; en revanche, lorsque l'on utilise un navigateur Web, on voit au contraire un document correctement présenté : le navigateur Web interprète le code HTML pour présenter le document Web à l'internaute.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Un bonjour de Yogui ;)</p>
</body>
</html>Aperçu dans Internet Explorer 7 :
Aperçu dans Firefox 2 :
L'on peut remarquer ici la même chose qu'avec mes exemples précédents : le format HTML de mon fichier permet d'afficher le document de la même manière dans les deux navigateurs. C'est rendu possible par le langage HTML, un standard au même titre que RTF.
II-A-2. Organisation d'un fichier HTML▲
Un fichier HTML contient principalement deux parties : l'en-tête et le corps.
<html>
<head></head>
<body></body>
</html>L'en-tête (head) est une succession de balises (tags) permettant au navigateur Web de savoir de quoi il s'agit. On peut y trouver un résumé de la page, les mots clefs principaux, le titre pour la fenêtre, la fréquence de mise à jour, etc.
Le corps (body) est constitué du contenu du document. On y trouve habituellement des divisions (div), des paragraphes (p), des images (img), etc.
Le HTML est un format structuré. Chaque balise peut en contenir d'autres, de manière hiérarchique. Dans le document vu plus haut, l'en-tête contient un titre principal tandis que le corps contient un titre de niveau 1 et un paragraphe.
Il est primordial de comprendre que chaque balise a une signification particulière. Utiliser les bonnes balises au bon moment permet d'obtenir des documents affichés sans surprises dans tous les navigateurs du marché. En revanche, utiliser incorrectement les balises peut donner des résultats imprévisibles… Reportez-vous toujours à la documentation officielle pour savoir comment utiliser les balises ; les tutoriels sont là pour vous aider à comprendre la documentation officielle (qui est malheureusement souvent indigeste).
Lorsque vous souhaitez ajouter un élément à votre document, pensez à sa signification. Chaque type de contenu dispose d'une balise en HTML : si c'est du texte, il s'agit probablement d'un paragraphe ; si vous commencez un chapitre composé d'un titre et de paragraphes, alors vous êtes en train de diviser votre document ; un titre est de niveau 1, 2, 3, etc. suivant sa hiérarchie. Je vous recommande de construire votre document de la même manière que vous construisez un document avec un traitement de texte : pensez au type de contenu que vous souhaitez mettre et utilisez les balises en fonction de cela.
II-B. Terminologie▲
II-B-1. Balise▲
En HTML, les informations sont organisées à l'aide de « balises ». Une balise permet de contenir quelque chose, par exemple « un lien », « un paragraphe », etc. La balise se caractérise par un mot encadré des signes inférieur < et supérieur > par exemple <b>, <body>, etc. Les balises HTML vont généralement par paire : l'une ouvre, l'autre referme et ce qui est situé entre les deux balises est affecté. Toutes les balises de la page sont organisées de manière hiérarchique.
Il faut penser à cette hiérarchie, car c'est très important. Par exemple, il est fondamental de refermer les balises dans l'ordre inverse de leur ouverture. La première balise ouverte englobe toutes les autres, elle est la dernière à être refermée. La dernière balise ouverte a une durée de vie plus courte, car elle est refermée avant toutes les autres.
La balise ouvrante est la balise permettant de délimiter le début, et la balise fermante délimite la fin. Dans le cas d'un titre, « <h1> » est une balise ouvrante et « </h1> » est la balise fermante correspondante.
<b><i>du texte en gras italique...</b></i><b><i>du texte en gras italique...</i></b>Une balise HTML est très simple : le signe « inférieur » < suivi de quelques lettres et enfin du signe « supérieur » >. Si la balise est double (c'est souvent le cas), car elle doit contenir quelque chose, alors la balise fermante est très similaire à la balise ouvrante : < suivi d'une barre oblique / puis des quelques lettres (les mêmes que pour la balise ouvrante) et enfin >.
<body>
...
...
...
</body><h1>...</h1>Les balises ayant du contenu doivent être hiérarchisées, car elles vont par paires. En revanche, les balises simples n'ont pas cette contrainte.
<br/><hr/>L'identifiant d'une balise (« body » ou bien « h1 » par exemple) peut être écrit en minuscules, majuscules ou un mélange des deux mais il est fortement recommandé d'utiliser systématiquement les minuscules.
II-B-2. Attribut▲
En grammaire, le sens d'un nom commun peut être précisé par des compléments. En HTML, une balise peut être complétée par des attributs. Une « balise » correspond à un « nom commun » dont le sens peut être précisé par des « attributs » (ses « compléments »).
Toutes les balises HTML peuvent contenir un ou plusieurs attributs. Ce sont comme des paramètres, des éléments qui nous permettent de préciser le comportement des balises. Par exemple, la balise « lien » peut être précisée au moyen des attributs « destination » et « titre ».
Certaines balises ont des attributs obligatoires. Certains attributs sont spécifiques à certaines balises, tandis que d'autres peuvent être mis dans n'importe quelle balise HTML.
Simplement à titre d'exemple, voici quelques attributs que nous verrons très souvent :
- href : principalement dans les liens ;
- title : principalement dans les liens ;
- src : principalement dans les images ;
- id : pour n'importe quelle balise, il est utile pour CSS et JavaScript (cf. plus loin) ;
- name : dans les contrôles des formulaires.
<a href="page.html" title="Description">lien</a><img src="images/logo.jpg" alt="Nom du logo"/>La valeur d'un attribut s'écrit entre guillemets ou bien entre apostrophes. Je vous recommande les guillemets, car cela pose moins de problèmes.
II-C. Outils nécessaires▲
Tout comme pour les fichiers CSV que j'évoquais plus haut, n'importe quel éditeur de texte peut être utilisé pour créer des pages en HTML. Notepad est suffisant si vous êtes sous Windows, mais je vous recommande l'un des outils décrits dans notre page Outils (X)HTMLLes meilleurs outils pour développer en (X)HTML.
Pour visualiser un document HTML, n'importe quel navigateur Web fait l'affaire : Internet Explorer, Firefox, Opera, etc.
II-D. Votre premier document HTML▲
Créez le fichier suivant, puis ouvrez-le avec votre navigateur Web (double clic sur le nom du fichier) :
<html>
<head>
<title>Hello world</title>
</head>
<body>Hello World, I am Yogui!</body>
</html>Le navigateur Web vous affiche une page contenant les mots « Hello World, I am Yogui! » et dont la barre de titre contient simplement « Hello World ».
Je ne vous présente ici que le strict minimum afin d'obtenir du HTML reconnu à peu près correctement par votre navigateur Web. En situation réelle, il vous faudra respecter les standards tels que le W3C (World Wide Web Consortium) les a définis. Pour faire du véritable code HTML ou XHTML, je vous recommande la lecture de tutoriels plus complets (cf. la liste ci-dessous).
Tout le contenu d'un document HTML se trouve à l'intérieur de la balise <body>.
Ainsi, je vous ai indiqué la structure d'une page Web. En effet, le HTML sert principalement à une chose : structurer un document. Bien que ce soit possible, il est préférable d'éviter de mettre en forme le document au moyen de HTML : ce sera le travail de CSS (cf. plus loin).
Pour faire une page bien présentée, vous pouvez utiliser les balises suivantes :
- <center> : le texte est centré dans la page (balise double) ;
- <font color="">Â : changement de la couleur du texte (balise double)Â ;
- <font size="">Â : changement de la taille du texte (balise double)Â ;
- <b> ou <strong>Â : le texte est mis en gras (balise double)Â ;
- <i> ou <em>Â : le texte est mis en italique (balise double)Â ;
- <u> : le texte est souligné (balise double) ;
- <h1> ou <h2> (jusqu'Ã h6)Â : un titre dans la page (balise double)Â ;
- <br/> : passage à la ligne (balise simple).
Ces balises sont à utiliser avec beaucoup de précautions : il s'agit ici de vous enseigner à faire du HTML qui donne un résultat, mais, en situation réelle, il convient d'utiliser les technologies correctes (en l'occurrence, beaucoup de CSS). Nous reviendrons par la suite sur tout cela.
Un élément fondamental à savoir faire en HTML est un lien hypertexte. Cela donne au visiteur de votre site la possibilité de consulter une autre page, qu'elle soit sur votre site ou ailleurs.
<a href="http://www.site.ext/dossier/page-1.html">Texte affiché dans le lien</a>
<a href="page-2.html">Autre lien</a>Il faut aussi savoir comment insérer une image dans votre page Web. Cela se fait au moyen d'une balise simple, en une seule partie (il n'y a pas de </img>).
<img src="http://www.site.ext/dossier/images/logo.jpg"/>
<img src="images/logo.jpg"/>Pour les liens et les images, ce qui est dans l'attribut href ou src est ce que l'on appelle une URL (ou bien URI). Elle peut être absolue (avec le http:// et l'adresse du site) ou bien relative. Je vous recommande d'utiliser des adresses relatives tant que possible.
Puisque le HTML permet principalement de définir la structure d'un document (contrairement à la manière dont il est présenté), les navigateurs Web ignorent tous les passages à la ligne ainsi que les espaces (en double) insérés dans le code source. Cela vous permet de présenter votre code source HTML de manière à le rendre lisible, sans que cela ait d'impact sur le document final affiché par le navigateur. Les deux exemples suivants produisent le même affichage :
<html><body>Hello world, I am Yogui!<br/>Ceci est un test.</body></html>II-E. Formation▲
II-E-1. Organisme de référence en HTML▲
L'organisme de référence est le World Wide Web Consortium (W3C).
II-E-2. Nos ressources habituelles▲
- La FAQ (X)HTML répond à vos questions posées dans nos forums.
- Les tutoriels (X)HTMLLes meilleurs cours (X)HTML vous permettront d'apprendre tout ce dont vous avez besoin.
- Les livres (X)HTMLLes meilleurs livres (X)HTML critiqués par la Rédaction pour toujours avoir une référence sous le coude.
- Les forums HTML, général conception Web et outils de développement Web vous permettent de poser toutes vos questions qui ne trouvent pas réponse dans nos autres ressources.
II-E-3. Notre sélection de cours ▲
Cours sur les formulaires en HTML▲
J'ai rédigé un cours complet sur les formulairesTutoriel HTML & PHP : les formulaires accessible à tous les lecteurs. Il vous guidera depuis vos premiers pas jusqu'à leur exploitation. Attention, il vous faut avoir des connaissances en PHP pour exploiter pleinement les formulaires (cf. plus loin), mais vous pouvez dès à présent vous renseigner sur leur fonctionnement.
Div et CSSÂ : une mise en page rapide et facile▲
Pierre-Baptiste Naigeon vous propose un cours de mise en page au moyen de la balise HTML <div>. Les plus débutants d'entre vous n'ont pas besoin de s'en soucier, néanmoins il peut être intéressant à lire par tout le monde.
Écrire du bon code HTML▲
Voici un tutoriel que je citerai à plusieurs reprises…
Adrien Pellegrini a compilé pour vous les bonnes pratiques de développement en HTML.
Introduction au XHTML▲
Adrien Pellegrini vous présente le XHTMLIntroduction à l'XHTML (une évolution de HTML) en long et en large.
II-F. Les limites du HTML▲
Bien qu'il existe des outils très puissants pour créer des pages en HTML, il serait fastidieux de créer manuellement, une à une, toutes les pages d'un catalogue de produits. L'outil informatique existe pour nous faciliter la tâche, en particulier les tâches répétitives. Nous verrons plus loin que le HTML est en fait un objectif : c'est un document que nous allons créer à l'aide d'un langage de script situé sur le serveur. En général, nous ne créons pas intégralement de document HTML sans utiliser un langage de script. Suivant la terminologie que vous préférez, le HTML est habituellement un patron (couture), un moule (cuisine) ou encore un gabarit (c'est le terme adéquat).