RE: French translation of Dave Raggett, Advanced HTML

Dear Coralie:

Hi!
> To: cewcathar@hotmail.com; w3c-translators@w3.org
> CC: w3c-translators-fr@w3.org
> Date: Fri, 9 Oct 2009 16:29:28 +0200
> From: coralie@w3.org
> Subject: Re: French translation of Dave Raggett, Advanced HTML
>
>
> Hello Catherine
>
> Don't worry about hosting the translation. I can host it on the W3C
> website. Let me know if you'd like that.



Actually I've slept a bit and am feeling a bit better, but yes, it might be best to make the w3c the host for the translation as I cannot guarantee what will happen in about a month from now as the aneurysm is not going anywhere!



That's very nice of you to offer to host it.



Do you want to host it now or just wait till you hear from me that I can't keep my site going? I assume I ll be able to write!

In case you wish to host it now I am attaching the code; Im also pasting it below as a text file!

{Je vous remercie de votre offre de heberger ma traduction; c'est tres gentil de votre part.}


> I am terribly sorry to hear the sad news of your health condition. I am
> sending your my best thoughts.


Thanks! I m feeling much better as I went camping in the country and slept outside for several days!
(Heureusement; je me sens beaucoup plus mieux par ce que j'etais allee quelques jours dans la campagne ou j'ai fait du camping en plein air et en plus j'ai trop dormi en plein air aussi!)


(My code is below! It's also attached! And you can get it online at:
http://reflectionsonlandusetranslationsmorebycew.com/Creezunhabitatweb/RaggettHTMLavance.html
just click on view source  but you have to remove a piece of yahoo code at the end;
I can remove the commentary at the base if you absolutely need me to!
Veuillez voir en bas le code pour la traduction; veuillez voir le code aussi ci joint; vous pouver trouver ce code aussi en ligne; je peux effacer le commentaire en bas dans la traduction au cas ou il est absolument necessaire!)

Best

C E Whitehead
cewcathar@hotmail.com

* * *



































width="72" height="48" border="0"
src="http://www.w3.org/Icons/w3c_home.gif" />

D�buter en HTML [texte anglais*] 
 
|
 
Ajouter
une pinc�e de style [texte anglais]

alt="Dave Raggett" align="middle" border="0">
  Les techniques plus avanc�es

Dave
Raggett, le 29 a�ut, 2000.

[Le document original, Advanced HTML (un tutoriel), a �t� traduit par C. E. Whitehead, le 6 juillet 2006.** Le document original du W3C demeure l'unique r�f�rence officielle.
]

Etant donn� que vous avez appris le HTML essentiel, il est temps d'apprendre le HTML un peu plus avanc�.
Les renseignements ci-dessous vous font apprendre �:



forcer un retour � la ligne


ins�rer dans votre texte un espace ins�cable


se servir des codes �HTML� pour cr�er des caract�res avec des accents aigus ou graves, ou pour cr�er d'autres caract�res particuliers


ins�rer dans votre page HTML des liens vers des blocs de texte distincts au milieu de la page


cr�er du texte �pre-format�, et l'ins�rer dans votre codage HTML


ins�rer dans votre texte un image graphique, et l'aligner � c�t� du texte.


d�finir dans votre page un graphique, avec des surfaces compos�es de liens sur lesquelles l'utilisateur peut cliquer,[1]
[c'est � dire, y d�finir un �image map�]


cr�er des tableaux


cr�er des roll-overs[2] et d'autres astuces en code HTML JavaScript



p.s. Je vous conseille d'utiliser l'utilitaire "http://www.w3.org/People/Raggett/tidy">HTML Tidy pour vous rendre plus facile la r�daction de votre texte �html�, pour nettoyer le balisage, et pour r�parer automatiquement les erreurs de balise dans vos documents.[3]



Comment forcer un retour � la ligne

Parfois, vous voulez forcer un retour � la ligne dans votre texte. Vous le ferez en
utilisant la balise br [qui veut dire en anglais, �break�]. Vous l'ins�rez dans votre codage HTML
pour se faire distinguer, par exemple, les plusieurs lignes d'une adresse postale:


M. Pevear<br>5�me �tage<br>41, rue des Archives<br>Paris 4�me France 75004   [4]



On n'utilise jamais de balise fermante avec la balise br.[5] Une balise sans balise fermante s'appelle une balise vide.

Comment ins�rer dans votre texte un espace ins�cable


Les navigateurs d'internet permettent au texte de circuler automatiquement entre les marges d'une page HTML.
Le navigateur peut ins�rer un saut de ligne quand il se trouve n�cessaire, et n'importe o� dans le texte que se trouve un espace blanc.
Mais, parfois, vous voulez emp�cher que le texte ne circule automatiquement dans la fen�tre du navigateur et que le saut de ligne ne soit inser� par le navigateur entre des mots particuliers,
par exemple entre les deux mots indiquant une marque, le �coca cola� par exemple.
La ruse en ce cas c'est d'utiliser le codage HTML &nbsp; [qui veut dire �non-break-espace�], au lieu du caract�re qui indique normalement un espace blanc, ' '.
Voici comment s'est fait:

Les breuvages gazeuses et sucr�s, le "Coca&nbsp;cola", par exemple,atteignent une popularit� globale.



C'est de pratique mauvaise d'utiliser des espaces blancs en s�rie pour mettre en retrait le texte. Au lieu de le faire, je vous conseille de mettre en retrait votre texte en utilisant href="http://www.w3.org/MarkUp/Guide/Style.html">le style qui est d�fini par le HTML [les �Style Rules�].


Comment se servir des codes �HTML� pour cr�er des caract�res avec des accents aigus ou graves, ou pour cr�er d'autres caract�res particuliers.

On utilise d'habitude, des caract�res particuliers pour indiquer une affiche de copyright ou une marque de fabrique:










Le symbole

Le code HTML

Un exemple





affiche de copyright

&copy;

Copyright � 1999 W3C





marque d�pos�

&reg;

MagiCo �





marque [de fabrique]

&#8482;

Webfarer�





Avis: Dans le HTML 4.0, on peut utiliser le code HTML mn�monique &trade; pour indiquer la marque, mais &trade; n'est pas encore aussi bien compris par tous les navigateurs que le &#8482;, et il est ainsi possible qu'il y a encore des navigateurs qui ne le reconnaissent point.


Il y a aussi d'autres caract�res HTML qui vous convendront:








Le symbole

Le code HTML

Un exemple





moins que [�less than�]

&lt;

<





plus que [�greater than�]

&gt;

>





Ampersand

&amp;

&





espace ins�cable [�nonbreaking space�]

&nbsp;

 





em dash

&#8212;

�





un guillemet [�quotation mark�]

&quot;

"





De plus, on trouve des codes particuliers HTML
qui s'utilisent pour cr�er les caract�res alphab�tiques avec des accents ou aigus, ou graves, ou circonflexes, ou avec d'autres signes diacritiques; et aussi pour cr�er d'autres symboles qui se trouvent dans le jeu de caract�res du Latin-1:








 

&nbsp;

&#160;

�

&ETH;

&#208;





�

&iexcl;

&#161;

�

&Ntilde;

&#209;





�

&cent;

&#162;

�

&Ograve;

&#210;





�

&pound;

&#163;

�

&Oacute;

&#211;





�

&curren;

&#164;

�

&Ocirc;

&#212;





�

&yen;

&#165;

�

&Otilde;

&#213;





�

&brvbar;

&#166;

�

&Ouml;

&#214;





�

&sect;

&#167;

�

&times;

&#215;





�

&uml;

&#168;

�

&Oslash;

&#216;





�

&copy;

&#169;

�

&Ugrave;

&#217;





�

&ordf;

&#170;

�

&Uacute;

&#218;





�

&laquo;

&#171;

�

&Ucirc;

&#219;





�

&not;

&#172;

�

&Uuml;

&#220;





�

&shy;

&#173;

�

&Yacute;

&#221;





�

&reg;

&#174;

�

&THORN;

&#222;





�

&macr;

&#175;

�

&szlig;

&#223;





�

&deg;

&#176;

�

&agrave;

&#224;





�

&plusmn;

&#177;

�

&aacute;

&#225;





�

&sup2;

&#178;

�

&acirc;

&#226;





�

&sup3;

&#179;

�

&atilde;

&#227;





�

&acute;

&#180;

�

&auml;

&#228;





�

&micro;

&#181;

�

&aring;

&#229;





�

&para;

&#182;

�

&aelig;

&#230;





�

&middot;

&#183;

�

&ccedil;

&#231;





�

&cedil;

&#184;

�

&egrave;

&#232;





�

&sup1;

&#185;

�

&eacute;

&#233;





�

&ordm;

&#186;

�

&ecirc;

&#234;





�

&raquo;

&#187;

�

&euml;

&#235;





�

&frac14;

&#188;

�

&igrave;

&#236;





�

&frac12;

&#189;

�

&iacute;

&#237;





�

&frac34;

&#190;

�

&icirc;

&#238;





�

&iquest;

&#191;

�

&iuml;

&#239;





�

&Agrave;

&#192;

�

&eth;

&#240;





�

&Aacute;

&#193;

�

&ntilde;

&#241;





�

&Acirc;

&#194;

�

&ograve;

&#242;





�

&Atilde;

&#195;

�

&oacute;

&#243;





�

&Auml;

&#196;

�

&ocirc;

&#244;





�

&Aring;

&#197;

�

&otilde;

&#245;





�

&AElig;

&#198;

�

&ouml;

&#246;





�

&Ccedil;

&#199;

�

&divide;

&#247;





�

&Egrave;

&#200;

�

&oslash;

&#248;





�

&Eacute;

&#201;

�

&ugrave;

&#249;





�

&Ecirc;

&#202;

�

&uacute;

&#250;





�

&Euml;

&#203;

�

&ucirc;

&#251;





�

&Igrave;

&#204;

�

&uuml;

&#252;





�

&Iacute;

&#205;

�

&yacute;

&#253;





�

&Icirc;

&#206;

�

&thorn;

&#254;





�

&Iuml;

&#207;

�

&yuml;

&#255;





Il y a aussi des codes num�riques qui repr�sentent ou les caract�res du alphabet grec ou les symboles math�matiques pr�cis�s dans l'Unicode.
Pour en savoir plus, veuillez voir s'il vous pla�t la liste pr�cis�e dans le HTML 4.0.
Mais il faut faire attention par ce que les codes mn�moniques qui repr�sentent ces caract�res ne sont pas tous reconnus par le Netscape Navigateur 4.0.
Ainsi, je vous conseil d'utiliser les codes num�riques.[6]


Comment ins�rer dans votre page HTML des liens vers des blocs de texte distincts au milieu de la page


Imaginez que vous ayiez une page web tr�s longue avec un table des mati�res au debut de la page. Comment est-ce que vous pourrez y ins�rer des liens hypertextes
qui servent � lier chaque mati�re y index�e � la division de la page correspondant?


Imaginez de plus que chaque division de page f�t commenc�e, par exemple, par un titre, comme celui qui suit:

<h2>Les boits de nuit du coin</h2>



Si vous l'encadrez entre les balises suivantes,
<a name=le nom indentificateur de fichier de contenu que vous d�signez> .... </a>
<h2><a name="boits-de-nuit">Les boits de nuit du coin</a></h2>


un lien hypertexte se d�finit grace au nom indentificateur, pr�cis� par l'attribut, �name�, qui se trouve dans la balise ci-dessus.

Dans cette balise, l'attribut, �name� [en fran�ais, �nom�], sert � �tre un ancre
qui veut fixer le nom indentificateur que vous utiliserez pour pr�ciser la cible d'un lien hypertexte [c'est � dire, pour indiquer le contenu vis� par le lien].
Dans l'exemple ci-dessus, le nom indentificateur qui pr�cise la cible du lien est �boits-de-nuit�.
Et voil�! On peut directement ins�rer dans votre table des mati�res un lien hypertexte qui cherchera dans ce document l'ancre, �boits-de-nuit�.
Voici comment s'est fait:

<ul>  ...  <li><a href="#boits-de-nuit">Les boits de nuit du coin</a></li>  ...</ul>


Dans la d�finition du lien hypertexte, le caract�re # [le symbole d�signant un n�meral] se met toujours avant l'adresse pr�cisant la cible du lien.
Mais si la cible du lien se trouve dans un fichier Web autre que le fichier o� se trouve le lien, il faut de plus que le nom du fichier Web vis� par le lien pr�c�de le caract�re # .[7]
Alors, si le nom du fichier web est "http://www.bath.co.uk/", voici comme s'est fait le lien hypertexte:

<a href="http://www.bath.co.uk/#boits-de-nuit">Les boits de nuit du coin</a>




Dans un proche avenir, ces liens se d�finiront dans votre codage html sans la balise <a>, en fait, sans autre balise que celle qui encadre le titre du contenu vis� par le lien.[8] Tout ce qu'il faudra pour pr�ciser la cible d'un lien sera d'y ins�rer
l'attribut id [ce qui veut dire �identification;� ou �indentificateur�, et qui sert � �tre l'ancre du lien].
Voici comment s'est fait:


<h2 id="boits-de-nuit">Les boits de nuit du coin</h2>


Mais les navigateurs jusqu'� la quatri�me g�n�ration ne recona�ssent pas le code id. Alors, soyez prudent en l'utilisant pendant le temps que l'on dispose de ces navigateurs!


Comment cr�er du texte pre-format� et l'ins�rer dans votre codage HTML


Un des avantages du navigateur
c'est que les lignes de texte du page Web replient automatiquement dans la fen�tre cr��e par le navigateur, et sans d�passer les marges. Mais, parfois, vous voulez que le repli automatique de lignes soit d�sactiv�,
surtout au cas o�, par exemple, vous voulez ins�rer dans votre page un sp�cimen de programme informatique.
Cela c'est fait avec la balise pre.
Voici l'exemple qui suit:

<pre>    void Node::Remove()    {        if (prev)            prev->next = next;        else if (parent)            parent->SetContent(null);        if (next)            next->prev = prev;        parent = null;    }</pre>


Le sp�cimen ci-dessus est affich� ainsi:

    void Node::Remove()    {        if (prev)            prev->next = next;        else if (parent)            parent->SetContent(null);        if (next)            next->prev = prev;        parent = null;    }


Les couleurs du texte et du fond qui se trouvent dans l'exemple au-dessus sont pr�d�finies,
c'est � dire qu'elles se d�finissent dans le codage pr�cisant le style de la page. [9]
Remarquez que tout saut de ligne et tout espace blanc se sont montr�s dans le codage HTML exactement comme ils se sont montr�s par le navigateur, sauf que le navigateur se d�barrasse du saut de ligne qui se trouve entre la balise pre et
le sp�cimen de programme qui la suit, et aussi de celui qui se trouve entre la balise fermante /pre et le sp�cimen de programme qui la pr�c�de. Cela veut dire que les affichages des deux exemples qui suivent sont tout � fait identiques:


<pre>texte pre-format�</pre><pre>texte pre-format�</pre>




Le texte pre-format� est affich� par habitude dans un style de police de caract�res [anglais, 'font'] monospace o� chaque caract�re a la m�me largeur.
Si vous essayez de pr�ciser le style du texte pre-format�, en d�finissant dans vos codes HTML stylistiques des codes fixant le style de l'attribut, pre, il se peut que les navigateurs
n'utilisent pas un style de police de caract�res monospace pour afficher le texte pre-format�. Cela fait n�cessaire que vous ins�riez
l'attribut font-family [ce qui veut dire, en fran�ais, �famille ou cat�gorie de police de caract�res�] dans votre codage HTML o� se d�finit le style [c'est-�-dire, dans les codes stylistiques CSS] du texte pre-format�. Si vous voulez que tout texte pre-format� soit affich� dans une couleur verte par exemple, il ne faut que d�finir le style ainsi:

<style type="text/css">  pre { color: green; background: white; font-family: monospace; }</style>  [10]


Si vous pr�cisez la couleur du texte, il vaut mieux que vous pr�cisiez aussi la couleur du fond, pour vous assurer que le texte se distingue toujours du fond.
En ce cas, il se trouve parfois qu'il vous convienne plus de pr�ciser la couleur du fond d'�cran dans la balise body [o� se d�finit le style du �body� ou �corps� du document(11)].

<style type="text/css">  body { color: black; background: white; }  pre { color: green; font-family: monospace; }</style>


Comment ins�rer dans votre texte un image graphique, et l'aligner � c�t� du texte


Dans le HTML, vous choisissez ou si l'image soit affich� isol� dans une seule ligne de texte,[12] ou s'il soit affich� align� � c�t� de plusieurs lignes de texte.
S'il est align� � c�t� du texte, vous pouvez choisir de plus ou si l'image
soit align� � droite avec du texte � la gauche, ou s'il soit align� � gauche avec du texte � la droite.
Vous le ferez avec l'attribut align [qui veut dire �aligner�]. Si l'attribut align se d�finit comme ="left" [c'est-�-dire, �gauche�], l'image se trouve � la gauche de la page; mais si l'attribut align se d�finit comme ="right" [c'est-�-dire, �droite�], l'image se trouve � la droite. Voici l'exemple qui suit:

<img src="sun.jpg" alt="sunburst graphic"width="32" height="21" align="left"> Ce texte-ci se trouve � la droite de l'image graphique.<BR>


Ceci est affich� ainsi:

width="32" height="21" align="left"> Ce texte-ci se trouve � la droite de l'image graphique.




L'exemple qui suit utilise align="right" [�aligner � droite�]:


<img src="sun.jpg" alt="sunburst graphic"width="32" height="21" align="right"> Ce texte-ci se trouve � la gauche de l'image graphique.<BR>


Le texte ci-dessus est affich� ainsi:

width="32" height="21" align="right"> Ce texte-ci se trouve � la gauche de l'image graphique.

Pour obliger le texte � �tre affich� sous l'image graphique, vous pourrez utiliser la balise suivante, <br clear=all>.[13]
Voici l'exemple:
<img src="sun.jpg" alt="sunburst graphic"width="32" height="21" align="left"> Ce texte-ci se trouve � la droite de l'image graphique.<br clear="all">Ceci se trouve sous l'image, dans une deuxi�me ligne.<BR>


Ceci est affich� au-dessous:

width="32" height="21" align="left"> Ce texte-ci se trouve � la droite de l'image graphique.

Ceci se trouve sous l'image, dans une deuxi�me ligne.

Comment se d�finir un graphique, ou carte cliquable [un �image map�], avec des surfaces compos�es de liens


L'image qui suit sert � �tre une carte cliquable pour une collection de fichiers web. Les surfaces de cette carte cliquable sont compos�es de liens qui vous permettent d'acc�der aux fichiers web y associ�s. Pour suivre un lien � un fichier web, il ne faut que cliquer sur le rond qui le d�signe.


alt="site map" usemap="#sitemap" border="0">
"Getting Started, ou D�buter en HTML">
"A Touch of Style, ou Un peu de style">

alt="Advanced HTML, ou Le HTML avanc�">


Voici le codage HTML qui a cr�� la carte qui est affich�e ci-dessus:

<p align="center">   <img src="pages.gif" width="384" height="245"      alt="site map" usemap="#sitemap" border="0">   <map name="sitemap">      <area shape="circle" coords="186,44,45"         href="Overview.html" alt="Getting Started, ou D�buter en HTML">      <area shape="circle" coords="42,171,45"         href="Style.html" alt="A Touch of Style, ou Un peu de style">      <area shape="circle" coords="186,171,45"         alt="Web Page Design, ou La configuration des pages web">      <area shape="circle" coords="318,173,45"         href="Advanced.html" alt="Advanced HTML, ou L'HTML avanc�">   </map></p>


L'attribut src de balise img pr�cise que le graphique y d�fini est "pages.gif".
L'attribut usemap dispose d'une adresse web pour d�signer une deuxi�me balise, le map [o� se d�finit la �carte� cliquable].
Par ce que l'adresse de balise pr�cis�e par usemap est une adresse web, il faut que l'adresse commence avec le caract�re #.[14]
L'attribut border [qui sert � d�finir la �bordure� du graphique] se d�finit comme 0 [�z�ro�], pour faire supprimer la bordure bleue qui
entoure normalement un lien graphique.[15]


La balise map [�map� veut dire �carte�] s'utilise pour d�finir des surfaces du graphique qui servent � �tre des liens hypertextes.
Le nom identificateur de cette carte, qui s'est d�fini en utilisant l'attribut name, correspond au nom identificateur pr�cis� par
l'attribut usemap dans la balise img. L'attribut name dans la balise map ainsi sert plus ou moins de m�me fonction [d'ancre] que l'attribut name dans la balise <a>.


Chacune des sous-balises area [c'est � dire, en fran�ais, qui pr�cisent �une surface�, avec une �superficie�], encadr�es par la balise map, sert � d�finir une surface particuli�re du graphique, et en plus, � associer cette surface � une adresse web.[16]
L'attribut shape [fran�ais �forme�] de sous-balise area pr�cise quelle est la forme de la surface, ou est-elle forme rectangulaire, "rect"; ou est-elle forme circulaire, "circle"; ou est-elle forme polygonale, "poly".
L'attribut coords [c'est � dire �coordon�es�] pr�cise les coordon�es en pixels de la forme. Les coordon�es
pr�cis�es varient, bien s�r, selon la forme. Voici les coordon�es qui s'utilisent pour cr�er chacune des trois classes de surface possibles:




rect: left-x,[17] top-y,[18] right-x,[19] bottom-y [20]

circle: center-x,[21] center-y,[22] radius [la largeur de �rayon� du cercle(23)]

poly: x1,y1,
x2,y2, ...
xn,yn


Le pixel en haut et � gauche et consider� comme le point d'origine du graphique o� les deux coordon�es, le x et le y, equivalent toujours � z�ro.
En tant qu'un pixel se trouve plus � droite, la coordon�e-x se fait plus grande;
en tant qu'un pixel se trouve plus en bas, la coordon�e-y se fait plus grande.
La plupart de logiciels de dessin, qui manipulent des images, vous permet
d'obtendre les coordon�es en pixels d'un point n'importe o� dans l'image.


Si se d�finissent deux ou plusieurs surfaces dans un graphique qui
sont imbriqu�es les unes dans les autres, c'est la sous-balise o� se d�finit la surface qui se trouve en premier
dans la carte cliquable [�map�] qui a toujours de priorit� sur toute autre sous-balise
o� s'est d�finie toute autre surface du graphique y imbriqu�e
(c'est � dire
que c'est la sous-balise qui se trouve d'abord qui r�agit � vos cliques, � votre entr�e).
Ainsi, c'est possible de d�finir dans la carte cliquable [ou map] une forme un peu plus compliqu�e, par exemple, une forme annulaire.
Pour cr�er une telle forme, il ne faut que cr�er une partie inactive [c'est � dire, �non-cliquable�] d'une forme circulaire en utilisant l'attribut nohref.
La partie ou surface inactive [non-cliquable] de forme se trouve toujours superpos�e sur la surface active [la surface cliquable].[24].
La d�finition de la surface inactive se trouve aussi en premier dans votre codage HTML. Voici l'exemple qui suit:

      <area shape="circle" coords="186,44,50" nohref>      <area shape="circle" coords="186,44,100"         href="Overview.html" alt="Getting Started ou D�buter en HTML">


Remarquez que la sous-balise o� se d�finit la petite forme circulaire,
qui se trouve en premier dans la d�finition ci-dessus, sert � cr�er une surface inactive [�non-cliquable�]
dans une forme circulaire plus grande qui s'est cr��e en utilisant une deuxi�me sous-balise area qui se trouve apr�s la premi�re sous-balise o� s'est d�finie la surface inactive [non-cliquable] de la forme.
Il faut toujours que la sous-balise o� s'est d�finie la surface inactive [ou non-cliquable] d'une forme se mette en premier dans la d�finition de votre carte cliquable [ou map],
avant toute autre sous-balise o� s'est d�finie n'importe quelle surface qui soit imbriqu�e dans cette surface inactive;
si non, la surface inactive [non-cliquable] de la forme, pr�cis�e par cette sous-balise, sera cach�e par les surfaces actives.


Pourquoi faut-il d�finir un attribut alt 

L'attribut alt s'utilise pour cr�er une br�ve description pour chaque surface du graphique o� s'est d�fini un lien; si vous l'utilisez, vous pourrez d�crire chaque lien qui se d�finit dans la carte cliquable [ou map]. Sans l'attribut alt, la carte cliquable [ou map] sera rendue inacccessible � tous ceux qui se trouvent sans capacit� de la voir.[25]


Les tableaux

Les tableaux s'utilisent aussi bien pour nous donner des renseignments que pour configurer la page web.
Vous pourrez ou cr�er des tableaux qui se mettent exactement dans la fen�tre du navigateur, avec une largeur qui varie selon la taille de fen�tre navigateur;
ou cr�er un tableau � largeur pr�d�finie[26]; ou cr�er un tableau � largeur pas-d�finie, ainsi permettant au navigateur de d�finir la largeur de tableau,
selon les contenus.


Un tableau se d�finit comme une collection d'une ou plusieurs lignes [ou �rang�es�] de cellules. Voici un exemple tr�s simple:







An

Revenu anticip�





2000

$18M





2001

$25M





2002

$36M





Et voici le codage HTML qui a cr�� ce tableau:
<table border="1"><tr><th>An</th><th>Revenu anticip�</th></tr><tr><td>2000</td><td>$18M</td></tr><tr><td>2001</td><td>$25M</td></tr><tr><td>2002</td><td>$36M</td></tr></table>


La balise table [qui veut dire, �tableau�] sert � contenir la d�finition du tableau.
L'attribut border pr�cise l'�paisseur en pixels de �bordure� qui entoure toute cellule du tableau.[27]
La sous-balise tr y contient la d�finition d'une ligne du tableau.
Les sous-balises th et td y d�finissent--respectivement, (1�rement), une cellule de titre ou de ligne ou de colonne du tableau;
et (2�mement), une cellule de donn�es du tableau.


Un peu de remplissage dans les cellules de tableau

L'attribut cellpadding[28] s'utilise pour pr�ciser la quantit� de remplissage [ou �d'espace vide�] qui entoure le texte dans toute cellule du tableau.[29]
Voici comment s'est d�fini un remplissage large de dix pixels:

<table border="1" cellpadding="10">


Et voici l'affichage:






An

Revenu anticip�





2000

$18M





2001

$25M





2002

$36M




L'interlignage entre les cellules du tableau

Par contraste, l'attribut cellspacing [�l'interlignage� ou �l'espacement qui se trouve entre des cellules�] pr�cise la quantit� d'espaces blancs qui s�pare les cellules du tableau les uns des autres.
Voici comment s'est d�fini un espacement ["cell-spacing"] de dix pixels :

<table border="1" cellpadding="10" cellspacing="10">


Et voici l'affichage:






An

Revenu anticip�





2000

$18M





2001

$25M





2002

$36M




La largeur du tableau

Vous d�finissez la largeur du tableau en utilisant l'attribut, width.
L'attribut width sert � pr�ciser une valeur qui s'exprime ou en pixels ou comme un pourcentage.
Quand la valeur est exprim�e en tant que pourcentage, elle pr�cise le pourcentage de la largeur d'une page qui se trouve entre les marges.
Voici le codage HTML qui sert � d�finir un tableau large de 80 pourcent de la largeur de la page Web enti�re:

<table border="1" cellpadding="10" width="80%">


Voici l'affichage:






An

Revenu anticip�





2000

$18M





2001

$25M





2002

$36M




L'alignement du texte dans les cellules du tableau

Dans l'affichage de tableau, les contenus de toute cellule de titre (th) sont centr�s dans la cellule par d�faut, pendant que les contenus de toute cellule de donn�es (td) sont align�s � gauche.
Mais l'attribut align s'utilise pour aligner le texte selon votre go�t. Cet attribut
se met ou dans la balise o� s'est d�finie une cellule de tableau [(th) ou (td)], ou dans la balise o� s'est d�finie
une ligne de tableau (tr). Il s'utilise avec une valeur de: "left" [�� la gauche�],
"center" [�au centre�], ou "right" [�� la droite�]:
<table border="1" cellpadding="10" width="80%"><tr align="center"><th>An</th><th>Revenu anticip�</th></tr><tr align="center"><td>2000</td><td>$18M</td></tr><tr align="center"><td>2001</td><td>$25M</td></tr><tr align="center"><td>2002</td><td>$36M</td></tr></table>


Et voici l'affichage:






An

Revenu anticip�





2000

$18M





2001

$25M





2002

$36M




L'attribut valign [�aligner verticalement�] sert de m�me fonction plus ou moins que l'attribut align, mais cet attribut sert � d�finir l'alignment verticale des contenus d'une cellule.
Il s'utilise avec les valeurs de
"top" [�en haut�], de "middle" [�au centre verticale�], ou de "bottom" [�en bas�], et on peut l'ins�rer
dans toute balise o� s'est d�finie ou une cellule ou un ligne de tableau.
Par d�faut, les contenus de toute cellule de titre (th) sont centr�s verticalement dans la cellule,
pendant que les contenus de toute cellule de donn�es (td)
se mettent en haut de la cellule.


Des cellules sans contenu

Il y a un petit truc qui se fait �vident quand le navigateur affiche
un tableau avec des cellules sans contenu.
Contrastez les deux cas ci-dessous:






An

Revenu anticip�





2000

$18M





2001

$25M





2002

$36M





2003






et






An

Revenu anticip�





2000

$18M





2001

$25M





2002

 




Le premier cas se fait quand il existe une cellule sans contenu:
<td></td>


L'affichage de la cellule dans le premier cas au-dessus est r�par�e en y ins�rant un espace ins�cable:


<td>&nbsp;</td>


Les cellules de tableau qui s'�tendent sur plus d'une ligne ou colonne [30]


Faissons-nous un peu plus compr�hensif le tableau ci-dessus en y ajoutant quelques d�tails, pour pr�ciser le revenu gagn� dans les belts du sud et du nord:






An

Revenu anticip�





Au nord

Au sud

En totalit�





2000

$10M

$8M

$18M





2001

$14M

$11M

$25M




La rubrique [ou le �titre�] �An�
�tend sur deux lignes du tableau, pendant que
la rubrique �Revenu anticip� �tend sur trois colonnes.
Cela s'est fait en pr�cisant, respectivement, les attributs rowspan [�l'�tendue de ligne du tableau�] et colspan [�l'�tendue de colonne�].
Voici le codage HTML qui a cr�� l'exemple ci-dessus:
<table border="1" cellpadding="10" width="80%"><tr align="center"><th rowspan="2">An</th><th colspan="3">Revenu anticip�</th></tr><tr align="center"><th>Au nord</th><th>Au sud</th><th>En totalit�</th></tr><tr align="center"><td>2000</td><td>$10M</td><td>$8M</td><td>$18M</td></tr><tr align="center"><td>2001</td><td>$14M</td><td>$11M</td><td>$25M</td></tr></table>


Le codage se fait plus simple en profitant du fait que la balise terminante est toujours facultive dans la d�finition d'une cellule de tableau:

<table border="1" cellpadding="10" width="80%"><tr align="center"><th rowspan="2">An<th colspan="3">Revenu anticip�<tr align="center"><th>Au nord<th>Au sud<th>En totalit�<tr align="center"><td>2000<td>$10M<td>$8M<td>$18M<tr align="center"><td>2001<td>$14M<td>$11M<td>$25M</table>


Remarquez que la rubrique, �An�
�tend sur deux lignes du tableau,
� la fois que la premi�re balise th de la deuxi�me ligne se met dans la deuxi�me colonne du tableau, au lieu de dans la premi�re.


Les tableaux sans bordure

Ces tableaux s'utilisent pour faire la configuration ma�tris�e ou la mise en page de page web, en forme du quadrillage de voies.[31]
Tout ce qu'il faut pour les cr�er c'est d'ins�rer dans la balise table [o� se d�finit �le tableau�]
les attributs border="0" [c'est � dire, �la bordure=0�] et cellspacing="0" [c'est � dire, �l'espacement=0�]:







An

Revenu anticip�





2000

$18M





2001

$25M





2002

$36M




Voici le codage HTML qui a produit l'exemple ci-dessus:

<table border="0" cellspacing="0" cellpadding="10"><tr><th>An</th><th>Revenu anticip�</th></tr><tr><td>2000</td><td>$18M</td></tr><tr><td>2001</td><td>$25M</td></tr><tr><td>2002</td><td>$36M</td></tr></table>


Si l'attribut cellspacing est omis de la d�finition du tableau,
un petit espace se trouvera entre chaque paire de cellules, comme dans le cas ci-dessous:







An

Revenu anticip�





2000

$18M





2001

$25M





2002

$36M




Comment se mettre de couleur dans votre tableau
Ce page-ci dispose d'une feuille de style, pour pr�ciser les couleurs du fond de ce tableau, avec des couleurs diff�rents pour que se distingue toute cellule de titre de toute cellule de donn�es.
Voici les d�finitions de style
qui s'utilisent pour cr�er ma page:


table {  margin-left: -4%;  font-family: sans-serif;  background: white;  border-width: 2;  border-color: white;}th { font-family: sans-serif; background: rgb(204, 204, 153) }td { font-family: sans-serif; background: rgb(255, 255, 153) }


Les derni�res lignes qui se trouvent dans l'exemple ci-dessus servent �
d�finir, selon les valeurs de red/green/blue (�rouge/vert/bleu�) y pr�cis�es, les couleurs du fond qui se sont affich�es dans toute cellule de titre
et dans toute cellule de donn�es.
Les valeurs possibles de red, green, et blue y comprennent de 0 � 255 (l'utilisation de la derni�re valeur de 255 aboutit au fait que la couleur y pr�cis�e est compl�tement satur�e dans l'affichage du tableau).


Mais on peut pr�ciser autrement la couleur du fond, en utilisant l'attribut bgcolor.
Presque tout navigateur le comprend,
et de plus, si l'on l'utilise, il n'y a pas besoin d'utiliser une feuille de style pour pr�ciser les couleurs de la page.
Premi�rement, il faut �tablir les valeurs hexad�cimaux
des composants red, green, et blue [�rouge�, �vert�, et �bleu�] de toute couleur que vous cherchez � cr�er.
Pour vous aider � le faire, veuillez trouver � votre disposition, dans le document, "http://www.w3.org/MarkUp/Guide/Style.html">Ajouter une pinc�e de style, un "http://www.w3.org/MarkUp/Guide/Style.html#hexcolors">codeur de couleur.

<table border="0" cellspacing="0" cellpadding="10">  <tr>    <th bgcolor="#CCCC99">An</th>    <th bgcolor="#CCCC99">Revenu anticip�</th>  </tr>  <tr>    <td bgcolor="#FFFF66">2000</td>    <td bgcolor="#FFFF66">$18M</td>  </tr>  <tr>    <td bgcolor="#FFFF66">2001</td>    <td bgcolor="#FFFF66">$25M</td>  </tr>  <tr>    <td bgcolor="#FFFF66">2002</td>    <td bgcolor="#FFFF66">$36M</td>  </tr></table>


Comment se centrer le tableau dans la page web


Il est possible, en utilisant un peu de CSS, de vous assurer que vos tableaux soient toujours centr�s dans la page Web, entre les deux marges de la page.
S'il se trouve dans votre feuille de style la d�finition qui suit, tout tableau sera centr�:

table {   margin-left: auto;   margin-right: auto;}


Vous pourrez utiliser le codage ci-dessus pour d�finir le style des tableaux particuliers,
mais, d'abord, il faut que vous ou sp�cifiez la valeur d'un attribut id qui sert � indiquer le tableau particulier pour lequel vous d�finissez le style, ou sp�cifiez une cat�gorie [l'attribut HTML, "class"(32)] de tableau.
L'exemple qui suit est pertinent � [et sert � d�finir le style de] tout tableau dont la valeur de l'attribut class est centered [c'est-�-dire, tout tableau de cat�gorie �centr�e�] :

Voici premi�rement le codage de la d�finition stylistique:
table.centered {   margin-left: auto;   margin-right: auto;}


et voici le codage du tableau:
<table class="centered" border="1"><tr><th>An</th><th>Revenu anticip�</th></tr><tr><td>2000</td><td>$18M</td></tr> <tr><td>2001</td><td>$25M</td></tr><tr><td>2002</td><td>$36M</td></tr></table>


et voici l'affichage:





An
Revenu anticip�



2000
$18M



2001
$25M



2002
$36M



Il faut remarquer de plus que vous pourrez utiliser les d�finitions CSS au lieu d'utiliser l'attribut border [attribut qui s'utilise ci-dessus dans la balise o� s'est d�fini le tableau].
Pour voir comment s'est d�finie une bordure dans les CSS, veuillez voir, s'il vous pla�t, les exemples mis � votre disposition dans le document, Ajouter une pinc�e de style.

Comment cr�er un tableau dont les contenus sont accessibles � tous


Si l'on est priv� de la vue du tableau [� cause de que l'on est aveugle], il se peut que l'on trouvera tr�s difficile � comprendre les contenus y affich�s.
Premi�rement, il faut ajouter � la d�finition du tableau quelques renseignements qui d�crivent le but du tableau, et, en plus, sa configuration.
La balise caption [c'est � dire, �la l�gende�] s'utilise pour ajouter au tableau une l�gende,
et pour positionner cette l�gende ou au-dessus ou au-dessous du tableau.
La d�finition de balise caption doit se mettre toujours avant la [premi�re] d�finition de balise row [o� s'est d�fini �la ligne� ou �rang�e� de cellules].




Le revenu anticip� en fonction de l'ann�e




An

Revenu anticip�





2000

$18M





2001

$25M






Ceci a �t� cr�� par le codage qui suit:
<table border="1" cellpadding="10" width="80%"><caption>Le revenu anticip� en fonction de l'ann�e</caption><tr align="center">  <th>An</th><th>Revenu anticip�</th></tr><tr align="center"><td>2000</td><td>$18M</td></tr><tr align="center"><td>2001</td><td>$25M</td></tr></table>


Et voici le m�me tableau avec la d�finition align="bottom" ins�r�e dans la balise caption:[33]



Le revenu anticip� en fonction de l'ann�e




An

Revenu anticip�





2000

$18M





2001

$25M




L'attribut summary [c'est-�-dire, le �r�sum�], qui se met dans la balise table,
sert � donner un r�sum� de la configuration d'un tableau
pour ceux qui ne peuvent pas la voir. Par exemple, "voici l'indice, An, dans la premi�re colonne du tableau, et voici le revenu y anticip�
dans la deuxi�me colonne".

<table summary="Voici l'indice, An, dans la premi�re colonne du tableau, et voici le revenu y anticip�dans la deuxi�me colonne">


Comment pr�ciser les rapports entre les cellules de titre et celles de donn�es


Quand on traduit ou en braille ou en audio un tableau,
il sera utile d'indiquer la rubrique qui d�crit chaque cellule du tableau.
Un navigateur audio, par exemple, vous permettra d'habitude de traverser le tableau ou de haut en bas et de bas en haut, ou � gauche ou � droite, et d'avancer ainsi d'une cellule � une autre
en �coutant les rubriques li�es � chaque cellule.


Mais, pour le faire possible, il faut gloser
ou les cellules de titre ou les cellules de donn�es.
La fa�on la plus facile de le faire c'est d'ins�rer l'attribut scope [c'est-�-dire, �port�e�, ��tendue�, �champ�]
dans les cellules de titre. Cet attribut s'utilise avec les valeurs les suivantes:





row: La cellule ici est titre de ligne [ou rang�e] enti�re.


col: La cellule ici est titre de colonne enti�re.



Et voici comment se met ce codage dans le tableau ci-dessus qui sert � �tre notre exemple:
<table border="1" cellpadding="10" width="80%"><caption>Le revenu anticip� en fonction de l'ann�e</caption><tr align="center">  <th scope="col">An</th>  <th scope="col">Revenu anticip�</th></tr><tr align="center"><td>2000</td><td>$18M</td></tr><tr align="center"><td>2001</td><td>$25M</td></tr></table>


Pour gloser les tableaux qui sont un peu plus compliqu�s que celui-ci, vous vous servirez de l'attribut headers [c-�-d, �titres�, �rubriques�] pour mettre � disposition du spectateur
une liste, dont les contenus sont s�par�s par des espaces blancs, et o� se sont sp�cifi�s les noms-identificateurs [c'est-�-dire, les id's] de toute autre cellule qui sert � �tre titre d'une cellule particuli�re.
Il faut, bien-s�r, que chacune des cellules pr�cis�es dans la liste headers par son nom-identificateur ait dans sa d�finition un attribut id dont la valeur correspond
� la valeur pr�cis�e dans headers.


Une chose de plus. Vous pourrez penser �
utiliser l'attribut abbr pour pr�ciser l'abr�viation d'un titre tr�s longue.
Cela fait plus tol�rable � �couter des listes pr�cisant les
titres associ�s � chaque cellule de tableau. Voici l'exemple:

<th abbr="W3C">World Wide Web Consortium</th>


Comment cr�er des Roll-overs
et d'autres astuces en code HTML JavaScript


Un peu de JavaScript peut s'utiliser pour faire beaucoup plus vivantes vos pages web.
Vous apprendrez ici comment se sont cr��s des �rollovers�,
c'est � dire, des �l�ments dans une page web o� l'apparence d'un lien change quand on y met la sourise.
Vous apprendrez de plus comment se sont cr��s des annonces banni�res publicitaires
qui peuvent diriger, en circulant, vos visiteurs aux sites internet de vos sponsors.


Roll-Overs

En forme g�n�rique, dans un roll-over il s'agit d'un image
qui sert � �tre un lien hypertexte.
Quand la fl�che-sourise se trouve sur l'image, l'image change d'apparence
pour attirer l'attention au lien.
Par exemple, on pourra
ou y ajouter un �clat de lumi�re,
ou y ajouter un effet ombrag�,
ou changer simplement la couleur du fond.[34]
Voici un exemple:

<script type="text/javascript">if (document.images){    image1 = new Image;    image2 = new Image;    image1.src = "http://www.w3.org/MarkUp/Guide/enter1.gif";    image2.src = "http://www.w3.org/MarkUp/Guide/enter2.gif";}function chgImg(name, image){    if (document.images)    {        document[name].src = eval(image+".src");    }}</script>...<a href="http://www.w3.org/" onMouseOver='chgImg("enter", "image2")'onMouseOut='chgImg("enter", "image1")'><img name="enter"src="http://www.w3.org/MarkUp/Guide/enter1.gif" border="0" alt="Enter if you dare! ou Entrez-vous!, si vous osez le faire!"></a>


et voici l'affichage ...



"0" alt="Enter if you dare! ou Entrez-vous!, si vous osez le faire!">

J'ai cr�� les images ci-dessus en utilisant un logiciel de dessin gratuit.
J'ai ajout� au text l'effet cire chaude [�hot wax effect�], et puis un effet ombrag� [�drop shadow�] qui se laisse tomber au dessous des caract�res composants de l'image [quand on y met la fl�che sourise].
Vous pourrez trouver sur le Web beaucoup de recommandations au sujet du graphisme et de plus,
beaucoup de clip-art qui est enti�rement gratuit, en les recherchant dans les outils ou moteurs de recherche.


Les banni�res publicitaires


Si votre site est sponsoris� � plusieurs,
vous pourrez y disposer d'une banni�re publicitaire qui s'est compos�e d'images qui roulent
en s�rie d'un sponsor � un autre.

En premier, il faut cr�er un image correspondant � chacun de vos sponsors.
Il faut de plus que tout image que vous cr�ez soit de m�me taille.
Les URLs qui correspondent aux images et aux sites internet se mettent dans
les tableaux [c-est-�-dire, dans �les vecteurs ou ensembles d'images�] pr�cis�s par les noms adImages et adURLS. Ces vecteurs ou tableaux se d�finissent
toujours en premier dans votre codage JavaScript.
Vous initialiserez la balise img pour que se soit affich� d'abord, quand la page est t�l�charg�e, le premier image du tableau,
et pour que cet image soit li� � l'adresse internet du sponsor qui correspond � lui.
Le cycle s'est commenc� en utilisant l'action onload qui s'est d�finie dans la balise body [�le corps� du fichier Web].[35]


<html><head><title>Une banniere pub roulant</title><script type="text/javascript">if (document.images){    imagesdesPubs = new Array("http://www.w3.org/MarkUp/Guide/hosts/csail.gif",                "http://www.w3.org/MarkUp/Guide/hosts/ercim.gif", "htp://www.w3.org/MarkUp/Guide/hosts/keio.gif");    URLsdesPubs = new Array("www.csail.mit.edu",                "www.ercim.org", "www.keio.ac.jp");    cePub = 0;}function changezdePub(){    if (document.images)    {        if (document.bannierePub.complete)        {            if (++cePub == imagesdesPubs.length)                cePub = 0;            document.bannierePub.src = imagesdesPubs[cePub];        }    }    // fixer l'intervalle    // pour faire rouler les pubs pour qu'ils se fassent changer    // aux intervalles de trois secondes    setTimeout("changezdePub()", 3000);}function allezyauPub(){    document.___location.href = "http://" + URLsdesPubs[cePub];}</script></head><body onload="changezdePub()">...<a href="javascript:allezyauPub()"><img name="bannierePub"src="http://www.w3.org/MarkUp/Guide/hosts/csail.gif" border="0" alt="Nos sponsors"></a>


Nos Sponsors: [36] src="http://www.w3.org/MarkUp/Guide/hosts/csail.gif" border="0" alt="Nos sponsors" width="48"
height="48">


Un peu de commentaire: Je vous conseil de vous assurer que tout image soit de m�me largeur et de plus
de m�me hauteur quand vous cr�ez les images. Un fa�on alternative pour vous assurer que tout image soit de m�me taille, c'est d'inclure les attributs width [�largeur�] et height [�hauteur�]
dans la balise img [o� se d�finit la mise en forme de votre �image�].


Quoi faire pour les navigateurs ne comprennant pas de script?


Les contenus de balise noscript ne sont pas affich�s
sauf au cas o� le navigateur ne comprend pas de script.
Elle s'utilise quand vous voulez faire abordables, � ceux qui utilisent des navigateurs ne comprennant pas de script,
des renseignements dont ces personnes se trouveraient autrement priv�s de la vue.
Supposons que vous vouliez mettre � disposition en forme de texte les adresses web de vos sponsors:

<noscript>Nos sponsors: <a href="http://www.lcs.mit.edu/">MIT</a>,<a href="http://www.inria.fr/">INRIA</a>, et<a href="http://www.keio.ac.jp/">Keio University</a>.</noscript>



Il y a de nombreux renseignments sur le script que l'on peut trouver en utilisant
les plusieurs outils ou moteurs de recherche.


Pour plus d'information


La Recommandation du W3C pour
le HTML 4.0 [37] est le standard de r�f�rence de la cr�ation HTML.[38]
Cependant cette sp�cification est technique.
Pour des renseignements moins techniques,
vous pourrez procurer un des nombreux libres �crits sur l'HTML, par exemple,
�href="http://www.w3.org/People/Raggett#htmlbook">Raggett on HTML
4� [�Raggett sur l'HTML 4�], publi� en 1998 par Addison Wesley.
Le "http://www.w3.org/TR/xhtml1/">XHTML 1.0 est d�sormais une recommandation du W3C.


Bonne chance!
Alors, �crivez!


Dave Raggett
<dsr@w3.org>

href="http://www.w3.org/Consortium/Legal/2002/ipr-notice-20021231">Droit de copie �
1994-2003 title="World Wide Web Consortium">W3C�
(title="Massachusetts Institute of Technology">MIT, href="http://www.ercim.org/">title="European Research Consortium for Informatics and Mathematics">l'ERCIM,
Keio), Tous droits r�serv�s. Les accords du W3C de href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">responsabilit�, de href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">marque, rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-documents">d'utilisation de document et href="http://www.w3.org//Consortium/Legal/copyright-software">de licenses sur les logiciels s'appliquent toujours [pour cette traduction ainsi que pour le document original].
Vos interactions avec le site http://www.w3.org se conforment � nos d�clarations de confidentialit�
publiques et
particuli�res [� des membres individuels].


href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright �
1994-2003 title="World Wide Web Consortium">W3C�
(title="Massachusetts Institute of Technology">MIT, href="http://www.ercim.org/">title="European Research Consortium for Informatics and Mathematics">ERCIM,
Keio), All Rights Reserved. W3C href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability, href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark, rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-documents">document
use and href="http://www.w3.org/Consortium/Legal/copyright-software">software licensing
rules apply [in the case of this translation as well as in the case of the original document]. Your interactions with this site are in accordance with
our public and
Member
privacy statements.




 

[* Veuillez voir aussi la traduction fran�aise de Blanchenay, D�buter en HTML (texte fran�ais) .]


[** Le document original, Advanced HTML, a �t� traduit par C. E. Whitehead, le 6 juillet 2006.


Mais c'�tait Patrick Blanchenay qui a traduit la plupart des formules qui se trouvent en bas dans cette traduction (veuillez voir, s'il vous pla�t, la traduction des formules dans le document, D�buter en HTML, traduit par P. Blanchenay--mais il faut noter ici que les id�es exprim�es dans le site de Blanchenay ne sont pas toujours les miennes, et le contenu de ce site n'est pas toujours � mon gout).



Le document original du W3C demeure l'unique r�f�rence
officielle.


Toute erreur ou technique ou grammaticale, c'est la faute de la traductrice, bien-s�r! En cas d'erreurs, c'est la derni�re version originale en
anglais qui fait autorit�.


Tout image graphique qui se trouve dans la traduction ci-dessus est la propri�t� de Dave Raggett et du W3C. Comme indiqu� ci-dessus, tout droit d'auteur revient au W3C.




Dans cette traduction, j'ai essay� d'utiliser, dans la mesure qu'il f�t possible, la vocabulaire technique utilis�e par Patrick Blanchenay dans sa traduction, �D�buter en HTML�.


Le texte-commentaire encadr� par des parenth�ses rectangulaires [, et ], et qui se trouve dans la traduction ci-dessus, y �tait inser� par la traductrice;
toute traduction anglaise d'une expression fran�aise, et toute d�finition fran�aise d'une expression anglaise faites par la traductrice ci-dessus sont ainsi encadr�es par des parenth�ses rectangulaires, [, ].

�a veut dire que le commentaire qui se trouve en haut, et en bas (ci-dessous) y �tait ins�r� par la traductrice, et ne doit jamais �tre trait� en aucun cas comme normatif.

Les annonces publicitaires � droite (s'il y en a) sont y ins�r�es par Yahoo/Geocities et n'ont rien � faire avec le W3C.


Je veux remercier les personnes qui m'avaient aid� � faire cette traduction:

1�rement, Patrick Blanchenay (nomm� au-dessus), qui a traduit en fran�ais un autre document de Raggett, �Getting Started with HTML�, ou �D�buter en HTML�
o� j'ai trouv� plusieurs traductions des mots techniques, et aussi, comme j'ai d�j� remarqu� ci-dessus, o� j'ai trouv� les traductions des formules qui se trouvent � la fin de la traduction de Raggett ci-dessus;
2�mement, CARNESECCHI, � wordreference, qui a corrig� le commentaire sur le balisage XHTML, et qui a corrig� aussi le texte qui s'utilise pour la l�gende ou titre de tableau;
et, en plus, Lezert, Hermione, anangelaway, et KaRiNe_Fr, les quatre, et bien-s�r d'autres aussi, � "surlatraduction" href="http://www.wordreference.com">wordreference. Il faut remercier en plus P. Andries et Hapax, les auteurs de la traduction, "Ce que vous devez savoir au sujet du bidi et du balisage au sein des blocs" http://www.w3.org/International/articles/inline-bidi-markup/bidi.fr.pdf, dont j'ai trouv� une expression. J'ai profit� aussi des sites Web avec des renseignements en fran�ais sur le HTML et le JavaScript, et surtout des suivants, l'acad�mie Cr�teil, http://fr.selfhtml.org, �Outils pour Webmaster�
(le site internet du Disciple � wordreference.com), et, en plus, d'I-promotion (un site de �publicit� gratuit�), et de la Laboratoire d'Informatique Fondamentale de Lile: Cours Internet-tous des sites o� se trouvent beaucoup de renseignements sur le HTML. Je veux remercie aussi Catherine Roy et la groupe de traducteurs du w3c pour leurs renseignements sur la traduction d'un document du w3c, et sur la traduction de quelques formules dans cette section-ci.]


[Commentaire:







 [1] pour qu'il s'ensuive l'ex�cution d'un lien associ� � une surface particuli�re.


 [2] Dans la fonction que nous appelons le �roll-over�, il s'agit d'un �l�ment dans votre page web qui change tout � coup quand on y met la sourise.



 [3] Une partie des conseils ici a �t� traduit par Patrick Blanchenay, dans sa traduction de �D�buter en HTML�.


 [4] Voici l'adresse postale anglaise qui se trouve dans le document original de Raggett:



The Willows<br>21 Runnymede Avenue<br>Morton-in-the-marsh<br>Oxfordshire OX27 3BQ<BR>





 [5] Aujourd'hui c'est le XHTML, servi en tant que HTML (en utilisant le type MIME text/html), est non pas le HTML qui est pr�f�r� dans le www.
Le balisage est un petit peu diff�rent en XHTML; en XHTML il y a des r�gles particuli�res qui gouvernent l'utilisation d'une balise fermante, et aussi l'utilisation d'une balise vide--si vous vous int�ressez au XHTML et au XML--qui s'utilisent dans le "web s�mantique", veuillez voir, s'il vous pla�t, la recommandation du W3C pour le XHTML, XHTML� 1.0, 2nd ed.; W3C Recommendation 26 January, 2000, revised 1 August, 2002 (http://www.w3.org/TR/xhtml1/#h-4.6), et surtout, "Empty Elements",
dans ce document, XHTML� 1.0, 2nd ed. (http://www.w3.org/TR/xhtml1/#h-4.6). (Voici une traduction en fran�ais [par Karl Dubost] d'une version moins r�cente de ce document-ci � http://www.la-grange.net/w3c/xhtml1/.)
On peut utiliser le xhtml pour cr�er des pages webs avec des liens vers des pages XML qui ont des divisions s�mantiques qui sont encadr�es entre des balises. Ceux sont des balises et des divisions que vous pourrez cr�er vous-m�me! La disposition de ces liens dans votre page XHTML permet d'afficher dans votre page XHTML le texte qui se trouve entre des balises s�mantiques d'une page XML.
(Pour plus sur le XML, veuillez voir, s'il vous pla�t, http://pages.videotron.com/fyergeau/w3c/xml10/REC-xml-19980210.fr.html, o� se trouve une traduction en fran�ais du document W3C, http://www.w3.org/TR/1998/REC-xml-19980210.)



 [6] au lieu d'utiliser les codes mn�moniques.


 [7] Le symbole # s'utilise seulement pour d�signer la partie d'une adresse web qui pr�cise une division particuli�re de la page web; il ne s'utilise jamais pour d�finir l'adresse du fichier m�me.


 [8] Un peu plus sur l'attribut id: en fin, la balise qui encadre le titre d'un lien n'est qu'un exemple des balises dans lesquels on peut ins�rer l'attribut id pour d�signer l'ancre d'un lien; on peut l'ins�rer dans n'importe quelle balise qui se trouve d�j� d�finie dans votre codage HTML, dans la balise title (en fran�ais, �titre�), dans la balise p (�paragraphe�), dans la balise div (qui s'utilise pour d�finir une �division� de la page), et caetera!


 [9] 
On peut apprendre plus sur les techniques de d�finir le style ci-dessus
ou dans le document, href="http://www.w3.org/MarkUp/Guide/Style.html">Ajouter une
pinc�e de style, o� se trouvent beaucoup de
d�finitions stylistiques, ou en lisant le codage HTML en haut
de cette page; pour voir les d�finitions du style qui se trouvent dans cette page, cliquez sur le menu Affichage, et puis sur source, et puis, r�gardez les d�finitions HTML en haut.

(Si vous incluez les d�finitions stylistiques dans l'en-t�te de votre page html, la r�daction et la r��criture de votre page sera normalement plus facile. Veuillez voir s'il vous pla�t, le document, Ajouter une pinc�e de style, pour plus sur les d�finitions stylistiques.
Mais, malheureusement, il faut faire attention en les utilisant--car, par rapport aux attributs CSS qui s'utilisent pour cr�er les d�finitions stylistiques, il y a encoure peut-�tre plusieurs qui ne sont pas si bien compris par tous les grands navigateurs [l'attribut display, par example, n'est pas tellement soutenu par les navigateurs de type Mozilla/Netscape]; ou, au moins, tout navigateur ne comprend pas peut-�tre toute valeur possible pour un attribut CSS particulier.)



 [10] Les d�finitions ci-dessus pr�cisent que tout texte pre-format� sera affich� dans une couleur �verte�; la couleur du fond sera �blanche�; et de plus, le texte sera bien affich� dans une fonte monospace.


 [11] C'est-�-dire, �le style du document web entier�.


 [12] En fin, peut-�tre � cause de qu'il n'y a pas d'exemple dans ce document-ci du premier type d'affichage d'un image (pour voir un exemple, veuillez voir s'il vous pla�t, �Ajouter de la vie gr�ce aux images�, dans le document, D�buter en HTML, par Raggett; qui est traduit en fran�ais par Blanchenay), ce qui n'est pas tr�s clair dans cette page c'est que la seule fois que l'image ne se met pas dans le texte c'est quand on l'ins�rez en utilisant la balise br clear="all"; autrement, si vous ne choissisez pas de l'aligner ni � droite ni � gauche, l'image sera affich� dans le texte exactement o� vous l'avez mis.
Voici un autre exemple:


L'image ici se trouve width="36" height="27"> dans la ligne de texte, et jamais au dessous de cette ligne. Il n'est pas align� ni � droite ni � gauche. On peut trouver le petit graphique ici, et d'autres graphiques, � Barry's Clipart.com. Veuillez voir aussi l'index des sites clip-art chez l'Universit� de Montr�al, http://www.ebsi.umontreal.ca/jetrouve/internet/moteur5.htm
Actuellement, il y a encore une autre propri�t� CSS, float, qui s'utilise aussi pour pr�ciser l'affichage d'un �l�ment dans votre page. (Pour plus de renseignements sur la propri�t� CSS float, veuillez voir, s'il vous pla�t, le document du W3C, �Cascading Style Sheets, level One�. Mais, attention! il y a encore parmi les plusieurs valeurs possibles pour les attributs vari�s des CSS des valeurs qui ne sont pas si bien compris par tout grand navigateur.)


 [13] L'attribut, clear=all, quand il est ins�r� dans la balise br, force toujours un saut de ligne comme dans l'exemple en haut; il le fait en d�gageant compl�tement tout code HTML qui se trouve dans la balise o� s'est d�fini l'image--ce qui se trouve au-dessus de la balise <br clear=all>.



 [14] D'apr�s le site http://fr.selfhtml.org (http://fr.selfhtml.org/html/graphiques/compose_liens.htm), ce �nom ne peut pas comprendre (ni) d'espace ni de signes avec accent. Le premier signe (apr�s le '#') doit �tre une lettre (mais) (a)pr�s les chiffres sont eux aussi permis.�


 [15] Cela se passe � cause des liens y d�finis.


 [16] L'adresse � laquelle la superficie est li�e est pr�cis�e par l'attribut href.



 [17] C'est � dire, la coordon�e-x du point en haut � gauche, les pixels donn�s � partir de la gauche (cette description de la coordonn�e-x, et une grande partie de description de toute coordonn�e (-x ou -y) ci-dessus se trouve au site, http://fr.selfhtml.org [veuillez voir, s'il vous pla�t, http://fr.selfhtml.org/html/graphiques/compose_liens.htm]). 


 [18] C'est � dire, la coordon�e-y du coin en haut � gauche, les pixels donn�s � partir du haut.


 [19] C'est � dire, la coordon�e-x du coin en bas � droite, les pixels donn�s � partir de la gauche.


 [20] C'est � dire, la coordon�e-y du coin en bas � droite, les pixels donn�s � partir du haut.


 [21] C'est � dire, la coordon�e-x du point au centre, les pixels donn�s � partir de la gauche.


 [22] C'est � dire, la coordon�e-y du point au centre, les pixels donn�s � partir du haut.


 [23] C'est � dire la distance entre le point au centre du cercle et tout autre point n'importe o� sur le bord du cercle.


 [24] Mais ce dernier doit �tre bien-s�r plus grand que toute surface qui le pr�c�de dans la d�finition d'une carte cliquable. 


 [25] En cas o� ils ont choisi que leurs navigateurs ne t�l�chargent point d'image.


 [26] Si vous pr�cisez la largeur d'un
tableau en pixel, vous voulez peut-�tre pr�ciser aussi la taille des caract�res; si vous ne la pr�cisez pas, le navigateur peut
red�finir la largeur du tableau pour accueillir toute taille de
caract�re choisie par vos clients-spectateurs.
Mais, si vous fixez la taille des caract�res, pour assurer que votre tableau reste accessible � tous, il faut bien s�r
utiliser, dans la configuration de votre tableau � largeur
pr�d�finie, une fonte assez grande.

Alternativement, vous pourrez pr�ciser la largeur d'un tableau en em. (Malheureusement, l'affichage d'un image est plus constant si la taille est pr�cis�e en pixel!
Pourtant il est parfois possible de cr�er des images de fond qui semblent �tre �lastiques et qui peuvent s'utiliser avec des caract�res dont la taille est pr�cis�e in em; pour plus de renseignements, veuillez voir, s'il vous pla�t, l'article du W3C/Richard Ishida, Cr�er des images de fond permettant aux pages Web d'�tre localis�es [http://www.w3.org/International/questions/qa-resizing-backgrounds]) 

Attention! En tout cas, quand vous fixez la largeur de votre tableau, l'affichage d'une cellule dans le tableau, dont les contenus comprennent un bloc de texte tr�s long (ou plusieurs blocs de texte tr�s longs), par exemple, le bloc de texte qui indique un lien, varie encore selon le navigateur.
Quand un bloc ou une cha�ne de texte qui indique un lien d�passe la limite de colonne que vous avez fix�e, l'�Internet Explorer�, par exemple, �effectue une c�sure (ou plusieurs c�sures) de cette cha�ne�,
ainsi circulant le texte de la cha�ne dans la cellule pour garder la taille de la cellule, tandis que le �Mozilla Firefox� modifie la largeur de la colonne pour afficher le bloc de texte entier dans une seule ligne.

Pour assurer une affichage uniforme de votre tableau, afin que la largeur ne d�pende pas du navigateur, vous pourrez ou ins�rer le code br pour forcer un retour � la ligne n'importe o� dans une cha�ne de texte, ou ins�rer une division dans la cellule pour laquelle il est possible de dfinir ou la propri�t� CSS word-wrap ou la propri�t� CSS text-wrap. Il ne faut qu'enfermer les contenus de la cellule dans une des paires suivantes--<span>, </span>; <div>, </div>; ou , <BR>. Vous utiliserez ces balises pour pr�ciser les deux propri�t�s CSS, width et word-wrap. Puis, vous utiliserez la premi�re de ces deux propri�t�s pour pr�ciser la largeur de la colonne. Vous utiliserez la derni�re, word-wrap , pour pr�ciser une des deux valeurs possibles, normal, ou break-word (ou peut-�tre, text-wrap, avec un des quatre valeurs, normal, unrestricted, none, ou suppress). La valeur de word-wrap ou text-wrap d�terminera o� le navigateur peut ins�rer un retour � la ligne; par exemple, si vous incluyez dans vos codes stylistiques le suivant:



<style type="text/css">

.section1

  {

  width:620; word-wrap:break-word 

  } 

</style>

ou:



<style type="text/css">

.section1

  {

  width:620; text-wrap:normal 

  } 

</style>

vous pourrez ins�rer une division (ou un paragraphe) dans une cellule de votre tableau comme le suivant:



<p class="section1">

les contenus de la cellule . . .

</p>

Alternativement, si vous pr�f�rez utiliser MS Word pour la r�daction et r��criture de votre page, vous pourrez ins�rer dans la cellule le codage qui suit:



<div style="width: 620; word-wrap: break-word;"> 

</div> 


La propri�t� break-word s'utilise pour effectuer, s'il se trouve n�cessaire, la c�sure d'un mot � 620 pixel.

(Pour plus de renseignements sur word-wrap, veuillez voir s'il vous pla�t, Brian Cryer et Jonathan N. Little, dans le groupement html � Velocity Reviews, http://www.velocityreviews.com/forums/t373091-wrap-long-url-in-table.html; et aussi le �CSS3 Text Effects Module� du W3C, section 5.2, � http://www.w3.org/TR/css3-text/#word-wrap).
Pour plus de renseignements sur les propri�t�s CSS, y incluant la propri�t� width, veuillez voir, s'il vous pla�t, le document du W3C, "Cascading Style Sheets, Level 1". 


 [27] La bordure dont la d�finition se trouve dans la balise table s'utilise pour y encadrer toute cellule du tableau; mais on peut aussi se servir des codes CSS qui se trouvent dans le document, Ajouter une pinc�e de style, pour d�finir des bordures qui encadrent uniquement ou les cellules de titre ou celles de donn�es ou de n'importe quelle cat�gorie de cellule qui s'est cr��e.


 [28] Voici ici les autres attributs de balise table, y inclus le remplissage dans les cellules d'un tableau, l'interlignage entre des cellules, et la largeur de tableau;
voici de plus d'autres attributs qui se mettent dans les balises o� se d�finissent des cellules individuelles ou des lignes du tableau, y incluant l'alignement de texte dans les cellules, et la couleur du texte et du fond.
Veuillez voir, s'il vous pla�t, plus les renseignements sur les tableaux HTML au site, l'acad�mie Cr�teil (�Tableaux HTML�).


 [29] Mais si vous ne voulez que le remplissage se trouve que dans les cellules d�finies par les balises th, par exemple, au lieu de toute cellule, il faut le pr�ciser dans les d�finitions CSS stylistiques, en utilisant les balises, <style>, </style>; veuillez voir, s'il vous pla�t,
Ajouter une pinc�e de style!


 [30] Le texte ci-dessus a �t� traduit par Lezert, � Word Reference.com.


 [31] Aujourd'hui, l'on vous conseille de ne pas utiliser des tableaux pour la configuration et mise en page de la page web, ou au moins, de ne pas utiliser des tableaux tr�s compliqu�s pour faire la mise en page--le probl�me avec le tableau est que le tableau se construe par un navigateur audio comme une disposition de donn�es. 

Les codes CSS se voient souvent comme alternatives aux tableaux pour faire la mise en page d'une page Web. Les codes CSS peuvent s'utiliser pour d�finir le style (c'est � dire, "top-margin", "left-margin", "right-margin", "width", "padding", "background color", "border" ou non, etc) de n'importe quelle division de votre page Web (y inclus, bien s�r, les �l�ments p, span, et div). Ainsi, ces �l�ments (p, span, et div) peuvent s'utiliser pour la configuration et la mise en page de votre page. On peut configurer les �l�ments vari�s de la page en des lignes et colonnes en utilisant des attributs CSS vari�s tels que float, block-progression, et position.

(Pour apprendre comment s'est fait le codage CSS, veuillez voir s'il vous pla�t, un didacticiel du W3C, �Adding a Touch of Style� [didacticiel �crit par Dave Raggett]; veuillez voir aussi la recommandation du W3C, �Cascading Style Sheets, level 1� [par Lee et Bos], et d'autres documents du W3C.)


 [32] Dans la d�finition du tableau, l'attribut "class" sert � indiquer le �class� --c'est-�-dire, la cat�gorie -- de tableau (ou de n'importe quel �l�ment d'une page HTML) dont le style est pr�-d�fini--c'est � dire, dont le style est pr�cis� dans les d�finitions CSS qui se trouvent d'habitude dans l'en-t�te ["head"] du document HTML.


 [33] Avec la d�finition align="bottom", la l�gende ou caption se met au-dessous du tableau.


 [34] C'est � dire, la couleur du fond d'�cran qui se trouve autour de l'image.


 [35] C'est � dire, l'�v�nement, onload, �v�nement qui ne peut pas �tre d�fini qu'une seule fois dans votre page; cela s'est fait souvent dans la balise body ou dans une balise img. Pour plus de renseignments sur les �v�nements java script/html, veuillez voir, s'il vous pla�t, �Les Ev�nements�, � AF OUAIBE Informatique/aflaurent.com.


 [36] Le codage ci-dessus n'est pas le codage original (de Raggett) bien-s�r;: j'ai chang� les noms-identificateurs. Voici les noms-identificateurs originaux des variables et fonctions ci-dessus:

�adImages� (�imagesdesPubs�), �adURLs� (�URLsdesPubs�), �thisAd� (�cePub�), �cycleAds� (�changezdePub�), �gotoAd� (�allezyauPub�), et �adBanner� (�bannierePub�).
Le nom de la fonction, �setTimeout� n'�tait pas traduit en fran�ais par ce qu'il s'agit, dans cette fonction, d'une fonction 'built-in', c'est � dire, une fonction pre-d�finie par le JavaScript.
Par ce que les autres fonctions se d�finissent dans la page cr��e par l'auteur ou programmeur Web, il est possible de les donner des noms selon les gouts de l'auteur de la page.



 [37] La sp�cification HTML 4.01 est la sous-version de HTML 4 la plus r�c�nte; la sous-version HTML 4.01 a supplant� la sous-version HTML 4.0 comme standard de r�f�rence de la cr�ation HTML le 24 d�cembre 1999. La sp�cification HTML 4.01 a �t� traduite en fran�ais par Jean-Jacques Solari, Karl Dubost, Alix Marchandise-Franquet,
Eric Schreiner, Claude Chaunier, et Leyla Greengard. Vous pouvez la trouver � l'adresse internet qui suit: http://www.la-grange.net/w3c/html4.01/cover.html.



 [38] J'ai suivi les traductions de ces formules faites par Patrick Blanchenay dans sa traduction, �D�buter en HTML�; pour que ces formules se soient rendues identiquement dans
les deux traductions de Raggett en fran�ais--la mienne et celle de Blanchenay. Ainsi, c'est Blanchenay qui a traduit la plupart d'expressions dans les formules, y incluant �La Recommandation du W3C pour le HTML 4.0 est le standard de r�f�rence de la cr�ation HTML�, et de plus, �de licenses sur les logiciels�, parmi d'autres. Je n'ai ajout� � elles que quelques petits changements.

La formule qui suit et qui se trouve dans mon propre commentaire, �Le document original du W3C demeure l'unique r�f�rence officielle�, a �t�e fournie par C. Roy.


]






* * *


e:
>
>> Hi
>>
>> may need to find someone to take care of (host, take care of) my
>> translation of Dave Raggett's "Advanced HTML" in the event that my site
>> (http://reflectiosonlandusetranslationsmorebycew.com) goes down (it
>> should be o.k. for about three or four more months?? at least for one??
>> not sure). I am attaching the URL of that translation of
>> Raggett(http://reflectionsonlandusetranslationsmorebycew.com/Creezunhabitatweb/RaggettHTMLavance.html)
>
> [...]
>
>> (I do not know how much longer I'll be able to write to the list; I
>> have what looks like an aneurysm; for various reasons I'm not seeing a
>> doctor.)
>>
>> Best,
>>
>>
>> C. E. Whitehead
>>
>> cewcathar@hotmail.com
>
>
> --
> Coralie Mercier W3C Communications Team mailto:coralie@w3.org
> World Wide Web Consortium - http://www.w3.org
> ERCIM/W3C - N112 - 2004, rte des lucioles - 06560 Sophia Antipolis - FR
> T:+33(0)492387590 F:+33(0)492387822 http://www.w3.org/People/CMercier/
>