<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>Titre (affiché en haut de la fenêtre)</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</HEAD>
<BODY>
...
Le texte que l'on veut taper
</BODY>
</HTML>
|
On peut rajouter diverses choses dans l'en-tête du document : en particulier, une description du contenu de la page (pour les moteurs de recherche), une liste de mots-clefs (séparés par des virgules) ou le codage utilisé.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>Titre (affiché en haut de la fenêtre)</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="description" CONTENT="sample HTML page">
<META NAME="author" CONTENT="Vincent Zoonekynd">
<META NAME="keywords" CONTENT="HTML,authoring">
</HEAD>
<BODY>
...
Le texte que l'on veut taper
</BODY>
</HTML>
|
Le document est généralement structuré par les balises <H1>, <H2>, <H3>, représentant différents niveaux de sous-titres. La balise <P> permet de changer de paragraphe. Contrairement à ce qui se passe avec LaTeX, la numérotation n'est pas automatique.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>Titre (affiché en haut de la fenêtre)</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META NAME="description" CONTENT="sample HTML page">
<META NAME="author" CONTENT="Vincent Zoonekynd">
<META NAME="keywords" CONTENT="HTML,authoring">
</HEAD>
<BODY>
<H1>Introduction</H1>
Bla bla bla...
<H1>1. Première étape</H1>
Ceci est un paragraphe d'introduction
<H2>1.1 Première sous-étape</H2>
Détails de la première sous-étape.
<P>
Un autre paragraphe
<H2>1.2 Deuxième sous-étape</H2>
...
<H1>2. Deuxième étape</H1>
...
</BODY>
</HTML>
|
IntroductionBla bla bla...1. Première étapeCeci est un paragraphe d'introduction1.1 Première sous-étapeDétails de la première sous-étape.Un autre paragraphe 1.2 Deuxième sous-étape...2. Deuxième étape... |
C'est la balise <A> qui permet de créer des liens hypertexte.
Allez voir <A HREF="http://www.irtc.org/">ici</A>. |
| Allez voir ici. |
Il est possible d'avoir des liens entre les différentes parties d'un même document.
<H1><A NAME="intro">Introduction</A></H1>
...
<H1><A NAME="debut">1. Début</A></H1>
...
<H1><A NAME="milieu">2. Milieu</A></H1>
...
<H1><A NAME="fin">3. Fin</A></H1>
...
<H1><A NAME="concl">Conclusion</A></H1>
Nous avons commencé par voir que
<A HREF="#debut">bla bla bla</A>
puis que
<A HREF="#milieu">bla bla bla</A>
et enfin que
<A HREF="#fin">bla bla bla</A>...
|
Introduction...1. Début...2. Milieu...3. Fin...ConclusionNous avons commencé par voir que bla bla bla puis que bla bla bla et enfin que bla bla bla... |
Les listes non numérotées (que l'on peut bien évidemment imbriquer) sont délimitées par la balise <UL> (unnumbered list) et chaque entrée est introduite par la balise <LI> (list item).
<UL>
<LI> Bla bla bla
<LI> Bla bla bla
<LI> Bla bla bla
<UL>
<LI> Bli bli bli
<LI> Bli bli bli
<UL>
<LI> Blu blu blu
<LI> Blu blu blu
<LI> Blu blu blu
</UL>
<LI> Bli bli bli
</UL>
</UL>
|
|
Je ne sais plus s'il y a des listes numérotées (ça m'étonnerait).
Il y a aussi des descriptions.
<DL>
<DT>Linux
<DD>Système d'exploitation de type Unix, gratuit.
<DT>WinDaube 2000
<DD>Système d'exploitation buggué, très cher.
<DT>MacOS
<DD>Système d'exploitation inutilisé.
</DL>
|
|
Les utilisateurs de certains systèmes d'exploitation aiment beaucoup jouer avec les fontes.
Du <B>gras</B>, de l'<EM>italique</EM>, de la <TT>machine à écrire</TT>. On peut aussi <STRONG>insister</STRONG> sur certains mots. Si on désire faire fuir le lecteur potentiel, on peut même faire <BLINK>clignoter</BLINK> le texte. |
| Du gras, de l'italique, de la machine à écrire. On peut aussi insister sur certains mots. Si on désire faire fuir le lecteur potentiel, on peut même faire le texte. |
Les gens qui aiment vraiment beaucoup jouer avec cela peuvent utiliser la balise <FONT>.
J'<FONT SIZE="+1">aime</FONT> <FONT FACE="Arial,Helvetica">bien</FONT> <FONT SIZE=-1>jouer</FONT> <FONT COLOR="#ffff00">avec</FONT> <FONT SIZE="-10">les</FONT> <FONT SIZE="+10">fontes</FONT>. |
| J'aime bien jouer avec les fontes. |
La balise <HR> permet de dessiner une bare horizontale.
<HR> <HR WIDTH="80%"> <HR WIDTH="80%" NOSHADE SIZE=20> |
|
|
On peut par exemple l'utiliser pour des titres.
<HR SIZE=5 WIDTH="80%"> <CENTER> Introduction </CENTER> <HR SIZE=5 WIDTH="80%"> |
|
|
La balise <IMG> permet de placer des images. Il est de bonne pratique de préciser la taille de l'image, en pixels et de donner un court texte descriptif pour les fureteurs non graphiques.
Une image <IMG SRC="1.gif"> dans le texte. Puis en dehors. <CENTER><IMG SRC="1.gif"></CENTER> <P> <IMG ALIGN=LEFT SRC="1.gif" ALT="*" WIDTH=20 HEIGHT=50> On peut même faire couler le texte à côté de l'image. Bla bla bla |
Une image  dans le texte.
Puis en dehors.
|
Si vous êtes habitué aux tableaux sous LaTeX, vous allez constater que ceux du HTML sont à la fois plus simples et plus puissants. La balise <TABLE> délimite un tableau, la balise <TR> (table row) délimite une ligne, la balise <TD> (table data) délimite une case. L'option BORDER précise l'épaisseur de la bordure (c'est une dimension perpendiculaire à l'écran, que l'on voit en perspective) ; l'option CELLSPACING précise la largeur de la bordure (c'est une dimension dans le plan de l'écran) ; l'option CELLPADDING précise la distance entre le bord (interne) d'une case et son contenu.
<TABLE BORDER=2 CELLPADDING=10 CELLSPACING=2>
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE>
|
|
On peut préciser la largeur totale d'un tableau.
<TABLE WIDTH="100%" BORDER=2 CELLPADDING=10><TR><TD>
Ce tableau fait toute la largeur de la page.
</TD></TR></TABLE>
<P>
<CENTER><TABLE WIDTH="80%" BORDER=2 CELLPADDING=10><TR><TD>
Celui-ci juste "80%".
</TD></TR></TABLE></CENTER>
<P>
<CENTER><TABLE WIDTH=200 BORDER=2 CELLPADDING=10><TR><TD>
Celui-ci juste 200 pixels
</TD></TR></TABLE></CENTER>
|
|
Certaines cases peuvent d'étaler sur plusieures lignes ou plusieures colonnes.
<TABLE CELLPADDING=10 BORDER=2>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
<TR>
<TD COLSPAN=2>1+2</TD><TD>3</TD>
</TR>
<TR>
<TD>1</TD><TD COLSPAN=2>2+3</TD>
</TR>
</TABLE>
<P>
<TABLE CELLPADDING=10 BORDER=2>
<TR><TD ROWSPAN=2>A</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>2</TD><TD>3</TD></TR>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>
<P>
<TABLE CELLPADDING=10 BORDER=2>
<TR><TD ROWSPAN=2 COLSPAN=2><CENTER>A</CENTER></TD><TD>3</TD></TR>
<TR><TD>3</TD></TR>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>
|
| ||||||||||||||||||||||||
On peut aussi régler l'alignement horizontal (centré, à gauche, à droite) ou vertical (centré, en haut, en bas) du contenu des cases.
<TABLE CELLPADDING=10 BORDER=2>
<TR><TD ROWSPAN=2 COLSPAN=2 ALIGN=CENTER VALIGN=MIDDLE>A</TD><TD>3</TD></TR>
<TR><TD>3</TD></TR>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>
<TABLE CELLPADDING=10 BORDER=2>
<TR><TD ROWSPAN=2 COLSPAN=2 ALIGN=LEFT VALIGN=MIDDLE>A</TD><TD>3</TD></TR>
<TR><TD>3</TD></TR>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>
<TABLE CELLPADDING=10 BORDER=2>
<TR><TD ROWSPAN=2 COLSPAN=2 ALIGN=RIGHT VALIGN=MIDDLE>A</TD><TD>3</TD></TR>
<TR><TD>3</TD></TR>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>
<TABLE CELLPADDING=10 BORDER=2>
<TR><TD ROWSPAN=2 COLSPAN=2 ALIGN=CENTER VALIGN=TOP>A</TD><TD>3</TD></TR>
<TR><TD>3</TD></TR>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>
<TABLE CELLPADDING=10 BORDER=2>
<TR><TD ROWSPAN=2 COLSPAN=2 ALIGN=LEFT VALIGN=TOP>A</TD><TD>3</TD></TR>
<TR><TD>3</TD></TR>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>
<TABLE CELLPADDING=10 BORDER=2>
<TR><TD ROWSPAN=2 COLSPAN=2 ALIGN=RIGHT VALIGN=TOP>A</TD><TD>3</TD></TR>
<TR><TD>3</TD></TR>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>
<TABLE CELLPADDING=10 BORDER=2>
<TR><TD ROWSPAN=2 COLSPAN=2 ALIGN=CENTER VALIGN=BOTTOM>A</TD><TD>3</TD></TR>
<TR><TD>3</TD></TR>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>
<TABLE CELLPADDING=10 BORDER=2>
<TR><TD ROWSPAN=2 COLSPAN=2 ALIGN=LEFT VALIGN=BOTTOM>A</TD><TD>3</TD></TR>
<TR><TD>3</TD></TR>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>
<TABLE CELLPADDING=10 BORDER=2>
<TR><TD ROWSPAN=2 COLSPAN=2 ALIGN=RIGHT VALIGN=BOTTOM>A</TD><TD>3</TD></TR>
<TR><TD>3</TD></TR>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
On peut jouer avec les couleurs : dans ce document, par exemple, nous avons utilisé des tableaux pour le code et les exemples.
|
En fait, on pouvait déjà jouer avec toutes ces couleurs (couleur du fond, des liens non encore suivis, des liens déjà suivis, des liens en train d'être suivis, image de fond) comme arguments de la balise <BODY>.
<BODY BGCOLOR="ffff00"
TEXT="000000"
LINK="#0000FF"
VLINK="#551A8B"
ALINK="#FF0000"
BACKGROUND="">
|
Certaines images de fond occuppent toute la largeur de l'écran.
<BODY BACKGROUND="2.gif" TEXT="000000">
Bla bla bla bla bla...
....
</BODY>
|
|
Il faut décaller le texte sur la droite.
<BODY BACKGROUND="2.gif">
<TABLE WIDTH="100%" BACKGROUND="" BGCOLOR="ffffff">
<TR>
<TD WIDTH=150></TD>
<TD><FONT COLOR="000000">
Bla bla bla bla bla...
...
</TD>
</TR>
</TABLE>
</BODY>
|
|
On peut par exemple construire une page à l'aide d'un (ou de plusieurs) tableaux, en faisant figurer la table des matières du site dans le colonne. C'est par exemple le cas des sites suivants.
On peut aussi couper une image en morceaux et les mettre dans un tableau (que l'on ne verra pas, car la jonction se fera au pixel près) : on peut alors cliquer sur une partie de l'image.
La balise <EMBED> permet de rajouter de la musique à une page.
<EMBED SRC="1.mid" AUTOSTART="true" HIDDEN="true" LOOP="false"> |
Les « Frames » sont une autre manière de découper les pages, beaucoup moins partiques pour le lecteur : ce n'est pas la page qui est découpée en morceaux, mais la fenêtre. Comme si elle était trop grande... Dans le fichier principal, on remplace la balise <BODY> par <FRAMESET>.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET COLS="25%,*">
<FRAME SRC="1.frame1.1.html" NAME="toc">
<FRAME SRC="1.frame1.2.html" NAME="main">
</FRAMESET>
<NOFRAMES>
You need a frames-capable browser to see this.
</NOFRAME>
<HTML>
|
Les fichiers secondaires sont tout à fait normaux.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>Subframe 1</TITLE>
<BASE TARGET="main">
</HEAD>
<BODY>
<UL>
<LI><A HREF="1.frame1.2.html">Introduction</A>
<LI><A HREF="1.frame1.3.html">Début</A>
<LI><A HREF="1.frame1.3.html">Suite</A>
<LI><A HREF="1.frame1.3.html">Fin</A>
<LI><A HREF="1.frame1.2.html">Conclusion</A>
</UL>
</HTML> <A HREF="/" TARGET="_parent">Retour</A>
</BODY>
<HTML>
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>Subframe 2</TITLE>
<BASE TARGET="main">
</HEAD>
<BODY>
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
</BODY>
</HTML>
|
On peut aussi avoir des « frames » invisibles, grace à l'option FRAMEBORDER=0 BORDER=0 FRAMESPACING=0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET COLS="25%,*" FRAMEBORDER=0 BORDER=0 FRAMESPACING=0>
<FRAME SRC="1.frame1.1.html" NAME="toc">
<FRAME SRC="1.frame1.2.html" NAME="main">
</FRAMESET>
<NOFRAMES>
You need a frames-capable browser to see this.
</NOFRAME>
</HTML>
|