Cet article présente une brève introduction au standard HTML. Le présent texte doit être considéré comme une présentation rapide et superficielle de ce langage et ne peut en aucun cas se substituer à une documentation plus complète. En vue d'une plus grande simplicité, certains aspects du langage ont été occultés. Le lecteur pourra se reporter aux documents électroniques cités dans la bibliographie pour avoir plus d'informations.
HTML (HYPERTEXT MARKUP LANGUAGE) est un standard de structuration de documents basé sur SGML. Contrairement à ce que l'évolution actuelle pourrait laisser penser, il ne s'agit pas d'un nouveau langage de présentation mais bien d'un moyen de produire des documents hypertextes structurés.
Un document HTML n'est rien d'autre qu'un fichier texte agrémenté
de tags HTML qui décrivent sa structure. Un tag
est un mot-clef (en majuscules ou en minuscules) entouré
par des chevrons (ex : <html>).
Pour délimiter la portée d'un tag, on utilise
le signe de fermeture / accolé au nom du tag (ex :
</html> ).
Le document se compose de deux parties principales : l'entête
(head) et le corps
du texte (body),
le tout étant inclus dans un tag html.
Voici un exemple de document HTML :
<html> <head> <title>Titre du document</title> </head> <body> Ceci est un essai de document HTML. </body> </html>
Ce tag permet de délimiter le document HTML.
<html> ... </html>
Ce tag permet de délimiter l'entête du document.
<html> <head> ... </head> </html>
Doit être utilisé dans la partie head
d'un document pour spécifier le titre du document.
<html> <head> <title>Titre</title> </head> </html>
Délimite le corps du document.
<html> <head> <title>Titre</title> </head> <body> ... </body> </html>
Différents niveaux de titres.
<html>
<head>
<title>Titre</title>
</head>
<body>
<h1>Chapitre I</h1>
<h2>Introduction</h2>
<h2>Partie I</h2>
<h3>1.1 Rappels</h3>
<h3>1.2 Définitions</h3>
...
<h2>Conclusion</h2>
</body>
</html>
donnera :
Chapitre IIntroductionPartie I1.1 Rappels1.2 Définitions...Conclusion |
Paragraphe
<p align=justify>Ceci est un essai de paragraphe justifié <p align=center>Ceci est un essai de paragraphe centré <p align=right>Ceci est un essai de paragraphe aligné à droitedonnera :
Ceci est un essai de paragraphe justifié Ceci est un essai de paragraphe centré Ceci est un essai de paragraphe aligné à droite |
Permet d'introduire un passage à la ligne dans un paragraphe.
<p align=center>Ceci est un essai de paragraphe centré qui <br> s'étend sur deux lignes.donnera :
|
Ceci est un essai de paragraphe centré qui |
Permet de mettre en valeur un texte (typiquement en le mettant en gras).
Ceci est un texte <strong>important</strong>.donnera :
| Ceci est un texte important. |
Comme strong permet
de mettre un texte en valeur (emphasis).
Généralement affiché en italique. Ceci est un texte <em>important</em>.donnera :
| Ceci est un texte important. |
Permet d'indiquer qu'un texte représente une portion de listing (typiquement en l'affichant avec une police à échappement fixe).
Pour utiliser la fonction <code>printf</code>, ...donnera :
Pour utiliser la fonction printf, ...
|
Indique qu'un texte représente une adresse (généralement affichée en italique à la ligne).
Pour me contacter : <address>vincentl@cc.ec-lyon.fr</address>donnera :
| Pour me contacter : vincentl@cc.ec-lyon.fr |
Liste à puces
Les éléments sont indiqués par <li>
(list item)
Un titre de la liste peut être donné par <lh>...</lh>
<ul> <lh>Eléments</lh> <li>premier élément <ul> <li>premier sous-élément <li>deuxième sous-élément </ul> <li>deuxième élément </ul>donnera :
|
Même chose mais avec une numérotation automatique des éléments.
Liste de définitions
<dl> <lh>Définitions</lh> <dt>Terme 1<dd>définition 1 <dt>Terme 2<dd>définition 2 </dl>donnera :
|
Permet d'introduire une ancre hypertexte. Il peut s'agir soit d'un appel de document, soit d'une définition de point d'entrée (signet).
Appel d'un document
<a href="url-document">texte</a>
insère un appel à url-document sous le texte texte qui devient cliquable.
Définition d'un signet
<a name="nom-signet">
remarque: l'appel à un signet se fait par url-document#nom-signet
Insertion d'une image.
<img src="url" options>
où url désigne le fichier image à
inclure
et les options peuvent être
align=middle, top, bottom
border=0, valeur
remarque: une image peut constituer un appel à un hyperlien.
Par exemple,
<a href="http://www.ec-lyon.fr/W3M2/"><img src="w3m2.gif" border=0></a>
introduit une icône cliquable.
<a href="mailto:vincent@hpwww.ec-lyon.fr?subject=sujet&body=message"><img src="w3m2.gif" border=0></a>
introduit une icône cliquable permettant d'envoyer un mail.
Permet de créer des tableaux.
<table border=1> <tr> <td>ligne 1, colonne 1</td> <td>ligne 1, colonne 2</td> </tr> <tr> <td>ligne 2, colonne 1</td> <td>ligne 2, colonne 2</td> </tr> </table>donnera
|
remarque : les tableaux sont très utilisés
pour effectuer de la mise en page (avec border=0).
Passage en italique
Exemple de texte en <i>italique</i>.donnera :
| Exemple de texte en italique. |
Passage en gras
Exemple de texte en <b>gras</b>.donnera :
| Exemple de texte en gras. |
Permet d'indiquer qu'une portion de texte est préformatée et doit donc être affichée directement, généralement avec une police à échappement fixe.
Voici donc le source du programme principal:
<pre>
void main()
{
init();
run();
done();
}
</pre>
donnera :
Voici donc le source du programme principal:
void main()
{
init();
run();
done();
}
|
Permet de régler les paramètres de police.
<font size=+2>B</font>onjourdonnera :
| Bonjour |
Permet de passer en exposant.
Permet de passer en indice.
Voici le source T<sub>E</sub>X du document :donnera
| Voici le source TEX du document : |
| http://www.w3.org/hypertext/WWW/MarkUp/Wilbur/ | The Structure of HTML 3.2 Documents |
| http://www.w3.org/pub/WWW/TR/ | W3C Tech Reports |
| http://www.w3.org/pub/WWW/MarkUp/ | W3C HTML Specifications |
| http://www.trotek.ec-lyon.fr/~vincent/HTML/ | HTML en quelques mots |