Cours création de site Web

Dans cette partie de notre cours d'initiation à la création de site web, nous allons maintenant évoquer les listes dans un document HTML. Il existe deux types de listes : les listes à puces et les listes numérotées.

Dans un document HTML, vous pouvez proposer une liste qui regroupe des objets ou articles d'un même groupe de famille. Une liste est donc une suite d'énumération d'objets. Une liste, quelque soit le type, peut se présenter de façon ordonnée ou non ordonnée.

Prenons la liste ci-dessous :

- Patates
- Oeufs
- Carottes
- Beurre
- Lait

Voici le code pour la création d'une telle liste dans un document HTML :

<UL TYPE="circle">
<LI>Patates
<LI>Oeufs
<LI>Carottes
<LI>Beurre
<LI>Lait lt;/UL>

Décryptons ce code. <UL> est la balise utilisée pour les listes. Et l'attribut TYPE permet de choisir l'élément distinctif de la liste par rapport au reste de la page web. L'attribut TYPE peut avoir les valeurs suivantes : circle (cercle), disc (point), square (carré), chiffres romains (1, 2, ...), alphabétique (A, B, C...), etc...

Dans le code de notre document de liste, chaque objet de la liste est précédé par la balise <LI> (= List Items ou Liste d'Articles). A chaque énumération d'un objet, le suivant se positionne automatiquement sur la liste suivante.

Vous pouvez aussi obtenir une liste de cette manière:

A. Patates
B. Oeufs
C. Carottes
D. Beurre
E. Lait

La liste décrite ci-dessus est une liste dite ordonnée. Voici comment la transposer dans un document HTML. Pour cette liste ordonnée, nous utiliserons la balise <OL> en lieu et place de <UL> :

<OL TYPE="A">
<LI>Patates
<LI>Oeufs
<LI>Carottes
<LI>Beurre
<LI>Lait
</OL>

Vous aurez remarqué l'utilisation du paramètre A avec l'attribut TYPE. Saisissez cette liste dans votre fichier test.html et visualisez le résultat dans votre navigateur.

Faîtes de même avec la liste ci-dessous qui est un mélange de toutes combinaisons possibles de liste.

<OL TYPE="A">
<Li>Ferme

  <OL TYPE="a">
  <LI>Moutons
  <LI>Veaux
  <LI>Vaches
  <LI>Cochons
  </OL>

<LI>Frigo
  <OL TYPE="1">
  <LI>Yaourt
  <LI>Lait
  <LI>Eau
  <LI>Jus de fruit
  <LI>Fromage
  </OL>

<LI>Maison
  <OL TYPE="I">
  <LI>Fauteuils
  <LI>Canapé
  <LI>Lampadaire
  <LI>Lecteur DVD
  </OL>

</OL>

Une fois saisi dans votre fichier test.html, visualisez le résultat dans votre navigateur.

Suite de cet article : les liens hypertextes.


Suivez-nous sur :    Facebook    Twitter    Google Buzz    Tumblr    FriendFeed    Youtube

Cliquez sur le bouton FeedBurner ci-après pour vous abonner à notre flux RSS :  

Partagez cet article avec vos amis :

Partager |

Veuillez laisser un commentaire sur cet article dans l'espace prévu ci-dessous afin de partager votre point de vue.

Retrouvez d'autres articles sur Google, la création de site, l'optimisation, le référencement, le trafic web, les mots clés, le nom de domaine et l'hébergement web à partir de notre sélection de liens dans notre Plan de site.