Technologies Du Web: TP 2: Feuilles de Style

Faculté des Sciences d’Agadir A.U.
2021-2022
Département d’Informatique SMI3
Technologies du Web
TP 2 : Feuilles de style
Exercice 1
Soit le code HTML suivant: Et soit la feuille de style

suivante (style.css):
<html>
<head><title>Exercice</title> body {color: blue; }
<style type="text/css">@import url(style.css); h1 {color: green; }
</style>
.h1 {color: blue; }
</head>
<body>
li+li {color: yellow;}
<h1>texte [1]</h1> ol[start] li {color: purple;}
<ul> ul {color: black; }
<li>texte [2]</li> h1+ul>li+li {color: orange;}
<li>texte [3]</li> h1+ul>li {color: red; }
</ul> h1+ul {color: blue; }
<h2>texte [4]</h2>
<ul>
<li>texte [5]</li>
<li class="h1">texte [6]
Indiquez pour chaque nombre
<ol start="2"> entre crochet la couleur dans
<li>texte [7]</li> laquelle il s’affiche.
<li>texte [8]</li>
</ol>
</li>
</ul>
</body></html>
Exercice 2
I. Dans le fichier "TP2.html ", effectuer les modifications suivantes :
1. Ajouter un identifiant à chacun des éléments div (header, nav, et main)
2. Ajouter les classes suivantes aux groupements de colonnes :
 classe sem1 aux éléments de la première colonne
 classe sem2 aux éléments de la deuxième colonne
 classe sem3 aux éléments de la troisième colonne
 classe sem4 aux éléments de la quatrième colonne
II. Créer une feuille de style externe pour mettre en forme le document "TP2.html".
Appliquer les styles suivants :
Corps du document:
 Couleur de fond: aqua
 Couleur: noir
 Police de caractères: doit être dans l'ordre de préférence de police Verdana, Arial.
Proposer une famille de polices par défaut
Entête:
 Alignement du texte: centré
1
Faculté des Sciences d’Agadir A.U. 2021-2022
Titres:
 Police de caractères : Arial. Proposer une famille de polices par défaut
Titre de niveau 1:
 Couleur: bleu marine (navy)
Titre de niveau 4:
 Couleur: rouge
 Décoration: souligné
Section de navigation "nav":
 Flottante à gauche
 Largeur: 300px
 Marge supérieure: 60px
Liens non visités:
 Couleur: bleu marine (navy)
Liens survolés:
 Couleur de fond: bleu marine
 Couleur: gris argent
Liens visités et activés:
 Couleur: rouge
Section de contenu "main":
 Flottante à gauche
 Bordure à gauche
 Couleur de fond: blanc
 Largeur: 900px
 Marge interne: 1 empattement standard (1em)
 Bordure en bas pointillés
Première lettre d’un paragraphe de la section de contenu "main":

 Couleur : rouge
 Décoration : gras
 Police : fantasy
 Taille : double de la taille par défaut
Paragraphes:
 Alignement: justifié
 Indentation: 1 empattement standard
Tableau:
 Bordures: 2 pixels de large, trait plein, couleur grise (#696969); fusion (collapse) avec
la bordure des cellules
2
 Position de la légende: en bas

 Bordure des cellules: 1 pixel de large, trait pointillé, couleur noire
 Chaque cellule-titre doit être en petites majuscules
 Le texte de chaque cellule-titre doit être souligné
 Chaque initiale du texte de chaque cellule de la classe sem1 doit être en majuscule
Classe sem1 et sem3 :
 Alignement : gauche
 Couleur de fond : jaune
Classe sem2 et sem4 :
 Alignement : centré
 Couleur de fond : vert (lime)
Listes:
• Les listes ordonnées doivent être sous la forme a, b...
• Les listes non ordonnées imbriquées au deuxième niveau (ul ul) doivent être repérées par
des puces rectangulaires
Image:
 Placer l'image "Rose.jpg" en fond du div "presentation". Ne la répéter que
verticalement ; la placer en bas à droite
Exercice 3
On veut réaliser un menu comme celui affiché ci-dessous. Ecrire le code html et CSS
nécessaire permettant de l’obtenir.
Indications
 Un menu est une liste de liens
 Faire en sorte que les li s'affichent sur la même ligne (utiliser la propriété "display")
 Ajouter la bordure, et l'espacement nécessaire
 Ajuster les couleurs
 Quand la souris passe par-dessus un élément, il prend la couleur #ecc
 Utiliser la propriété convenable permettant d’obtenir facilement les coins arrondis
Exercice4
Ecrire le code html et CSS permettant d’obtenir l’interface illustrée par la figure1.
Le fichier html doit contenir:
 Un titre de niveau1 qui représente l’en-tête.
 Un bloc dont l’ID est "blocmenu" contenant le menu à gauche, sous forme de liste à
puces contenant des liens hypertextes.
 Un bloc dont l’ID est "contenu" contenant le contenu du document (ici un texte sans
signification).
3
 Un paragraphe dont l’ID est "pied " contenant le pied de page (On peut aussi le mettre
dans un bloc div)
Figure 1 : mise en page sur 2 colonnes

Technologies Du Web: TP 2: Feuilles de Style

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Technologies Du Web: TP 2: Feuilles de Style

Transféré par

Droits d'auteur :

Formats disponibles

Faculté des Sciences d’Agadir A.U.

Soit le code HTML suivant: Et soit la feuille de style

Première lettre d’un paragraphe de la section de contenu "main":

 Position de la légende: en bas

Figure 1 : mise en page sur 2 colonnes

Vous aimerez peut-être aussi