Exercice 1
Ecrire un programme html avec un style css qui permet de créer le site suivant :
Compléter les code html et css suivant pour avoir la forme du site ci-dessus.
<!DOCTYPE html>
<html>
<head>
<title>Structure de la page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="[Link]" type="text/css" rel="stylesheet" >
</head>
<body>
<header id="topPage">
<div class="logo"> ????????</div>
<div class="bandeau">??????????</div>
</header>
<div id="mainPage">
<nav class="menuGauche">??????????</nav>
<div class="centre">?????????????</div>
</div>
<footer id="basPage">?????????????????</footer>
</body>
</html>
[Link]
#topPage { .logo { .bandeau {
width : 100%; width:150px; width:100%;
height : 100px; height:100%; height:100%;
background-color : background-color: #006600; background-color:
#00FF00; } float :left; } #000066; }
#mainPage { .menuGauche { .centre {
width : 100%; width : 200px; width : 100%;
height: 500px; height: 100%; height: 100%;
background-color : background-color : #660000; background-color :
#FF0000; } float :left; } #FF00FF; }
#basPage {
width : 100%;
height : 60px;
background-color : #0000FF;
}
A. EL FERGOUGUI TP CSS
Exercice 2
Réaliser un programme avec son fichier css qui réalise le site suivant :
Exercice 3
• Créer un tableau contiendra au moins 10 lignes tr et 10 colonnes td.
• la première ligne du tableau sera une ligne d'en-tête et n'aura que des colonnes th.
• nous ferons en sorte qu'après la ligne d'en-tête, toutes les 6 lignes un périodicité de couleurs
soit établie :
o les 3 premières lignes seront sur un fond rouge clair (#FCC),
o la quatrième ligne sera sur un fond jaune clair (#FFC),
o la cinquième ligne sera sur un fond vert clair (#CFC),
o la sixième ligne sera sur un fond bleu clair (#CFF).
o Les lignes restantes sauf la dernière auront un fond rouge foncé (#F00)
o La dernière ligne aura un fond bleu foncé (#00F)
• nous ferons également en sorte que :
o la ligne d'en-tête soit en caractères blancs sur fond rouge sombre (#633),
o la deuxième colonne soit écrite en rouge (#F00).
• Vous pouvez utiliser thead (en-tête tableau), tboody (corps tableau) et tfoot (pied tableau)
• Utiliser nth-child(an+b), nth-last-child(an+b)
A. EL FERGOUGUI TP CSS
Exercice 4
Réaliser un programme html avec code css qui permet d'avoir le résultat suivant:
Utiliser les lignes paires et impaires et le fusionnement des colonnes avec le paramètre colspan=’’n’’
de la colonne <td> à fusionner et des lignes avec le paramètres rowspan=’’m’’ de la ligne <tr> à
fusionner.
Exercice 5
Réaliser le programme html et le code css pour avoir l'affichage ci dessous
Exercice 6
En utilisant les pseudo codes ::first-line et ::first-letter écrire un code qui réalise :
A. EL FERGOUGUI TP CSS