oujood.com

Listes à puces et énumérations en HTML.
Comment faire une liste à puce

HTML offre la possibilité de créer des listes dans lesquelles chaque élément se trouve sur une ligne différente. Il ya 3 types fondamentaux
Une liste est un paragraphe structuré contenant une suite d'articles.
Avec HTML nous avons la possibilité de créer des listes, chaque élément de cette liste se trouve sur une ligne différente.
Et trois types de listes sont disponible en HTML, qui sont :
1. la liste simple, non ordonnée
2. la liste ordonnée
3. la liste de définitions

search |

listes à puces

Différents types de listes (HTML)
Décoration (CSS)

Différents types de listes (HTML) Nous apprendrons à créer des listes à puces avec HTML, puis nous les décorerons grâce au CSS.
Il existe 3 types de listes à puces :
Les listes non numérotés ou non ordonnée
Les listes numérotés ou ordonnée
Les listes de définitions

Les listes non numérotés (ou non ordonée)

Une liste non numérotée est comme ceci :

  • farine 450 G.
  • sucre 120 G.
  • l'eau 1.5 tasse de taille moyenne
  • 6 oeufs
  • sel, poivre

C'est en faite une liste d'éléments, sans ordre (il n'y a pas de "premier" ni de "dernier").
Pour Créer cette liste à puce non numérotés on utilise la balise <ul> qu'on ferme avec un </ul>.
Code : HTML
Sélectionner le code


<ul></ul>

 

Puis entre ces deux balises et pour définir les éléments de la liste on utilise la balise <li> comme suit:
Code HTML


Sélectionner le code
<ul>
   <li>farine 100 G.</li>
   <li>sucre  10 G.</li>
   <li>l'eau  1 tasse</li>
   <li>2 oeufs</li>
   <li>sel, poivre</li>
</ul>

 

Liste numérotée

Pour faire une liste numérotée, la balise <ul></ul> devient <ol></ol>
A l'intérieur on utilise toujours des balises <li></li>.
L'ordre dans lequel vous mettez les éléments de la liste cette fois devient important.
Le premier <li></li> sera l'élément nº1, le second sera le nº 2 etc...
Comme dans la recette de l'exemple précédent :

préparation:


  1. mélangez les ingrédients secs.
  2. Versez dedans l'eau et les oeufs.
  3. Mélangez pendant 10 minutes.
  4. Faites cuire au four pendant une heure à 300 degrés

Code : HTML


Sélectionner le code

<ol><li> mélangez les ingrédients secs.</li>
	<li> Versez dedans l'eau et les oeufs.</li>
	<li> Mélangez pendant 10 minutes.</li>
	<li> Faites cuire au four pendant une heure à 300 degrés</li>
</ol>

 

Tout ce qu'on a eu à changer donc c'est la balise <ol>

Liste de définitions

Dans une liste de définition il y a l'élément et sa définition.
Le principe est le même. Mais on utilise . <dl> (c'est l'abréviation de "Definition List")
Taper ceci :
Code : HTML


Sélectionner le code

<dl>
</dl>


Les listes de définition, sont créées en utilisant la balise < DL> , Elle se composent généralement d'une série de paires de terme / définition (bien que les listes de définition peuvent avoir d'autres applications). Exemple pour annonçer un produit, on pourrait employer une liste de définition :

moin coûteux
la nouvelle version de ce produit coûte de manière significative moins que la précédente !
facile à utiliser
nous avons changé le produit de sorte qu'il soit beaucoup plus facile à utiliser !
sans danger
vous pouvez utiliser ce produit sans aucun danger ni pour vous ni pour vos enfants (garantie).

Sélectionner le code

	<dl>
		<dt><strong> moin coûteux</strong></dt>
		<dd>la nouvelle version de ce produit coûte de manière significative moins que la précédente !</dd>
		<dt><strong>facile à utiliser</strong></dt>
		<dd>nous avons changé le produit de sorte qu'il soit beaucoup plus facile à utiliser !</dd>
		<dt><strong>sans danger</strong></dt>
		<dd>vous pouvez utiliser ce produit sans aucun danger ni pour vous ni pour vos enfants (garantie).</dd>
	</dl>

 

Décorartion des listes avec (CSS)
Tapez ce code que vous connaissez déjà.
Code : CSS


Sélectionner le code

		dd{
		background-color: #FF0000;
		}
	
 

Retrait des listes

La première permet d'indiquer si on veut que la liste soit mise en retrait ou non.
C'est list-style-position , elle prend 2 valeurs :
inside : la liste n'est pas mise en retrait.
outside : la liste est mise en retrait (par défaut c'est à dire que si on écrit rien nous
avons déjà outside).
Exemple
Code : CSS


Sélectionner le code

.sans_retrait{
list-style-position: inside;
}
.retrait{
list-style-position: outside;
}


Et le code HTML banal de liste à puces qui va avec:
Code : HTML

Sélectionner le code

		<p>Une liste avec retrait (par défaut) :</p>
		<ul class="retrait">
	   <li>Liste<br />des éléments</li>
	   <li>élément 1<br /> élément 2</li>
	   <li>Vous constatez<br />que le texte est décalé sur la droite</li>
		</ul>                
		<p>Une liste sans retrait :</p>
		<ul class="sans_retrait">
	   <li>Liste<br />des éléments</li>
	   <li> élément 1<br /> élément 2</li>
	   <li>vous constatez<br />que le texte n'est pas décalé sur la droite</li>
		</ul>
	
 

Représentation de la puce

La propriété list-style-type vous permet de changer l'apparence de la puce.
La propriété list-style-type peut prendre de nombreuses valeurs :
Pour les listes non numérotées (<ul>) :
disc : un disque noir (par défaut).
circle : un cercle.
square : un carré.
none : aucune puce ne sera utilisée.
Pour les listes ordonnées (<ol>), le choix est vaste :
decimal : des nombres 1, 2, 3, 4, 5... (par défaut)
decimal-leading-zero : des nombres commençant par zéro (01, 02, 03, 04, 05...). Ne
fonctionne pas sur Internet Explorer
upper-roman : numérotation romaine, en majuscules (I, II, III, IV, V...)
lower-roman : numérotation romaine, en minuscules (i, ii, iii, iv, v...)
upper-alpha : numérotation alphabétique, en majuscules (A, B, C, D, E...)
lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d, e...)
Code : HTML


Sélectionner le code

		<h2>Quelques listes non ordonnées</h2>
		<p>Voici une liste à puce non ordonnée sans modification (= <em>disc</em>) :</p>
		<ul>
	   <li>Liste</li>
	   <li>à</li>
	   <li>puces</li>
		</ul>
		<p>Avec <em>circle</em> :</p>
		<ul class="cercle">
	   <li>Liste</li>
	   <li>à</li>
	   <li>puces</li>
		</ul>
		<p>Avec <em>square</em> :</p>
		<ul class="carre">
	   <li>Liste</li>
	   <li>à</li>
	   <li>puces</li>
		</ul>
		<p>Avec <em>none</em> (sans puces) :</p>
		<ul class="rien">
	   <li>Liste</li>
	   <li>à</li>
	   <li>puces</li>
		</ul>
		<h2>Quelques listes ordonnées</h2>
		<p>Liste à puces ordonnée sans modification (= <em>decimal</em>)</p>
		<ol>
		<li>Un</li>
		<li>Deux</li>
		<li>Trois</li>
		<li>Quatre</li>
		</ol>
		<p>Avec <em>decimal-leading-zero</em> (<strong>Ne fonctionne pas sous IE)
		</strong>):
		</p>
		<ol class="commence_a_zero">
		<li>Un</li>
		<li>Deux</li>
		<li>Trois</li>
		<li>Quatre</li>
		</ol>
		<p>Avec <em>lower-alpha</em> :</p>
		<ol class="lettres_minuscules">
		<li>Un</li>
		<li>Deux</li>
		<li>Trois</li>
		<li>Quatre</li>
		</ol>

		<p>Avec <em>upper-roman</em> :</p>
		<ol class="chiffres_romains">
		<li>Un</li>
		<li>Deux</li>
		<li>Trois</li>
		<li>Quatre</li>
		</ol>
		<p>Avec <em>lower-greek</em> (<strong>Ne fonctionne pas sous IE</strong>) :
		</p>
		<ol class="lettres_grecques">
		<li>Un</li>
		<li>Deux</li>
		<li>Trois</li>
		<li>Quatre</li>
		</ol>
	
 

Et le CSS qui va avec :
Code : CSS


Sélectionner le code

	/* Listes à puces non ordonnées */
	.cercle{
	list-style-type: circle;
	}
	.carre{
	list-style-type: square;
	}
	.rien{
	list-style-type: none;
	}
	/* Listes à puces ordonnées */
	.commence_a_zero{
		list-style-type: decimal-leading-zero;
	}
	.lettres_minuscules{
	list-style-type: lower-alpha;
	}
	.chiffres_romains{
	list-style-type: upper-roman;
	}
	.lettres_grecques{
	list-style-type: lower-greek;
	}
	/* Quelques styles supplémentaires pour la présentation et rappels*/
	h2{
	text-indent: 20px;
	font-family: Arial, Verdana, "Times New Roman", serif;
	}
	em{
	background-color: yellow;
	}
	strong{
	color: red;
	}

 

Changer l'image de la puce

On peut utiliser n'importe quelle image à la place d'une puce grâce à la la propriété
list-style-image.
Exemple:
Code : CSS


Sélectionner le code

	ul /* Ma liste aura des puces en forme de dossiers */{
	list-style-image: url("images1/image.png");
	}
	/* Juste pour améliorer la présentation : */
	a{
	color: #0000FF;
	text-decoration: none;
	}
	a:hover{
	text-decoration: underline;
	}

 

L'image de puce peut être de n'importe quel type (PNG, GIF ou JPEG). Elle ne doit pas être trop grande pour ne pas être coupée. Utilisez une taille
d'environ 15x15 pixels.

L'attribut type

Vous pouvez utiliser l'attribut type pour la balise <ul> afin de spécifier le type de puce que vous souhaitez. Par défaut, il s'agit d'un disque. Voici les options possibles -
<ul type = "square">
<ul type = "disc">
<ul type = "circle">

Vous pouvez utiliser l'attribut type de la balise <ol> pour spécifier le type de numérotation que vous souhaitez. Par défaut, il s'agit d'un nombre. Voici les options possibles -
<ol type = "1"> - Chiffres en majuscules par défaut.
<ol type = "I"> - Chiffres en majuscules.
<ol type = "i"> - Chiffres en minuscules.
<ol type = "A"> - Lettres majuscules.
<ol type = "a"> - Lettres minuscules.

Pour savoir plus sur les propriétés des listes voir Référence de Propriétés de CSS"

Par carabde 10 mars 2014

chapitre précédent     chapitre suivant



Trafic Booster
hebergement web

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

Système de panier d'achat avec PHP et MySQL

Créer un système de panier d'achat avec PHP et MySQL. Le système de panier d'achat permettra aux visiteurs du site Web de rechercher des produits, d'ajouter des produits au panier et de passer des commandes.

Manipulation des Formulaires en PHP

Manipulation des Formulaires en PHP

Retourne la valeur numérique entière équivalente d'une variable

 Retourne la valeur numérique entière équivalente d'une variable



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci