Bienvenue dans notre cours résumé sur l’html5. C’est déjà le deuxième article!!Nous avons vu la structure de base d’une page html, l’insertion des images et des liens. Cette partie concerne les balises en HTML5 pour ajouter une liste. On a trois types de listes qui sont les listes numérotés, les  listes non numérotés et les listes de définition.

HTML5 : liste non numéroté

Pour définir une liste ordonnée, on utilise la balise <ul>. Chaque élément de la liste est représenté par la balise (tag) < li>. Aussi, on peut personnaliser le style des éléments de la liste non numéroté via l’attribut type. En effet,  Il peut prendre l’une des valeurs suivantes :

    • disc :Les éléments seront marqués par des puces (par défaut)
    • circle : Les éléments seront marquées par des cercles
    • square : les éléments seront marqués par des carrés

Exemples :

<ul type=“disc”>
            <li>HTML 5</li>
            <li>CSS 3 </li>
            <li> Javascript</li>
            <li>PHP  </li>
        </ul>
liste type disc
  <ul type=“circle”>
            <li>HTML 5</li>
            <li>CSS 3 </li>
            <li> Javascript</li>
            <li>PHP  </li>
   </ul>
liste type circle
<ul type=“square”>
            <li>HTML 5</li>
            <li>CSS 3 </li>
            <li> Javascript</li>
            <li>PHP  </li>
 </ul>
liste type square

HTML5 : listes numérotées

Pour définir une liste ordonnée, on utilise la balise <ol>. Comme la liste non numérotée, chaque élément de la liste numérotée commence par la balise <li>.

Exemple:

                    <ol>

                          <li>Listes ordonnées</li>

                          <li> les listes non-ordonnées</li>

                          <li>listes imbriquées</li>

                          <li>les listes de définition</li>

                          <li>Le menu de listes</li>

                  </ol>

L’attribut type peut être ajouté à une liste ordonnée pour définir le type du marqueur. Alors, les valeurs possibles de l’attribut type sont :

  • 1 : les éléments (li) seront numérotés par des numéros (par défaut)
  • A : les éléments seront numérotés par des caractères alphabétiques en majuscule
  • a : les éléments de la liste seront numérotés par des  caractères alphabétiques en miniscule.
  • I : Les éléments seront numérotés par des nombres romains en majuscule
  • i : Les éléments seront numérotés par des nombres romains en miniscule.
  <ol type=“1”>
            <li>HTML 5</li>
            <li>CSS 3 </li>
            <li> Javascript</li>
            <li>PHP  </li>
   </ol>
liste type 1
  <ol type=“A”>
            <li>HTML 5</li>
            <li>CSS 3 </li>
            <li> Javascript</li>
            <li>PHP  </li>
   </ol>
liste type A

HTML5 : liste de définition

Une liste de description est une liste de termes avec une description pour chaque terme. En effet, la balise <dl>définit une liste de description, et  la balise <dt>définit un terme (un nom, un titre). Alors que la balise <dd>définit la description.

Exemple :

    <dl>
<dt>ol</dt>
<dd>Liste ordonnée</dd>
<dt>ul</dt>
<dd>Liste non-ordonnée</dd>
<dt>dl</dt>
<dd>Liste de définition</dd>
    </dl>
liste de définition

Vous pouvez suivre notre cours complet d’HTML. pour approfondir vos compétences sur le développement web en utilisant le langage html5.

Aussi, vous avez une playlist des vidéos (Explication en Darija arabe marocaine)  bien organisée qui traite : Vidéos sur l’HTML5

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *