Scribd
Importer
108 vues5 pages

TP Css 1

Tp css 1

Transféré par

nourbadreddine999
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
108 vues5 pages

TP Css 1

Tp css 1

Transféré par

nourbadreddine999
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 5

Enseignante: Eyaa Naimi

Développement web et mobile Initiation


au développement Web
TP 3 : CSS - Feuilles de style en cascade
Exercice 1 :
Créez un fichier HTML nommé exercice1.html.

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Exercice 1</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>

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.
Enseignante: Eyaa Naimi

Exercice 2: Travailler avec les Tableaux

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.

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ésultats.
Enseignante: Eyaa Naimi

Exercice 3 :

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 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.
Enseignante: Eyaa Naimi

Exercice 4 :

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é

Exercice 5 :

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.
Enseignante: Eyaa Naimi

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.

Vous aimerez peut-être aussi