Ecrire le HTML | A Propos | FAQ | Alumni | Kudos | Références | Tags | Leçons | précédent | suivant |

22. Un Peu Plus sur les Images et les Listes

Désintégrez ces cadres énervants autour des boutons images,

ajoutez des bordures supplémentaires et :

Objectifs

Après cette leçon, vous pourrez :

• Créer un hyperlien graphique sans bordure
• Placer un cadre autour d'une image incluse
• Ecrire le code HTML d'une liste non ordonnée utilisant différents styles de puces
• Ecrire une liste ordonnée numérotant les éléments via des lettres majuscules et minuscules ou des chiffres romains grands ou petits
• Modifier une liste ordonnée pour commencer le compte à partir de n'importe quelle valeur positive

Leçon

Note : Si vous n'avez pas les documents des leçons précédentes, téléchargez une copie maintenant. Vous pouvez également essayer de vous référer à la page de test pour voir si votre navigateur supporte les tags utilisés dans cette leçon.

Pas de Bordure Hypertexte sur les Hyperliens Images

Dans la leçon 8e, nous avons vu comment transformer une petite image en hyperlien vers une autre page web ou une copie plus grande de l'image. Nous avons noté que le navigateur web plaçait un cadre entourant l'image afin de l'identiier en tant que "hyper" comme les autres éléments hypertexte :

fonctionne exactement comme un autre lien hypertexte.

Pourtant, le cadre peut parfois géner, particulièrement si notre image n'est pas rectangulaire. L'utilisateur peut généralement déterminer si une image est "hyper" en constatant un changement dans l'aspect du curseur quand il déplace la souris sur l'image (le curseur se change en une "main" sur un lien actif).

Vous pouvez cacher le cadre en ajoutant un attribut au tag <img...> :

  <a href="bigpict.gif"><img src="lilpict.gif" border=0>

Dans cet exemple, l'image incluse lilpict.gif est un hyperlien vers une image plus grande bigpict.gif. L'attribut border=0 ne sert à rien si le tag <img..> ne se trouve pas à l'intérieur d'un tag <a href=...</a>.

Il y a deux endroits dans notre site Web Volcan où nous avons des images hyperliens -- vous souvenez-vous où ?

La première est dans le fichier usa.html, où une petite image de sismomètre connecte vers une image plus grande. La seconde est la flèche ramenant à la leçon dans le fichier msh.html.

1. Ouvrez les deux fichiers usa.html et msh.html dans votre éditeur de texte.
2. Trouvez l'endroit où nous avons les petites images hyperliens.
3. Modifiez chaque balise hyperlien <img src=....> en rajoutant l'attribut border=0. Par exemple, dans le fichier msh.html, vous devriez avoir :

     <a href="usa.html"> 
     <img src="../pictures/left.gif" alt="** " border=0> 
     Retour au <i>Web Volcan</i></a>

4. Sauvegardez et Chargez les fichiers usa.html et msh.html dans votre navigateur web.
5. Si les petites images n'ont plus de bordures mais connectent toujours vers les liens désirés quand vous cliquez dessus, vous avez fait du bon travail.

Ajouter des Cadres autour des Images

Et maintenant, nous allons vous montrer comment faire le contraire : ajouter des cadres BIEN EPAIS ! Vous utilisez exactement la même option border=X pour ajouter un cadre autour d'une image. X détermine l'épaisseur, en pixels, du cadre placé autour d'une image :

Cadre de 8 pixels d'épaisseur pour une image incluse

<IMG SRC="pictures/disk.gif" WIDTH=48 HEIGHT=40 border=8>

Vous pouvez également utiliser cela sur une image hyperlien :

Cadre de 8 pixels d'épaisseur pour une image hyperlien vers une autre page

<A HREF="page.html">
  <IMG SRC="pictures/disk.gif" WIDTH=48 HEIGHT=40 border=8></a>

Puces pour Listes Non Ordonnées

Dans la leçon 6, nous avons d'abord créé des listes non ordonnées <ul>...</ul>. Le navigateur web ajoute automatiquement un marqueur de puce en regard de chaque élément -- et les puces changent si nous créons une liste à l'intérieur d'une autre liste. Avec certains navigateurs web, vous pouvez spécifier dans votre code HTML un des trois marqueurs de puces en ajoutant un attribut au tag <ul> :

 <ul type=xxxx>

où xxxx peut être :

• type=circle
• type=square
• type=disc [puce par défaut pour la liste de premier niveau]

Et même plus ! Vous pouvez changer le type à l'intérieur d'une liste en mettant l'attribut de type dans la balise <li> :

HTML	Apparence
<ul type=square> <li>ceci est l'élément 1 <li>ceci est l'élément 2 <li>ceci est l'élément 3 <li type=circle> Hé ! Que pensez-vous de ces puces en cercle ? <li type=circle>ceci est un autre élément <li type=circle>et encore un autre <li type=disc> Hé ! Et de celles en disque ? </ul>	ceci est l'élément 1 ceci est l'élément 2 ceci est l'élément 3 Hé ! Que pensez-vous des puces en cercle ? ceci est un autre élément et encore un autre Hé ! Et de celles en disque ?

Dans les navigateurs Netscape, le type spécifié dans le tag <li type=xxxx> est utilisé par tous les tags <li> suivants n'ayant pas d'attribut type, jusqu'à ce qu'un autre type de puce soit rencontré. Néanmoins, dans les navigateurs Internet Explorer, les éléments de liste sans attribut type sont affichés avec le type initial du tag <ul>. Donc, nous vous recommandons, si vous voulez changer les styles de puces à l'intérieur des listes, de définir ces styles pour chaque tag <li> nécessitant une puce différente.

Les différences des navigateurs web nous compliquent vraiment la vie ! C'est donc encore une raison de plus pour tester votre site dans d'autres environnements que votre ordinateur.

Nous allons maintenant changer le style de puce de notre page Projet de Recherche (fichier proj.html).

1. Ouvrez le fichier proj.html dans votre éditeur de texte.
2. La première liste dans ce fichier est une Liste Ordonnée <ol>...</ol> mais nous allons la changer en liste non ordonnée avec des puces circle. Editez le HTML de cette première liste comme suit :

   
     <ul type=circle>
     <li>Type de volcan
     <li>Position Géographique
     <li>Nom, distance et population de la grande ville la plus proche
     <li>Dates des éruptions les plus récentes et les plus destructrices
     <li>Autres évènements associés aux récentes éruptions (Tremblements de terre, 
         inondations, coulées de boue, etc)
     </ul>

3. Sauvegardez et chargez le fichier dans votre navigateur web. Comparez votre page avec cet exemple de la liste-type à ce stade.

Styles et Valeurs pour les Listes Ordonnées

Quand nous avons créé une liste ordonnée <ol>...</ol> dans la leçon 6, nous avons vu comment le navigateur web numérote automatiquement les éléments, un pour chaque tag <li>. Et si nous ne voulions pas toujours utiliser les chiffres arabes (1,2,3...) ? Eh bien, voici les réponses, un attribut type=x pour les tags <ol> et les balises <li> à l'intérieur :

Nous avons présenté un exemple d'utilisation des listes ordonnées à l'intérieur de listes ordonnées pour créer des plans -- avec l'attribut type, nous pouvons avoir des pages au format standard :

1. Le Fromage dans la Préhistoire
   1. L'Afrique
      1. Le Triangle Afar
      2. La Côte
   2. L'Asie
   3. L'Europe
      1. La France
         1. Peintures murales évoquant la récolte du fromage
         2. Rituels funéraires causés par des restes de fromage séché
      2. Les Iles Britanniques
   4. L'Amerique du Nord
2. Le Fromage au Moyen Age
   1. Le Longhorn du Roi Arthur
   2. Du Cheddar fort pour les Croisades
3. Le fromage dans l'Espace

Une autre chose possible avec les listes ordonnées est d'en démarrer le compte à un autre chiffre que 1. Pour cela, nous ajoutons l'attribut start=y au tag <ol>. Même si nous avons un autre attribut type=x, on peut toujours spécifier la valeur de départ y égale à "2,3,10,100, etc". Regardez quelques-uns de ces exemples :

Et enfin, vous pouvez changer le compte à l'intérieur d'une liste en ajoutant l'attribut value=z au tag <li>. Regardez cet exemple :

HTML	Apparence
<ol type=A start=5><i> Lois Importantes sur le Fromage</i> <li>Acte de Salaison du Fromage de 1905 <li>Règle sur le Contenu du Lait de 1923 <p> <li value=12>Taxe d'Importation du Fromage de 1942 <li>Code de Fraicheur du Fromage de 1942 <p> <li value=1>Acte des Valeurs du Fromage de 1789	Lois Importantes sur le Fromage Acte de Salaison du Fromage de 1905 Règle sur le Contenu du Lait de 1923 Taxe d'Importation du Fromage de 1942 Code de Fraicheur du Fromage de 1942 Acte de Valeurs du Fromage de 1789

Il n'est peut-être pas très aisé de savoir (spécialement avec cet exemple idiot !) à quel moment utiliser ces tags -- gardez-les simplement à l'esprit comme outil potentiel pour écrire vos pages web. Nous allons essayer de nouveau sur notre page Projet de Recherche (fichier proj.html). Si vous vous souvenez, dans notre leçon sur les tables, nous avons coupé la liste non ordonnée des sites de références en une liste sur deux colonnes. Changeons cela en une liste ordonnée et utilisons l'attribut type pour les afficher en utilisant des puces en lettres minuscules. Comme nous avons réellement deux listes séparées, voyons si vous pouvez trouver pourquoi nous allons utiliser l'attribut start également.

1. Ouvrez le fichier proj.html dans votre éditeur de texte.
2. Regardez la table que nous avons créée sous la section Références. Changez les deux tags <ul> et </ul> en <ol type=a> et </ol>.
3. Maintenant, nous avons 6 éléments dans la première liste, nous allons donc commencer le compte de la seconde liste avec le chiffre 7. Modifiez le tag <ol> comme suit :

     <ol type=a start=7>

4. Sauvegardez et Rechargez le fichier dans votre navigateur web. Comparez votre liste avec cet exemple de la liste-type à ce stade. La première colonne devrait lister les éléments de "a" à "f" et la seconde colonne de "g" à "l".

Vérifiez Votre Travail

Comparez vos pages web avec cet exemple du document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur de texte.

Révision

Revoyons les grandes lignes de cette leçon :

1. Comment supprimer le cadre hypertexte entourant une image hyperlien vers un autre élément ?
2. Comment insérer une bordure de 20 pixels autour d'une image incluse ? De quelle couleur sera-t-elle ?
3. Comment changer les marqueurs de puces d'une liste non ordonnée ?
4. Devez-vous utiliser les mêmes marqueurs de puces pour toute une liste ? Sinon, comment changer les marqueurs en milieu de liste ?
5. Comment créer une liste marquant les éléments avec des chiffres Romains ?

Travail Indépendant

Expérimentez les différents styles de numérotation et les différents marqueurs de puces dans les listes de vos pages web. Pouvez-vous trouver quelque unique moyen d'utiliser ces nouvelles fonctionnalités ? Pouvez-vous faire un plan complexe avec une mise en page "standard" ? Tous ces tags

<ol>...</ol>

A Suivre....

Trouvez votre chemin dans une image... Sections hyperliens Clic and go dans une image...

ALLER A.... | Index des Leçons | précédent : "Tables" | suivant : "Cartes d'Images" |

Ecrire le HTML : Leçon 22 : Un Peu Plus sur les Images et les Listes
©1994-2003 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

La 'net connection (en anglais) à MCLI est Alan Levine
Suggestions en Français à Bernard Bensoussan

URL: http://www.mcli.dist.maricopa.edu/tut/tut22.html