la Formation Chez Vous

ConnexionCréer un compte
Retour à la sélection des chapitres

Les listes


Les listes en web ressemblent aux listes que vous pouvez trouver sur les logiciels de traitement de texte. Elles permettent de hiérarchiser les informations avec des chiffres ou des lettres ou bien créer une liste d'éléments dont l'ordre n'a pas ou peu d'importance.

Les listes servent également à créer des menus déroulants avec le concours du CSS. C'est pour cela qu'il est important de bien les maîtriser.

Les listes ordonnées


Les listes ordonnées portent ce nom car l’ordre des éléments a une importance et on fait donc figurer devant les éléments un chiffre ou une lettre, un chiffre romain …
Par défaut, la liste sera numérotée.


        
            <ol>
                <li>Matin</li>
                <li>Midi</li>
                <li>Soir</li>
            </ol>
        
        


Il est important de comprendre pourquoi une liste se structure ainsi.

Les balises <ol></ol> déterminent les limites de la liste. Et cette liste contiendra des éléments alors matérialisés par les balises <li></li>. Chaque élément de liste correspond à un couple <li></li>.

Une liste ordonnée ne peut contenir que des <li></li>. A l’intérieur de ces balises, libre à vous de mettre ce que vous voulez.

Les listes non ordonnées


Les listes non ordonnées fonctionnent comme les listes ordonnées. Les éléments seront en revanche précédés d’une puce. Ce sera soit un disque, un cercle, un carré, une image, un symbole … Ceci est dû au fait que l’ordre des éléments n’a cette fois pas d’importance majeure.


    
    <ul>
        <li>pomme</li>
        <li>poire</li>
        <li>banane</li>
    </ul>
    
        

Les listes de définitions


Les listes de définitions sont une spécificité du web. Elles permettent d’associer des éléments, un terme et sa définition.

Il ne faut pas se limiter au concept de définition. Les listes de définitions peuvent également être utilisées pour bien d’autres choses comme par exemple la création d’un forum. On fera alors correspondre le pseudo de l’utilisateur avec son post. Le pseudo sera le terme et le post sa définition.


        
        <dl>
            <dt>HTML</dt>
            <dd>Hyper Text Markup Language : langage de base pour le web, 
                    permet d’ajouter le contenu à une page</dd>

            <dt>CSS</dt>
            <dd>Cascading StyleSheet : langage du design sur le web.
                    Servira à mettre en forme les éléments HTML</dd>
        </dl>
        
        

Les listes imbriquées







Retour à la sélection des chapitres