Ajout d'un nouveau lien dans index.html

Toilettage de bases.tml + renommage ("Bases" -> "Tutoriel") + ajout de nouvelles balises (acronym, abbr, code, i). Si quelqu'un veut rectifier mon exemple de "hello world" en C, il paraît que ce n'est pas du C ANSI...
2004-02-20 13:26:19 +00:00 · 2004-02-20 13:26:19 +00:00 · 12584d4a2d
commit 12584d4a2d
parent 2d1d22ea12
2 changed files with 292 additions and 157 deletions
--- a/internet/web/html/bases.tml
+++ b/internet/web/html/bases.tml
@ -4,39 +4,46 @@
  "tuteurs://DTD/tml.dtd">
 <html>
  <head>
-    <title>Bases</title>
+    <title>Tutoriel</title>
  </head>
  <body>
-    <h1>Tutorial HTML : les bases</h1>
+    <h1>Tutoriel HTML : les bases</h1>
 <h2>Principes généraux</h2>
 <p>
-Le HTML est le langage des pages Web. Ce n'est pas un langage de
+Le <abbr title="HyperText Mark-Up Language">HTML</abbr> est le langage
-programmation, mais plutôt un langage de mise en forme de données. Une
+des pages Web. Ce n'est pas un langage de programmation, mais un
-page Web décrit une structure statique, tandis qu'un programme est un
+langage de mise en forme de données : une page Web décrit une
-processus dynamique. « HTML » se prononce H-T-M-L, mais vous pouvez
+structure statique, tandis qu'un programme est un processus
-aussi dire « chteumeuleu » :-)
+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 » :-)
 </p>
 <p>
-Le HTML sert à définir la structure logique d'un document, permettant
+Le HTML sert à définir la <strong>structure logique</strong> d'un
-ensuite à un navigateur (Internet Explorer, Netscape, Mozilla, Opera,
+document, permettant ensuite à un navigateur (Internet Explorer,
-etc.) de rendre visuellement le document. Pour des raisons évidentes
+Netscape, Mozilla, Opera, etc.) de rendre visuellement le
-de compatibilité, le HTML possède une norme, rédigée par le World Wide
+document. Pour des raisons évidentes d'interopérabilité, le HTML
-Web Consortium. Nous en sommes actuellement à <a
+possède une norme, rédigée par le World Wide Web Consortium
-href="http://www.w3.org/TR/html4/">HTML 4</a>. 
+(<abbr>W3C</abbr>), qui regroupe des acteurs majeurs du Web comme
 Microsoft, MacroMedia (qui produit Flash), Apple, AOL, etc. Nous en
 sommes actuellement à <a href="http://www.w3.org/TR/html4/">HTML
 4.1</a>.
 </p>
-<div class="attention">Le HTML normalement ne s'occupe que de définir
+<div class="attention"><strong>Attention</strong> : le HTML ne
-la structure logique de votre document. Pour le reste (aspect visuel
+s'occupe que de définir la structure logique de votre document. Pour
-agréable : couleurs, tailles des fontes, etc.), c'est le domaine des
+l'aspect visuel (mise en page, couleurs, fontes, etc.), c'est le
-feuilles de style, dont le tutorial va venir.
+domaine des feuilles de style, dont le <a href="css.tml">tutoriel</a>
 est en cours de rédaction.
 </div>
-<p>L'élément de base d'un site est la page. C'est un fichier dont
+<p>
 L'élément de base d'un site est la page. C'est un fichier dont
 l'extension est normalement <code>.html</code> (ou <code>.htm</code>
 si votre système d'exploitation vous impose cette limitation) et qui
 contient du code HTML.
@ -45,13 +52,14 @@ contient du code HTML.
 <h3><a name="voc">Vocabulaire : éléments, attributs</a></h3>
 <p>
-Le HTML utilise des balises (aussi appelées « éléments ») pour
+Le HTML utilise des <strong>balises</strong> (aussi appelées
-distinguer les éléments logiques de la page. Toute balise est de forme
+« éléments ») pour distinguer les éléments logiques de la page. Toute
-&lt;TAGADA&gt;, avec un &lt; et un &gt;. Les balises se referment avec
+balise est de forme &lt;TAGADA&gt;, avec un &lt; et un &gt;. Les
-&lt;/TAGADA&gt;, / étant l'élément fermant. Les balises acceptent
+balises se referment avec &lt;/TAGADA&gt;, / étant l'élément
-parfois des options, qu'on appelle des « attributs »&nbsp;: dans
+fermant. Les balises acceptent parfois des options, qu'on appelle des
-&lt;TAGADA type="plouf"&gt;, TAGADA est l'élément, <code>type</code>
+<strong>attributs</strong> : dans &lt;TAGADA type="plouf"&gt;,
-l'attribut, et « plouf » la valeur de l'attribut.
+TAGADA est l'élément, <code>type</code> l'attribut, et « plouf » la
 valeur de l'attribut.
 </p>
 <h3>Casse</h3>
@ -60,47 +68,61 @@ l'attribut, et
 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. Attention néanmoins, le XHTML, une forme
+ce que nous ferons ici.
 avancée de langage de description, n'utilise que les
 minuscules. Peut-être préférerez-vous en prendre dès aujourd'hui
 l'habitude.
 </p>
 <div class="encadre">
 <strong>À noter</strong> : le <abbr title="eXtended HyperText
 Mark-Up Language">XHTML</abbr>, une forme avancée de langage de
 description qui est l'avenir du HTML, n'utilise que les
 <em>minuscules</em>. Peut-être préférerez-vous en prendre dès
 aujourd'hui l'habitude.
 </div>
 <h3>Commentaires</h3>
 <p>Les commentaires s'insèrent entre &lt;!-- et --&gt;. Attention, à
 l'intérieur de commentaires, il vaut mieux ne pas utiliser de doubles
-tirets (--). On ne peut pas placer de commentaires à l'intérieur d'un 
+tirets (--). On ne peut pas placer de commentaires à l'intérieur d'un
-élément. 
+élément.
 </p>
 <h3>Syntaxe générale</h3>
-<div class="attention">Sauf rares exceptions, toute balise ouverte
+<div class="encadre">
-doit être refermée. Toute partie de la page doit être contenue dans
+<strong>À noter</strong> : sauf rares exceptions, toute balise
-une balise.</div>
+ouverte doit être refermée. Toute partie de la page doit être contenue
 dans une balise. En XHTML, <strong>toutes</strong> les balises doivent
 être refermées, peut-être préférez-vous dès maintenant prendre de
 bonnes habitudes.
 </div>
-<p>Les balises doivent être ouvertes et refermées dans l'ordre. Faites
+<p>Les balises doivent être ouvertes et refermées <em>dans
-spécialement attention dans le cadre de balises imbriquées. Ainsi, 
+l'ordre</em>. Faites spécialement attention dans le cadre de balises
 imbriquées.
 </p>
 <pre>
 &lt;P&gt;Je vous préviens tout de suite, c'est &lt;EM&gt;non.&lt;/P&gt;&lt;/EM&gt;
 </pre>
-<p class="continue">n'est pas syntaxiquement correct. Il faut refermer
+<p class="continue">Ceci n'est pas syntaxiquement correct. Il faut
-&lt;em&gt; avant &lt;p&gt;.</p>
+refermer &lt;em&gt; avant &lt;p&gt;.</p>
-<h3><a name="entities">Entités HTML et Unicode</a></h3>
+<h3><a name="entities">Caractères spéciaux : entités HTML et Unicode</a></h3>
 <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 <em>entités</em>, qui par convention représentent
+le HTML a défini des <dfn>entités</dfn>, qui par convention
-ces caractères. Par exemple, le symbole euro (&euro;) est
+représentent ces caractères. Par exemple, le symbole euro (&euro;) est
-&amp;euro;. En plus de ces entités HTML (dont vous pouvez trouver la
+<code>&amp;euro;</code>, le e dans l'o (&oelig;) s'écrit
-<a
+<code>&amp;oelig;</code>.
 </p>
 <p>
 En plus de ces entités HTML (dont vous pouvez trouver la <a
 href="http://www.eleves.ens.fr:8080/home/madore/computers/unicode/htmlent.html">liste</a>
 chez David Madore), vous disposez des entités Unicode. <a
 href="http://www.unicode.org/">Unicode</a> est une convention dont le
@ -116,38 +138,48 @@ l'entit
 <h3>Le DTD</h3>
 <p>
-Toute page HTML doit commencer par la déclaration du DTD (<em
+Toute page HTML doit commencer par la déclaration du <i
-lang="en">Document Type Definition</em>), qui précise au navigateur
+lang="en">Document Type Definition</i> (<abbr>DTD</abbr>), qui précise
-quelle version de HTML vous utilisez.
+au navigateur quelle version de HTML vous utilisez.
 </p>
-<p>
+<ul>
-Le DTD le plus fréquent à l'heure actuelle est celui du HTML 4
+
-transitionnel (le « transitionnel » veut dire que vous utiliserez des
+<li> <strong>HTML 4 strict</strong>, qui respecte parfaitement la
-éléments considérés comme obsolètes mais qui sont encore
+distinction fond (HTML) / forme (CSS) :
-supportés)&nbsp;:
+
-</p>
+<pre>
 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd"&gt;
 </pre>
 </li>
 <li> <strong>HTML 4 transitionnel</strong>, qui supporte encore des
 attributs ou éléments obsolètes :
 <pre>
 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd"&gt;
 </pre>
-
+</li>
-<p class="continue">Il existe d'autres DTD, tel que celui pour les
+</ul>
 pages utilisant des <em lang="en">frames</em> (alias « cadres ») :</p>
 <pre>
 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
            "http://www.w3.org/TR/html4/frameset.dtd"&gt;
 </pre>
 <p class="continue">
-Pour l'instant, notre page-squelette ressemble donc à ceci&nbsp;:
+Il existe d'autres DTD, par exemple celui pour les <i
 lang="en">frames</i> (cadres), mais souvenez-vous qu'utiliser les
 frames n'est pas une bonne idée, cf. l'excellent article « <a
 href="http://openweb.eu.org/articles/finir_cadres/">Pour en finir avec
 les cadres</a> » sur le site de l'<a
 href="http://openweb.eu.org/">OpenWeb Group</a>.
 </p>
 <p class="continue">
 Pour l'instant, notre page-squelette ressemble donc à ceci :
 </p>
 <pre>
-&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-            "http://www.w3.org/TR/html4/loose.dtd"&gt;
+            "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;HTML&gt;
@ -192,8 +224,9 @@ les moteurs de recherche, qui s'en servent pour indexer vos
 pages. Nous vous en présentons quelques-unes.
 </p>
-<div class="attention">Les balises <code>META</code> sont parmi les
+<div class="encadre">
-rares balises qui peuvent ne pas être refermées.</div>
+<strong>À noter</strong> : les balises <code>META</code> sont parmi
 les rares balises qui peuvent ne pas être refermées.</div>
 <h5>Auteur de la page</h5>
@ -217,7 +250,7 @@ pour le navigateur.</p>
 <pre>&lt;META http-equiv="Content-Language" content="fr"&gt;</pre>
-<p class="continue">Quelques codes utiles&nbsp;: <code>fr</code> pour
+<p class="continue">Quelques codes utiles : <code>fr</code> pour
 le français, <code>en</code> pour l'anglais, <code>de</code> pour
 l'allemand, <code>es</code> pour l'espagnol, <code>it</code> pour
 l'italien, <code>ru</code> pour le russe. Déclarer la langue utilisée
@ -250,16 +283,18 @@ le lecteur va voir <em>via</em> son navigateur.
 <p>Le corps de la page est contenu entre balises &lt;BODY&gt;. Comment
 le remplir ? Vous le verrez dans les lignes suivantes.</p>
-<div class="encadre">Pour tous les éléments de &lt;BODY&gt; il y a une
+<div class="encadre">
-distinction importante entre les balises dites « <em>block
+<strong>Important</strong> : pour tous les éléments de &lt;BODY&gt; il
-level</em> » et les balises « <em>inline level</em> ». Les <em>block
+y a une distinction importante entre les balises dites « <i
-level</em> sont par exemple des paragraphes, des titres, etc. Ils
+lang="en">block level</i> » et les balises « <i lang="en">inline
-forment des blocs, quoi. Les éléments <em>inline</em> sont plutôt de
+level</i> ». Les <i lang="en">block level</i> sont par exemple des
-la mise en forme, ils s'appliquent à l'intérieur des blocs. C'est le
+paragraphes, des titres, etc. Ils forment des blocs, quoi. Les
-cas des balises qui mettent en valeur le texte, qui le renforcent. La
+éléments <i lang="en">inline</i> sont plutôt de la mise en forme, ils
-distinction peut vous paraître confuse mais vous comprendrez mieux
+s'appliquent à l'intérieur des blocs. C'est le cas des balises qui
-ensuite. Vous pouvez regarder par exemple la différence entre <a
+mettent en valeur le texte, qui le renforcent. La distinction peut
-href="#quote">citation <em>inline</em> et bloc</a>.
+vous paraître confuse mais vous comprendrez mieux ensuite. Vous pouvez
 regarder par exemple la différence entre <a href="#quote">citation <i
 lang="en">inline</i> et bloc</a>.
 </div>
 <h3>Squelette entier</h3>
@ -268,8 +303,8 @@ href="#quote">citation <em>inline</em> et bloc</a>.
 Vous pouvez le copier-coller pour servir de modèle à vos pages Web.</p>
 <pre>
-&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-            "http://www.w3.org/TR/html4/loose.dtd"&gt;
+            "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;HTML&gt;
 &lt;HEAD&gt;
@ -298,11 +333,13 @@ hi
 titre ! 
 </p>
-<p>Si vous avez fait du LaTeX, vous connaissez ce genre de chose
+<p>Si vous avez fait du <a
-(\chapter{}, \section{}, \subsection{}...). Idem pour MS Word avec son
+href="&url.tuteurs;logiciels/latex/">LaTeX</a>, vous connaissez ce
-système de Titre 1, Titre 2, etc. En HTML, c'est aussi simple&nbsp;:
+genre de chose (<code>\chapter{}</code>, <code>\section{}</code>,
-&lt;H1&gt;, &lt;H2&gt;, &lt;H3&gt;... Ça va comme ça jusqu'à
+<code>\subsection{}</code>...). Idem pour Word avec son système de
-&lt;H6&gt;, ce qui vous laisse pas mal de marge pour structurer votre
+Titre 1, Titre 2, etc. En HTML, c'est aussi simple : &lt;H1&gt;,
 &lt;H2&gt;, &lt;H3&gt;... Ça va comme ça jusqu'à &lt;H6&gt;, ce qui
 vous laisse pas mal de marge pour structurer votre
 document. Traditionnellement, &lt;h1&gt; est réservé au titre de la
 page (qui peut être, ou pas, le même que le &lt;TITLE&gt;, à vous de
 voir).
@ -311,7 +348,7 @@ voir).
 <h2>Mettre en forme</h2>
 <p>
-On en arrive au c&oelig;ur du problème&nbsp;: mettre en forme le
+On en arrive au c&oelig;ur du problème : mettre en forme le
 texte.
 </p>
@ -322,7 +359,7 @@ 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 &lt;P&gt; (et &lt;/P&gt;, évidemment). Avec la
 plupart des navigateurs, les paragraphes sont rendus à la manière
-anglo-saxonne&nbsp;: alignement sur la gauche, pas d'alinéa. Il y a
+anglo-saxonne : alignement sur la gauche, pas d'alinéa. Il y a
 généralement un espace entre deux paragraphes.
 </p>
@ -334,9 +371,9 @@ des rares
 <h3><a name="quote">Citations</a></h3>
 <p>
-Vous pouvez citer au niveau <em>inline</em>, soit en utilisant
+Vous pouvez citer au niveau <i lang="en">inline</i>, soit en utilisant
 directement des guillemets, soit en utilisant l'élément &lt;Q&gt;
-(pour <em>quote</em>)&nbsp;:
+(pour <i lang="en">quote</i>) :
 </p>
 <pre>
@ -350,13 +387,13 @@ les guillemets.
 </p>
 <p>Au niveau bloc, c'est l'élément &lt;BLOCKQUOTE&gt; qu'il vous
-faut&nbsp;:
+faut :
 </p>
 <pre>
 &lt;P&gt;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&nbsp;:&lt;/P&gt;
+1760. Il écrit à ce sujet :&lt;/P&gt;
 &lt;BLOCKQUOTE&gt;
 &lt;P&gt;
@ -370,7 +407,7 @@ Mais non muet, tant pis pour elle.&lt;BR&gt;
 <p class="continue">
 &lt;BLOCKQUOTE&gt; est généralement rendu par un bloc indenté à droite
-et à gauche&nbsp;:
+et à gauche :
 </p>
 <blockquote>
@ -392,17 +429,38 @@ l'italique n'existent pas
 valeur du texte. &lt;STRONG&gt; est utilisé pour renforcer un membre
 de phrase, insister sur son importance. Il est donc souvent rendu par
 du <strong>gras</strong> par les navigateurs. &lt;EM&gt; (pour
-<em>emphasize</em>) sert également à mettre en relief un membre de
+<i lang="en">emphasize</i>) sert également à mettre en relief un membre de
 phrase. Il est plus faible que &lt;STRONG&gt;. Il est généralement
-rendu par de l'<em>italique</em>.</p>
+rendu par de l'<i lang="en">italique</i>.</p>
-<h4>Autres styles</h4>
+<p>
 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 &lt;I&gt;. Vous pouvez indiquer
 de quelle langue il s'agit en utilisant l'attribut
 <code>lang</code>. Exemple :
 </p>
 <pre>
 Selon le goût italien, les pâtes doivent être cuites &lt;I lang="it"&gt;al dente&lt;/I&gt;.
 </pre>
 <p class="continue">
 Ce qui donne :
 </p>
 <pre>
 Selon le goût italien, les pâtes doivent être cuites <i lang="it">al dente</i>.
 </pre>
 <h4>Définitions</h4>
 <p>
 Le HTML vous permet de structurer encore davantage vos documents,
 essentiellement les documents techniques. DFN (pour <i
 lang="en">define</i>) sert à indiquer un mot dont on va donner la
-définition, une fois pour le reste du document. Exemple&nbsp;:
+définition, une fois pour le reste du document. Exemple :
 </p>
 <pre>
@ -410,12 +468,64 @@ d
 lorsqu'il est à la fois lisse et non ramifié. En fait, il suffit pour cela
 qu'il soit à la fois &lt;EM&gt;plat&lt;/EM&gt; et non ramifié.&lt;/p&gt; </pre>
 <h4>Titres (films, livres, etc.)</h4>
 <p>
- C'est CITE qu'il faut utiliser pour les citations de titres de
+C'est CITE qu'il faut utiliser pour les citations de titres de livres,
-livres, de films, etc. CODE (que vous verrez dans la section du <a
+de films, etc. L'élément CITE est usuellement rendu par de
-href="#pre">texte préformaté</a>) est également un style de texte.
+l'italique. Exemple :
 </p>
 <pre>
 Le film &lt;I lang="it"&gt;Morte a Venezia&lt;/i&gt; de Luchino Visconti est une
 adaptation de la nouvelle &lt;I lang="de"&gt;Der Tod in Venedig&lt;/I&gt; de
 Thomas Mann.
 </pre>
 <h4>Code informatique</h4>
 <p>
 CODE (que vous reverrez dans la section du <a href="#pre">texte
 préformaté</a>) est également un style de texte qui sert à démarquer
 un extrait de code informatique du texte normal. Exemple :
 </p>
 <pre>
 La ligne &lt;CODE&gt;#include &amp;lt;stdio.h&amp;gt;&lt;/CODE&gt; demande au compilateur
 d'inclure dans le programme certaines informations sur la bibliothèque standard
 d'entrées-sorties.
 </pre>
 <h4>Sigles et acronymes</h4>
 <p>
 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 <code>title</code> : certains
 navigateurs peuvent alors afficher le contenu de <code>title</code> dans une bulle
 d'aide. Démonstration :
 </p>
 <pre>
 L'&lt;ACRONYM lang="en" title="United Nations Special
 Commission"&gt;UNSCOM&lt;/ACRONYM&gt; a été créée pour assister l'&lt;ABBR lang="en"
 title="International Atomic Energy Agency"&gt;IAEA&lt;/ABBR&gt; en Iraq.
 </pre>
 <p class="continue">
 Les bons navigateurs (<a href="http://www.mozilla.org/">Mozilla</a> ou <a
 href="http://www.mozilla.org/products/firefox/">FireFox</a> par exemple) affichent le
 contenu du <code>title</code> sous la forme d'une bulle d'aide (<i
 lang="en">tooltip</i> en anglais) quand vous laissez le curseur dessus. Faites le
 test :
 </p>
 <pre>
 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.
 </pre>
 <h3>Listes</h3>
 <p>
@ -431,7 +541,7 @@ navigateurs affichent des puces devant chaque entr
 liste. &lt;UL&gt; et &lt;/UL&gt; (pour <i lang="en">Unordered
 Lists</i>) marquent le début et la fin d'une liste, &lt;LI&gt; et
 &lt;/LI&gt; le début et la fin d'une entrée de liste. Exemple,
-quelques armes de Goldorak&nbsp;&nbsp;</p>
+quelques armes de Goldorak  </p>
 <pre>
 &lt;UL&gt; 
@ -441,7 +551,7 @@ quelques armes de Goldorak&nbsp;&nbsp;</p>
 &lt;/UL&gt;
 </pre>
-<p class="continue">Ce qui donne&nbsp;:</p>
+<p class="continue">Ce qui donne :</p>
 <ul>
 <li> mégavolts</li>
@ -455,7 +565,7 @@ quelques armes de Goldorak&nbsp;&nbsp;</p>
 la place de &lt;UL&gt;. 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&nbsp;:
+l'attribut TYPE :
 </p>
 <pre>
@ -466,7 +576,7 @@ l'attribut TYPE&nbsp;:
 &lt;/OL&gt;
 </pre>
-<p class="continue">Ce qui donne&nbsp;:</p>
+<p class="continue">Ce qui donne :</p>
 <ol style="list-style-type: lower-roman;">
 <li> mégavolts</li>
@ -474,7 +584,7 @@ l'attribut TYPE&nbsp;:
 <li> astéro-hache</li>
 </ol>
-<p>Pour changer de numérotations, changez la valeur de TYPE&nbsp;: I
+<p>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.</p>
@ -501,7 +611,7 @@ entr
 &lt;/DL&gt;
 </pre>
-<p class="continue">Ce qui donne&nbsp;:</p>
+<p class="continue">Ce qui donne :</p>
 <dl>
 <dt>Amazon</dt>
@ -515,48 +625,52 @@ l'Amazon.</dd>
 <h3><a name="pre">Texte préformaté</a></h3>
 <p>On utilise l'élément &lt;PRE&gt; pour du texte préformaté au niveau
-bloc. Différences avec du texte normal&nbsp;: les navigateurs
+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 <code>verbatim</code> de LaTeX&nbsp;: le code HTML
+pas l'environnement <code>verbatim</code> de LaTeX : le code HTML
 y est interprété. Dans cette documentation, par exemple, on a recours
 aux <a href="#entities">entités</a> pour représenter &lt;, &gt; et
 &amp;.
 </p>
-<p class="continue">Prenons un exemple bien connu de ceux qui
+<p class="continue">Prenons un exemple, un programme très simple en
-connaissent (pour les littéraires, recopiez ça dans un fichier
+langage C (pour les littéraires, recopiez ça dans un fichier
 <code>hello.c</code>, faites <code>gcc hello.c</code> puis
-<code>./a.out</code> et regardez)&nbsp;:</p> 
+<code>./a.out</code> et regardez) :</p>
 <pre>
 &lt;PRE&gt;
 #include &amp;lt;stdio.h&amp;gt;
 main()
-    {
+{
-      printf("Hello, world!\n");
+    printf("Hello, world!\n");
-    }
+}
 &lt;/PRE&gt;
 </pre>
-<p class="continue">sera rendu par&nbsp;:</p>
+<p class="continue">sera rendu par :</p>
 <pre>
 #include &lt;stdio.h&gt;
 main()
-    {
+{
-      printf("Hello, world!\n");
+    printf("Hello, world!\n");
-    }
+}
 </pre>
-<p>Pour citer du code en <em>inline</em>, utilisez la bien-nommée
+<p>Pour citer du code en <i lang="en">inline</i>, utilisez la bien-nommée
 balise &lt;CODE&gt;
 </p>
 <h2>Images</h2>
 <p>
-On se sert de l'élément &lt;IMG&gt; (pour <em>image</em>, bien sûr) et
+On se sert de l'élément &lt;IMG&gt; (pour <i lang="en">image</i>, bien sûr) et
 de ses attributs. Cet élément n'a pas besoin d'être
 refermé. L'attribut plus important est <code>src</code> : il permet de
 spécifier l'adresse où aller chercher l'image. Ainsi, quand on écrit
@ -569,7 +683,7 @@ situ
 <p class="continue">On peut aussi indiquer une adresse
 <em>absolue</em> quand l'image n'est pas sur votre compte, par
-exemple&nbsp;:</p>
+exemple :</p>
 <pre>
 &lt;IMG src="http://www.eleves.ens.fr/tuteurs/icones/note.png"&gt;
@ -578,7 +692,7 @@ exemple&nbsp;:</p>
 <p>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&nbsp;:
+être court et informatif. On l'indique avec l'attribut ALT :
 </p>
 <pre>
@ -586,11 +700,11 @@ raison quelconque l'image ne peut pas
 </pre>
 <p class="continue">Si l'image ne joue aucun rôle sémantique (elle est
-là uniquement pour décorer, on indique <code>alt=""</code>.</p>
+là uniquement pour décorer, on indique <code>alt=""</code>).</p>
 <p>Les formats les plus couramment utilisés pour le Web sont le JPEG,
 en <code>.jpg</code> et le GIF, en <code>.gif</code>
-&mdash;&nbsp;utiliser de préférence le format PNG, GIF n'étant pas
+&mdash; utiliser de préférence le format PNG, GIF n'étant pas
 libre, et moins bon techniquement. JPEG est un format qui est plus
 adapté aux photos, GIF ou PNG sont plus adaptés aux logos et de
 manière générale aux images ayant peu de couleurs.
@ -620,7 +734,7 @@ et &lt;TD&gt; les cellules. On d
 &lt;/TABLE&gt;
 </pre>
-<p class="continue">Ce qui donne&nbsp;:</p>
+<p class="continue">Ce qui donne :</p>
 <table>
 <tr><td> Cellule 1 </td><td> Cellule 2 </td></tr>
@ -665,7 +779,7 @@ pixels. G
 &lt;/TABLE&gt;
 </pre>
-<p class="continue">Donc&nbsp;:</p>
+<p class="continue">Donc :</p>
 <table border="1px">
 <caption>Ceci est un tableau</caption>
@ -678,15 +792,15 @@ pixels. G
 <h2><a name="liens">Liens</a></h2>
-<p>Le meilleur pour la fin, les liens&nbsp;! Ce qui fait d'une page
+<p>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,
-<em>inline</em>), suivi d'attributs.
+<i lang="en">inline</i>), suivi d'attributs.
 </p>
 <h3>Lien simple</h3>
-<p>Le lien de base utilise l'attribut href&nbsp;:</p>
+<p>Le lien de base utilise l'attribut href :</p>
 <pre>
 Retourner au &lt;A href="http://www.eleves.ens.fr/"&gt;serveur des élèves&lt;/A&gt;.
@ -722,7 +836,7 @@ encore pour faire des cross-r
 <p>
 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&nbsp;:
+A :
 </p>
 <pre>
@ -737,15 +851,16 @@ caract
 la même ancre au sein du document.</p>
 <p>Pour faire le lien vers cette ancre, on utilise toujours l'attribut
-HREF, mais en modifiant la syntaxe avec un <code>#</code>&nbsp;:</p>
+HREF, mais en modifiant la syntaxe avec un <code>#</code> :</p>
 <pre>
 Esteban, Zia et Tao rencontrent alors les Olmèques, une peuplade
 extra-terrestre (voir ici la &lt;A href="#olm"&gt;véritable histoire
-du peuple olmèque&lt;/A&gt;.  </pre>
+du peuple olmèque&lt;/A&gt;.
 </pre>
 <p class="continue">Vous pouvez positionner un lien vers cette ancre
-même depuis un autre fichier&nbsp;:</p>
+même depuis un autre fichier :</p>
 <pre>
 Voir &lt;A href="citesdor.html#olm"&gt;l'histoire des Olmèques&lt;/A&gt;.
@ -763,7 +878,7 @@ aussi utiliser le protocole mailto, qui est le protocole des courriers
 </p>
 <pre>
-Écrivez-moi&nbsp;: &lt;a href="mailto:mon.adresse@ens.fr"&gt;mon.adresse@ens.fr&lt;/a&gt;
+Écrivez-moi : &lt;a href="mailto:mon.adresse@ens.fr"&gt;mon.adresse@ens.fr&lt;/a&gt;
 </pre>
 <p class="continue">Quand un lecteur suivra ce lien, son navigateur
@ -779,7 +894,7 @@ pion aux robots collecteurs d'adresses.
 Les <a href="#entities">entités</a> dont vous avez besoin en l'espèce
 sont <code>&amp;#64;</code> pour une arobase (&#64;) ou encore
 <code>&amp;#46;</code> pour un point (&#46;) et <code>&amp;#45;</code>
-pour un tiret (&#45;). Ce qui donne&nbsp;:
+pour un tiret (&#45;). Ce qui donne :
 </p>
 <pre>
@ -788,7 +903,7 @@ Mon adresse
 <p>Complètement illisible, on est bien d'accord ? C'est ce que verra
 le robot collecteur d'adresses. En revanche, un lecteur normal passant
-par un navigateur verra ceci&nbsp;:
+par un navigateur verra ceci :
 </p>
 <pre>
@ -796,7 +911,7 @@ Mon adresse
 </pre>
 <p>Vous pouvez utiliser ce système avec d'autres protocoles, celui des
-news (<code>news</code>) pour que le navigateur affiche (s'il en est
+news (<code>news:</code>) pour que le navigateur affiche (s'il en est
 capable) le message dont vous avez donné le message-ID, ou le FTP...
 </p>
@ -804,11 +919,9 @@ capable) le message dont vous avez donn
 <p>
 Vous avez fini de taper votre première page HTML. Vous vous êtes bien
-6~relus. Il vous reste une dernière étape : passer cette page au
+relu. Il vous reste une dernière étape : passer cette page au
 validateur HTML. Il vous permettra de voir si vous avez bien refermé
-toutes vos balises dans l'ordre qu'il faut, par exemple. Il vous
+toutes vos balises dans l'ordre qu'il faut, par exemple.
 donnera aussi une garantie sur le fait que votre HTML sera lisible par
 tous les navigateurs.
 </p>
 <p>
@ -819,8 +932,15 @@ du fichier sur votre disque dur. Vous saurez tout de suite si votre
 code est bon ou s'il reste quelques corrections à faire...
 </p>
-<div class="metainformation">Auteur&nbsp;: Marie-Lan Nguyen. Dernière
+<div class="attention">
-modification&nbsp;: <date value="$Date: 2004-02-01 01:26:55 $" />.</div>
+<strong>Attention</strong> : le validateur ne vérifie que la
 correction <em>formelle</em> de votre code. En clair, il peut vous
 dire que votre fichier est <em>syntaxiquement</em> correct, mais pas
 s'il est <em>sémantiquement</em> correct.
 </div>
 <div class="metainformation">Auteur : Marie-Lan Nguyen. Dernière
 modification : <date value="$Date: 2004-02-20 13:26:19 $" />.</div>
 </body>
 </html>
--- a/internet/web/html/index.tml
+++ b/internet/web/html/index.tml
@ -123,17 +123,18 @@ fait autorit
 </p>
 <p>
-Les feuilles de style sont une manière simple de prendre en charge le
+Les <dfn>feuilles de style</dfn> sont une manière simple de prendre en
-côté esthétique d'une page Web. Tandis que le HTML ne s'occupe que de
+charge le côté esthétique d'une page Web. Tandis que le HTML ne
-la structure syntaxique de la page, CSS ajoute à votre gré couleurs,
+s'occupe que de la structure syntaxique de la page, CSS ajoute à votre
-fontes exotiques, effets de texte. Cette dissociation des rôles permet
+gré couleurs, fontes exotiques, effets de texte. Cette dissociation
-de ne pas pénaliser les vieux navigateurs, ou les navigateurs en mode
+des rôles permet de ne pas pénaliser les vieux navigateurs, ou les
-texte (comme Lynx ou W3M), ou encore ceux qui utilisent des médias
+navigateurs en mode texte (comme Lynx ou W3M), ou encore ceux qui
-différents (assistant personnel, téléphone portable, ordinateur avec
+utilisent des médias différents (assistant personnel, téléphone
-synthétiseur vocal). Elle vous permet aussi de changer radicalement
+portable, ordinateur avec synthétiseur vocal). Elle vous permet aussi
-l'esthétique de votre page en modifiant un seul fichier. Consultez par
+de changer radicalement l'esthétique de votre page en modifiant un
-exemple le <a href="http://www.csszengarden.com/">CSS Zen Garden</a>
+seul fichier. Consultez par exemple le <a
-pour voir ce qu'on peut faire.
+href="http://www.csszengarden.com/">CSS Zen Garden</a> pour voir ce
 qu'on peut faire.
 </p>
 <h2>Comment apprendre&nbsp;?</h2>
@ -143,11 +144,15 @@ et vous pouvez les m
 conseillons de :</p>
 <ul>
-<li> <strong>lire notre <a href="bases.html">tutoriel</a></strong>. Il
+<li> <strong>lire notre <a href="bases.html">tutoriel
-vous permettra de faire des pages simples et sobres. Même si vous
+HTML</a></strong>. Il vous permettra de faire des pages simples et
-voulez vous lancer dans quelque chose de compliqué, ou si vous avez
+sobres. Même si vous voulez vous lancer dans quelque chose de
-décidé d'utiliser un éditeur WYSIWYG, lisez-le. Mieux vaut savoir un
+compliqué, ou si vous avez décidé d'utiliser un éditeur WYSIWYG,
-minimum ce qu'on fait, non ?</li>
+lisez-le. Mieux vaut savoir un minimum ce qu'on fait, non ?</li>
 <li> <strong>lire notre <a href="css.html">tutoriel
 CSS</a></strong>. Attention : il est encore en cours de
 rédaction.</li>
 <li> <strong>regarder le code source d'autres pages</strong>, en
 commençant par des pages simples. Avec Mozilla, vous avez accès au
@ -237,10 +242,20 @@ d'int
 href="http://www.upsdell.com/BrowserNews/res_fontsamp.htm">principales
 fontes disponibles</a> pour Windows, Mac OS et Unix/Linux.</li>
 <li> <a href="http://www.pescadoo.net/html/">Pescadoo.Lab</a> :
 manipuler les couleurs pour le Web, choisir les bonnes couleurs et les
 bonnes palettes graphiques. Dans le même genre, il y a aussi <a
 href="http://www.smartpixel.net/chromoweb/fr/">ChromoWeb</a>.</li>
 <li> enfin, ce n'est pas un site Web mais un groupe de <a
 href="&url.tuteurs;internet/usenet-fr.html">Usenet-fr</a> :
 <code>fr.comp.infosystemes.www.auteurs</code>, très utile notamment si
 vous pataugez un peu avec les feuilles de style.</li>
 </ul>
 <div class="metainformation">Auteur&nbsp;: Marie-Lan Nguyen.
-Dernière modification le <date value="$Date: 2004-02-19 20:07:06 $"/>
+Dernière modification le <date value="$Date: 2004-02-20 13:26:20 $"/>
 </div>
 </body>