Ce document commence a ne plus avoir qu'une valeur historique, le HTML 3.2 laissant sa place au HTML 4.01 et aux feuilles de style, et le HTML 4.01 devra lui même laisser sa place au XML...
Voir notre texte traitant du HTML 4.0 et des feuilles de style
<html>
<head>
<title>titre de la fenêtre</title>
</head>
<body>
et c'est là qu'il faut mettre le contenu de la page...
</body>
</html>
Les champs META ne servent que sur Internet ou Intranet.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<!--un commentaire : auteur, date, etc-->
<head>
<title>titre de la fenêtre</title>
<link rev="made" href="mailto:dave.null@home.sweet.home.fr">
<link rel="stylesheet" type="text/css" href="monstyle.css" title="Mon style">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Expires" content="Wed, 31 Dec 2000 23:59:59 GMT">
<meta http-equiv="Keywords" content="HTML, débutants">
<meta http-equiv="Description" content="Le HTML pour débutants">
<meta http-equiv="Last-Modified" content="Wed, 1 Apr 1998 08:45:00 GMT">
<meta name="Author" content="Marcel Hacheté-Hèmèle">
<meta name="Creation-Date" content="Mon, 1 Jan 1995 12:00:00 GMT">
<meta name="Generator" content="HTML Assistant">
</head>
<head>
et c'est là qu'il faut mettre le contenu de la page...
</body>
</html>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>p (paragraphe normal)</p>
p (paragraphe normal)
<p align="center">Et hop !</p>
Et hop !
align="center" fonctionne aussi pour les titres H1 à H6.
<p>un paragraphe<br>sur deux lignes</p> <p>et un autre<br>du meme genre</p>
un paragraphe
sur deux lignes
et un autre
du meme genre
<u>souligné</t> souligné
<u>gras</b> gras
<i>italique</i> italique
<tt>télétype</tt> télétype
<cite>cite</cite> cite
<code>code</code> code
<kbd>kbd</kbd> kbd
<samp>samp</samp> samp
<strong>strong</strong> strong
<em>em</em> em
<var>var</var> var
<address>
address
</address>
<pre>
pre
</pre>
pre
<blockquote>
blockquote
</blockquote>
blockquote
On n'utilisera que des images en .GIF (256 couleurs maximum, pour les images en noir et blanc ou avec peu de couleurs), en .JPG (16 millions de couleurs, pour les photos etc.), ou en .PNG.
WIDTH est la largeur en pixels
HEIGHT est la hauteur en pixels
ALT est une courte description de l'image qui s'affiche avant son chargement
ou en cas d'erreur (comme ici).
Si l'image est dans le même répertoire que le fichier .HTM, ce n'est pas la peine de préciser le chemin complet (sinon voir "liens").
<img src="maphoto.gif" width="129" height="132" alt="ma photo">
Pour centrer une image, la mettre dans un paragraphe centré.
<p align="center">
<img rsc="maphoto.gif" width="129" height="132" alt="ma photo">
Mon beau texte
<img src="maphoto.gif" width="129" height="132" alt="ma photo">
</P>
Mon beau texte
une liste non numérotée :
<ul>
<li>ligne 1</li>
<li>ligne 2</li>
</ul>
une liste numérotée :
<ol>
<li>ligne 1</li>
<li>ligne 2</li>
</ol>
On a le droit d'imbriquer les listes les unes dans les autres.
<table border="3" cellspacing="2" cellpadding="2" width="80%">
<tr>
<td>première ligne case 1</td>
<td>première ligne case 2</td>
</tr>
<tr>
<td>deuxième ligne case 1</td>
<td>deuxième ligne case 2</td>
</tr>
</table>
| première ligne case 1 | première ligne case 2 |
| deuxième ligne case 1 | deuxième ligne case 2 |
Tout simplement on peut mettre dans les cases :
Exemple :
<table>
<tr>
<td><img src="maphoto.gif" width="129" height="132"
alt="ma photo"></td>
<td align="center">Ma magnifique<br>trombine<br>à
moi</td>
</tr>
</table>
 |
Ma magnifique trombine à moi |
<a href="lelien">zone active</a>
<a href="page2.htm">vers la page 2</a>
<a href="file:////magellan/sys1/ateliers/www/index.htm"> vers la page d'accueil</a>
<a href="file:////magellan/sys1/users/lulu/pub/index.htm"> vers chez Lulu</a>
<a href="http://www.lpi.ac-poitiers.fr/toto/index.htm"> Vers la page de Toto sur le serveur www.lpi.ac-poitiers.fr</a>
<a href="#partie1">vers la partie 1</a>
L'ancre est définie par :
<a name="partie1">texte</a>
La partie "texte" est facultative.
<a href="page2.htm"> <img src="icone2.gif" width="32" height="32" alt="page 2"> </a>
<body bgcolor="couleur">
ou
<body bgcolor="#aabbcc">
où aa bb et cc sont les composantes Rouge Vert Bleu
(synthèse additive) en hexadécimal :
| couleur | code hexa | nom francais | |
| Black | "#000000" | noir | *** |
| Green | "#008000" | vert foncé | *** |
| Silver | "#C0C0C0" | gris clair | *** |
| Lime | "#00FF00" | vert clair | *** |
| Gray | "#808080" | gris | *** |
| Olive | "#808000" | olive | *** |
| White | "#FFFFFF" | blanc | *** |
| Yellow | "#FFFF00" | jaune | *** |
| Maroon | "#800000" | marron | *** |
| Navy | "#000080" | bleu foncé | *** |
| Red | "#FF0000" | rouge | *** |
| Blue | "#0000FF" | bleu | *** |
| Purple | "#800080" | pourpre | *** |
| Teal | "#008080" | cyan foncé | *** |
| Fuchsia | "#FF00FF" | magenta | *** |
| Aqua | "#00FFFF" | cyan | *** |
<body background="monimage.jpg">
<font color="#aabbcc">texte en couleur; </font>
(voir ci-dessus "fond coloré")
<font color="#FFFFFF"> texte blanc </font>
<font color="#FF0000"> texte rouge </font>
texte blanc
texte rouge
normal <font size="+3"> texte plus grand </font> normal
normal <font size="-2"> texte plus petit </font> normal
normal texte plus grand normal
normal texte plus petit normal
<hr>
Pour avoir une espace (espace est du genre féminin en typographie) :
(à répéter le nombre de fois voulu)
Exemple :
Et hop !
Et hop !
Astuce : utiliser un paragraphe avec des espaces et des sauts de ligne
Exemple :
<p> <br> </p>
Et voilà !
Dernière mise à jour le lundi 20 mars 2000