HTML Liste

Liste non ordonnée

Une liste non ordonnée commence avec la balise <ul> et se termine par </ul>

Chaque élément de la liste commence avec la balise <li> et se termine par </li>, et est intégré dans le bloc <ul>...</ul> 

<h3>Pâte sablée</h3>
<p>Liste des ingrédients</p>

<ul>
	<li>250 g de farine type 55 tamisée</li>
	<li>125 g de beurre</li>
	<li>125 g de sucre semoule</li>
	<li>1 œuf entier (50 g)</li>
	<li>2.5 g de sel (1% de la farine)</li>
</ul>
Voir

Liste ordonnée

Une liste ordonnée commence avec la balise <ol> et se termine par </ol>

Chaque élément de la liste commence avec la balise <li> et se termine par </li>, et est intégré dans le bloc <ol>...</ol> 

<h3>Pâte sablée</h3>
<p>Réalisation : Méthode par Sablage à la main</p>

<ol>
	
	<li>Tamiser la farine et le sucre dans un saladier.</li>
	
	<li>Ajouter le beurre souple en petites parcelles.<br>
	Mélanger l'ensemble avec les mains pour que tous les morceaux
	de beurre soient enrobés de farine. Les écraser pour obtenir un sablage.</li>
	
	<li>Faire un puits. Y ajouter l'oeuf légèrement battu avec le sel.
	Incorporer progressivement le sablage.</li>
	
	<li>Mélanger jusqu’à obtention d’une pâte homogène, sans pétrir.</li>
	<li>Faire une boule et la fariner légèrement.
	Envelopper dans du film étirable et réserver au frais minimum 30 minutes.</li>
	
	<li>Etaler la pâte à l’aide d’un rouleau et 
	tapisser l'intérieur de la tourtière ou du cerclage.
	Piquer avec la fourchette. Remettre au frais.</li>

</ol>
Voir

Listes imbriquées

Les listes peuvent être imbriquées à l'intérieur des listes

<!-- Ecriture du code lisible car indenté correctement -->

<ul>
	<li>Café</li>
	<ul>
		<li>Café noir</li>
		<li>Café au lait</li>
	</ul>
  <li>Thé</li>
	<ul>
		<li>Thé vert</li>
		<li>Thé noir</li>
	</ul>
	<li>Chocolat</li>
	<li>Lait</li>
</ul>


<!-- Même écriture du code précédent sans indentation -->
<!-- ce code est illisible !!!!! -->

<ul><li>Café</li><ul><li>Café noir</li><li>Café
au lait</li></ul><li>Thé</li><ul><li>Thé vert</li><li>Thé 
noir</li></ul><li>Chocolat</li><li>Lait</li></ul>
Voir

Les attributs de listes (liste non ordonnée) :

Un attribut de style peut être ajouté à une liste non ordonnée pour définir le style du marqueur.

Description des styles

list-style-type:disc : Les éléments de la liste seront marqués avec des balles (par défaut)
list-style-type:circle : Les éléments de la liste seront marqués avec des cercles
list-style-type:square : Les éléments de la liste seront marqués avec des carrés
list-style-type:none : Les éléments de liste ne seront pas marqués

Les attributs de listes (liste ordonnée) :

Un attribut de type peut être ajouté à une liste ordonnée pour définir le style du marqueur.

Description des styles

type="1" : Les éléments de la liste seront numérotés avec des nombres (par défaut)
type="A" : Les éléments de la liste seront numérotés avec des lettres majuscules
type="a" : Les éléments de la liste seront numérotés avec des lettres minuscules
type="I" : Les éléments de la liste seront numérotés avec des nombres romains majuscules
type="i" : Les éléments de la liste seront numérotés avec des nombres romains minuscules

Exemple 

<ul style="list-style-type:square">
	<li>Café</li>
	<li>Thé</li>
	<li>Chocolat</li>
</ul>

<ol type="A">
	<li>Café</li>
		<ol type="1">
			<li>Noir</li>
			<lI>Au lait</li>
		</ol>
	<li>Thé</li>
	<li>Chocolat</li>
</ol>
Voir