Vous êtes sur la page 1sur 6

Etablissement : ISET Charguia Département : Technologies de l’Informatique

Matière : Atelier Dév Web et Multimédia1 Année : 1ère année


Année Universitaire : 2016 - 2017

TP n° 3 : Autres éléments de HTML5 : Les listes

Objectifs du TP :
- Utiliser les listes ordonnées et les listes non ordonnées et différents attributs de styles qui
leur sont associés
- Créer des listes imbriquées.
- Utiliser des listes de définition
- Utiliser des listes à puce d’images
- Utiliser des listes horizontales.

Exercice 1 :
1. Créez un document html5 nommé EX1.html qui se présente comme suit :

Figure 1:Code html de la page Ex1.html

2. Que font les balises <ul>, <li> et <ol> ?


3. Définir dans une feuille de style les styles suivants :
ul {list-style-type:circle }
ol { list-style-type:upper-alpha}
Quel est l’effet de l’application de ces styles ? Commenter
4. Modifier la valeur de la propriété list-style-type associée à la balise ul pour qu’elle
accepte les valeurs suivantes : disc, square, none. Tester à chaque fois et
commenter.
5. Modifier la valeur de la propriété list-style-type associée à la balise ol pour qu’elle
accepte les valeurs suivantes : decimal, decimal-leading-zero, lower-alpha,
lower-roman et upper-roman, none. Tester à chaque fois et commenter.

TP3 : Autres éléments de HTML5 (Les listes) A.U 2016-2017 1


Exercice 2 :
Créer une page HTML nommée EX2.html qui se présente comme suit :

Figure 2: Page Ex2.html

Exercice 3 :
Créer une page HTML nommée EX3.html permettant d’afficher ce qui suit :

Figure 3: Page Ex3.html

Apporter les modifications nécessaires pour que l’affichage devienne comme suit :

Figure 4 : Page Ex3.html

TP3 : Autres éléments de HTML5 (Les listes) A.U 2016-2017 2


Exercice 4 :
Créer la page web ci-dessous en utilisant une liste de définitions :

Figure 5: Page Ex4.html

Exercice 5 :
1. Créer une feuille de style contenant le code CSS Suivant :
li {list-style-type: none;}
li:before
{
content: "-*-"; /* on affiche une chaîne de caractère */
}

NB
:before permet de générer du contenu avant un élément de la liste. Ce contenu peut être une
chaîne de caractère, une image de fond ou une valeur d'attribut.

2. Appliquer le style tel que décrit sur la page html illustrée par la figure 6 :

Figure 6: Page Ex5.html Figure 7: Page Ex5.html

3. Apporter les modifications nécessaires à la feuille de style pour que la de la page html
s’affiche tel qu’illustré dan s la figure 7.

TP3 : Autres éléments de HTML5 (Les listes) A.U 2016-2017 3


Exercice 6 :
En utilisant les balises des listes et les styles des puces dans un code CSS3, concevoir une liste
horizontale comme suit :

Figure 8: Page Ex6.html

Les différents éléments ont un fond vert et une écriture en blanc.

Exercice 7 :
Créer une page HTML nommée EX7.html permettant d’afficher ce qui suit :

Figure 9:Page EX7.html

TP3 : Autres éléments de HTML5 (Les listes) A.U 2016-2017 4


Il est à noter qu’en plus du choix des puces comme illustré, la feuille de style comprend les styles
permettant d’assurer l’affichage suivant :
- Les 7 unités d’enseignement sont de couleur rouge et sont en gras
- Les noms des matières sont en noir et italique
- Les charges horaires en cours et en tp sont de couleur bleue
- Les matières relatives à la programmation structurée sont écrites en Arial
- Les langues (français et anglais ne sont pas italiques et sont soulignés)

Exercice 8 :
Il s’agit de créer une page Web représentant votre CV selon le format indiqué en annexe (voir page
suivante).

1. Créer un document html nommé moncvListe.html.

2. Ecrire le texte de votre CV selon le format indiqué. On utilise des listes non ordonnées et
des listes ordonnées pour présenter les informations du CV : Etudes, diplômes, Expériences
et Compétences.
3. Créer un fichier monCVStyle.css qui contient les styles permettant d’assurer l’affichage
suivant :
• La page est écrite en Arial ave une couleur de fond « Moccasin » et une écriture
noire
• Les titres et les sous-titres de la page sont soulignés et de couleur bleue
• Les sous-titres sont soulignés
• Le nom et le prénom sont écrits en rouge et sont centrés dans la page

4. Ajouter au fichier monCVStyle.css des classes de styles pour les différentes listes (infos
personnelles, études, diplômes, compétences et expériences) du cv

TP3 : Autres éléments de HTML5 (Les listes) A.U 2016-2017 5


Annexe

CV
Votre Nom et Prénom
Votre n° de téléphone
Votre adresse
Votre adresse de messagerie

Etudes
o De ….. à … école primaire à …..
o De….à…. lycée secondaire

Diplômes

I. Diplôme 1
II. Diplôme 2

Expériences
Nom de la société, fonction
Nom de la société, fonction
Nom de la société, fonction

Compétences
- Compétences 1
- Compétences 2

TP3 : Autres éléments de HTML5 (Les listes) A.U 2016-2017 6

Vous aimerez peut-être aussi