Enseignement Suprieur et Recherche Scientifique en Tunisie

Universit de gabes
Institut suprieur d'informatique de Medenine

AU. 2014/2015

Conception et administration site web

LA3 TMI
Srie d'exercices

Exercice 1 [Intgration du CSS dans une page HTML]

Soit la page web suivante la plus simple possible (simple.htm) :
< html >
< head >
< title > Simple </ title >
</ head >
< body >
< H1 > Page simple < H1 >
</ body >
</ html >

1. Ajoutez lintrieur de la balise body bgcolor= "gray" . Et dans la balise H1 text="green"

2. Ceci est une premire mthode pour modifier le style au sein des pages web, la deuxime mthode est de faire
appel au feuilles de style. Revenez la page simple.htm du dbut et insrez les lignes qui permettront davoir
le mme rsultat avec une feuille de style CSS. Crez pour cela un fichier qui sappelle : monstyle.css

Solution:

Exercice 2 [Background]
1. Maintenant que nous avons manipul la couleur de fond ainsi que le titre de niveau 1, nous allons afficher une
image en image de fond de la page. On utilisera toujours les feuilles de style. Limage ajouter se trouve lurl
suivant : http ://www.babeejardin.com/upload/rub/gazon.jpg
2. Faire en sorte que limage ne se rpte pas.
Solution:

Page1

Exercice 3 [Polices]
Comme vous le savez font est le mot qui signifie police en anglais. Cest avec ce mot cl quon modifie les proprits
des polices en CSS. Toutefois, il existe une exception puisque la couleur nest pas modifie avec le mot cl font.
1. Rajoutez un titre de niveau 2 (balise H2) qui sera : " moins simple "
2. Faites en sorte davoir une police pour ce titre qui sera du arial sans serif de taille 14.
3. De la mme manire faites en sorte que le titre de niveau 1 soit du Times new Roman serif de taille 18 et en gras
et de couleur noire.
Solution:

4. Que se passe-t-il si vous ajouter un deuxime titre de niveau 2 " de moins en moins " ?.
Solution:

Exercice 4 [Classes et id]

Nous avons vu que nous pouvons attribuer plusieurs balises les mmes formats. Toutefois, au niveau smantique
des balises de mme niveau peuvent avoir des rles diffrents. Les classes servent tenir compte de cette diffrence.
Prenons lexemple suivant :
1. Ajouter le code suivant dans votre page.
<p > PSG : </ p >
< ul >
< li > <a href = " toto1 . htm " > Ibrahimovic </ a > </ li >
< li > <a href = " toto2 . htm " > Menez </ a > </ li >
< li > <a href = " toto3 . htm " > Beckham </ a > </ li >
</ ul >
<p > Barcelona : </ p >
< ul >
< li > <a href = " titi1 . htm " > Messi </ a > </ li >
< li > <a href = " titi2 . htm " > Iniesta </ a > </ li >
< li > <a href = " titi3 . htm " > Villa </ a > </ li >
</ ul >
<p > Et l arbitre est : <a href = " tutu . htm " > Wolfgang Stark </ a > </ p >

Page 2

2. Modifier le code de telle manire que le lien vers les pages des joueurs du PSG soit crit en noir et en gras et
que les liens des joueurs du Barca soient crit en rouge et en gras.
3. Que se passe-t-il pour le lien de la page de larbitre ? Nous avons vu quune classe permet de gnraliser
une proprit avec diffrent lments qui partagent leur appartenance cette classe. LID pour sa part est un
identifiant unique dans la page.
4. Faites les changements requis au niveau html et CSS pour que le meilleur joueur de chaque groupe soit crit en
italique, sachant que les meilleurs sont Ibrahimovic et Messi. 3
Solution:

Exercice 5 [Pseudo-Classes]
1. Dans une pseudo-classes contrairement une classe la notion dvnement est prise en compte. Vous allez
crire un lien (balise <a>) vers la page http ://news.google.fr/ aprs le titre de niveau 2, ceci peut servir pour
avoir des informations sur un vnement sportif...
2. Ce lien devra devenir vert et crit en gras lors du survol. La pseudo classe du survol est hover. Mais bien sr il
en existe dautres qui dfinissent si la page du lien a t visit ou non, ou si lutilisateur est en train de cliquer
sur le lien.

3. font-style : italic pour mettre en italique.

Page3

Solution:

Exercice 6 [Span et Div]

Span sutilise pour encadrer un mot ou un groupe de mot. De son ct Div sert encadrer un groupe dlment
html. La grosse diffrence entre les deux est que span ne modifie pas laffichage au sein dun texte. Ces lments
structurant ont t cr principalement afin de normaliser le formatage.
Dans le pass, les tableaux taient utiliss pour organiser le visuel dune page html. Or, les tableaux ont une fonction
bien dfini au niveau smantique et naurait pas d tre utilis de la sorte. Ceci est en grande partie la raison dexister
des balises div et span.
Une des particularits de div est le fait de pouvoir avoir une action sur les lments html quel englobe.
Soit le code html suivant :
< div ????= " stylized " ????= " myform " >
< form id = " form " name = " form " method = " post " action = " toto . html " >
< h1 > Formulaire d achat </ h1 >
<p > Vous pouvez acheter un billet pour le Parc des Princes </ p >
< label > Nom
< span ????= " small " > Ecrivez votre nom </ span >
</ label >
< input type = " text " name = " name " id = " name " / >
< label > Email
< span ????= " small " > Votre addresse </ span >
</ label >
< input type = " text " name = " email " id = " email " / >
< label > Mot de passe
< span ????= " small " > Minimum 6 caractres </ span >
</ label >
< input type = " text " name = " password " id = " password " / >
< button type = " submit " > Paiement </ button >
< div ????= " spacer " > </ div >
</ form >
</ div >

Et le code CSS suivant :

p , h1 , form , button { border :0; margin :0; padding :0;}
. spacer { clear : both ; height :1 px ;}
/* - - - - - - --- -- My Form -- --- -- --- - */
. myform {
margin :0 auto ;
width :400 px ;
padding :14 px ;
}
/* - - - - - - --- -- stylized -- -- --- --- - */
# stylized {
border : solid 2 px # b7ddf2 ;
background :# ebf4fb ;
}
# stylized h1 {

Page 4

font - size :14 px ;

font - weight : bold ;
margin - bottom :8 px ;
}
# stylized p {
font - size :11 px ;
color :#666666;
margin - bottom :20 px ;
border - bottom : solid 1 px # b7ddf2 ;
padding - bottom :10 px ;
}
# stylized label {
display : block ;
font - weight : bold ;
text - align : right ;
width :140 px ;
float : left ;
}
# stylized . small {
color :#666666;
display : block ;
font - size :11 px ;
font - weight : normal ;
text - align : right ;
width :140 px ;
}
# stylized input {
float : left ;
font - size :12 px ;
padding :4 px 2 px ;
border : solid 1 px # aacfe4 ;
width :200 px ;
margin :2 px 0 20 px 10 px ;
}
# stylized button {
clear : both ;
margin - left :150 px ;
width :105 px ;
height :51 px ;
background :# FFFFFF ;
text - align : center ;
line - height :31 px ;
color : red ;
font - size :18 px ;
font - weight : bold ;
}

1. Remplacer ? ? ? ? par un code html valide de telle manire que le code CSS sapplique correctement.

Page 5

Solution:

2. Modifier le code CSS de manire ce que le bouton affiche la photo qui est cette adresse :
http ://img10.xooimage.com/files/8/6/4/ballon-23e20e.jpg et que la couleur de police et la couleur de fond
change lorsque lon passe la souris sur le bouton.
Solution:

Page6

Solution:
Ct HTML
<a href = " http :// news . google . fr / " > News Google </ a >

Ct CSS
a : hover {
font - weight : bold ;
color : green ;
}

Exercice 7
Usuellement, une page web est structure en 5 zones au plus.
Plusieurs techniques CSS peuvent tre mise en oeuvre pour obtenir ces zones.

Solution:

Page 4sur 6