Partagez | 
 

 [Tuto html] Faire des listes

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar

Miettes

Doyenne

Bons Points (BP) : 154
MessageSujet: [Tuto html] Faire des listes   Lun 22 Déc - 18:53

Dernière édition par Miettes le Mer 20 Jan - 0:15, édité 1 fois
Bonjour à tous !

Dans ce tuto, nous allons apprendre comment coder une page pour mettre en forme une liste.




1/ Faire une liste à puces

Ici nous allons utiliser la balise
Code:
<ul> …..</ul>
Cette balise « indique » que nous allons commencer une liste à puce.

Ensuite, pour préciser chaque élément de notre liste, nous allons utiliser les balises :
Code:
<li>….</li>
Cette balise est utilisé quelque soit le type de liste.

Voici un exemple de liste à puce :

image tuto

Et voici le code à mettre pour la réaliser :
Code:
 Mes séries préférées
<ul><li> Science Fiction // Fantastique
   <ul><li> Farscape</li>
      <li> 3ième planète après le soleil</li>
      <li> Heroes</li></ul></li>
   <li> Policier
   <ul><li> NCIS</li>
      <li> Colombo</li>
      <li>Arabesque</li></ul></li>
   <li> Comédie
   <ul><li> Desperate Housewives</li>
      <li> Friends</li>
      <li> Ma tribu</li>
      <li> That's 70's Show</li></ul>   </li>   
</ul>

Vous l’avez donc remarqué, vous pouvez mettre des listes dans des listes Smile Ici par exemple, nous avons une plusieurs listes avec le genre des séries (science fiction, policier, comédie) et chaque type de séries à sa propre liste avec le nom des séries cette fois.


2/ Faire une liste numérotée

Ici nous n’allons pas utiliser la même balise que précédemment. Pour faire une liste numérotée, nous avons besoin de la balise suivante :
Code:
<ol>….</ol>
Et de la même balise « liste » que ci-dessus.

Voici un petit exemple :

image tuto

Et le code utilisé : Mes séries préférées
Code:
<ol><li> Science Fiction // Fantastique
      <ol><li> Farscape</li>
         <li> 3ième planète après le soleil</li>
         <li> Heroes</li></ol>
   </li>
   <li> Policier
      <ol><li> NCIS</li>
         <li> Colombo</li>
         <li>Arabesque</li></ol>
   </li>
   <li> Comédie
      <ol><li> Desperate Housewives</li>
         <li> Friends</li>
         <li> Ma tribu</li>
         <li> That's 70's Show</li></ol>
   </li>
</ol>


Et voilà, vous savez à présent insérer des listes dans vos pages html.

Si un des points ne vous semblent pas clair, dites le Smile




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].

Je soussignée, Miettes,  accepte qu'un directeur reposte le tutoriel "Faire des listes" tel que je l'ai rédigé.
___________________


 

[Tuto html] Faire des listes

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Blabla Land [Accepté]
» gmapsupp
» Tuto comment faire un tryptique avec photoshop ou the gimp
» [Annulée] Demande une page HTML
» [résolu] Lien dans image survolée vers page html

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage-
Sauter vers:  
Espace Admin du site

©2008-2016 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants