Galactic Civilizations 3
Programmer en html - Les listes

Programmer en html - Les listes

Catégorie: Javascript.
Posté par le 12/05/2014.
Dernière mise à jour le 14/05/2014.

<<Tutoriel précédent    Tutoriel suivant>>

Description

Dans ce tutoriel, vous apprendrez comment ajouter des listes à votre page html.

Introduction

Ce tutoriel peut être réalisé à l'aide d'un simple éditeur de texte comme le « bloc notes ». Il ne nécessite aucun prérequis.

Les listes

Il existe trois types de liste:

  • les listes à puces;
  • les listes ordonnées;
  • les listes de définitions;

Nous nous pencherons sur les deux premières dans un premier temps et les listes de définitions seront expliquées dans le point suivant.

Les listes à puces et des listes ordonnées fonctionnent de la même manière, sauf que la première est utilisée pour les listes non-séquentielles avec des éléments de liste généralement précédés par des boules et la seconde est pour les listes séquentielles, qui sont normalement représentées par des numéros supplémentaires.

La balise html « ul » est utilisée pour définir les listes à puces et la balise html « ol » est utilisée pour définir les listes ordonnées.

À l'intérieur des listes, c'est la balise html « li » qui est utilisée pour définir chaque élément de la liste.

Ouvrez votre éditeur de texte et d'ajouter une liste à votre page html « tutorielsenfolie.html »:

tutorielsenfolie.html

<!DOCTYPE html>
<html>
<head>
    <title
>Ma jolie page Web</title>
</head>
<body>
    <h1>
Titre du fichier html</h1>
    <h2>
Mon sous-titre</h2>
    <p>
Voici ma premi&egrave;re page Web.</p>
    <p>
Voici une liste de fruits</p>
    <ul>
        <li>
pomme</li>
        <li>
poire</li>
    </ul>
</body>
</html>

Si vous regardez dans votre navigateur, vous verrez une liste à puces. Il suffit de changer les balises « ul » par « ol » afin d'avoir une liste numérotée.

Les listes peuvent également être incluses dans les listes pour former une hiérarchie structurée d'éléments.

Remplacez le code de la liste ci-dessus avec le texte suivant :

<ul>
    <li>
pomme
        <ol>
            <li>
rouge</li>
            <li>
verte</li>
        </ol>
    </li>
    <li>
poire</li>
</ul>

Voici une jolie hiérarchie de listes.

Les listes de définitions

Comme son nom l'indique, une liste de définitions sert à créer une liste de définitions comme par exemple un glossaire. Celle-ci est représentée par la balise html « dl ».

Cette liste est composé de la balise html « dt » qui correspond au(x) titre(s) de la définition et la balise « dd » qui correspond à la description.

Voici un exemple de liste de définitions:

<dl>
    <dt>
mot1</dt>
    <dl>
Def 1</ld>
    <dl>
Def 2</dl>
    
    <dt>
mot2</dt>
    <dt>
synonyme</dt>
    <dl>
Def 1</ld>
<dl>

La suite de ce tutoriel vous expliquera comment créer des liens vers d'autres pages web ou vers d'autres sites internet.

Tu as aimé ce tutoriel ?
Aide nous à améliorer le site ! Deviens partenaire officiel ou suis nous sur facebook !

<<Tutoriel précédent    Tutoriel suivant>>

Commentaires[0]

Tu as aimé ce tutoriel ? Alors partage-le avec tes amis !
Partager sur Facebook Partager sur Twitter Partager sur Myspace Partager sur Stumbleupon Soumettre sur Reddit Partager sur Digg Ajouter à vos favoris Technorati Ajouter à vos favoris Live Ajouter à vos favoris Google Ajouter sur vos favoris Yahoo Voir le flux rss

Mots Clés: html HTML5 Programmer en html web

Veve :
(11/04/2013 - 17:19:44)
il faut juste mettre "sudo" à la place de "su" pour exécuter la commande en root

Veve :
(11/04/2013 - 17:18:56)
Salut tu peux aller lire ce tutoriel: http://www.tutorielsenfolie.com/tutoriels-63-installation-configuration-opennebula.html Il fonctionne aussi sous ubuntu

safa.souissi4 :
(10/04/2013 - 20:58:13)
s'il vous plait c urgent :(

safa.souissi4 :
(10/04/2013 - 20:56:25)
bonsoir,je cherche un tutos pour installer opennebula.org sous ubuntu 12.

Veve :
(18/03/2013 - 20:07:49)
oui, j'essaye de voir d'ou viens le problème.

sonde :
(18/03/2013 - 13:29:57)
re merci (j apprend un peu plus) je crois que j ai trouver pourquoi je peu pas poster si il y a ligne code impossible de poster lol

Veve :
(17/03/2013 - 21:34:49)
Salut, j'espère que ça t'a aidé.

sonde :
(17/03/2013 - 09:59:02)
pour ton aide

sonde :
(17/03/2013 - 09:57:36)
slt Veve impossible de laisser com

sonde :
(17/03/2013 - 09:56:55)
??

Demi-dieu :
(15/03/2013 - 18:41:13)
salut ^^

sonde :
(13/03/2013 - 14:49:35)
un petit coucou

Tanamoureuse :
(29/09/2011 - 06:11:08)
Je t'aime

Faire un don

Ma Publicité ici


Faire un don