Développement Web : "Zone Grand Débutant"


précédentsommairesuivant

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.

Exemple de code source HTML :
Sélectionnez
<!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 :

Image non disponible

Aperçu dans Firefox 2 :

Image non disponible

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.

 
Sélectionnez
<html>
    <head></head>
    <body></body>
</html>

L'en-tête (head) est une succession de balises (tags) permttant 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 > comme 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.

Ordre de fermeture non respecté :
Sélectionnez
<b><i>du texte en gras italique...</b></i>
Ordre correct :
Sélectionnez
<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 >.

Le corps du document est une balise double :
Sélectionnez
<body>
...
...
...
</body>
Un titre est une balise double :
Sélectionnez
<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.

Un passage à la ligne est une balise simple (sans contenu) :
Sélectionnez
<br/>
Une ligne de séparation est une balise simple (sans contenu) :
Sélectionnez
<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.
Un lien appelé 'Description' et renvoyant vers 'page.html' :
Sélectionnez
<a href="page.html" title="Description">lien</a>
Une image appelée 'Nom du logo' ayant comme source 'images/logo.jpg' :
Sélectionnez
<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) :

index.html
Sélectionnez
<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'occurence, 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.

Des liens :
Sélectionnez
<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>).

Insérer des images :
Sélectionnez
<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 :

Exemple 1
Sélectionnez
<html><body>Hello world, I am Yogui!<br/>Ceci est un test.</body></html>
Exemple 2
Sélectionnez
<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

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 à l'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).


précédentsommairesuivant

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2007 Guillaume Rossolini. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.