Vous êtes sur la page 1sur 3

Exercice 7 Les listes

1. Crez un fichier mon-cv_listes.html dans le rpertoire /EnvSystemeReseau/tp-html. Copiez-y le contenu du fichier base.html. 2. Compltez le contenu de la balise <title> imbrique dans <head> avec le titre suivant : Curriculum Vitae (listes) de Nom Prnom. 3. Souvent, pour prsenter des informations ordonnes, non ordonnes ou des dfinitions, on utilise des listes. Une liste doit contenir au minimum un lment. Une liste non ordonne est dfinie de la manire suivante : La liste commence par la balise ouvrante <UL> et se termine par la balise fermante </UL>. On utilise la balise <LI> pour insrer un nouvel lment dans la liste. Voici un exemple de liste non ordonne :

Insrez ce code dans le corps <body> du fichier mon-cv_listes.html et observez. 1. Les lments d'une liste non ordonne sont introduits par des lments graphiques . Par dfaut il s'agit d'un rond noir pour le premier niveau d'indentation, un rond blanc pour le deuxime niveau, etc... Ces lments graphiques peuvent tre modifis en renseignant le champs type='valeur' dans la balise <LI>. Le champs type peut prendre les valeurs suivantes :

Testez les diffrentes valeurs sur la liste non ordonne prcdente. 2.


Une liste ordonne est dfinie de la manire suivante : La liste commence par la balise ouvrante <OL> et se termine par la balise fermante </OL>. On utilise la balise <LI> pour insrer un nouvel lment dans la liste.

Transformez la liste non ordonne prcdente en liste ordonne, observez. 1. Comme pour les listes non ordonnes, les listes ordonnes utilisent des lments graphiques pour introduire les lments de la liste. Ces lments graphiques peuvent tre modifis en renseignant le champ type='valeur' dans la balise <OL>. Le champ type peut prendre les valeurs suivantes : Type 1 a A i I Chiffres arabes Minuscules Majuscules Chiffres romains minuscules Chiffres romains majuscules Type d'numration 1, 2, 3, ... a b, c, ... A, B, C, ... i, ii, iii, ... I, II, III, ...

Licence Informatique. Premire Anne. Semestre 1. Cours Environnement Systme et Rseaux. Travaux Pratiques. @ 2010-2011

Testez les diffrentes valeurs sur la liste ordonne prcdente. 2.


Une liste dite de description est dfinie de la manire suivante : La liste commence par la balise ouvrante <DL> et se termine par la balise fermante </DL>. Un titre de dfinition est indiqu par la balise <DT>. On utilise la balise <DD> pour renseigner la dfinition elle-mme.

Voici un exemple de liste de description :

Insrez ce code dans le corps <body> du fichier mon-cv_listes.html et observez. 1. Dans le fichier mon-cv_listes.html, nous allons crer 3 sections : diplmes, expriences professionnelles et loisirs. Chaque section sera une liste de description dont le titre sera insr l'aide d'une balise <h3>. Il sera affich en bleu (color: blue;) . Le contenu de chaque section sera une liste non ordonne d'lments en rapport avec la section (les diplmes dans la section diplmes, ...). Pour chaque diplme dans la section Diplmes, vous devez crer une liste non ordonne contenant les informations suivantes : Anne, Diplme, tablissement. La section Expriences professionnelles, doit tre cre de la mme faon que la section Diplmes. Les informations demandes pour chaque exprience sont : Priode, tablissement, Poste occup. De mme pour la section Loisirs, avec les informations suivantes : langues, activits artistiques et sports.

2. Ajoutez galement une section contenant votre identit et vos coordonnes (Nom et prnom, adresse postale, adresse lectronique, numros de tlphone fixe et portable). Cette section sera cre grce une liste de description.

Exercice 7 Mise en forme des listes


1. Crez un fichier listes-formattees.html dans le rpertoire /EnvSystemeReseau/tphtml. Copiez-y le contenu du fichier base.html. 2. Insrez la liste suivante dans le corps de la page :

Licence Informatique. Premire Anne. Semestre 1. Cours Environnement Systme et Rseaux. Travaux Pratiques. @ 2010-2011

Puis dfinissez le code CSS qui permet de formater l'affichage de cette liste comme suit :

En l'absence de rgles supplmentaires, la liste est affiche de cette manire :

3. Positionnement de la liste. Attribuez la liste prcdente une marge extrieure gauche (margin-left) et une marge intrieure gauche (padding-left) de 0 px et observez le rsultat. Corrigez ensuite les deux proprits prcdentes de manire rintgrer les puces de la liste l'intrieur du bloc <div>. 4. Images en tant que puces. La proprit list-style-image permet d'utiliser une image en tant que puce. Tlchargez une image (pas trop grande) et enregistrez-la dans le rpertoire images sous le nom puce.gif. Puis compltez le code CSS relatif la liste avec la proprit liste-style-image: url(puce.gif);. Si le navigateur utilis par l'utilisateur ne prend pas en charge cette partie de CSS (ou n'affiche pas les images), la puce par dfaut sera utilise. Pour spcifier vous-mme la puce HTML afficher dans une telle situation, vous dfinirez la fois la proprit list-style-image et la proprit list-style-type.

5. Positionnement des puces. La proprit list-style-position permet de placer les puces par rapport au texte des items de la liste. Attribuez la liste prcdente cette proprit avec pour valeur inside et observez le rsultat. 6. Suppression des puces. Il peut arriver que vous ne vouliez pas utiliser de puce pour l'affichage d'une liste. Pour cela, vous remplacerez les trois rgles prcdentes par l'attribut list-style: none; dans votre rgle de style concernant la liste. Si vous souhaitez, non pas supprimer les puces mais les remplacer par un caractre de votre choix, vous utiliserez galement la rgle list-style: none;. Puis vous forcerez la premire ligne de chaque item de la liste s'afficher avec un alina ngatif l'aide de la proprit text-indent. Il vous faudra galement dfinir le margin-left ou padding-left, l'un des deux au choix, 0, et l'autre la mme valeur positive que le text-indent. Voici le code CSS complet :

Remplacez les styles dfinis prcdemment pour la liste par ces derniers. Puis ajoutez le caractre &#187; au dbut de chaque item de la liste.

Licence Informatique. Premire Anne. Semestre 1. Cours Environnement Systme et Rseaux. Travaux Pratiques. @ 2010-2011