11/23/2023

Développement
web et mobile
Initiation au
développement
Web
TP 3 : CSS - Feuilles de style en
cascade

Hamouda Ala
L3SETD3TP6
Exercice n° 1 :
Travail demandé :
Créez un fichier HTML nommé exercice1.html.

1. À l'intérieur du fichier HTML, ajoutez la structure de base :

2. Ajoutez un titre de niveau 1 <h1> avec le texte "Exercice sur le Texte et les Listes".
3. Ajoutez un paragraphe <p> avec le texte "Ceci est un paragraphe de texte."

4. Créez une liste non-ordonnée <ul> avec trois éléments de liste <li> contenant
du texte de votre choix.

5. Ajoutez une classe "styled-list" à la balise <ul> : <ul class="styled-list">.

6. Dans le fichier styles.css, ajoutez les styles pour les éléments de la liste. Les
éléments de la liste doivent avoir un fond de couleur gris clair, une marge de 5
pixels en haut et en bas, un rembourrage de 10 pixels et un rayon de bordure de 5
pixels.

1
Résultat :

Exercice n° 2 :
Travail demandé :
1. Créez un fichier HTML nommé exercice2.html.

2. À l'intérieur du fichier HTML, ajoutez la structure de base :

3. Ajoutez un titre de niveau 1 <h1> avec le texte "Exercice sur les Tableaux".

4. Créez un tableau <table> avec trois lignes <tr> : • La première ligne doit contenir
des en-têtes de tableau <th> avec les textes "Nom", "Âge" et "Ville".

• Les deux lignes suivantes doivent contenir des cellules de tableau <td> avec des
données de votre choix.

2
5. Ajoutez une classe "styled-table" à la balise <table> : <table class="styled-
table">.
6. Dans le fichier styles.css, ajoutez les styles pour les cellules de tableau (<th> et
<td>). Les cellules de tableau doivent avoir une bordure de 1 pixel solide de
couleur grise, un rembourrage de 10 pixels et un fond de couleur gris clair pour les
en-têtes de tableau (<th>).
Assurez-vous de lier correctement votre fichier CSS (styles.css) à vos fichiers HTML et de tester vos
pages dans un navigateur web pour voir les résultat

3
s

Résultat :

Exercice n° 3 :
Travail demandé :
1. Créer un document web avec un modèle minimaliste HTML5/CSS3.

2. Le modèle sera basé sur l’utilisation de nouveaux éléments sémantiques HTML5

d’organisation des contenus, c’est-à-dire des éléments de section.

3. La mise en page globale (design) sera contrôlée par une approche CSS simple,
soit la propriété float pour des éléments de type block, ou de préférence, en

4
utilisant la propriété display de valeur inline-block, et en fixant la largeur width
des éléments.

4. N’utilisez les propriétés CSS Grid, ni Flexbox. que vous n’avez pas utilisées
jusqu’à présent (ce sera le sujet de notre prochain cours).

5. Dans un premier temps la figure suivante sera le premier rendu de votre travail.

5
Résultat :

Exercice n° 4 :
Travail demandé :

1. Créer un document web avec un modèle HTML5/CSS3.

2. Le modèle sera basé sur l’utilisation de nouveaux éléments sémantiques HTML5

d’organisation des contenus, c’est-à-dire des éléments de section.

3. La figure suivante représente le résultat souhaité

6
7
8
9
Résultat :

10
Exercice n° 5 :
Travail demandé :

1. Créez un fichier structure.html que vous sauvegarderez dans le sous-répertoire

tp03.
2. La page html sera divisée en 4 blocs, chaque bloc correspondra à une balise
<div> dans le fichier html.
3. Il faut réaliser 2 fichiers : a. structure.html : utilisation de balise <div> pour créer
le 4 blocs;
b. structure.css : nécessaire pour placer correctement le 4 blocs.
4. On utilisera des valeurs en pourcentage pour spécifier les mesures des
différents blocs afin d’obtenir une page web adaptable à toutes les résolutions.
5. Pour obtenir la division en blocs on utilisera que de balise <div> (pas
de tableau pour structurer la page)
6. Le fichier de style doit contenir les spécifications pour le texte (police) et la
couleur.

11
12
Résultat :

13