Cookies acceptés.
bouton pour découvrir notre choix
bouton de redirection: haut
bouton de redirection: home
bouton de redirection: bas
bouton de redirection: explication des cookies
Création de sites web 3 D.   Webmaster, webdesign - Conseil.

Votre site web 3D, ... pour une autonomie.

Un espace francophone artisanal et pédagogique.
Logo de LigneWeb

la communication web
... JavaScript indispensable ... code utf-8 ... -  © design : LigneWeb

- Site expérimental en XHTML 1.0 et CSS 2.0 avec CSS 3.0 -


 •   Plan du site 
Avec des cours et des conseils.
  Notre Blog :  La ligne papyrus 
 MENU XHTML   info xhtml  - cours 1  - cours 2  - cours 3  - cours 4  - cours 5  - cours 6  - cours 7  - cours 8  - cours 9 
 Menu cours 6 XHTML  - listes à puce  / listes numérotée  / liste de définition  / exemple 



Cours 6 XHTML : les listes



 © LigneWeb  ... /les listes.
© design : LigneWeb
© : alain jean deligne - LigneWeb
Le logo de LigneWeb

Les listes en XHTML


Suivez-nous.








Remarque : ... en CSS2 et CSS3 ... :

pour cette page et non visible ... :
le fichier ...  ligne21.css  ... qui mélange du CSS 2 avec du CSS 3 ...
... et ceci grâce aux sélecteurs spécifiques ... expliqués au ...  Cours CSS 3 




Trois types de listes :

... le ...  plan  ... nous montre un exemple de listes ...
... et dans ce cas , nous avons à faire à une liste à puces ...

... nous avons trois grandes catégories de listes : ...
... la liste à puce, la liste numérotée et la liste de définition ...


La liste à puces

... elle est constituée de deux balises distinctes, ... la balise ul et la balise li ...
... la balise qui défini le type de liste ... est ... <ul> ... la balise entrante ...
... et ... </ul> ... la balise sortante ...
... à l'intérieur de la balise … ul ... viennent les balises encadrant les différents termes de la liste proprement dites ...
... chacun des termes est encadré par ... <li> ... la balise entrante ...
... et ... </li> ... la balise sortante ...

... la balise ...  li  ... est valable pour les deux sortes de balises ...


Un exemple de liste à puce :

  • la balise html
  • la balise head
  • la balise body
  • la balise title
  • la balise meta
  • la balise link





La liste numérotée

... elle est constituée de deux balises distinctes, ... la balise ol et la balise li ...
... la balise qui défini le type de liste ... est ... <ol> ... la balise entrante ...
... et ... </ol> ... la balise sortante ..
... à l'intérieur de la balise ol viennent les balises encadrant les différents termes de la liste proprement dites ...
... chacun des termes est encadré par ... <li> ... la balise entrante ...
... et ... </li> ... la balise sortante ...

... la balise ... ol ... permet une numérotation automatique ...
... elle peut avoir l'attribut ... start ... précisant le premier nombre de la liste ...
... élément se placant dans la balise entrante ...<ol start="4"> ...
... le premier sera donc 4, le suivant 5, etc. .... la liste commence au numéro 4 ... et est ordonné ...

... les balises ... ol et li ... peuvent avoir un attribut ... type ... précisant quel sorte d'élément ...
... représentera la numérotation ... :
... par des chiffres arabes ( valeur par défaut ) : ... 1 ...
... par des lettres minuscules : ... a ...
... par des lettres majuscules : ... A ...
... par des chiffres romains minuscules : ... i ...
... par des chiffres romains majuscules : ... I ...
... ce type appliqué à la balise ... ol ... agira sur toute la liste ...
...mais appliqué à la balise ... li ... n'agira que sur celle-ci uniquement ...

... ces attributs start, type, et d'autres seront plutôt ... précisées dans la feuille de style (CSS 2.0) ...


Un exemple de liste numérotée :

  1. la balise html
  2. la balise head
  3. la balise body
  4. la balise title
  5. la balise meta
  6. la balise link





La liste de définition

... nous avons la même balise ol pour les listes de définition ... comme pour la liste numérotée ...
... la balise qui défini ce type de liste ... est ... <ol> ... la balise entrante ...
... et ... </ol> ... la balise sortante ..

... et cette dernière liste est spéciale ... la liste de définition ...
... avec deux sortes d'éléments ... les premiers : ... les termes à définir, ...
... et les deuxièmes, ... les définitions elles-mêmes ...

... la première balise est celle qui défini la liste de définition ... qui est ...dl ...
... <dl> ... est la balise entrante ...
... </dl> ... est la balise sortante ...
... et c'est entre ses balises que vont se trouver les balises ...dd ... et ... dt ...

... la balise ... dd ... est le terme de définition ... et ...dt ... la description de la définition ...
... <dd> ... est la balise entrante ...
... </dd> ... la balise sortante ... des termes ...

... <dt> ... la balise entrante ...
... </dt> ... la balise sortante ... des descriptions ...

... nous pouvons combiner ces différentes listes ... mais, nous pouvons aussi les ... imbriquer ...
... il faut pour ce faire que la deuxième liste soit à l'intérieur des balises entrante et sortante de la première ...
... il en sera toujours ainsi pour toute inclusion ...
... ne ... jamais oublier de fermer une balise ... par celle sortante ...


Un exemple de liste de définition :

incluse dans une liste numérotée … <ol> et <li> ...
  1. la balise html
    la balise encadrante de la page complète
  2. la balise head
    la balise des informations invisibles
  3. la balise body
    la balise de la page visible
  4. la balise title
    la balise du nom de la page
  5. la balise meta
    la balise des informations internes à head
  6. la balise link
    la balise des liens





Exemple de listes :


... cet exemple est une partie du ...  plan  ... de ce site ...
... sans le style que nous étudierons plus tard, ... cela donne ...  cette page  ...
... auquel on ajoute une image d'en-tête ...

... design 3 D ...

...  fenêtre sur l'univers  ...             © design : LigneWeb - © Apple





 MENU XHTML   info xhtml  - cours 1  - cours 2  - cours 3  - cours 4  - cours 5  - cours 6  - cours 7  - cours 8  - cours 9 
  Essentiel :   - Accueil  - Offres  - Site photo  - Projet  - Historique  - Historique RSS  - Réalisations  - Création 
- Cours  XHTML  - Cours CSS 2  - Création site  - Cours HTML 5  - Cours CSS 3  - Cours jQuery 
- Programmes JS  - Liens - © - cookies  - Contact  - Plan du site 

Chaque enfant compte. Plan Belgique     Valid XHTML 1.0 Transitional     [Valid RSS]     CSS Valide !     Le logo de LigneWeb

... tout ne respecte pas le W3C ... site d'expérimentation ...

le titre du site web
©  Copyright :  "LigneWeb" (2008-2017) Tous droits réservés.  Légal  Design, Artisan web: mathalan 
 LigneWeb :   BE 0843 356 602. (2012-2017)   Conditions d'utilisation  Création: masterligne  • Qui sommes nous? 

Réinstaller le Bien en soi ... pour réinstaller le Bien sur terre ... et changer le monde.
© LigneWeb  Utilisation de cookies