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

  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 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   [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 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 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:

Avis: Dans le HTML 4.0, on peut utiliser le code HTML mnémonique ™ pour indiquer la marque, mais ™ n'est pas encore aussi bien compris par tous les navigateurs que le ™, 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:

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:

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:

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

Ceci est affiché ainsi:

Ce texte-ci se trouve à la droite de l'image graphique.

L'exemple qui suit utilise align="right" [«aligner à droite»]:

<p><img src="sun.jpg" alt="sunburst graphic"

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

Le texte ci-dessus est affiché ainsi:

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:

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

Ceci est affiché au-dessous:

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.

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: x₁,y₁, x₂,y₂, ... x_n,y_n

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:

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:

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:

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:

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:

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:

et

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:

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»]:

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:

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, Ajouter une pincée de style, un 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:

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].

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]

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

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]

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, «Raggett on HTML 4» [«Raggett sur l'HTML 4»], publié en 1998 par Addison Wesley. Le XHTML 1.0 est désormais une recommandation du W3C.

Bonne chance! Alors, écrivez!

Dave Raggett <dsr@w3.org>

Droit de copie © 1994-2003 W3C^® (MIT, l'ERCIM, Keio), Tous droits réservés. Les accords du W3C de responsabilité, de marque, d'utilisation de document et 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].

Copyright © 1994-2003 W3C^® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and 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.