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/
>