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

Fonctions HTML supplémentaires

Caractéristiques supplémentaires

Dave Ragett , le 29 août 2000

Après avoir étudié les principales possibilités, passons aux plus complexes. Maintenant, vous apprendrez:

  • 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 fragments de texte
  • utiliser du texte préformaté
  • placer du texte autour des images
  • définir dans les images des liens de district
  • créer des tables
  • utiliser des roll-overs également d'autres techniques

ps Pour maintenir la routine dans le balisage, je recommande d'utiliser HTML Tidy .

Pauses de ligne forcées

Parfois, vous devrez peut-être forcer les sauts de ligne. Ceci est fait en utilisant les éléments br . Par exemple, vous souhaitez inclure une 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 l'étiquette finale. Les éléments communs qui n'ont pas de balises finies sont appelés vides .

Utiliser des espaces insécables

Les navigateurs cassent automatiquement le texte afin qu'il corresponde aux champs. Les sauts de ligne sont produits dans des espaces d'espaces. Parfois, il est nécessaire d'empêcher une rupture de ligne entre certains mots. Par exemple, entre les mots du nom de l'entreprise - "Coke Cola". Pour ce faire, vous devez utiliser le & nbsp; , par exemple:

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

N'utilisez pas plusieurs espaces insécables dans une ligne pour décaler le texte. Le déplacement devrait être organisé en utilisant des règles de style.

Codes de caractères spéciaux

Pour la désignation des droits d'auteur ou des marques, il convient d'utiliser les signes appropriés:

Symbole Combinaison Exemple:
Marque de copyright & copie; Copyright © 1999 W3C
Marque déposée & gt; MagiCo ®
Marque déposée & # 8482; Webfarer ™

Notez que dans HTML 4.0, la combinaison de commerce est définie pour signifier une marque de commerce, mais elle n'est pas aussi largement supportée que & # 8482;

Autres combinaisons utiles:

Symbole Combinaison Exemple:
Le signe "moins" & lt; <
Le signe "plus" & gt; >
Ampersand & amp; &
lacune indissoluble & nbsp;
long tiret & # 8212; -
guillemets & quot; "

En outre, il existe des combinaisons de symboles avec des signes diacritiques également pour divers autres jeux de caractères Latin-1:

& nbsp; & # 160; Un & ETH; & # 208;
¡ & iexcl; & # 161; Ñ & Ntilde; & # 209;
¢ & gt; & # 162; N & Ograve; & # 210;
£ & livre; & # 163; Ó & Oacute; & # 211;
¤ & curren; & # 164; Ô & Ocirc; & # 212;
¥ & yen; & # 165; Q & Otilde; & # 213;
| | & brvbar; & # 166; Ö & Ouml; & # 214;
§ & sect; & # 167; × x & gt; & # 215;
¨ & uml; & # 168; Ø & Oslash; & # 216;
© & copie; & # 169; Ù & Ugrave; & # 217;
ª & ordf; & # 170; Ú & Uacute; & # 218;
« & laquo; & # 171; Û & Ucirc; & # 219;
¬ & non; & # 172; Ü & Uuml; & # 220;
& timide; & # 173; Ý & Yacute; & # 221;
® & gt; & # 174; Þ & THORN; & # 222;
¯ & macr; & # 175; ß & szlig; & # 223;
° & gt; & # 176; à & agrave; & # 224;
± & gt; & # 177; á & aacute; & # 225;
² & sup2; & # 178; â & acirc; & # 226;
³ & sup3; & # 179; ã & atilde; & # 227;
' & amp; & # 180; ä & auml; & # 228;
μ & micro; & # 181; å & amp; & # 229;
& para; & # 182; æ & aelig; & # 230;
· & lt; / RTI & gt; & # 183; ç & ccedil; & # 231;
¸ & cédille; & # 184; è & egrave; & # 232;
¹ & sup1; & # 185; é & eacute; & # 233;
º & ord; & # 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; ñ & nt; & # 241;
 & Acirc; & # 194; ò & ograve; & # 242;
À & Atilde; & # 195; ó & eacute; & # 243;
Ä & Auml; & # 196; ô & ocirc; & # 244;
Å & Amp; 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;
Ï & Iuml; & # 207; ÿ & yuml; & # 255;

Pour les symboles mathématiques grecs définis en Unicode, il est permis d'utiliser des références numériques. Cela est décrit plus en détail dans la spécification HTML 4. Notez que les noms de combinaison ne sont pas reconnus dans Navigator 4, il est donc recommandé d'utiliser des références numériques.

Références à des fragments de pages Web

Imaginez que vous avez écrit une longue page Web avec une table des matières au début. Comment rendre la table des matières liée aux sections pertinentes?

Supposons que chaque section commence par un en-tête, par exemple:

 <h2> Points de nuit locaux </ h2>

Pour rendre l'en-tête le but du lien hypertexte est possible en utilisant le code suivant: lt; a name = identifier > .... </a>

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

L'attribut name spécifie le nom utilisé pour identifier la cible du lien, dans ce cas: "night-spots". En substance, il est maintenant possible d'inclure le lien suivant:

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

Le symbole # avant le nom de la cible est requis. Si la cible du lien est dans l'ami de l'acte, mettez l'adresse web de cet acte devant le symbole #. Par exemple, si l'action se trouve sur "http://www.bath.co.uk/", le lien doit exister comme suit:

 <a href="http://www.bath.co.uk/#night-spots"> Local Night Spots </a>

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

 <h2 id = "night-spots"> Taches de nuit locales </ h2>

Cette méthode ne fonctionne pas pour la 4ème génération de navigateurs ou même pour les anciens navigateurs, il faut donc l'utiliser avec précaution!

Texte formaté

L'un des avantages du Web est la division automatique du texte en lignes selon la taille de la fenêtre en cours. Mais parfois, il commence à l'éviter. Par exemple, si le code du programme est affiché. Ceci est fait en utilisant l'élément pre . Par exemple:

 <pre>
  void Node :: Supprimer ()
  {
  si (préc.)
  prev-> next = next;
  d'autre si (parent)
  parent-> SetContent (null);

  si (suivant)
  next-> prev = prev;

  parent = null;
  }
 </ pre>

qui est présenté sous la forme suivante:

  void Node :: Supprimer ()
  {
  si (préc.)
  prev-> next = next;
  d'autre si (parent)
  parent-> SetContent (null);

  si (suivant)
  next-> prev = prev;

  parent = null;
  }

Les couleurs du texte et de l'arrière-plan sont définies à l'aide de la feuille de style. Notez que tous les sauts de ligne sont également générés exactement comme ils le sont dans le code HTML. L'exception est le saut de ligne immédiatement après la balise <pre> initiale , également immédiatement avant la balise de fin </ pre> , qui n'est pas prise en compte. Cela signifie que la paire d'échantillons suivante sera générée 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 à espacement fixe, 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 la police à espacement fixe de quelque façon que ce soit, vous devez donc définir définitivement la propriété font-family. Par exemple, si vous voulez, pour que tous les éléments de pre soient représentés en vert, vous pouvez définir la position suivante du style:

 <style type = "text / css">
  pré {couleur: vert;  fond: blanc;  font-family: monospace;  }
 </ style>

Lorsque vous définissez la couleur du texte, il est recommandé de définir également la couleur d'arrière-plan. Cela garantit qu'il n'y a pas de situations, à quel moment il est difficile de distinguer la peinture de fond de la couleur du texte. Au lieu de définir la couleur d'arrière-plan de l'élément pre, vous pouvez le définir pour l'élément body, par exemple:

 <style type = "text / css">
  body {couleur: noir;  fond: blanc;  }
  pré {couleur: vert;  font-family: monospace;  }
 </ style>

Placer du texte autour des images

En HTML, vous pouvez choisir si l'image sera considérée comme faisant partie de la ligne de texte en cours ou attachée à la marge droite ou gauche. Ceci est déterminé par l'attribut align . Si l'attribut align est laissé , 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 vers la droite. </ p>

Il sera présenté comme ceci:

graphique sunburst Ce texte entoure l'image sur la droite.

Voici comment utiliser align = "right"

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

graphique sunburst Ce texte entoure l'image sur la gauche.

Pour que la génération de texte continue sous l'image jointe, 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 à gauche de l'image. 
<br clear = "all"> Ici commence une nouvelle ligne, située sous l'image ci-jointe. </ P>

Il sera présenté comme ceci:

graphique sunburst Ce texte commence à gauche de l'image.
Ici commence une nouvelle ligne, située sous l'image ci-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 la tasse.

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

Une telle 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">
  <zone forme = "cercle" coords = "186,44,45" 
  href = "Overview.html" alt = "Démarrer">
  <zone forme = "cercle" coords = "42,171,45" 
  href = "Style.html" alt = "Un peu de style">
  <zone forme = "cercle" coords = "186,171,45"
  alt = "Conception Web">
  <zone forme = "cercle" 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 spécifie une référence à l'élément de carte. L'adresse Web est utilisée pour cela, donc le symbole # est également utilisé. Pour l'attribut border , définissez la valeur sur "0", de sorte que la bordure bleue n'apparaisse pas autour de l'image.

L'élément de carte détermine les zones de l'image qui serviront de références. L'attribut name correspond à l'attribut usemap de l'élément img , qui agit également 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 ce bon fichier, qui est également un élément img.

L'élément area est utilisé pour déterminer le comté de l'image et l'associer à l'adresse Web. L'attribut shape définit la forme du cercle: "rect", "circle" ou "poly". L'attribut coords détermine les coordonnées du comté en fonction du formulaire.

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

Le speckle supérieur gauche est considéré comme la source de l'image, la coordonnée x est également égale à zéro, la coordonnée x est augmentée le long du parcours vers la droite, la coordonnée y est vers le bas. La plupart des outils pour le travail avec des images vous permettent d'acquérir les coordonnées d'un point donné de l'image.

Si plusieurs régions se croisent, la priorité est attribuée à la zone déterminée par le premier de l'intersection (c'est-à-dire que l'action correspondante résultera du clic de la souris). Pour obtenir des chiffres plus complexes, la part du district peut être désactivée en la chevauchant avec un autre district à l'aide de l'attribut nohref , par exemple:

  <zone forme = "cercle" coords = "186,44,50" nohref>
  <zone forme = "cercle" coords = "186,44,100" 
  href = "Overview.html" alt = "Démarrer">

Le premier cercle crée un cercle inactif dans un cercle de plus grand diamètre créé par le deuxième élément de zone. Pour qu'un district inactif ait un effet, il doit exister jusqu'à ce qu'il soit actif, sinon la priorité deviendra la région active.

Pourquoi utiliser la propriété alt

L'attribut alt de l'élément area est utilisé pour spécifier une référence de texte pour le lien. Sans cet attribut, la carte ne sera pas accessible aux personnes qui, pour une raison quelconque, ne verront pas les images de quelque manière que ce soit.

Tableaux

Les tableaux sont utilisés pour l'information aussi pour la disposition des éléments sur la page. Vous pouvez dessiner des tables pour remplir des champs, les définir sur une largeur fixe ou autoriser le navigateur à redimensionner automatiquement les tables en fonction de leur occurrence.

Les tables consistent en une ou plusieurs rangées de cellules. Voici un exemple simple:

Année Ventes
2000 18 M $
2001 25 M $
2002 36 M $

Voici le balisage pour cette table:

 <table border = "1">
 <tr> <e> Année </ th> <th> Ventes </ th> </ tr>
 <tr> <td> 2000 </ td> <td> 18 millions $ </ 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 spécifie l'épaisseur du visage en pixels. L'élément tr sert de conteneur de la ligne de la table. Les éléments de th servent également de conteneurs pour les en-têtes des cellules de données, respectivement.

Champs dans une cellule

Augmenter 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 à ceci:

Année Ventes
2000 18 M $
2001 25 M $
2002 36 M $

Distance entre les cellules

L'attribut cellpacing spécifie l'espacement entre les cellules. Définir l'écart entre les cellules à 10:

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

La table ressemblera à ceci:

Année Ventes
2000 18 M $
2001 25 M $
2002 36 M $

Largeur de la table

Vous pouvez définir la largeur de la table en utilisant l'attribut width . Sa valeur peut être soit une largeur en pixels, soit une valeur en pourcentage représentant le pourcentage d'espace entre les champs gauche et droit. Par exemple, nous définissons la largeur de la table à 80% de l'écart entre les champs:

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

La table ressemblera à ceci:

Année 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é avec l'attribut align , qui peut être appliqué à une cellule ou à une ligne (élément tr). Il peut contenir les valeurs "gauche", "centre" (centre) ou "droite" (droite):

 <table border = "1" cellpadding = "10" largeur = "80%">
 <tr align = "center"> <th> Année </ th> <th> Ventes </ th> </ tr>
 <tr align = "centre"> <td> 2000 </ td> <td> 18 millions $ </ 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>

La table ressemblera à ceci:

Année Ventes
2000 18 M $
2001 25 M $
2002 36 M $

L'attribut valign détermine exactement l'alignement vertical du contenu de la cellule. Il est utilisé avec les valeurs "top", "middle" ou "bottom" peuvent également être utilisés avec n'importe quelle cellule ou ligne. Par défaut, le contenu des cellules d'en-tête (th) est centré, mais 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 différemment les cellules vides. Comparez:

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

plus

Année Ventes
2000 18 M $
2001 25 M $
2002

Ce dernier résultat si la cellule est vide:

 <td> </ td>

Pour éviter cela, placez un espace insécable:

 <td> & nbsp; </ td>

Les cellules qui occupent plusieurs rangées ou colonnes

Terminons l'échantillon précédent en divisant les ventes dans la région du nord et du sud:

Année Ventes
Nord Sud Total
2000 10 M $ 8 M $ 18 M $
2001 14 M $ 11 M $ 25 M $

Le titre "Année" prend maintenant deux lignes, mais la rubrique "Ventes" - trois colonnes. Ceci est réalisé par la route de définir les attributs rowspan ainsi que colspan, respectivement. Voici le balisage de cet exemple:

 <table border = "1" cellpadding = "10" largeur = "80%">
 <tr align = "center"> <th rowspan = "2"> Année </ th> <th colspan = "3"> Ventes </ th> </ tr>
 <tr align = "centre"> <th> Nord </ th> <th> Sud </ th> <th> Total </ th> </ tr>
 <tr align = "centre"> <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>

Cela peut être simplifié en profitant du fait que les navigateurs ne nécessitent en aucun cas des balises de fin pour les cellules, ainsi que des lignes de table:

 <table border = "1" cellpadding = "10" largeur = "80%">
 <tr align = "center"> <th rowspan = "2"> Année <th colspan = "3"> Ventes
 <tr align = "centre"> <th> Nord <th> Sud <th> Total
 <tr align = "centre"> <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 th de l'autre ligne est situé dans une autre colonne, mais pas dans la première colonne.

Tableaux sans frontières

De telles tables sont largement utilisées pour le formatage des pages et la création d'une grille sur celles-ci. Pour ce faire, il suffit d'ajouter la propriété border = "0" et cellspacing = "0" à l'élément table:

Année 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> <e> Année </ th> <th> Ventes </ th> </ tr>
 <tr> <td> 2000 </ td> <td> 18 millions $ </ 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 Ventes
2000 18 M $
2001 25 M $
2002 36 M $

Utiliser dans les tableaux de couleurs

Sur cette page, une feuille de style est utilisée pour définir une couleur d'arrière-plan différente pour les cellules d'en-tête des données. Voici les positions de style que nous avons utilisées:

 table {
  marge gauche: -4%
  font-family: sans-serif;
  fond: blanc;
  border-width: 2;
  border-color: blanc;
 }
 th {font-famille: sans-serif;  arrière-plan: rgb (204, 204, 153)}
 td {font-famille: sans-serif;  arrière-plan: rgb (255, 255, 153)}

Les deux dernières lignes définissent la peinture de fond pour les cellules et td selon les couleurs rouge / vert / bleu spécifiées. Les nombres doivent être compris entre 0 et 255 (couleur complètement saturée).

D'une autre manière, vous pouvez définir une peinture de fond avec l'attribut bgcolor . Cette méthode fonctionne dans presque tous les navigateurs et ne nécessite aucun support pour les feuilles de style. Commencez par déterminer les valeurs hexadécimales des composantes écarlate, verte et bleue de la couleur que vous souhaitez utiliser. Le Guide de Style contient 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"> 18 M $ </ td>
  </ tr>
  <tr>
  <td bgcolor = "# FFFF66"> 2001 </ td>
  <td bgcolor = "# FFFF66"> 25 M $ </ td>
  </ tr>
  <tr>
  <td bgcolor = "# FFFF66"> 2002 </ td>
  <td bgcolor = "# FFFF66"> 36 M $ </ td>
  </ tr>
 </ table>

Accès aux tables

Si vous n'observez pas la table d'une manière ou d'une autre, il est difficile de comprendre le sens du mot. Il est également logique de spécifier des informations sur l'affectation de la structure de la table. L'élément de légende vous permet de spécifier un titre pour le placer également au-dessus ou au-dessous de la table. L'élément caption doit être situé plus tard que l'élément tr de la première ligne.

Chiffre d'affaires estimé des ventes par année
Année Ventes
2000 18 M $
2001 25 M $

Cette table est spécifiée par le balisage suivant:

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

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

Chiffre d'affaires estimé des ventes par année
Année 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 voir la table de quelque manière que ce soit. Par exemple: "dans la colonne principale les années sont données, mais dans un autre - l'arrivée pour cette année."

 <table summary = "dans la colonne principale les années sont données, mais dans une autre - arrivée pour cette année">

Déterminer la relation entre les cellules des en-têtes aussi des données

Si la table est générée sur le périphérique audio ou sur le périphérique pour inclure l'alphabet Braille, il est logique de spécifier à quelle cellule appartiennent les en-têtes. Par exemple, un navigateur audio peut également se déplacer vers le haut, soit vers le bas, soit vers la droite et vers la gauche le long des cellules d'une table avec un message préfixé avant chaque cellule de l'en-tête correspondant.

Pour ce faire, vous devez fournir une annotation à chaque en-tête / cellule de 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 le titre des éléments restants de la ligne en cours.
  • col : La cellule contient le titre pour les éléments restants de la colonne actuelle.

Appliquez ceci à notre table:

 <table border = "1" cellpadding = "10" largeur = "80%">
 <légende> 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 = "centre"> <td> 2000 </ td> <td> 18 millions $ </ td> </ tr>
 <tr align = "center"> <td> 2001 </ td> <td> 25 M $ </ td> </ tr>
 </ table>

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

Et à la fin, pensez à utiliser l'attribut abbr pour définir des abréviations pour les en-têtes longs. Cela facilitera l'écoute des listes d'en-têtes des cellules, par exemple:

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

Roll-Overs aussi d'autres techniques

Un petit JavaScript peut considérablement revitaliser la page. Voici comment créer des "rollovers", à quel moment l'apparence du lien change lorsque le pointeur de la souris est placé dessus. En outre, vous apprendrez à créer des bannières cycliques qui vous aideront à rediriger les visiteurs vers les sites de votre sponsor.

Roll-Overs

Le plus souvent, le roll-over est une image servant de lien hypertexte. Lorsque le pointeur de la souris plaît à cette image, elle change pour attirer l'attention sur le lien. Par exemple, vous pouvez ajouter un effet de lueur, une ombre ou simplement changer la couleur d'arrière-plan. Voici un exemple:

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

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

 ...

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

et voilà à quoi ça ressemble ...

Entrez si vous le risquez!

J'ai créé des données d'image en utilisant un éditeur graphique libre de droits, ajoutant un effet de cire chaude aussi à l'ombre. avec l'aide des moteurs de recherche sur le Web est autorisé à trouver beaucoup de conseils aussi pour des images libres de droits.

Bannières

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

 <html> <head> <title> bannières cycliques </ title> <script type = "texte / javascript"> if (document.images) {adImages = nouveau tableau ("/ 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;  } function cycleAds () {if (document.images) {if (document.adBanner.complete) {if (++ thisAd == adImages.length) thisAd = 0;  document.adBanner.src = adImages [thisAd];  }} // modification de la 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: Je recommande de vérifier si toutes les images ont la même hauteur que la largeur. Vous pouvez également définir les attributs width et height de l'élément img pour garantir la même taille de toutes les images.

Et si les navigateurs ne supportent pas les scripts?

Le contenu de l'élément noscript est affiché uniquement si le navigateur ne prend en charge les scripts d'aucune façon. Il doit être utilisé si vous voulez donner aux gens l'accès à des informations qui leur seraient autrement inaccessibles, si le navigateur ne supporte pas les scripts de quelque façon que ce soit. Supposons que vous souhaitiez créer un lien 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 dans l'aide du moteur de recherche.