Créée le, 19/06/2015

 Mise à jour le, 29/12/2019

Visiteurs N°  




Accueil
Site en Français Site en Anglais Nos Promotions Nouveau Blog Nouveautés Moteur de Recherche Votre Caddie Pour Vos Achats Votre Espace Membre Vos Signets et Vos Jeux Préférés Page de Bienvenue Statique
Sommaires
Électronique Fondamentale Technologie Fondamentale Testez vos Connaissances Électronique Théorique Digitale Électronique Pratique Digitale Lexique Électronique Numérique Data book TTL Data book CMOS Dépannage TVC Mathématique
Micro-ordinateurs
Théorique des Micro-ordinateurs Testez vos Connaissances Pratique des Micro-ordinateurs Glossaires sur les Ordinateurs
Physique
La lumière Champ d'action Rayonnement Électromagnétique
Technologies
Classification des Résistances Identification des Résistances Classification des Condensateurs Identification des Condensateurs
Formulaires Mathématiques
Géométrie Physique 1. - Électronique 1. 2. - Électronique 1. 3. - Électrotechnique 1. 4. - Électromagnétisme
Accès à tous nos Produits
E. T. F. - Tome I - 257 Pages E. T. F. - Tome II - 451 Pages E. T. F. - Tome III - 611 Pages E. T. D. - Tome I - 610 Pages N. B. M. - Tome I - 201 Pages E. T. M. - Tome I - 554 Pages Business à Domicile Ouvrages 34 pages gratuits Nos E-books Logiciel Géométrie Logiciel Composants Électroniques
Aperçu de tous nos Produits
E. T. F. - Tome I - 257 Pages E. T. F. - Tome II - 451 Pages E. T. F. - Tome III - 611 Pages E. T. D. - Tome I - 610 Pages E. T. M. - Tome I - 554 Pages Logiciel Géométrie Logiciel Composants Électroniques
Nos Leçons aux Formats PDF
Électronique Fondamentale Technologie Fondamentale Électronique Théorique Digitale Électronique Pratique Digitale Théorique des Micro-ordinateurs Mathématiques
Informatique
Dépannage Win98 et WinXP et autres Dépannage PC Glossaire HTML et Programmes PHP et Programmes JavaScript (en cours de travaux) Création de plusieurs Sites
Forums
Forum Électronique et Infos Forum Électronique et Poésie
Divers et autres
Formulaire des pages perso News XML Statistiques CountUs Éditeur JavaScript Nos Partenaires et nos Liens Utiles Gestionnaire de Partenariat Nos Partenaires MyCircle Sondages 1er Livre d'Or 2ème livre d'Or Annuaires Sites

Signets :
  Leçons suivantes        Leçons précédentes     Bas de page
  Cliquez ici pour la leçon suivante ou dans le sommaire prévu à cet effet


Les Listes HTML :


Les Listes HTML :


La liste est un élément important dans la structuration d'un document ; elle permet d'organiser tout ou partie d'un document pour le rendre perceptible au lecteur de la façon la plus claire possible. Les listes pourront donc être utilisées pour diviser le document aussi bien que pour effectuer des énumérations d'objets. Mais à l'inverse des traitements de texte comme Word ou FrameMaker et autres, il n'y a pas de numérotation automatique pour des niveaux hiérarchiques différents :

Numerotation_des_Paragraphes.PNG

HTML définit deux types de listes :

  • des listes régulières avec ou sans numérotation.

LISTE DESCRIPTIVE :

Exemple_de_Liste_Descriptive.PNG

<DL> :

L'élément <DL> ouvre une liste descriptive. Il définit le début de la liste et englobe deux autres balises (<DT> et <DD>), dont le rôle est de caractériser, de désigner chacun des éléments, la partie définition et l'élément lui-même.

L'attribut COMPACT associé à la balise <DL> (<DL COMPACT>) permet à certains browsers d'afficher sur la même ligne l'élément et la première ligne du bloc de description.

La fin de la liste sera caractérisée par la balise de fin </DL>.

<DT> :

L'élément <DT> précède chaque item de la liste, celui-ci ne devant pas excéder une ligne. Il est à noter que le système de liste ne gère pas automatiquement la mise en relief des caractères de l'item. Il appartient à l'auteur du document d'utiliser des balises de styles (qu'on verra par la suite de nos études) ou du titre (<Hn>) pour effectuer cette opération.

Cette balise est une balise vide, donc, pas de balise de fin.

<DD> :

La balise <DD> correspond à la zone de définition de l'item. La taille de cette zone n'est pas limitée et chacune des lignes sera décalée vers la droite. Cette balise est vide.

La structure de ce modèle de liste sera donc la suivante :

<DL>

<DT> Identification de l'élément <DD> Description de l'élément.

<DT> . . . <DD> . . .

</DL>

Exemple :

<HTML>

     <HEAD>

<TITLE> Listes &lt;DL&gt; </TITLE>

     </HEAD>

          <BODY>

               <H2> GLOSSAIRE (Exemple de liste de type d&eacute;finition (&lt; DL COMPACT &gt;)  ) </H2>

               <DL COMPACT>

                     <DT> ASCII <DD> Jeu de caract&egrave;res qui assigne des valeurs num&eacute;riques standard

                                                        aux lettres, chiffres et signes de ponctuations.

                     <DT> EPS <DD>    Format de description de fichiers PostScript, ou PostScript-encapsul&eacute;.

                     <DT> POLICE <DD> Assortiment de styles que poss&egrave;de une cat&eacute;gorie de

                                                           caract&egrave;res (gras, italique, etc. ...).

               </DL>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. (N'oubliez pas de cliquer sur le bouton droit de votre souris afin d'ouvrir le menu contextuel, puis de pointer sur affichage "code source").

LISTES RÉGULIÈRES :


Listes_non_Ordonnees_et_Ordonnees.PNG

<LI> :

La balise <LI> est vide et commune à tous les types de listes restants. Elle précédera chaque objet de la liste.

<LH> :

Commune aussi à l'ensemble des listes, cette balise vide permet d'affecter un en-tête à l'ensemble de la liste. Le texte associé apparaît de façon identique aux items mais n'est pas précédé de puce ou de numéro. La syntaxe générale des listes sera :

< Balise d'ouverture >

<LH> Élément d'en-tête

<LI> Élément de l'énumération

<LI> . . . et ainsi de suite . . .

< Balise de fermeture >

<UL> :

La balise <UL> permet de générer des listes non numérotées. Chacun des éléments de la liste sera précédé d'une puce, dont le graphisme pourra varier selon le niveau d'imbrication de la liste.

Exemple :

<HTML>

     <HEAD>

<TITLE> Listes &lt; UL &gt; </TITLE>

     </HEAD>

          <BODY>

               <H2> Exemple de liste de type non ordonn&eacute;e (&lt; UL &gt;) </H2>

                     <UL>

                           <LH> <b> R&eacute;pertoires </b> <P>

                           <LI> Fichiers HTML

                           <LI> Fichiers images

                           <LI> Fichiers sons

                           <LI> Fichiers films

                           <LI> Fichiers test

                           <LI> Fichiers exemples

                           <LI> Fichiers informatiques

                           <LI> Fichiers &eacute;lectroniques

                           <LI> *** Ainsi de suite ***

                     </UL>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici.

L'attribut TYPE dans les listes non ordonnées :

Cet attribut permet de contrôler le symbole (la puce) précédant chacun des items de la liste. Il peut être utilisé avec la balise <UL> ; il définit alors le symbole pour toute la liste, sauf s'il apparaît dans une balise <LI> où il redéfinit un nouveau symbole pour le reste de la liste.

<OL TYPE=valeur>

<LI> TYPE=valeur>

Les valeurs définissant la puce peuvent être ainsi :

  • square, qui donne à la puce l'aspect d'un rectangle,

  • circle, qui donne à la puce l'aspect d'un cercle vide,

  • disc, qui donne à la puce l'aspect d'un cercle plein.

Exemple :

<HTML>

     <HEAD>

<TITLE> Liste - type </TITLE>

     </HEAD>

          <BODY>

               <H2> Exemple de liste de type non num&eacute;rot&eacute;e avec TYPE </H2>

                    <UL TYPE=CIRCLE>

                       <LH ID=lang> <i> Langages et formats </i> <p>

                       <li> HTML

                       <li> VRML

                       <li type=square> PDF

                       <li type=disc> JavaScript

                       <li> Java

                       <li type=square> Informatique

                       <li type=square> &Eacute;lectrotechnique

                       <li> &Eacute;lectronique

                    </UL>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici.

Emboîtement de listes non ordonnées :

Dans l'exemple suivant, certains browsers utilisent trois puces différentes, (par exemple : le Netscape), en fonction du degré d'emboîtement, puis ils utilisent la dernière puce (le carré vide) pour tous les niveaux suivants.

Pour visualiser l'aperçu, en cliquant ici.

Aperçu de l'image du code source ci-après :

Code_Source_Listes_non_Ordonnees_Imbriquees.PNG

<OL> :

La balise <OL> s'utilise pour une liste ordonnée ou numérotée. Chaque balise <LI> inclue dans un ensemble <OL> va incrémenter le nombre qui sera affiché devant l'élément de la liste.

Exemple :

<HTML>

     <HEAD>

<TITLE> Listes &lt; OL &gt; </TITLE>

     </HEAD>

          <BODY>

               <H2> Exemple de liste de type ordonn&eacute;e (&lt; OL &gt;) </H2>

                       <OL>

                                <li> Fichiers HTML

                                <li> Fichiers images

                                <li> Fichiers sons

                                <li> Fichiers films

                                <li> Fichiers test

                                <li> Fichiers exemples

                                <li> Fichiers histoires

                                <li> Fichiers math&eacute;matiques

                                <li> *** Ainsi de suite ***

                       </OL>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici.

L'attribut TYPE dans les listes ordonnées :

Par défaut, les listes sont numérotées en chiffres arabes. D'autres types de numérotation sont possibles, en ajoutant l'attribut TYPE à la balise <OL> :

<OL TYPE=valeur>

  • La valeur 1 produit une numérotation en chiffres arabes (1, 2, 3, . . .) (valeur par défaut),

  • La valeur A produit une numérotation en lettres capitales (A, B, C, . . .),

  • La valeur a produit une numérotation en lettres minuscules (a, b, c, . . .),

  • La valeur I produit une numérotation en chiffres romains (I, II, III, IV, . . .),

  • La valeur i produit une numérotation en chiffres romains minucules (i, ii, iii, iv, . . .).

L'attribut START dans les listes ordonnées :

Ajouté à la balise <OL>, il permet de définir la valeur de départ de la liste.

<OL START=valeur>

La valeur donnée sera toujours numérique quel que soit le type, alphabétique ou romain.

L'attribut VALUE :

Cet attribut s'applique à la balise <LI>. Il permet de rompre le séquencement et de le réinitialiser à une nouvelle valeur.

<LI VALUE=valeur>

La valeur donnée sera toujours numérique quel que soit le type, alphabétique ou romain.

Exemple :

<HTML>

     <HEAD>

<TITLE> Liste - Type-Start-Value </TITLE>

     </HEAD>

          <BODY>

               <H2> Exemple de liste de type num&eacute;rot&eacute;e en romain minuscule </H2>

                       <OL type=i start=3>

                                <li> Fichiers HTML

                                <li> Fichiers images

                                <li> Fichiers sons

                                <li> Fichiers films

                                <li> Fichiers test

                                <li> Fichiers exemples

                                <li> Fichiers histoires

                                <li> Fichiers math&eacute;matiques

                                <li> *** Ainsi de suite ***

                       </OL>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici.

Exemple 2 :

<HTML>

     <HEAD>

<TITLE> Listes Alphab&eacute;tiques </TITLE>

     </HEAD>

          <BODY>

               <H2> Exemple de liste de type alphab&eacute;tique en lettres capitales </H2>

                       <OL type=A >

                                <li> Fichiers HTML

                                <li> Fichiers images

                                <li> Fichiers sons

                                <li> Fichiers films

                                <li> Fichiers test

                                <li> Fichiers exemples

                                <li> Fichiers histoires

                                <li> Fichiers math&eacute;matiques

                                <li> *** Ainsi de suite ***

                       </OL>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici.

Emboîtement de listes ordonnées :

Comme cela a été précisé au début de cette leçon, l'exemple suivant montre qu'il n'y a pas de numérotation automatique selon le degré d'emboîtement.

Exemple :

<HTML>

     <HEAD>

<TITLE> Listes &lt;OL&gt; </TITLE>

     </HEAD>

          <BODY>

               <H2> Exemple de liste de type ordonn&eacute;e (&lt;OL&gt;) </H2>

                     <ol>

                              <li> Fichiers HTML </li>

                              <li> Fichiers images </li>

                              <li> Fichiers sons </li>

                              <li> Fichiers films </li>

                              <li> Fichiers test </li>

                                   <ol>

                                            <li> Fichiers exemples

                                            <li> Fichiers histoires

                                            <li> Fichiers math&eacute;matiques

                                   <ol>

                                            <li> Natures mortes

                                            <li> Paysages

                                   <ol>

                                                     <li> Et&eacute;

                                                     <li> Hiver

                                   </ol>

                                         <li> Personnages

                                   </ol>

                                         <li> Fichiers travaux

                                   </ol>

                                         <li> Fichiers personnels

                                         <li> Fichiers physiques </li>

                     </ol>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici.

Listes imbriquées :

L'exemple suivant présente des listes à plusieurs niveaux. Encore une fois, l'indentation dans le code source HTML n'est pas obligatoire. mais cependant, lorsque la structure devient de plus en plus complexe, une telle écriture facilite la maintenance des fichiers lorsque ces derniers sont respectés concernant l'indentation des pages HTML ou encore PHP que l'on verra plus tard.

Exemple :

<HTML>

     <HEAD>

<TITLE> Listes imbriqu&eacute;es </TITLE>

     </HEAD>

          <BODY>

               <H2> Exemple de listes de type imbriqu&eacute;es </H2>

                     <ul>

                              <li> Fichiers HTML </li>

                              <li> Fichiers images </li>

                              <li> Fichiers sons </li>

                              <li> Fichiers films </li>

                                   <ol>

                                            <li> Fichiers test </li>

                                            <ul>

                                                              <li> Fichiers exemples

                                                              <li> Fichiers histoires

                                                              <li> Fichiers math&eacute;matiques

                                             </ul>

                                                               <li> Natures mortes

                                                               <li> Paysages

                                             <ul>

                                                                 <li> Et&eacute;

                                                                 <li> Hiver

                                             </ul>

                                                                 <li> Fichiers du serveur

                                                                 <li> Fichiers des t&eacute;l&eacute;viseurs

                                  </ol>

                                                 <li> Fichiers travaux

                                                 <li> Text 1.html

                                                 <li> Text 2.html

                                                 <li> Text 3.html

                                         <li> Fichiers personnels

                                         <li> Fichiers physiques

                                         <li> Fichiers g&eacute;om&eacute;tries

                     </ul>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici.

Nous résumons cette leçon ci-après :

Principaux types de listes :

  • Listes descriptives :

<DL> Ouverture de la liste.

<DT> Titre de l'élément n <DD> Description de l'élément n.

<DT>Titre de l'élément n + 1 <DD> Description de l'élément n + 1.

</DL> Fermeture de la liste.

  • Listes non numérotées :

<UL> Ouverture de la liste.

<LI> Élément de la liste.

<LI> . . .

</UL> Fermeture de la liste.

  • Listes numérotées :

<OL> Ouverture de la liste.

<Li> Élément de la liste.

<LI> . . .

</OL> Fermeture de la liste.

La balise <OL> admet deux attributs :

  • <TYPE> pour définir la numérotation, 1 pour chiffre, A pour alphabétique majuscule, a pour alphabétique minuscule, I pour romain majuscule et i pour romain minuscule.

  • <START> pour définir la valeur de départ de la liste.

Utilisée dans un bloc <OL>, la balise <LI> admet l'attribut VALUE, qui permet à l'intérieur de la liste de modifier le séquencement.

Les balises <UL> et <LI> admettent l'attribut TYPE qui permet de définir la puce située devant l'item. Les valeurs permises sont SQUARE pour sélectionner un carré, CIRCLE pour sélectionner un cercle vide et DISC pour un cercle plein. Lorsque l'attribut TYPE est définit dans la balise <LI>, il modifie la valeur définie dans la balise <UL> pour le reste de la liste.

Fin de cette quatrième leçon, la prochaine sera consacrée aux Styles concernant le langage HTML.









Nombre de pages vues, à partir de cette date : le 15 JUILLET 2019

compteur gratuit

    




Envoyez un courrier électronique à Administrateur Web Société pour toute question ou remarque concernant ce site Web. 

Version du site : 10. 4. 12 - Site optimisation 1280 x 1024 pixels - Faculté de Nanterre - Dernière modification : 02 Septembre 2016.   

Ce site Web a été Créé le, 14 Mars 1999 et ayant Rénové, en Septembre 2016.