Chronologie
Principes
Comment débuter
Les balises de base
Quelques propriétés
Les liens
Un exemple
Références
| The WWW Project Proposal | mars 1989 |
| Premiers travaux HTML | novembre 1992 |
| HTML 1.0 draft | juin 1993 |
| HTML 1.0 | août 1994 |
| HTML 2.0 draft | juillet 1994 |
| HTML 2.0 (RFC 1866) | novembre 1995 |
| HTML 3.2 | 09/09/1996 |
| CSS 1 | 17/12/1996 |
| HTML 4.0 | 18/12/1997 |
| CSS 2 | 24/03/1998 |
| HTML 4.01 | 24/08/1999 |
L'on remarquera que les navigateurs sont en retard sur les normes :
Mozilla milestone 14 (successeur libre de
Netscape) et Amaya suivent seulement les spécifications CSS 1...
On crée (avec un éditeur de textes ou avec un logiciel specialisé)
deux fichiers :
- un fichier pour le HTML (xxxxxxxx.HTM)
- un fichier pour les styles = une feuille de styles (yyyyyyyy.CSS)
La page HTML doit comporter certaines indications :
- type de HTML 4.01
- utilisation de la feuille de style
Exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="monstyle.css"
title="Il est beau mon style !">
<title>Mon titre de fenêtre</title>
</head>
<body>
<h1>Mon titre</h1>
</body>
</html>
Dans la feuille de styles on définit des classes, et on indique les
propriétés et les valeurs de ces propriétés. Dans le code HTML on
utilise ces classes.
Exemple :
Feuille de style :
/* ma feuille de style du 15/11/1999 */
body { background-color : white ; color : black }
h1 { background-color : white ; color : red }
h2 { color : blue }
h2.vert { color : green }
.turquoise { color : #00FFFF }
Page HTML :
<h1>Titre en rouge sur blanc</h1>
<h2>Sous-titre bleu (par défaut : héritage)>/h2>
<h2 class="vert">Sous-titre vert (surcharge)</h2>
<p class="turquoise">paragraphe turquoise</h2>
<p>texte normal <span
class="turquoise">texte turquoise</span>texte normal</p2>
Ce sont les mêmes balises que pour le HTML 3.2 (sans les mises en forme comme FONT)
| body | corps du texte |
| h1 h2 ... h6 | titres |
| h | paragraphe standard |
| img | image |
| link | lien |
| table | table |
Voir notre page sur le HTML 3.2 pour les détails.
On ne donnera ici que quelques exemples.
La syntaxe est de la forme :
{ propriété : valeur [ ; propriété : valeur ] }
| color : #aabbcc color : yellow | couleur du texte |
| background-color : red | couleur du fond |
| background-image : url(truc.jpg) background-image : url("http://www.gloups.com/par/ici/truc.png") | image de fond |
| text-align : justify | texte justifié, centré etc. |
| text-indent : 3em | retrait de première ligne |
| text-decoration : underline | souligné |
| font-family : arial,"times new roman" | police |
| font-style : italic | italique |
| font-variant : small-caps | petites capitales |
| font-weight : bold | gras |
| font-size : 32pt | taille de caractères en points typographiques |
| margin-top : 20pt margin-bottom : 15pt | parge avant / après bloc |
Voir le manuel de référence pour les nombreuses options possibles pour les propriétés ci-dessus et les très nombreuses autres propriétés.
Pour changer la mise en forme des liens on modifie les propriétés de A et /ou des "pseudo-classes" de A :
D'abord la feuille de style :
/* ma feuille de style du 27/02/2000 */
body { background-color : white ; color : black }
a:link { background-color : #FFFFF0 ; color : green }
a:visited { background-color : #FFFFF0 ; color : red }
a:active { background-color : #FFFFF0 ; color : lime }
h1 { text-align : center ; background-color : white ; color : red }
p.justifie { text-align : justify ; text-indent : 3em }
p.etroit { margin-left : 40pt ; margin-right : 40pt }
p.date { font-style : italic ; text-align : right }
p.police1 { font-family : arial,"times new roman" ; font-size : 20 pt }
.vert { background-color : yellow ; color : green }
Et dans la page HTML :
<h1>Titre centré en rouge sur blanc</h1>
<h2>Sous-titre noir (par défaut : héritage de BODY)</h2>
<h2 class="vert">Sous-titre vert (surcharge)</h2>
<p class="justifie">blabla...</p>
<p class="etroit">blabla...</p>
<p class="police1">blabla...</p>
<p class="date>le 27 février 2000</p>
<p>texte normal <span class="vert">
texte vert</span>texte normal</h2>
<p>blabla
<a href="suite.htm">la suite...</a> blabla</a>
L'on consultera avec avantage :
Voir nos autres pages pour plus d'information.
Dernière mise à jour le lundi 20 mars 2000