UNIVERSITE DE CARTHAGE DEPARTEMENT
FACULTE DES SCIENCES DE BIZERTE INFORMATIQUE
Classes : SEIOT-2 A-U : --
Matière : PROGRAMMATION WEB Durée : 2 semaines
Enseignant : MED. A. DAHDEH Nb pages : 11
TP n°2
CSS 3
Introduction
Au cours des séances de travaux pratiques vous allez créer votre premier site web. Il vous sera
demandé par ailleurs d’être autonome pour finaliser l’édition de vos pages à la maison. La
note du TP vous sera attribuée sur la base du rendu final de votre site (Attention, une note par
séance peut également être comptabilisée).
Environnement de travail
Navigateur web
Editeur de texte : Bloc-notes, Notepad++, Sublime Text, Geany,….
Maquette du site web :
Vous allez réaliser votre site web en se basant sur les maquettes suivantes :
Figure 1: index.html
1
UNIVERSITE DE CARTHAGE DEPARTEMENT
FACULTE DES SCIENCES DE BIZERTE INFORMATIQUE
Figure 2: connexion.html
Figure 3: inscription.html
2
UNIVERSITE DE CARTHAGE DEPARTEMENT
FACULTE DES SCIENCES DE BIZERTE INFORMATIQUE
Figure 4: faq.html
3
UNIVERSITE DE CARTHAGE DEPARTEMENT
FACULTE DES SCIENCES DE BIZERTE INFORMATIQUE
Rappel de quelques notions CSS
Pour mettre en forme (couleurs, décortation...) une page web, on utilise des feuilles de style
(CSS : Cascading Style Sheets : feuilles de style en cascade).
Commençons par un exemple :
Regardons cet exemple plus en détail :
4
UNIVERSITE DE CARTHAGE DEPARTEMENT
FACULTE DES SCIENCES DE BIZERTE INFORMATIQUE
Le modèle de boîtes est très important pour la mise en page CSS. Essayez de bien mémoriser
ce schéma.
Les espacements (margin, padding) et les bordures peuvent être définis dans différentes
directions. Par exemple:
margin-left: 20px;
padding-top: 10px;
border-bottom: 2px solid black;
5
UNIVERSITE DE CARTHAGE DEPARTEMENT
FACULTE DES SCIENCES DE BIZERTE INFORMATIQUE
On peut aussi imposer la taille de certaines boites :
width: 300px;
height: 200px;
Partie 1 : Premier essai de CSS
Exercice 1 :
1. Créez un document HTML index.html contenant un titre (h1) et un paragraphe.
2. A l'intérieur du <head> (après title et meta-charset) ajoutez la balise suivante :
<link href="styles.css" rel="stylesheet" type="text/css"
/>
3. Créez un fichier styles.css permettant d'afficher le titre en vert et le paragraphe
en rouge.
4. Essayez, une par une, les propriétés / valeurs suivantes pour le paragraphe:
background-color: #79CAE6;
font-size: 9px;
font-size: 40px;
border: dashed;
border: 1px solid red;
width : 300px ;
margin : 40px ;
padding: 30px ;
5. Ajouter le code HTML suivant avant le titre <H1>
6. Modifiez le fichier CSS « style.css » afin d’obtenir le menu donné par la figure
suivante :
#ecc
#bb
b
#fff
Pour cela, on pourra utiliser les propriétés :
border-top-right-radius:10px;
border-top-left-radius:10px;
Pour obtenir les arrondis sur les coins des bordures.
Utiliser la propriété : display :inline pour aligner horizontalement la liste, appliquer un
espacement de 4px pour chaque item de la liste, les bordures des items : 1px solid et noir et la
couleur des liens est noir
6
UNIVERSITE DE CARTHAGE DEPARTEMENT
FACULTE DES SCIENCES DE BIZERTE INFORMATIQUE
Exercice 2 :
1. Créer la page web tabweb.htm composée de deux tableaux, de deux titres de niveau 1, d’un
titre de niveau 3 et d’un paragraphe. Le rendu doit alors être celui donné par la figure
suivante :
2. Modifier, à l’aide d’un fichier CSS « style-tabweb.css », l’apparence du titre du niveau 3 et
du paragraphe pour obtenir le résultat de la figure suivante. (Utiliser les images title.png et
degrade.png)
Largeur :
300px
Largeur :
Hauteur :
300px
20px
3. Modifier les fichiers HTML et CSS afin de mettre en page les tableaux comme sur la figure
suivante ?
#DC2F2F
#F16D6D
#CB4040
NB :
- Les propriétés des 2 tableaux sont : Centré, largeur : 400px, Bordure externe : 2px solid et noir,
Bordure interne : 1px solid et noir, texte centré.
- La largeur des cellules est 30% et la hauteur est 40px.
- Utiliser les pseudo-classes CSS3 nt-child comme suit :
tr:nth-child(even) {background: #F16D6D;} // les lignes paires
tr:nth-child(odd) {background: #CB4040;} // les lignes impaires
7
UNIVERSITE DE CARTHAGE DEPARTEMENT
FACULTE DES SCIENCES DE BIZERTE INFORMATIQUE
4. Modifier les fichiers HTML et CSS pour obtenir le résultat de la figure suivante ?
Travail à faire (Projet site web)
1- Ajoutez la ligne suivante dans la partie <head> de la page index.html :
<link href="./css/style.css" type="text/css" rel="stylesheet"/>
2- Copiez les styles suivants dans fichier style.css
body {
width: 1000px;
margin-right: auto;
margin-left: auto;
}
.tete {
width: 1000px;
height: 150px;
background: #2AA1DC;
margin-bottom: 10px;
border-radius: 10px 10px 0px 0px;
border: 1px solid #CCCCCC;
}
h1.titre_site{
line-height: 100px;
text-align: center;
color:#FFFFFF; }
#page {
width: 1000px;
height: 400px;
}
#page .contenu{
float: left;
background: #EFEFEF;
width: 660px;
min-height: 400px;
border: 1px solid #2AA1DC;
}
article h2{
margin:10px;
line-height: 60px;
border-bottom:1px solid #2AA1DC;
color:#2AA1DC;}
8
UNIVERSITE DE CARTHAGE DEPARTEMENT
FACULTE DES SCIENCES DE BIZERTE INFORMATIQUE
/*index.html */
article p{
text-align: justify;
margin: 15px;
color:#505756;
}
/*fin index.html */
#page .droit{
float: right;
}
#page .droit .menu{
background: #EFEFEF;
width: 330px;
min-height: 100px;
border: 1px solid #CCCCCC;
}
.menu ul{margin:0px; padding: 0px;}
.side ul{margin:0px; padding: 0px;}
.bloc_menu{
list-style-type: none;
width: 330px;
height:35px;
line-height: 35px;
background:#2AA1DC;
text-align: center;
border-bottom: 1px solid #CCCCCC;
}
.bloc_menu a{text-decoration: none; color: #FFFFFF;}
.bloc_menu:hover{background:#48BAF3;}
#page .droit .side{
margin-top: 20px;
background: #EFEFEF;
width: 330px;
min-height: 100px;
border: 1px solid #CCCCCC;
}
.bloc_lien a{text-decoration: none; color: #FFFFFF;}
.bloc_lien {list-style-type: none;
width: 330px;
height:35px;
line-height: 35px;
background: #2AA1DC;
text-align: center;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
}
.bloc_lien:hover{background:#48BAF3;}
.menu h3{
color:#2AA1DC;
line-height: :30px;
text-align:center;
}
.side h3{
color:#2AA1DC;
line-height: :30px;
text-align:center;
}
.space { clear: both;
margin-bottom: 10px;}
9
UNIVERSITE DE CARTHAGE DEPARTEMENT
FACULTE DES SCIENCES DE BIZERTE INFORMATIQUE
.pied{
width: 1000px;
height: 100px;
background: #2AA1DC;
border-radius: 0px 0px 10px 10px;
border: 1px solid #CCCCCC;
}
h3.copyright{
line-height: 50px;
text-align: center;
color:#FFFFFF;
}
3- Déduisez les classes et les id que vous devez ajouter aux différentes balises du fichier
index.html.
4- Vérifiez à l’aide d’un navigateur web que vous avez le même rendu de la figure1.
5- Copiez le code de la page index.html dans la page connexion.html et apportez les
modifications nécessaires suivant la figure2.
6- Copiez dans le fichier style.css le code css suivant :
/* connexion.html */
.input_co{
width: 250px;
height: 30px;
padding: 5px;
border: 1px solid #CCCCCC;
line-height: 20px;
border-radius: 5px;
}
.submit{
width: 100px;
height: 30px;
background: #2AA1DC;
border: 1px solid #CCCCCC;
color:#FFF;
line-height: 20px;
border-radius: 5px;
}
.submit:hover{background:#48BAF3;cursor: pointer;}
a.mp_oublier{color:#2AA1DC;}
/*fin connexion.html*/
7- Déduisez les classes que vous devez ajouter aux différentes balises du fichier
connexion.html.
8- Copiez le code de la page index.html dans la page faq.html et apportez les
modifications nécessaires suivant la figure4.
9- Copiez dans le fichier style.css le code css suivant :
/*faq.html*/
.cadre_question{
width: 600px;
height:40px;
background-image: url("../images/fond_cadre.jpg");
margin-left: auto;
margin-right: auto;
border-top: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
}
10
UNIVERSITE DE CARTHAGE DEPARTEMENT
FACULTE DES SCIENCES DE BIZERTE INFORMATIQUE
.cadre_question h3{margin-top: 10px; margin-left: 10px;}
.cadre_reponse{
width: 600px;
min-height:40px;
background: #F2F7FB;
margin-left: auto;
margin-right: auto;
border: 1px solid #CCCCCC;
margin-bottom: 10px;
}
/*fin faq.html*/
10- Déduisez les classes que vous devez ajouter aux différentes balises du fichier faq.html.
11- Copiez le code de la page faq.html dans la page inscription.html et apportez les
modifications nécessaires suivant la figure3.
12- Ajoutez une image d’arrière-plan à la partie <header> (utilisez l’image banner.jpg).
Bon travail
11
