Universit de gabes
Institut suprieur d'informatique de Medenine
AU. 2014/2015
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:
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.
Page3
Solution:
Page 4
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