This page has been robot translated, sorry for typos if any. Original content here.

Fonctionnalités HTML supplémentaires

Caractéristiques supplémentaires

Dave Raguette , le 29 août 2000

Après avoir étudié les caractéristiques de base, nous passons à plus complexe. Maintenant, vous allez apprendre:

  • utiliser des sauts de ligne forcés
  • utiliser des espaces insécables
  • utiliser des codes pour les caractères spéciaux
  • créer des liens vers des extraits de texte
  • utiliser du texte préformaté
  • placer du texte autour des images
  • identifier dans l'image de la zone de référence
  • créer des tables
  • utiliser des roll-overs et d'autres astuces

ps Je recommande d'utiliser HTML Tidy pour maintenir la mise en page.

Sauts de ligne forcés

Parfois, vous pouvez avoir besoin de sauts de ligne forcés. Ceci est fait en utilisant les éléments br . Par exemple, vous souhaitez inclure l'adresse postale:

 <p> Les saules <br>
 21 Runnymede Avenue <br>
 Morton-dans-le-marais <br>
 Oxfordshire OX27 3BQ </ p>

L'élément br ne possède pas la balise de fin. Les éléments communs qui n'ont aucune balise de fin sont appelés vides .

Utiliser des espaces insécables

Les navigateurs coupent automatiquement le texte afin qu'il corresponde aux champs. Les sauts de ligne sont faits dans des espaces. Parfois, il est nécessaire d'interdire une coupure de ligne entre certains mots. Par exemple, entre les mots du nom de la société - "Coke Cola". Pour ce faire, utilisez plutôt la combinaison de symboles & nbsp; par exemple:

 Les boissons gazeuses sucrées telles que le Coca Cola sont devenues populaires dans tout l’univers.

N'utilisez pas plusieurs espaces insécables dans une ligne pour décaler le texte. Les décalages doivent être organisés à l'aide de règles de style.

Codes de caractères spéciaux

Pour les désignations de droits d'auteur ou de marques, il est commode d'utiliser les signes appropriés:

Symbole Combinaison Exemple
Signe de copyright & copie; Droits d'auteur © 1999 W3C
Marque déposée & reg; MagiCo ®
Marque de commerce & # 8482; Webfarer ™

Veuillez noter que la combinaison de & trade; est définie en HTML 4.0 pour désigner une marque, mais qu'elle n'est pas aussi largement prise en charge que & # 8482;

Autres combinaisons utiles:

Symbole Combinaison Exemple
Moins que signe & lt; <
Inscrivez-vous "plus" & gt; >
Esperluette & amp; Et
espace insécable & nbsp;
long tiret & # 8212; -
guillemet & quot; "

En outre, il existe des combinaisons pour les caractères accentués et divers autres caractères 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; × * fois & # 215;
¨ & uml; & # 168; Ø & Oslash; & # 216;
© & copie; & # 169; Ù & Ugrave; & # 217;
ª & ordf; & # 170; Ú & Uacute; & # 218;
" & laquo; & # 171; Û & Ucirc; & # 219;
¬ & pas; & # 172; Ü & Uuml; & # 220;
& timide; & # 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;
´ ; & # 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; ó & eacute; & # 243;
Ä & Auml; & # 196; ô & ocirc; & # 244;
Å & Aring; & # 197; õ & otilde; & # 245;
Æ & AElig; & # 198; ö & ouml; & # 246;
Ç & Ccedil; & # 199; ÷ & diviser; & # 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; þ & épine; & # 254;
Ï & Imuml; & # 207; ÿ & yuml; & # 255;

Pour le grec, les symboles mathématiques définis dans Unicode sont également autorisés à utiliser des références numériques. Ceci est traité plus en détail dans la spécification HTML 4. Notez que les noms des combinaisons ne sont pas reconnus dans Navigator 4. Il est donc recommandé d'utiliser des liens numériques.

Liens vers des pages Web

Imaginez que vous ayez écrit une longue page Web avec une table des matières au début. Comment faire la table des matières des liens vers les sections pertinentes?

Supposons que chaque section commence par un titre, par exemple:

 <h2> Spots de nuit locaux </ h2>

Vous pouvez créer l'en-tête d'un lien hypertexte à l'aide du code suivant: lt; un nom = identifiant > .... </a>

 <h2> <a name="night-spots"> Spots de nuit locaux </a> </ h2>

L'attribut name définit le nom utilisé pour identifier la fonction du lien, dans ce cas: "spots nocturnes". En substance, maintenant autorisé à inclure le lien suivant:

 <ul>
  ...
  <li> <a href="#night-spots"> Spots de nuit locaux </a> </ li>
  ...
 </ ul>

Le caractère # devant le nom de la cible est obligatoire. Si la cible du lien est l'acte d'un ami, placez l'adresse Web de cet acte avant le caractère #. Par exemple, si l'acte est situé à l'adresse "http://www.bath.co.uk/", le lien devrait exister comme ceci:

 <a href="http://www.bath.co.uk/#night-spots"> Spots de nuit locaux </a>

À l'avenir, il sera possible de définir des cibles pour les liens sans l'élément <a> . La nouvelle méthode est beaucoup plus simple, puisqu'il vous suffit d'ajouter la propriété id à l'en-tête, par exemple:

 <h2 id = "night-spots"> Spots de nuit locaux </ h2>

Cette méthode ne fonctionne pas pour les navigateurs de la 4ème génération ou même des navigateurs plus anciens, elle doit donc être utilisée avec précaution!

Texte formaté

L'un des avantages du Web est le fractionnement automatique du texte en lignes en fonction de la taille actuelle de la fenêtre. Mais parfois, le besoin de l'éviter commence. Par exemple, dans le cas de la conclusion sur l'affichage du code du programme. Ceci est fait en utilisant l'élément pre . Par exemple:

 <pre>
  void Node :: Remove ()
  {
  si (prev)
  prev-> next = next;
  sinon si (parent)
  parent-> SetContent (null);

  si (suivant)
  next-> prev = prev;

  parent = null;
  }
 </ pre>

qui est représenté comme suit:

  void Node :: Remove ()
  {
  si (prev)
  prev-> next = next;
  sinon si (parent)
  parent-> SetContent (null);

  si (suivant)
  next-> prev = prev;

  parent = null;
  }

Les couleurs et les arrière-plans du texte sont définis à l'aide de la feuille de style. Notez que tous les sauts de ligne et les espaces sont générés tels qu’ils sont en HTML. L'exception est une nouvelle ligne immédiatement après la balise <pre> initiale , également juste avant la balise </ pre> finale, qui ne sont pas prises en compte. Cela signifie que les exemples de paires suivants seront générés de manière identique:

 <pre> texte formaté </ pre>

 <pre>
 texte formaté
 </ pre>

Généralement, le texte formaté est généré à l'aide d'une police monospace dans laquelle tous les caractères ont la même largeur. Si vous définissez la position du style pour l'élément pre , certains navigateurs n'utilisent pas de police monospace. Vous devez donc définir la propriété font-family. Par exemple, si vous souhaitez que tous les pré-éléments apparaissent en vert, vous pouvez définir la position de style suivante:

 <style type = "text / css">
  pre {color: green;  fond blanc;  famille de polices: monospace;  }
 </ style>

Lorsque vous définissez la couleur du texte, il est recommandé de définir la peinture d'arrière-plan de la même manière. Cela garantit qu'il n'y a pas de situation à un moment où la peinture d'arrière-plan est difficile à distinguer de la couleur du texte. Au lieu de définir la couleur d'arrière-plan pour l'élément pre, il est autorisé de la définir pour l'élément body, par exemple:

 <style type = "text / css">
  corps {couleur: noir;  fond blanc;  }
  pre {color: green;  famille de polices: monospace;  }
 </ style>

Placer du texte autour des images

En HTML, il est permis de choisir si cette image sera considérée comme faisant partie de la ligne de texte actuelle ou si elle sera attachée à la marge droite ou gauche. Ceci est déterminé par l'attribut align . Si l'attribut align est défini à gauche , l'image est attachée à la marge de gauche. Si réglé à droite , à droite. Par exemple:

 <p> <img src = "sun.jpg" alt = "graphique sunburst"
 width = "32" height = "21" align = "left"> Ce texte enveloppe l'image de droite. </ p>

Il sera présenté comme:

graphique sunburst Ce texte entoure l'image de droite.

C'est comment align = "right" est utilisé.

 <p> <img src = "sun.jpg" alt = "graphique sunburst"
 width = "32" height = "21" align = "right"> Ce texte enveloppe l'image à gauche. </ p>

Il sera présenté comme:

graphique sunburst Ce texte entoure l'image de gauche.

Pour continuer la génération de texte sous l'image attachée, il est permis d'utiliser l'élément <br clear=all> , par exemple:

  <p> <img src = "/ img / site / sun.jpg" alt = "graphique sunburst"
 width = "32" height = "21" align = "right"> Ce texte commence à la gauche de l'image. 
<br clear="all"> Ici commence une nouvelle ligne, située sous l’image jointe. </ P>

Il sera présenté comme:

graphique sunburst Ce texte commence à gauche de l'image.
Ici commence une nouvelle ligne située sous l’image jointe.

Zones d'image en tant que liens

L'image suivante est une carte de plusieurs pages Web. Pour aller à la page appropriée, vous devez cliquer sur le cercle.

plan du siteНачало работы Немного стиля Дизайн Web-страниц Углубленный курс HTML

Cette carte est marquée comme suit:

 <p align = "center">
  <img src = "pages.gif" width = "384" height = "245"
  alt = "sitemap" usemap = "# sitemap" border = "0">
  <map name = "sitemap">
  <area shape = "circle" coords = "186,44,45" 
  href = "Overview.html" alt = "Mise en route">
  <area shape = "circle" coords = "42,171,45" 
  href = "Style.html" alt = "Un peu de style">
  <area shape = "circle" coords = "186,171,45"
  alt = "Conception de page Web">
  <area shape = "circle" coords = "318,173,45"
  href = "Advanced.html" alt = "Cours HTML avancé">
  </ map>
 </ p>

L'attribut src de l'élément img définit l'image "pages.gif". L'attribut usemap donne un lien vers l'élément map. L'adresse Web est utilisée à cet effet, le symbole # est donc également utilisé. Pour l'attribut de bordure est défini sur "0", de sorte que autour de l'image ne semble pas bord bleu.

L'élément map définit quel comté de l'image servira de lien. L'attribut name correspond à l'attribut usemap de l'élément img et agit approximativement de la même manière que la propriété name de l'élément <a>. En pratique, l’élément map est obligé d’être dans le fichier bla bla, qui est aussi un élément img.

L'élément area est utilisé pour définir le district de l'image et l'associer à une adresse Web. L'attribut shape définit la forme d'un voisinage: "rect" (rectangle), "cercle" (cercle) ou "poly" (polygone). L'attribut coords définit les coordonnées du district en fonction de la forme.

  • rect: la coordonnée x du bord gauche, la coordonnée y du bord supérieur, la coordonnée x du bord droit, la coordonnée y du bord gauche
  • cercle: coordonnée centre x, coordonnée centre y, pour
  • poly: x 1 , y 1 , x 2 , y 2 , ... x n , y n

Le point supérieur gauche est considéré comme la source de l'image, les coordonnées x et ses y sont égaux à zéro, la coordonnée x augmente le long du parcours vers la droite et la coordonnée y diminue. La plupart des outils permettant de travailler avec des images vous permettent de trouver les coordonnées d'un point donné de l'image.

Si plusieurs zones se croisent, la priorité est déterminée par la zone définie par la première intersection (c’est-à-dire que l’action correspondante se produira lorsque vous cliquerez sur la souris). Pour obtenir des chiffres plus complexes, il est possible de rendre inactive la part du district en la bloquant avec un autre district à l'aide de l'attribut nohref , par exemple:

  <area shape = "circle" coords = "186,44,50" nohref>
  <area shape = "circle" coords = "186,44,100" 
  href = "Overview.html" alt = "Mise en route">

Le premier cercle crée un district inactif dans un cercle plus grand créé par le second élément de surface. Pour qu'un district inactif prenne effet, il doit exister une indication allant jusqu'au district actif, sinon la priorité deviendra la zone active.

Pourquoi utiliser la propriété alt

L'attribut alt de l'élément area est utilisé pour spécifier le libellé du lien. Sans cet attribut, la carte deviendra inaccessible aux personnes qui, sans raison, ne verront pas l'image.

Des tableaux

Les tableaux sont utilisés à titre informatif également pour l'emplacement des éléments sur la page. Vous pouvez étirer les tableaux pour remplir les champs, définir leur largeur fixe ou autoriser le navigateur à redimensionner automatiquement les tableaux en fonction de leur occurrence.

Les tableaux consistent en une ou plusieurs rangées de cellules. Voici un exemple non sophistiqué:

Année Les ventes
2000 18 M $
2001 25 M $
2002 36 M $

Voici le balisage pour cette table:

 <table border = "1">
 <tr> <th> Année </ th> <th> Ventes </ th> </ tr>
 <tr> <td> 2000 </ td> <td> 18 M $ </ td> </ tr>
 <tr> <td> 2001 </ td> <td> 25 M $ </ td> </ tr>
 <tr> <td> 2002 </ td> <td> 36 M $ </ td> </ tr>
 </ table>

L'élément de table sert de conteneur de table . L'attribut border définit l'épaisseur de la face en pixels. L'élément tr sert de conteneur pour la ligne du tableau. Les éléments th servent également de conteneurs pour les en-têtes et de cellules de données, respectivement.

Champs dans la cellule

Agrandir les champs dans toutes les cellules à la fois est autorisé en utilisant l'attribut cellpadding pour l'élément de table. Par exemple, définissez les champs sur 10 pixels:

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

ça va ressembler à ça:

Année Les ventes
2000 18 M $
2001 25 M $
2002 36 M $

Espacement des cellules

L'attribut cellspacing définit l'espace entre les cellules. Définissez l’écart entre les cellules sur 10:

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

Le tableau ressemblera à ceci:

Année Les ventes
2000 18 M $
2001 25 M $
2002 36 M $

Largeur de la table

La largeur de la table peut être définie à l'aide de l'attribut width . Sa valeur peut exister ou la largeur en pixels, ou une valeur en pourcentage représentant le pourcentage de l'espace entre les marges gauche et droite. Par exemple, nous définissons la largeur de la table à 80% de l’écart entre les champs:

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

Le tableau ressemblera à ceci:

Année Les ventes
2000 18 M $
2001 25 M $
2002 36 M $

Aligner le texte dans les cellules

Par défaut, les navigateurs lissent le texte dans les cellules d'en-tête (th) au centre, mais dans les cellules de données (td) à gauche. L'alignement est autorisé à l'aide de l'attribut align , qui peut être appliqué à une cellule ou à une ligne (élément tr). Il peut avoir les valeurs "gauche" (gauche), "centre" (centre) ou "droite" (droite):

 <table border = "1" cellpadding = "10" width = "80%">
 <tr align = "center"> <th> Année </ th> <th> Ventes </ th> </ tr>
 <tr align = "center"> <td> 2000 </ td> <td> 18 M $ </ td> </ tr>
 <tr align = "center"> <td> 2001 </ td> <td> 25 M $ </ td> </ tr>
 <tr align = "center"> <td> 2002 </ td> <td> 36 M $ </ td> </ tr>
 </ table>

Le tableau ressemblera à ceci:

Année Les ventes
2000 18 M $
2001 25 M $
2002 36 M $

L'attribut valign définit l'alignement vertical du contenu de la cellule exactement comme un blah blah. Il est utilisé avec les valeurs "haut" (haut), "milieu" (milieu) ou "bas" (bas) peut également être utilisé avec n'importe quelle cellule ou ligne. Par défaut, le contenu des cellules d'en-tête (th) est centré. Toutefois, le contenu des cellules de données est aligné sur la marge de gauche également en haut de la cellule.

Cellules vides

Les navigateurs traitent les cellules vides différemment. Comparer:

Année Les ventes
2000 18 M $
2001 25 M $
2002 36 M $
2003

plus

Année Les ventes
2000 18 M $
2001 25 M $
2002

Ce dernier résultat si la cellule est vide:

 <td> </ td>

Pour éviter cela, mettez-y un espace indestructible:

 <td> & nbsp; </ td>

Cellules couvrant plusieurs lignes ou colonnes

Complétons l’échantillon précédent en divisant les ventes dans les régions nord et sud:

Année Les ventes
Au nord Au sud Total
2000 10 M $ 8 M $ 18 M $
2001 14 M $ 11 M $ 25 M $

La rubrique "Année" occupe désormais deux lignes, mais la rubrique "Ventes" comporte trois colonnes. Pour ce faire, définissez les attributs rowspan sur colspan, respectivement. Voici le balisage pour cet exemple:

 <table border = "1" cellpadding = "10" width = "80%">
 <tr align = "center"> <th rangspan = "2"> Année </ th> <th colspan = "3"> Ventes </ th> </ tr>
 <tr align = "center"> <th> Nord </ th> <th> Sud </ th> <th> Total </ th> </ tr>
 <tr align = "center"> <td> 2000 </ td> <td> 10 M $ </ td> <td> 8 M $ </ td> <td> 18 M $ </ td> </ tr>
 <tr align = "center"> <td> 2001 </ td> <td> 14 M $ </ td> <td> 11 M $ </ td> <td> 25 M $ </ td> </ tr>
 </ table>

Ceci peut être simplifié en tirant parti du fait que les navigateurs n’exigent pas de balises de fin pour les cellules et les lignes de tableau:

 <table border = "1" cellpadding = "10" width = "80%">
 <tr align = "center"> <th rangspan = "2"> Année <th colspan = "3"> Ventes
 <tr align = "center"> <th> Nord <th> Sud <th> Total
 <tr align = "center"> <td> 2000 <td> 10 M $ <td> 8 M $ <td> 18 M $
 <tr align = "center"> <td> 2001 <td> 14 M $ <td> 11 M $ <td> 25 M $
 </ table>

Notez que, puisque l'en-tête «Année» occupe deux lignes, l'élément principal de l'autre ligne est situé dans une autre colonne, mais pas dans la première.

Tables sans bordure

De tels tableaux sont largement utilisés pour formater des pages et créer des grilles. Pour ce faire, ajoutez simplement la propriété border = "0" et cellspacing = "0" à l'élément de tableau:

Année Les ventes
2000 18 M $
2001 25 M $
2002 36 M $

Ceci est réalisé en utilisant le balisage suivant:

 <table border = "0" cellspacing = "0" cellpadding = "10">
 <tr> <th> Année </ th> <th> Ventes </ th> </ tr>
 <tr> <td> 2000 </ td> <td> 18 M $ </ td> </ tr>
 <tr> <td> 2001 </ td> <td> 25 M $ </ td> </ tr>
 <tr> <td> 2002 </ td> <td> 36 M $ </ td> </ tr>
 </ table>

Si vous ne spécifiez pas la propriété cellspacing, il y aura un espace entre les cellules, comme indiqué ci-dessous:

Année Les ventes
2000 18 M $
2001 25 M $
2002 36 M $

Utiliser dans les tables de couleurs

Sur cette page, la feuille de style sert également à définir une couleur d'arrière-plan différente pour les cellules d'en-tête. Voici les dispositions du style que nous avons utilisé:

 table {
  marge gauche: -4%
  famille de polices: sans-serif;
  fond blanc;
  largeur de bordure: 2;
  couleur de bordure: blanc;
 }
 th {font-family: sans-serif;  arrière-plan: rgb (204, 204, 153)}
 td {font-family: sans-serif;  arrière-plan: rgb (255, 255, 153)}

Les deux dernières lignes définissent la peinture de fond pour les cellules également en fonction des valeurs définies rouge / vert / bleu. Les nombres doivent être compris entre 0 et 255 (couleur totalement saturée).

De manière différente, la peinture d'arrière-plan peut être définie à l'aide de l'attribut bgcolor . Cette technique fonctionne dans à peu près tous les navigateurs et ne nécessite pas de prise en charge des feuilles de style. Commencez par déterminer les valeurs hexadécimales des composants écarlates, verts et bleus que vous souhaitez utiliser. Le guide de style a un convertisseur .

 <table border = "0" cellspacing = "0" cellpadding = "10"> <tr> <th bgcolor = "# CCCC99"> Année </ th> <th bgcolor = "# CCCC99"> Ventes </ th> < / tr> <tr> <td bgcolor = "# FFFF66"> 2000 </ td> <td bgcolor = "# FFFF66"> $ 18M </ td> </ tr> <td bgcolor = "# FFFF66" > 2001 </ td> <td bgcolor = "# FFFF66"> $ 25M </ td> </ tr> <tr> <td bgcolor = "# FFFF66"> 2002 </ td> <td bgcolor = "# FFFF66" > 36 M $ </ td> </ tr> </ table> 

Accès aux tables

Si vous ne voyez pas la table, il est difficile de comprendre en quoi consiste le mot. Il est logique de spécifier les informations d'affectation et la structure de la table. L'élément caption vous permet de spécifier un en-tête et de le placer au-dessus ou au-dessous du tableau. L'élément caption doit obligatoirement être placé après l'élément tr de la première ligne.

Estimation du chiffre d'affaires par année
Année Les ventes
2000 18 M $
2001 25 M $

Cette table est définie par le balisage suivant:

 <table border = "1" cellpadding = "10" width = "80%">
 <caption> Revenu estimé des ventes par année </ caption>
 <tr align = "center">
  <th> Année </ th> <th> Ventes </ th>
 </ tr>
 <tr align = "center"> <td> 2000 </ td> <td> 18 M $ </ td> </ tr>
 <tr align = "center"> <td> 2001 </ td> <td> 25 M $ </ td> </ tr>
 </ table>

Voici la table, mais la propriété align = "bottom" a été ajoutée à l'élément caption:

Estimation du chiffre d'affaires par année
Année Les ventes
2000 18 M $
2001 25 M $

L’attribut summary de l’élément table doit être utilisé pour décrire la structure de la table pour ceux qui ne peuvent pas la voir du tout. Par exemple: "dans la colonne principale, les années sont données, mais dans l’autre - l’arrivée de cette année".

 <table summary = "les années sont indiquées dans la colonne principale, mais dans l'autre - l'arrivée cette année">

Définition des relations entre les cellules des en-têtes de données

Si la table est générée sur un périphérique audio ou sur un périphérique permettant d'achever l'alphabet braille, il est logique d'indiquer à quelle cellule appartiennent les en-têtes. Par exemple, un navigateur de son peut également se déplacer de haut en bas ou de droite à gauche dans les cellules du tableau, en prononçant un titre correspondant devant chaque cellule.

Pour cela, vous devez annoter chaque cellule de l'en-tête / des données. Le moyen le plus simple consiste à ajouter la propriété scope aux cellules d'en-tête. Il peut être utilisé avec les valeurs suivantes:

  • row : La cellule contient un en-tête pour les éléments restants de la ligne en cours.
  • col : La cellule contient un en-tête pour les éléments restants de la colonne en cours.

Appliquez ceci à notre table:

 <table border = "1" cellpadding = "10" width = "80%">
 <caption> Revenu estimé des ventes par année </ caption>
 <tr align = "center">
  <th scope = "col"> Année </ th>
  <th scope = "col"> Ventes </ th>
 </ tr>
 <tr align = "center"> <td> 2000 </ td> <td> 18 M $ </ td> </ tr>
 <tr align = "center"> <td> 2001 </ td> <td> 25 M $ </ td> </ tr>
 </ table>

Pour les tables plus complexes, il est autorisé d'utiliser la propriété d'en- tête pour des cellules de données individuelles afin de spécifier une liste d'identifiants de cellules d'en-tête séparés par des espaces. Chaque cellule de l'en-tête doit avoir une propriété id avec un identifiant correspondant.

Enfin, envisagez d'utiliser l'attribut abbr pour définir les abréviations des en-têtes longs. Cela facilitera l’écoute des listes d’en-têtes de cellules, par exemple:

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

Les roll-overs sont aussi d'autres astuces.

Un peu de javascript peut revitaliser la page de manière significative. Vous trouverez ci-dessous comment créer des "survols", à quel moment l'apparence externe du lien change lorsque le pointeur de la souris est placé dessus. En outre, vous apprendrez à créer des bannières cycliques permettant de rediriger les visiteurs vers les sites de vos sponsors.

Roll over

Le plus souvent, le survol est une image servant de lien hypertexte. Lorsque le pointeur de la souris s'adresse à cette image, il change d'attention pour le lien. Par exemple, vous pouvez ajouter un effet de rayonnement, une ombre ou simplement modifier la peinture d'arrière-plan. Voici un exemple:

 <script type = "text / javascript">
 si (document.images)
 {
  image1 = nouvelle image;
  image2 = nouvelle image;
  image1.src = "enter1.gif";
  image2.src = "enter2.gif";
 }

 fonction chgImg (nom, image)
 {
  si (document.images)
  {
  document [nom] .src = eval (image + ". src");
  }
 }
 </ script>

 ...

 <a href = "/" onMouseOver = 'chgImg ("enter", "image2")'
 onMouseOut = 'chgImg ("enter", "image1")'> <img name = "enter"
 src = "enter1.gif" border = "0" alt = "Entrez si vous tentez votre chance!"> </a>

et voici à quoi ça ressemble ...

Entrez si vous prenez le risque!

J'ai créé les données d'image à l'aide d'un éditeur graphique gratuit, en ajoutant l'effet de cire chaude et une ombre. Avec l'aide des moteurs de recherche sur le Web, il est permis de trouver beaucoup de conseils et d'images gratuites.

Bannières

Si votre site appartient à plusieurs sponsors, il est autorisé d'utiliser un changement cyclique de bannières de tous les sponsors. Tout d’abord, vous devez créer une bannière pour chaque sponsor. Toutes les images doivent exister dans la même taille. Les URL d'image correspondantes des sites sont ensuite placées dans des tableaux nommés adImages et adURL , définis dans la source du script. L'élément img de chaque lien doit être initialisé avec l'image principale du tableau. La boucle commence par l'événement onload dans l'élément body.

 <html>
 <tête>
 <titre> bannières circulaires </ title>
 <script type = "text / javascript">
 si (document.images)
 {
  adImages = new Array ("/ img / site / mit.gif",
  "/img/site/inria.gif", "/site/img/keio.gif");
  adURLs = new Array ("www.lcs.mit.edu",
  "www.inria.fr", "www.keio.ac.jp");
  thisAd = 0;
 }

 fonction cycleAds ()
 {
  si (document.images)
  {
  si (document.adBanner.complete)
  {
  if (++ thisAd == adImages.length)
  thisAd = 0;

  document.adBanner.src = adImages [thisAd];
  }
  }

  // changement de bannière toutes les 3 secondes
  setTimeout ("cycleAds ()", 3000);
 }

 fonction gotoAd ()
 {
  document.location.href = "http: //" + adURLs [thisAd];
 }
 </ script>
 </ head>
 <body onload = "cycleAds ()">
 ...

 <a href="javascript:gotoAd()"> <img name = "adBanner"
 src = "/ img / site / mit.gif" border = "0" alt = "Nos sponsors"> </a>

Nos sponsors: Nos sponsors

Remarque: il est également recommandé de vérifier si toutes les images ont la même hauteur et la même largeur. Vous pouvez également définir les attributs width et height pour l'élément img afin de vous assurer que toutes les images ont la même taille.

Et si les navigateurs ne supportent pas les scripts?

Le contenu de l'élément noscript est affiché uniquement si le navigateur ne prend pas en charge les scripts. Il est obligé de l'utiliser si vous voulez donner aux gens l'accès à des informations qui autrement leur seraient inaccessibles, si le navigateur ne supporte pas les scripts. Supposons que vous souhaitiez créer des liens vers des sponsors sous forme de texte:

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

De nombreuses informations gratuites sur les scripts peuvent être trouvées sur les moteurs de recherche.