 |
 |
 |
 |
 |
 |
 |
|
| |
| 1 - Les listes non-ordonnées | |
| Exemple - 1 <HTML> <HEAD> <TITLE> Listes non ordonnés</TITLE> </HEAD> <BODY BGCOLOR="white" TEXT="black"> <CENTER> <B>Mes plats préférés sont:</B> </CENTER> <UL> <LI>La pizza: <UL><LI>Fromage <LI>Piment à la gerboise <LI>Jambon </UL> <LI>Pouding <LI>Dinde aux oignons <LI>Omelette laité </UL> </BODY> </HTML> |
 |
| Exemple - 2 <HTML> <HEAD> <TITLE> Liste non-ordonnée</TITLE> </HEAD> <BODY BGCOLOR="white" TEXT="black"> <UL TYPE="square"> <LI>Printemps <UL TYPE="circle"> <LI>Mars <LI>Avril <LI>Mai </UL> <LI>Eté <UL TYPE="circle"> <LI>Juin <LI>Jullet <LI>Aout </UL> <LI>Automne <UL TYPE="circle"> <LI>Septembre <LI>Octobre <LI>Novembre </UL> <LI>Hiver <UL TYPE="circle"> <LI>Décembre <LI>Janvier <LI>Février </UL> </UL> </BODY> </HTML> |
 |
| 2 - Les listes ordonnées | |
| Exemple - 1 <HTML> <HEAD> <TITLE> Listes ordonnés mixtes</TITLE> ></HEAD> <BODY BGCOLOR="white" TEXT="black"> Simulation de l'ordre du jour d'un cabinet d'avocats crapuleux pour vous montrer l'utilisation de ces balises. <P> <B>Ordre du jour</B> <OL TYPE=1> <LI>Lecture de la derrnière assemblée <LI>Lecture de l'ordre du jour <LI>Élection d'un président <LI>Affaire Pouliot - Points litigieux: <OL TYPE=a> <LI>Trafic d'influence <LI>Vente de bière iranienne <LI>Poursuite au civil </OL> <LI>Affaires diverses <OL TYPE=A> <LI>George vs. Thomas <LI>L'affaire pélican <LI>Paul contre Albert <LI>Pamella vs. Sillicon Valley </OL> <LI>Foire aux Questions <LI>Fin de l'assemblée </OL> </BODY> </HTML> |
 |
| Exemple - 2 <HTML> <HEAD> <TITLE> Liste ordonnée</TITLE> </HEAD> <BODY BGCOLOR="white" TEXT="black"> <OL TYPE="l"> <LI>Printemps <OL TYPE="A"> <LI>Mars <LI>Avril <LI>Mai </OL> <LI>Eté <OL TYPE="a"> <LI>Juin <LI>Jullet <LI>Aout </OL> <LI>Automne <OL TYPE="I"> <LI>Septembre <LI>Octobre <LI>Novembre </OL> <LI>Hiver <OL TYPE="i" START=10> <LI>Décembre <LI>Janvier <LI>Février </OL> </OL> </BODY> </HTML> |
 |
| Exemple - 3 <HTML> <HEAD> <TITLE>Liste complexe court</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="Black"> <OL TYPE=A> <LI><B>Les fichiers et répertoires sous Windows 95.</B> <OL TYPE=1> <LI>Les fichiers. <LI>Caractéristiques des fichiers. <OL TYPE=a> <LI>Nom et extension. <LI>Règles à respecter. <LI>Création et mise à jour d'un fichier <LI>Ouverture d'un fichier. </OL> <LI>Les répertoires. <OL TYPE=a> <LI>Notion d'arborescence. <LI>Manipulations d'un répertoire. <OL TYPE=i> <LI>Création d'un répertoire.< <LI>Modification d'un répertoire. <LI>Suppression d'un répertoire. </OL> </OL> </OL> <P> <LI><B>La recherche sur l'Internet</B> </OL> </BODY> </HTML> |
 |
| 3 - Les listes et Définitions | |
| Exemple - 1 <HTML> <HEAD> <TITLE> Définitions de Listes</TITLE> </HEAD> <BODY BGCOLOR="white" TEXT="black" LINK="purple"> <DL> <DT>Langage HTML <DD>Codification utilisé pour les documents WWW. Ce type de codes a été inventé par Tim Berners-Lee au CERN (Conseil Européen pour la Recherche Nucléaire). <DT>Langage Java <DD>Programmation qui fait suer son concepteur tout en lui apportant plusieurs satisfactions... </DL> <DL> <DT>HTML <DD>(HyperText Markup Language) est un ensemble de prescriptions stylistiques indiquées par des étiquettes. Ces étiquettes délimitent les composants d'un document World Wide Web. Toutes les étiquettes sont entre chevrons (ouvert et fermé). </DL> </BODY> </HTML> |
 |
| Exemple - 2 <HTML> <HEAD> <TITLE>Disposition de texte</TITLE> </HEAD> <BODY BACKGROUND="back1.gif" TEXT="black"> <H2 Align="center">Exemple de disposition</H6> <DL><DD>Il est possible d'utiliser la balise <DD> de la définition de liste pour libérer la marge de gauche si c'est nécessaire. Ce n'est pas aussi pratique que l'image mais utilisable pour des pages HTML simples. </DD></DL> <IMG SRC="espb-2.gif" ALIGN="left" HEIGHT=60> Si vous utilisez une couleur de fond et que vous voulez insérer une image pour agrémenter votre page, assurez-vous d'utliser une image avec fond transparent pour laisser passer la couleur. <P>La disposition sera ruinée si vous ne faites pas attention! </BODY> </HTML> |
 |
| 4 - Exemple de liste mixte | |
| Exemple - 1 <HTML> <HEAD> <TITLE>Plan de Windows95</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000"> <CENTER> <BIG><B>Plan de Windows 95</B></BIG> </CENTER> <OL TYPE=1> <LI>Souris <LI>Clavier <OL TYPE=A> <LI>Langue <LI>Équivalents clavier </OL> <LI>L'environnement <OL TYPE=A> <LI>Le bureau <LI>Les fenêtres ><OL TYPE=a> <LI>Agrandir <LI>Réduire <LI>Repositionner </OL> <LI>Les icônes <OL TYPE=a> <LI>Poste de Travail <UL TYPE="disc"> <LI>Formatter la disquette <LI>Copier la disquette </UL> <LI>La corbeille </OL> <LI>La barre de tâches <OL TYPE=a> <LI>Ajout au menu "Démarrer" <LI>Programmes <UL TYPE="disc"> <LI>Accessoires <UL TYPE="circle"> <LI>La calculatrice <LI>Le Bloc-Notes <LI>WordPad <LI>Paint </UL> <LI>Bouton "Démarrer" <LI>L'explorateur Windows </UL> <LI>Paramètres <UL TYPE="disc"> <LI>Panneau de configuration <UL TYPE="circle"> <LI>Ajout de péripériques <LI>Ajout de programmes <LI>Affichage <LI>Polices <LI>Imprimantes </UL> <LI>Barre de tâches <LI>Imprimantes </UL> <LI>Rechercher <LI>Aide <LI>Exécuter <LI>Arrêter </OL> <LI>Menu système </OL> <LI>L'Écran <LI>L'Ordinateur </OL> </BODY> </HTML> |
 |
2. Les types de listes
a. la balise <li>
Cette balise sert à délimiter un élément de liste, et est toujours incluse dans un environnement de liste. Elle ne possède qu'un unique attribut, valable uniquement en HTML transitionnel, type.
type peut prendre les valeurs disc, circle ou square.
b. Listes à puces
C'est le type de liste le plus simple. Elle s'introduit en utilisant la balise <ul>, qui signifie Unordered List. Elle possède le même attribut que la balise <li>, qui s'utilise dans les mêmes conditions, et est également obsolète en HTML 4.01 strict :
|
Attribut |
Effet |
Valeur(s) |
|---|---|---|
|
|
Choix du type de puce |
|
Table 1. Attribut obsolète de la balise ul.
Exemple d'utilisation :
<ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ul>
c. Listes numérotées
Ce type de listes est ordonnée. Elle s'introduit en utilisant la balise <ol>, qui signifie Ordered List. Les éléments de la liste sont également déclarés par la balise <li>. La "numérotation" peut se faire de cinq manières différentes, cela étant spécifié par la valeur de l'attribut type. Elle peut débuter à n'importe quelle position (par exemple à 2...), grâce à la valeur de l'attribut obsolète start.
|
Attribut |
Effet |
Valeur(s) |
|---|---|---|
|
|
choix du type de numérotation |
|
|
|
numéro de début de liste |
selon le type, un numéro ou une lettre |
Table 2. Attributs obsolètes de la balise <ol>
La balise <li> possède alors un autre attribut,value, analogue au rôle de start, qui permet de spécifier le rang de l'item, et donc d'imposer des sauts dans la numérotation.
d. Liste de définitions
Ce type de liste, peu usité, est une... liste de définitions ! Elle est déclarée par la balise <dl>. Par exemple :
<dl>
<dt>basilic</dt>
<dd>Annuelle. Peut dépasser un mètre de hauteur. Le parfum de ses petites fleurs blanches est divin.</dd>
<dt>origan</dt>
<dd>Vivace. Propage ses stolons sous terre. Il est difficile de s'en débarrasser une fois bien établi.</dd>
<dt>coriandre</dt>
<dd>Annuelle. Préfère une situation ombragée. Son huile est utilisée en parfumerie.</dd>
</dl>
Il n'y a pas d'attribut spécial pour cette balise.
3. Listes imbriquées
Les puces et la numérotation varient selon le rang de la liste. Par exemple, pour des listes non ordonnées, on obtient :
-
Premier niveau
-
Deuxième niveau
-
Troisième niveau
-
Quatrième niveau
-
-
-
| Début du HTMl | Quiz-1 | continuele cours |
| © iciyatou..2007 |
merci pour vous
Copyright "iciyatou©" 2007, tous droits réservés