From 312e21833257f94ba3890c2c56306e276c934390 Mon Sep 17 00:00:00 2001 From: meles Date: Thu, 19 May 2005 23:24:36 +0000 Subject: [PATCH] Bap: passage au XHTML --- internet/web/html/bases.tml | 850 +++++++++++++++++++++++------------- internet/web/html/index.tml | 83 ++-- 2 files changed, 579 insertions(+), 354 deletions(-) diff --git a/internet/web/html/bases.tml b/internet/web/html/bases.tml index 5987719..d57fc72 100644 --- a/internet/web/html/bases.tml +++ b/internet/web/html/bases.tml @@ -8,75 +8,162 @@ -

Tutoriel HTML : les bases

+

Tutoriel XHTML : les bases

-

Principes généraux

+

Introduction

-Le HTML est le langage -des pages Web. Ce n'est pas un langage de programmation, mais un -langage de mise en forme de données : une page Web décrit une -structure statique, tandis qu'un programme est un processus -dynamique. Vous n'avez aucunement besoin d'avoir des bases de -programmation pour écrire du HTML ! « HTML » se prononce H-T-M-L, mais -vous pouvez aussi dire « chteumeuleu » :-) +Le langage XHTML est un langage de formatage de texte adapté à la +conception de pages web. +

+ +

Ce n'est pas un langage de programmation, mais un langage de mise en +forme de données : une page Web décrit une structure statique, tandis +qu'un programme est un processus dynamique. Vous n'avez aucunement +besoin d'avoir des bases de programmation pour écrire du XHTML !

-Le HTML sert à définir la structure logique d'un -document, permettant ensuite à un navigateur (Internet Explorer, -Netscape, Mozilla, Opera, etc.) de rendre visuellement le -document. Pour des raisons évidentes d'interopérabilité, le HTML -possède une norme, rédigée par le World Wide Web Consortium -(W3C), qui regroupe des acteurs majeurs du Web comme -Microsoft, MacroMedia (qui produit Flash), Apple, AOL, etc. Nous en -sommes actuellement à HTML -4.1. +Pour vous le présenter, un peu de généalogie facilitera les choses, +notamment pour expliquer la différence entre HTML et XHTML.

-
Attention : le HTML ne -s'occupe que de définir la structure logique de votre document. Pour -l'aspect visuel (mise en page, couleurs, fontes, etc.), c'est le -domaine des feuilles de style, dont le tutoriel -est en cours de rédaction. -
- +

Généalogie du XHTML

-L'élément de base d'un site est la page. C'est un fichier dont -l'extension est normalement .html (ou .htm -si votre système d'exploitation vous impose cette limitation) et qui -contient du code HTML. +La famille du XHTML est une famille nombreuse, et elle n'a pas fini de +s'étendre ! L'aïeul s'appelle SGML ; il eut deux enfants, le +HTML puis le XML. Le XML eut à son tour un enfant, qui s'appelle XHTML +et ressemble comme deux gouttes d'eau à son oncle HTML.

-

Vocabulaire : éléments, attributs

+

+Le SGML est un +méta-langage : il permet de définir des langages balisés. Le HTML est l'un de ces langages +balisés, fondé en particulier sur la notion de lien hypertexte, +qui permet de naviguer confortablement d'une page à une autre.

-Le HTML utilise des balises (aussi appelées -« éléments ») pour distinguer les éléments logiques de la page. Toute -balise est de forme <TAGADA>, avec un < et un >. Les -balises se referment avec </TAGADA>, / étant l'élément -fermant. Les balises acceptent parfois des options, qu'on appelle des -attributs : dans <TAGADA type="plouf">, -TAGADA est l'élément, type l'attribut, et « plouf » la +Le HTML a très vite remporté un grand succès. Mais il a aussi rencontré +certaines limites. En particulier, il n'est pas extensible. Aussi a-t-il +reçu un petit frère, le langage XML, précisément fondé sur la notion +d'extensibilité ; comme le SGML, le XML est un méta-langage.

+ +

Le problème, c'est que le HTML n'était pas compatible avec le +XML ; c'est pourquoi l'on a conçu le langage XHTML, qui est +dérivé du XML, mais conserve les principes fondamentaux du HTML, dont il +hérite également de nombreuses spécificités. +

+ +

La norme du XHTML est définie par le W3C, qui encourage les +concepteurs de pages web à passer du HTML au XHTML. L'avantage du XHTML +sur le HTML est son extensibilité, qui lui vient du langage +XML. C'est pourquoi nous vous recommandons très fortement de +préférer le XHTML au HTML. Le site des tuteurs observe +scrupuleusement les spécifications de ce langage. À terme, le HTML est +appelé à disparaître. +

+ +

Structure logique d'un document

+ +

Le XHTML définit la structure logique d'un +document, permettant ensuite à un navigateur (Firefox, Mozilla, +Netscape, Opera, Internet Explorer, etc.) de rendre visuellement (mais +aussi auditivement ou tactilement, pour les non-voyants) le +document.

+ +

Pour des raisons évidentes d'interopérabilité, le XHTML possède une +norme, rédigée par le World Wide Web Consortium (W3C), qui +regroupe des acteurs majeurs du Web comme Microsoft, MacroMedia (qui +produit Flash), Apple, AOL, etc. Nous en sommes actuellement à la norme +XHTML 1.0. +

+ + +

+L'élément de base d'un site est la page. C'est un +fichier dont l'extension est normalement .html (ou +.htm si votre système d'exploitation vous impose cette +limitation) et qui contient du code XHTML. +

+ + +

Le XHTML ne s'occupe que de définir la structure logique de +votre document. Pour l'aspect visuel (mise en page, couleurs, +fontes, etc.), c'est le domaine des feuilles de style, dont le tutoriel est en cours de rédaction.

+ +

Principes fondamentaux

+ +

Les balises

+ +

+Le XHTML utilise des balises (aussi appelées +« éléments ») pour distinguer les éléments logiques de la +page.

+ +

Toute balise doit être ouverte (sans quoi elle n'existe pas, +évidemment) ; et toutes les balises doivent également être +fermées.

+ +
+

L'obligation de fermer chaque balise est l'une des principales +différences entre le HTML et le XHTML ; c'est une caractéristique +que le XHTML hérite du XML.

+ +

Une balise se présente sous la forme <tagada>, avec un < et +un >.

+ +

Les balises se referment avec </tagada>, / étant l'élément +fermant. Certaines balises se ferment à l'intérieur (et à la fin) +d'elles-mêmes. Dans ce cas, la barre tranversale doit être placée juste +avant le > final. Exemple : <br />. +

+ +

+Un jeu de balises présente donc obligatoirement l'une des deux formes +suivantes : +

+ +
+<tagada> quelque chose </tagada> 
+
+ +

+ou bien : +

+
+<tagada />
+
+ +

Il n'existe aucune autre forme possible.

+ + +

Les attributs

+ +

Les balises acceptent parfois des options, qu'on appelle des +attributs : dans <tagada type="plouf" />, tagada +est l'élément, type l'attribut, et « plouf » la valeur de l'attribut.

Casse

-Les balises HTML peuvent s'écrire aussi bien en majuscules qu'en -minuscules. Pour des questions de lisibilité, le W3C conseille -d'écrire les éléments en majuscule, les attributs en minuscule. C'est -ce que nous ferons ici. +En XHTML, on écrit les éléments et les attributs en +minuscules.

-À noter : le XHTML, une forme avancée de langage de -description qui est l'avenir du HTML, n'utilise que les -minuscules. Peut-être préférerez-vous en prendre dès -aujourd'hui l'habitude. +

+L'écriture des balises en minuscules est, là encore, un héritage du +XML ; en HTML, on recommandait d'écrire les éléments en majuscules +et les attributs en minuscules. +

Commentaires

@@ -90,39 +177,101 @@ tirets (--). On ne peut pas placer de commentaires

Syntaxe générale

-À noter : sauf rares exceptions, toute balise -ouverte doit être refermée. Toute partie de la page doit être contenue -dans une balise. En XHTML, toutes les balises doivent -être refermées, peut-être préférez-vous dès maintenant prendre de -bonnes habitudes. +

Toutes les balises doivent être refermées.

+

Toute partie de la page doit être contenue dans (au moins) une +balise.

+

Les balises doivent être ouvertes et refermées dans l'ordre. Faites spécialement attention dans le cadre de balises imbriquées.

+

+Il ne faut donc pas écrire : +

+ 
-<P>Je vous préviens tout de suite, c'est <EM>non.</P></EM>
+<p> Je vous préviens tout de suite, c'est <em>non.</p></em>
-

Ceci n'est pas syntaxiquement correct. Il faut -refermer <em> avant <p>.

+

mais :

+ +
+<p> Je vous préviens tout de suite, c'est <em>non.</em> </p>
+
+ +

+Il faut refermer la balise <em> avant <p>, car on l'a ouverte +après. C'est le principe des poupées russes. +

-

Caractères spéciaux : entités HTML et Unicode

+

Astuce de conception

+

+Quand un texte s'étoffe, il devient très vite difficile de se rappeler +dans l'ordre toutes les balises que l'on a ouvertes, ou de tout relire +pour être sûr de ne pas en avoir oublié. Comment être sûr que l'on +emboîte bien les poupées russes ?

+ +

Voici une astuce. Écrivez dans l'ordre :

+ +
    +
  1. à gauche, la balise ouvrante ;
    2. +
  2. à droite, la balise fermante qui lui correspond ;
    3. +
  3. au milieu, le texte à insérer entre les deux balises.
    4. +
+ +

Ainsi, vous serez sûr de ne +jamais commettre d'erreur dans l'ordre de vos balises. +

+ +

Exemple : +Je mets les balises : +

+
+<p> </p>
+
+ +

+et je les remplis : +

+
+<p>Je vous préviens tout de suite, c'est <p>
+
+ +

+et je mets les balises : +

+
+<p>Je vous préviens tout de suite, c'est <em> </em> </p>
+
+ +

+et je les remplis : +

+
+<p>Je vous préviens tout de suite, c'est <em>non.</em> </p>
+

-Vous avez parfois besoin de cracatères spéciaux, qui ne peuvent pas -être (du moins facilement) saisis directement au clavier. Pour cela, -le HTML a défini des entités, qui par convention -représentent ces caractères. Par exemple, le symbole euro (€) est -&euro;, le e dans l'o (œ) s'écrit -&oelig;. +Fabuleux, non ? N'est-ce pas ridiculement simple ? +

+ + +

Caractères spéciaux : entités XHTML et Unicode

+ +

+Vous avez parfois besoin de caractères spéciaux, que l'on ne peut pas +saisir trivialement au clavier. Pour cela, le XHTML a défini des +entités, qui par convention représentent ces caractères. Par +exemple, le symbole euro (€) est &euro;, le e dans +l'o (œ) s'écrit &oelig;.

-En plus de ces entités HTML (dont vous pouvez trouver la liste chez David Madore), vous disposez des entités Unicode. Unicode est une convention dont le @@ -133,44 +282,57 @@ l'entit

Le squelette d'une page

-

Toute page HTML est contenue entre deux balises <HTML>.

+

Toute page XHTML est contenue entre deux balises <html> +(c'est-à-dire entre <html> et </html>).

+ +
+

+Remarque : les balises s'appellent bien <html> et non +<xhtml> : c'est un héritage, vous vous en doutez, du HTML. +

+
+

Le DTD

-Toute page HTML doit commencer par la déclaration du Document Type Definition (DTD), qui précise -au navigateur quelle version de HTML vous utilisez. +Toute page XHTML doit commencer par trois éléments :

+

-Il existe d'autres DTD, par exemple celui pour les frames (cadres), mais souvenez-vous qu'utiliser les -frames n'est pas une bonne idée, cf. l'excellent article « Pour en finir avec -les cadres » sur le site de l'OpenWeb Group. +Il existe d'autres DTD, par exemple celui pour les cadres (frames), mais souvenez-vous qu'utiliser les +cadres n'est pas une bonne idée ; cf. l'excellent article +« Pour en +finir avec les cadres » sur le site de l'OpenWeb Group.

@@ -178,26 +340,33 @@ Pour l'instant, notre page-squelette ressemble donc 

-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-            "http://www.w3.org/TR/html4/strict.dtd">
+<?xml version="1.0" encoding="ISO-8859-1"?>
 
-<HTML>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
+
+<html xmlns="http://www.w3.org/1999/xhtml">
 
 <!-- Ce sont des commentaires. Ils sont complètement ignorés par
-<!-- les navigateurs. Sinon, ici se trouve normalement le corps de 
+<!-- les navigateurs. Sinon, ici se trouve normalement le corps de
 <!-- votre page. -->
 
-</HTML>
+</html>
+ +

Les en-têtes

-

Le rôle des en-têtes dans une page HTML (comme dans un courrier +

Le rôle des en-têtes dans une page XHTML (comme dans un courrier électronique) est de donner des méta-informations plus ou moins -importantes. Par exemple, l'identité de l'auteur, le titre de la page, +importantes.

+ +

Par exemple, l'identité de l'auteur, le titre de la page, l'encodage, la langue utilisée, etc. Les en-têtes sont déclarées à -l'intérieur de l'élément <HEAD> (logique, non  ?). +l'intérieur de l'élément <head> (logique, non ?), +c'est-à-dire entre les balises <head> et </head>.

Le titre

@@ -207,15 +376,19 @@ navigateur graphique (Internet Explorer, Mozilla, etc.) il est affich dans la barre de titre. Il est également utilisé par les moteurs de recherche. Un bon titre est informatif (évitez les jeux de mots nazes) tout en restant relativement court. Il se déclare dans l'élément -<TITLE> qui est obligatoire. Ainsi, Jean-Paul Sartre -pourra utiliser comme titre de sa page d'accueil : +<title> qui est obligatoire.

+ +

Ainsi, Jean-Paul Sartre pourra utiliser comme titre de sa page +d'accueil : 

-<TITLE>Page Web de Jean-Paul Sartre</TITLE>
+<title> Page Web de Jean-Paul Sartre </title>
-

Les balises META

+ + +

Les balises <meta>

Elles sont facultatives, mais importantes à la fois pour le navigateur @@ -224,14 +397,11 @@ les moteurs de recherche, qui s'en servent pour indexer vos pages. Nous vous en présentons quelques-unes.

-
-À noter : les balises META sont parmi -les rares balises qui peuvent ne pas être refermées.
Auteur de la page
-<META name="author" content="Jean-Paul Sartre">
+<meta name="author" content="Jean-Paul Sartre" />

Vous pouvez déclarer plusieurs auteurs en séparant @@ -239,16 +409,16 @@ les noms par des virgules.

Encodage de la page
-
<META http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
+
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
-

Ceci déclare que votre page est du HTML et que -l'encodage est l'iso-8859-1 (alias iso-latin-1), l'encodage standard -pour l'Europe occidentale. La déclaration de l'encodage est importante -pour le navigateur.

+

Ceci déclare que votre page est du (X)HTML (là +encore, il s'agit d'un héritage...) et que l'encodage est l'iso-8859-1 +(alias iso-latin-1), l'encodage standard pour l'Europe occidentale. La +déclaration de l'encodage est importante pour le navigateur.

Langue de la page
-
<META http-equiv="Content-Language" content="fr">
+
<meta http-equiv="Content-Language" content="fr" />

Quelques codes utiles : fr pour le français, en pour l'anglais, de pour @@ -257,16 +427,16 @@ l'italien, ru pour le russe. D est utile pour les synthétiseurs vocaux des navigateurs pour aveugles (qui en déduisent comment prononcer) comme pour les navigateurs standards qui peuvent en déduire, par exemple, s'il faut utiliser des -guillemets anglo-saxons ("") ou français (« »).

+guillemets anglo-saxons ("") ou français (« »).

Mots clefs
-<META name="keywords" lang="fr" content="Philosophie, existentialisme, 
-littérature engagée">
+<meta name="keywords" lang="fr" content="Philosophie, existentialisme, 
+littérature engagée" />
-

Cette balise META est utilisée par certains moteurs de +

Cette balise meta est utilisée par certains moteurs de recherche pour indexer les pages. Ne mettez que les mots-clefs les plus significatifs, les moteurs n'aiment pas les listes trop longues. Notez au passage que vous pouvez tout à fait passer à la @@ -276,53 +446,64 @@ ligne.

Voilà, on en a fini avec les en-têtes (on n'oublie pas le -</HEAD> à la fin). On passe au cœur de votre page : ce que +</head> à la fin). On passe au cœur de votre page : ce que le lecteur va voir via son navigateur.

-

Le corps de la page est contenu entre balises <BODY>. Comment +

Le corps de la page est contenu entre balises <body>. Comment le remplir ? Vous le verrez dans les lignes suivantes.

-Important : pour tous les éléments de <BODY> il -y a une distinction importante entre les balises dites « block level » et les balises « inline -level ». Les block level sont par exemple des -paragraphes, des titres, etc. Ils forment des blocs, quoi. Les -éléments inline sont plutôt de la mise en forme, ils -s'appliquent à l'intérieur des blocs. C'est le cas des balises qui -mettent en valeur le texte, qui le renforcent. La distinction peut -vous paraître confuse mais vous comprendrez mieux ensuite. Vous pouvez -regarder par exemple la différence entre citation inline et bloc. -
+

+Important : pour tous les éléments de <body> il +y a une distinction importante entre les balises dites « block level » et les balises « inline +level ».

+ +

Les block level sont par exemple des +paragraphes, des titres, etc. Ils forment des +« blocs ». Typiquement, ils comprennent une ou plusieurs +phrases.

+ +

Les éléments inline sont plutôt de la mise en +forme, ils s'appliquent à l'intérieur des blocs. C'est le cas des +balises qui mettent en valeur le texte, qui le renforcent. Typiquement, +on les trouve à l'intérieur d'une phrase.

+ +

La distinction peut vous paraître confuse mais vous comprendrez +mieux ensuite. Vous pouvez regarder par exemple la différence entre citation inline et bloc.

Squelette entier

-

-Vous pouvez le copier-coller pour servir de modèle à vos pages Web.

+

Vous pouvez le copier-coller pour servir de modèle à vos pages +Web.

-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-            "http://www.w3.org/TR/html4/strict.dtd">
+<?xml version="1.0" encoding="ISO-8859-1"?>
 
-<HTML>
-<HEAD>
-<TITLE><!-- insérer le titre --></TITLE>
-<META name="author" content="<!-- Insérer votre nom -->">
-<META http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
-<META http-equiv="Content-Language" content="fr">
-<META name="keywords" lang="fr" content="<!-- Insérer les mots-clefs de votre page-->">
-</HEAD> 
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
-<BODY>
+<html xmlns="http://www.w3.org/1999/xhtml">
 
-<!-- Ici c'est le corps de la page -->
+<head>
+<title><!-- insérer le titre --></title>
+<meta name="author" content="<!-- Insérer votre nom -->" />
+<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
+<meta http-equiv="Content-Language" content="fr" />
+<meta name="keywords" lang="fr" content="<!-- Insérer les mots-clefs de votre page-->" />
+</head> 
 
-</BODY>
-</HTML>
+<body>
+
+<!-- Ici c'est le corps de la page -->
+
+</body>
+</html>
+

Hiérarchiser

Maintenant, il s'agit de remplir un peu votre page. Pour cela, il @@ -337,14 +518,34 @@ titre href="&url.tuteurs;logiciels/latex/">LaTeX, vous connaissez ce genre de chose (\chapter{}, \section{}, \subsection{}...). Idem pour Word avec son système de -Titre 1, Titre 2, etc. En HTML, c'est aussi simple : <H1>, -<H2>, <H3>... Ça va comme ça jusqu'à <H6>, ce qui +Titre 1, Titre 2, etc.

+ +

En XHTML, c'est aussi simple : <h1>, +<h2>, <h3>... Ça va comme ça jusqu'à <h6>, ce qui vous laisse pas mal de marge pour structurer votre document. Traditionnellement, <h1> est réservé au titre de la -page (qui peut être, ou pas, le même que le <TITLE>, à vous de +page (qui peut être, ou pas, le même que le <title>, à vous de voir).

+
+<h1>Logique transcendantale</h1>
+<!-- ... -->
+<h2>Analytique transcendantale</h2>
+<!-- ... -->
+<h3>Analytique des principes</h3>
+<!-- ... -->
+<h4>Système de tous les principes de l'entendement pur</h4>
+<!-- ... -->
+<h5>Représentation systématique de tous les principes synthétiques</h5>
+<!-- ... -->
+<h6>Les postulats de la pensée empirique en général</h6>
+<!-- ... -->
+<h6>Réfutation de l'idéalisme</h6>
+<!-- ... -->
+<h2>Dialectique transcendantale</h2>
+
+

Mettre en forme

@@ -356,57 +557,57 @@ texte.

La plus grande partie d'un texte, habituellement, c'est... du -texte. Des paragraphes de texte. En HTML, les paragraphes sont -délimités par des <P> (et </P>, évidemment). Avec la +texte. Des paragraphes de texte. En XHTML, les paragraphes sont +délimités par des <p> (et </p>, évidemment). Avec la plupart des navigateurs, les paragraphes sont rendus à la manière anglo-saxonne : alignement sur la gauche, pas d'alinéa. Il y a -généralement un espace entre deux paragraphes. +généralement une espace entre deux paragraphes.

-Pour simplement aller à la ligne, utilisez l'élément <BR>, l'un -des rares à ne pas devoir être refermé. +Pour aller simplement à la ligne, utilisez l'élément <br />.

+

Citations

Vous pouvez citer au niveau inline, soit en utilisant -directement des guillemets, soit en utilisant l'élément <Q> +directement des guillemets, soit en utilisant l'élément <q> (pour quote) : 

-<Q>Delenda Carthago</Q>, comme disait le grand Caton...
+<q>Delenda Carthago</q>, comme disait le grand Caton...

Au passage, Internet Explorer ignore purement et -simplement l'élément <Q>, donc mieux vaut utiliser directement +simplement l'élément <q>, donc mieux vaut utiliser directement les guillemets.

-

Au niveau bloc, c'est l'élément <BLOCKQUOTE> qu'il vous +

Au niveau bloc, c'est l'élément <blockquote> qu'il vous faut : 

-<P>Charles-Marie de La Condamine est un savant et explorateur
+<p>Charles-Marie de La Condamine est un savant et explorateur
 français, né à Paris en 1701. Il est admis à à l'Académie française en
-1760. Il écrit à ce sujet :</P>
+1760. Il écrit à ce sujet :</p>
 
-<BLOCKQUOTE>
-<P>
-La Condamine est aujourd'hui<BR>
-Reçu dans la troupe immortelle<BR>
-Il est bien sourd, tant mieux pour lui,<BR>
-Mais non muet, tant pis pour elle.<BR>
-</P>
-</BLOCKQUOTE>
+<blockquote>
+<p>
+La Condamine est aujourd'hui<br />
+Reçu dans la troupe immortelle<br />
+Il est bien sourd, tant mieux pour lui,<br />
+Mais non muet, tant pis pour elle.<br />
+</p>
+</blockquote>

-<BLOCKQUOTE> est généralement rendu par un bloc indenté à droite +<blockquote> est généralement rendu par un bloc indenté à droite et à gauche :

@@ -424,26 +625,29 @@ Mais non muet, tant pis pour elle.

Gras et italique

-Le HTML ne se soucie pas du rendu visuel. Pour lui, le gras et +Le XHTML ne se soucie pas du rendu visuel. Pour lui, le gras et l'italique n'existent pas à proprement parler. Mais il sait mettre en -valeur du texte. <STRONG> est utilisé pour renforcer un membre +valeur du texte.

+ +

<strong> est utilisé pour renforcer un membre de phrase, insister sur son importance. Il est donc souvent rendu par -du gras par les navigateurs. <EM> (pour -emphasize) sert également à mettre en relief un membre de -phrase. Il est plus faible que <STRONG>. Il est généralement -rendu par de l'italique.

+du gras par les navigateurs.

+ +

<em> (pour emphasize) sert également à mettre +en relief un membre de phrase. Il est plus faible que <strong>. Il +est généralement rendu par de l'italique.

Selon les règles typographiques habituelles, un mot, une citation en langue étrangère non francisée doit être mis en italique. Il ne s'agit pas ici de mettre en valeur, mais d'une convention typographique. Dans -ce cas, vous devez utiliser l'élément <I>. Vous pouvez indiquer +ce cas, vous devez utiliser l'élément <i>. Vous pouvez indiquer de quelle langue il s'agit en utilisant l'attribut lang. Exemple : 

-Selon le goût italien, les pâtes doivent être cuites <I lang="it">al dente</I>.
+Selon le goût italien, les pâtes doivent être cuites <i lang="it"> al dente </i>.

@@ -457,60 +661,62 @@ Selon le go

Définitions

-Le HTML vous permet de structurer encore davantage vos documents, -essentiellement les documents techniques. DFN (pour define) sert à indiquer un mot dont on va donner la définition, une fois pour le reste du document. Exemple : 

-<P>On dit qu'un morphisme de schémas est <DFN>étale</DFN>
+<p>On dit qu'un morphisme de schémas est <dfn>étale</dfn>
 lorsqu'il est à la fois lisse et non ramifié. En fait, il suffit pour cela
-qu'il soit à la fois <EM>plat</EM> et non ramifié.</p>
+qu'il soit à la fois <em>plat</em> et non ramifié.</p>

Titres (films, livres, etc.)

-C'est CITE qu'il faut utiliser pour les citations de titres de livres, -de films, etc. L'élément CITE est usuellement rendu par de -l'italique. Exemple : +C'est <cite> qu'il faut utiliser pour les citations de titres de +livres, de films, etc. L'élément <cite> est usuellement rendu par +de l'italique. Exemple : 

-Le film <CITE lang="it">Morte a Venezia</CITE> de Luchino Visconti est une
-adaptation de la nouvelle <CITE lang="de">Der Tod in Venedig</CITE> de
-Thomas Mann.
+Le film <cite lang="it">Morte a Venezia</cite> de Luchino
+Visconti est une adaptation de la nouvelle <cite lang="de">Der Tod
+in Venedig</cite> de Thomas Mann.

Code informatique

-CODE (que vous reverrez dans la section du texte +<code> (que vous reverrez dans la section du texte préformaté) est également un style de texte qui sert à démarquer un extrait de code informatique du texte normal. Exemple : 

-La ligne <CODE>#include &lt;stdio.h&gt;</CODE> demande au compilateur
-d'inclure dans le programme certaines informations sur la bibliothèque standard
-d'entrées-sorties.
+La ligne <code>#include &lt;stdio.h&gt;</code>
+demande au compilateur d'inclure dans le programme certaines
+informations sur la bibliothèque standard d'entrées-sorties.

Sigles et acronymes

-Les sigles peuvent être indiqués par un élément ABBR, et les acronymes (sigles -prononçables, comme ONU, OTAN, etc.) par l'élément... ACRONYM. Ces éléments sont -intéressants surtout si on utilise leur attribut title : certains -navigateurs peuvent alors afficher le contenu de title dans une bulle -d'aide. Démonstration : +Les sigles peuvent être indiqués par un élément <abbr>, et les +acronymes (sigles prononçables, comme ONU, OTAN, etc.) par +l'élément... <acronym>. Ces éléments sont +intéressants surtout si on utilise leur attribut title : +certains navigateurs peuvent alors afficher le contenu de +title dans une bulle d'aide. Démonstration : 

-L'<ACRONYM lang="en" title="United Nations Special
-Commission">UNSCOM</ACRONYM> a été créée pour assister l'<ABBR lang="en"
-title="International Atomic Energy Agency">IAEA</ABBR> en Iraq.
+L'<acronym lang="en" title="United Nations Special
+Commission">UNSCOM</acronym> a été créée pour assister
+l'<abbr lang="en" title="International Atomic Energy
+Agency">IAEA</abbr> en Iraq.

@@ -528,27 +734,32 @@ L'UNSCOM

Listes

-

-Il y a 3 sortes de listes possibles en HTML. Les listes numérotées, -les listes non numérotées et les listes de définitions -(lexiques). Toutes les listes sont des éléments blocs. -

+

Il y a trois sortes de listes possibles en XHTML :

+ + + +

Toutes les listes sont des éléments blocs.

Listes non numérotées

Elles sont aussi dites « listes à puces » car souvent les navigateurs affichent des puces devant chaque entrée de -liste. <UL> et </UL> (pour Unordered -Lists) marquent le début et la fin d'une liste, <LI> et -</LI> le début et la fin d'une entrée de liste. Exemple, -quelques armes de Goldorak  

+liste. <ul> et </ul> (pour Unordered +Lists) marquent le début et la fin d'une liste, <li> et +</li> le début et la fin d'une entrée de liste.

+ +

En exemple, voici quelques armes de Goldorak : 

-<UL> 
-<LI> mégavolts</LI>
-<LI> cornofulgure</LI>
-<LI> astéro-hache</LI>
-</UL>
+<ul> 
+<li> mégavolts</li>
+<li> cornofulgure</li>
+<li> astéro-hache</li>
+</ul>

Ce qui donne :

@@ -561,19 +772,19 @@ quelques armes de Goldorak

Listes numérotées

-

Même principe, avec <OL> (Ordered Lists) à -la place de <UL>. La numérotation se fera par défaut en chiffres +

Même principe, avec <ol> (Ordered Lists) à +la place de <ul>. La numérotation se fera par défaut en chiffres arabes (1, 2, 3...). Vous pouvez changer le type de numérotation, en chiffres romains ou en caractères alphabétiques (a, b, c...) grâce à -l'attribut TYPE : +l'attribut type : 

-<OL type="i">
-<LI> mégavolts</LI>
-<LI> cornofulgure</LI>
-<LI> astéro-hache</LI>
-</OL>
+<ol type="i">
+<li> mégavolts</li>
+<li> cornofulgure</li>
+<li> astéro-hache</li>
+</ol>

Ce qui donne :

@@ -584,31 +795,32 @@ l'attribut TYPE
  • astéro-hache
    • -

    Pour changer de numérotations, changez la valeur de TYPE : I -pour les chiffres romains majuscules, a pour les caractères -alphabétiques minuscules, A pour les majuscules.

    +

    Pour changer de numérotations, changez la valeur de +type : I pour les chiffres romains majuscules, a pour les +caractères alphabétiques minuscules, A pour les majuscules.

    Lexiques

    -On utilise l'élément DL (Definition list). À -l'intérieur de l'élément DL, DT (pour definition -term) est une entrée du lexique, et DD (pour definition definition...) la définition associée à cette -entrée. Admettons que vous fassiez un lexique du folklore normalien. +On utilise l'élément <dl> (Definition list). À +l'intérieur de l'élément <dl>, <dt> (pour definition term) est une entrée du lexique, et <dd> +(pour definition definition...) la définition associée +à cette entrée. Admettons que vous fassiez un lexique du folklore +normalien. 

    -<DL>
+<dl>
 
-     <DT>Amazon</DT>
-          <DD>Flipper mythique de la K-fêt, arrivé à l'École en 1990.</DD>
+     <dt>Amazon</dt>
+          <dd>Flipper mythique de la K-fêt, arrivé à l'École en 1990.</dd>
 
-     <DT>Fun machine</DT>
-          <DD>L'autre flipper, qui ne sert comme son nom l'indique qu'à se dérouiller les 
-	  doigts ou à tuer le temps en attendant de jouer à l'Amazon.</DD>
+     <dt>Fun machine</dt>
+          <dd>L'autre flipper, qui ne sert comme son nom l'indique qu'à se dérouiller les 
+	  doigts ou à tuer le temps en attendant de jouer à l'Amazon.</dd>
 
-</DL>
+</dl>

    Ce qui donne :

    @@ -624,25 +836,24 @@ l'Amazon.

    Texte préformaté

    -

    On utilise l'élément <PRE> pour du texte préformaté au niveau -bloc. Différences avec du texte normal : les navigateurs -respectent toutes les espaces que vous avez indiqués et ils utilisent -généralement une fonte à espacement fixe. Le texte préformaté peut -être utilisé pour mettre en page un poème, par exemple, ou plus -prosaïquement, du code informatique. Attention toutefois, PRE n'est -pas l'environnement verbatim de LaTeX : le code HTML -y est interprété. Dans cette documentation, par exemple, on a recours -aux entités pour représenter <, > et -&. +

    On utilise l'élément <pre> pour du texte préformaté au niveau +bloc. Différences avec du texte normal : les navigateurs respectent +toutes les espaces que vous avez indiqués et ils utilisent généralement +une fonte à espacement fixe. Le texte préformaté peut être utilisé pour +mettre en page un poème, par exemple, ou plus prosaïquement, du code +informatique.

    + +

    Attention toutefois, <pre> n'est pas l'environnement +verbatim de LaTeX : le code XHTML y est interprété. Dans +cette documentation, par exemple, on a recours aux entités pour représenter <, > et &.

    Prenons un exemple, un programme très simple en -langage C (pour les littéraires, recopiez ça dans un fichier -hello.c, faites gcc hello.c puis -./a.out et regardez) :

    +langage C :

    -<PRE>
+<pre>
 #include &lt;stdio.h&gt;
 
 int main(void)
@@ -650,7 +861,7 @@ int main(void)
     printf("Hello, world!\n");
     return 0;
 }
-</PRE>
+</pre>

    sera rendu par :

    @@ -665,22 +876,28 @@ int main(void) } +

    +(pour les littéraires, recopiez ça dans un fichier +hello.c, faites gcc hello.c puis +./a.out et regardez). +

    +

    Pour citer du code en inline, utilisez la bien-nommée -balise <CODE> +balise <code>.

    Images

    -On se sert de l'élément <IMG> (pour image, bien sûr) et -de ses attributs. Cet élément n'a pas besoin d'être -refermé. L'attribut plus important est src : il permet de -spécifier l'adresse où aller chercher l'image. Ainsi, quand on écrit -son fichier ~/www/index.html pour inclure une image -située dans son répertoire ~/www/images/, on écrira :

    +On se sert de l'élément <img /> (pour image, bien +sûr) et de ses attributs. Le principal attribut est +src : il permet de spécifier l'adresse où aller +chercher l'image. Ainsi, quand on écrit son fichier +~/www/index.html pour inclure une image située dans son +répertoire ~/www/images/, on écrira :

    -<IMG src="images/monimage.jpg">
+<img src="images/monimage.jpg" />

    On peut aussi indiquer une adresse @@ -688,21 +905,25 @@ situ exemple :

    -<IMG src="http://www.eleves.ens.fr/tuteurs/icones/note.png">
+<img src="http://www.eleves.ens.fr/tuteurs/icones/note.png" />

    Il est obligatoire d'indiquer une description de votre image, en guise de texte alternatif pour les navigateurs texte, ou si pour une -raison quelconque l'image ne peut pas être téléchargée. Ce texte doit -être court et informatif. On l'indique avec l'attribut ALT : +raison quelconque l'image ne peut pas être téléchargée ; le texte +alternatif sert, en particulier, pour les non-voyants qui disposent de +logiciels pour lire du texte à haute voix, mais n'ont rien pour décrire +des images. Ce texte doit être court et informatif. On l'indique avec +l'attribut alt : 

    -<IMG src="images/pouf.jpg" alt="Photo de moi et mon chien Pouf en vacances">
+<img src="images/pouf.jpg" alt="Photo de moi et mon chien Pouf en vacances" />
    -

    Si l'image ne joue aucun rôle sémantique (elle est -là uniquement pour décorer, on indique alt="").

    +

    Si l'image ne joue aucun rôle sémantique +(c'est-à-dire si elle n'est là que pour décorer), on indique +alt="".

    Les formats les plus couramment utilisés pour le Web sont le JPEG, en .jpg et le GIF, en .gif @@ -716,24 +937,25 @@ mani

    Tableaux

    -Les tableaux sont décrits par l'élément <TABLE>. C'est l'un des chapitres -les plus complexes du HTML : les possibilités sont très nombreuses. +Les tableaux sont décrits par l'élément <table>. C'est l'un des +chapitres les plus complexes du XHTML : les possibilités sont très +nombreuses.

    Un tableau simple

    -

    <TABLE> définit l'ensemble du tableau. À l'intérieur, il faut décrire -les lignes du tableau et ses cellules. L'élément <TR> décrit les lignes, -et <TD> les cellules. On déclare dans l'ordre <TABLE>, puis -<TR> et enfin <TD>. +

    <table> définit l'ensemble du tableau. À l'intérieur, il faut décrire +les lignes du tableau et ses cellules. L'élément <tr> décrit les lignes, +et <td> les cellules. On déclare dans l'ordre <table>, puis +<tr> et enfin <td>. 

    -<TABLE>
-<TR><TD> Cellule 1 </TD><TD> Cellule 2 </TD></TR>
-<TR><TD> Cellule 3 </TD><TD> Cellule 4 </TD></TR>
-<TR><TD> Cellule 5 </TD><TD> Cellule 6 </TD></TR>
-</TABLE>
+<table>
+<tr><td> Cellule 1 </td><td> Cellule 2 </td></tr>
+<tr><td> Cellule 3 </td><td> Cellule 4 </td></tr>
+<tr><td> Cellule 5 </td><td> Cellule 6 </td></tr>
+</table>

    Ce qui donne :

    @@ -749,17 +971,17 @@ et <TD> les cellules. On d

    Un tableau plus évolué

    -On peut déjà commencer par donner un titre à ce tableau, grâce à l'élément -CAPTION. Le titre du tableau se place soit au début du tableau, avant la -première ligne (avant le premier <TR>) mais dans le tableau tout de même -(donc après la déclaration de <TABLE>). +On peut déjà commencer par donner un titre à ce tableau, grâce à +l'élément <caption>. Le titre du tableau se place au début du +tableau, avant la première ligne (avant le premier <tr>) mais dans +le tableau tout de même (donc après la déclaration de <table>).

    On veut également différencier des méta-cellules, qui donnent des informations sur le contenu des cellules de données, des cellules de données à proprement parler. Les cellules de données, c'est bien sûr -<TD>, et les méta-cellules, c'est l'élément <TH> (le H +<td>, et les méta-cellules, c'est l'élément <th> (le H étant pour header, en-tête) qui s'en charge.

    @@ -772,13 +994,13 @@ pixels. G 

    -<TABLE border=1>
-<CAPTION>Ceci est un tableau</CAPTION>
-<TR><TH> Colonne gauche </TH><TH> Colonne droite</TH></TR>
-<TR><TD> Cellule 1 </TD><TD> Cellule 2</TD></TR>
-<TR><TD> Cellule 3 </TD><TD> Cellule 4</TD></TR>
-<TR><TD> Cellule 5 </TD><TD> Cellule 6</TD></TR>
-</TABLE>
+<table border=1>
+<caption>Ceci est un tableau</caption>
+<tr><th> Colonne gauche </th><th> Colonne droite</th></tr>
+<tr><td> Cellule 1 </td><td> Cellule 2</td></tr>
+<tr><td> Cellule 3 </td><td> Cellule 4</td></tr>
+<tr><td> Cellule 5 </td><td> Cellule 6</td></tr>
+</table>

    Donc :

    @@ -794,10 +1016,10 @@ pixels. G

    Liens

    -

    Le meilleur pour la fin, les liens ! Ce qui fait d'une page -Web une vraie page hypertexte (le H de HTML) et pas d'un bête -document. Les liens se décrivent avec l'élément A (qui est, bien sûr, -inline), suivi d'attributs. +

    Le meilleur pour la fin, les liens ! Ce qui fait d'une page Web une +vraie page hypertexte (le HT de XHTML) et pas un bête document. Les +liens se décrivent avec l'élément <a> (qui est, bien sûr, inline), suivi d'attributs.

    Lien simple

    @@ -805,7 +1027,7 @@ document. Les liens se d

    Le lien de base utilise l'attribut href :

    -Retourner au <A href="http://www.eleves.ens.fr/">serveur des élèves</A>.
+Retourner au <a href="http://www.eleves.ens.fr/">serveur des élèves</a>.

    donne ainsi :

    @@ -817,7 +1039,7 @@ Retourner au serveur des

    On peut utiliser des liens absolus, comme celui ci-dessus, qui donne l'ensemble de l'URL, mais aussi des liens relatifs, qui sont relatifs à l'arborescence de votre site. Admettons que vous ayez dans -voter répertoire ~/www/ un répertoire stage +votre répertoire ~/www/ un répertoire stage qui contient, entre autres, le fichier rapport.html. Pour faire un lien dessus, depuis la page d'accueil, ça donnera :

    @@ -832,18 +1054,18 @@ la lune.

    Une ancre sert à faire un lien local, c'est-à-dire vers un endroit précis du document. C'est particulièrement utile pour faire une table des matières avec des liens qui pointent vers les titres, ou -encore pour faire des cross-références dans un document. +encore pour faire des références croisées dans un document.

    On commence par définir les ancres, c'est-à-dire les endroits vers -lesquels on veut pointer. On utilise l'attribut NAME de l'élément -A : +lesquels on veut pointer. On utilise l'attribut name de +l'élément <a> : 

    -Les <A name="olm">Olmèques</A> ont véritablement existé. C'est la première 
-des grandes civilisations précolombiennes...
+Les <a name="olm">Olmèques</a> ont véritablement
+existé. C'est la première des grandes civilisations précolombiennes...

    Quand vous lisez le document avec un navigateur, @@ -853,30 +1075,31 @@ caract la même ancre au sein du document.

    Pour faire le lien vers cette ancre, on utilise toujours l'attribut -HREF, mais en modifiant la syntaxe avec un # :

    +href, mais en modifiant la syntaxe avec un +# :

     Esteban, Zia et Tao rencontrent alors les Olmèques, une peuplade
-extra-terrestre (voir ici la <A href="#olm">véritable histoire
-du peuple olmèque</A>.
+extra-terrestre (voir ici la <a href="#olm">véritable histoire
+du peuple olmèque</a>.

    Vous pouvez positionner un lien vers cette ancre même depuis un autre fichier :

    -Voir <A href="citesdor.html#olm">l'histoire des Olmèques</A>.
+Voir <a href="citesdor.html#olm">l'histoire des Olmèques</a>.

    Liens spéciaux

    -Vous pouvez créer un lien de telle sorte que, lorsqu'on suit ce lien, -on vous envoie un courrier électronique. On utilise toujours l'élément -A et son attribut href. Seulement, le protocole du lien -change. Auparavant c'étaient des liens HTTP (Web). Mais vous pouvez -aussi utiliser le protocole mailto, qui est le protocole des courriers -électroniques. +Vous pouvez créer un lien de telle sorte que, lorsqu'on suit ce lien, on +vous envoie un courrier électronique. On utilise toujours l'élément +<a> et son attribut href. Seulement, le protocole du +lien change. Auparavant c'étaient des liens HTTP (Web). Mais vous pouvez +aussi utiliser le protocole mailto, qui est le protocole +des courriers électroniques. 

    @@ -900,7 +1123,7 @@ pour un tiret (-). Ce qui donne
 
    
 
 
    -Mon adresse : <A href="mailto:jean&#45;paul&#46;sartre@ens.fr">jean&#45;paul&#46;sartre&#64;ens&#46;fr</a>
+Mon adresse : <a href="mailto:jean&#45;paul&#46;sartre@ens.fr">jean&#45;paul&#46;sartre&#64;ens&#46;fr</a>
 
    
 
 
    Complètement illisible, on est bien d'accord ? C'est ce que verra
@@ -909,7 +1132,7 @@ par un navigateur verra ceci
 
    
 
 
    -Mon adresse :  <A href="mailto:jean-paul.sartre@ens.fr">jean-paul.sartre@ens.fr</a>
+Mon adresse :  <a href="mailto:jean-paul.sartre@ens.fr">jean-paul.sartre@ens.fr</a>
 
    
 
 
    Vous pouvez utiliser ce système avec d'autres protocoles, celui des
@@ -920,18 +1143,18 @@ capable) le message dont vous avez donn
 
    Et pour la fin
    
 
 
    
-Vous avez fini de taper votre première page HTML. Vous vous êtes bien
-relu. Il vous reste une dernière étape : passer cette page au
-validateur HTML. Il vous permettra de voir si vous avez bien refermé
+Vous avez fini de taper votre première page XHTML. Vous vous êtes bien
+relu. Il vous reste une dernière étape : passer cette page au
+validateur XHTML. Il vous permettra de voir si vous avez bien refermé
 toutes vos balises dans l'ordre qu'il faut, par exemple.
 
    
 
 
    
 Il vous suffit d'aller dire coucou au validateur du W3C et de lui
-indiquer l'URL de votre page HTML, ou encore de lui indiquer le chemin
-du fichier sur votre disque dur. Vous saurez tout de suite si votre
-code est bon ou s'il reste quelques corrections à faire...
+href="http://validator.w3.org/">validateur du W3C et de lui indiquer
+l'URL de votre page XHTML, ou encore de lui indiquer le chemin du
+fichier sur votre disque dur. Vous saurez tout de suite si votre code
+est bon ou s'il reste quelques corrections à faire...
 
    
 
 
    
@@ -941,8 +1164,9 @@ dire que votre fichier est syntaxiquement correct, mais pas
 s'il est sémantiquement correct.
 
    
 
-
    Auteur : Marie-Lan Nguyen. Dernière
-modification : .
    
+
    Auteurs : Marie-Lan Nguyen (HTML),
+Baptiste Mélès (XHTML). Dernière
+modification : .
    
 
 
 
diff --git a/internet/web/html/index.tml b/internet/web/html/index.tml
index 60ffcf5..b189390 100644
--- a/internet/web/html/index.tml
+++ b/internet/web/html/index.tml
@@ -4,7 +4,7 @@
   "tuteurs://DTD/tml.dtd">
 
   
-    HTML
+    XHTML
   
 
   
@@ -13,34 +13,35 @@
 
 
    
 Vous trouverez ici une introduction aux différents langages servant à
-écrire une page Web : le HTML, bien sûr, mais aussi les feuilles de style
+écrire une page Web : le XHTML, bien sûr, mais aussi les feuilles de style
 (CSS).
 
    
 
 
    
 Si vous êtes pressé, vous pouvez aller directement lire notre Tutoriel HTML. Pour des questions plus avancées,
+href="bases.html">Tutoriel XHTML. Pour des questions plus avancées,
 vous pouvez poser vos questions sur Forum, dans le groupe
 informatique.html.
 
    
 
-
    Au commencement était le HTML
    
+
    Au commencement était le XHTML
    
 
 
    
-Le HTML (HyperText Mark-up Language) est le langage
-des pages Web. Il a été créé en 1992, et son développement actuel est
-l'œuvre du W3C, un consortium regroupant les
-principaux acteurs du Web (Microsoft, AOL, Opera, IBM, Apple ou encore
+Le XHTML (eXtended HyperText Mark-up Language) est le
+langage des pages Web. Il succède au HTML, créé en 1992, et est conforme
+aux normes du XML (eXtensible Mark-up Language). Son
+développement actuel est l'œuvre du W3C, un consortium regroupant les principaux
+acteurs du Web (Microsoft, AOL, Opera, IBM, Apple ou encore
 MacroMedia). À l'heure actuelle, nous en sommes à HTML 4.01 qui remonte à
-fin 1999.
+href="http://www.w3.org/TR/xhtml1/">XHTML 1.0.
 
    
 
 
    
-La structure de base du HTML, ce sont les balises
+La structure de base du XHTML, ce sont les balises
 (tags en anglais) qui définissent les éléments de
 la page Web qu'ils entourent. Voici un exemple de balise :
 
    
@@ -65,12 +66,12 @@ valeur, ce qui est g
 
    
 
 
    
-Vous pouvez écrire du HTML avec un simple éditeur de texte comme NEdit, ou avec un
 éditeur WYSIWYG (ce
 que vous voyez à l'écran est ce qui sera affiché sur le Web) comme
-Composer, l'éditeur Web de Mozilla. C'est un langage facile à
-apprendre, qui ne nécessite aucune connaissance préalable en
+Composer, l'éditeur Web de Mozilla. C'est un langage facile à apprendre,
+qui ne nécessite aucune connaissance préalable en
 programmation. Évidemment, plus vous voulez faire des choses
 tape-à-l'œil, plus c'est compliqué.
 
    
@@ -115,34 +116,32 @@ un autre ordinateur, un autre traitement de texte ou un autre r
 
    
 
 
-
    Le fond : le HTML
    
+
    Le fond : le XHTML
    
 
 
    
-Le principe de base du HTML est qu'il se préoccupe du contenu
+Le principe de base du XHTML est qu'il se préoccupe du contenu
 et non du rendu visuel. Si vous avez fait un peu de LaTeX, 
-cette manière de travailler devrait vous être familière. Les
-« styles » de Word s'en approchent également. Vous définissez des
-titres, des éléments importants, des citations, des liens. Tout le
-côté décoratif (savoir si la police de caractères fera telle ou telle
-taille, si votre texte sera en rouge ou bleu, etc.) est dévolu aux
-feuilles de style.
+href="&url.tuteurs;logiciels/latex/">LaTeX, cette manière de
+travailler devrait vous être familière. Les « styles » de Word s'en
+approchent également. Vous définissez des titres, des éléments
+importants, des citations, des liens. Tout le côté décoratif (savoir si
+la police de caractères fera telle ou telle taille, si votre texte sera
+en rouge ou bleu, etc.) est dévolu aux feuilles de style.
 
    
 
 
    La forme : les feuilles de style
    
 
 
    
 CSS est le langage des feuilles de style. Ciel, un autre langage à
-apprendre ! Rassurez-vous, CSS est complémentaire du HTML. CSS1 est
+apprendre ! Rassurez-vous, CSS est complémentaire du XHTML. CSS1 est
 apparu en 1996. CSS2, qui prend le relais, est lui apparu en 1998. À
-l'heure actuelle, c'est CSS2.1 (septembre 2003) qui
-fait autorité.
+l'heure actuelle, c'est CSS2.1
+(septembre 2003) qui fait autorité.
 
    
 
 
    
 Les feuilles de style sont une manière simple de prendre en
-charge le côté esthétique d'une page Web. Tandis que le HTML ne
+charge le côté esthétique d'une page Web. Tandis que le XHTML ne
 s'occupe que de la structure syntaxique de la page, CSS ajoute à votre
 gré couleurs, fontes exotiques, effets de texte. Cette dissociation
 des rôles permet de ne pas pénaliser les vieux navigateurs, ou les
@@ -163,7 +162,7 @@ conseillons de
 
 
    
 
@@ -189,7 +188,9 @@ meilleurs moyen pour d
 Si vous n'avez pas le temps ou l'envie, essayez nos Thèmes : un kit comprenant un fichier-type en
 HTML et des feuilles de style déjà toutes faites. Vous pouvez ainsi
-avoir un joli site en 2 coups de cuiller à pot.
+avoir un joli site en 2 coups de cuiller à pot. (Malheureusement, le
+fichier-type est en HTML : nous ne l'avons pas encore converti en
+XHTML, mais cela viendra.)
 
    
 
 
    Ressources sur le Web
    
@@ -200,10 +201,10 @@ avoir un joli site en 2 coups de cuiller 
 
 
  •  le site Web du W3C
    • 
 
-
  •  la spécification de HTML 4.01, la version actuelle du HTML
- : en anglais (seule
-version normative), ou la traduction
+
  •  la spécification de XHTML 1.0, la version actuelle
+du XHTML : en anglais
+(seule version normative), ou la traduction
 française
    • 
 
 
  •  la spécification de CSS 2.1, le langage des feuilles de
@@ -280,7 +281,7 @@ vous pataugez un peu avec les feuilles de style.
    • 
 
 
 
    Auteur : Marie-Lan Nguyen.
-Dernière modification le 
+Dernière modification le