TP2 Intégration Web Avancée Lam2 2022 - 2023

Niveau : LAM2
TP2 : Display et mise-en-page

MODULE : Module intégration Web Avancée
Enseignantes : Samira Ellouze
Exercice 1 :
Soit la structure suivante d’une page web nommé index.html :
<!DOCTYPE html>
<html>
<head>
<title>Acceuil</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<main>
<article>
<section >
<H1 class="impair">Titre section1</H1>
<div> un div dans la première section</div>
<p>Un paragraphe est un élément de type block contenant du texte</p>
</section>
<section>
<H1 class="pair">Titre section2 </H1>
<div> un div dans la deuxième section</div>
<p class="skill">Un paragraphe est un élément de type block contenant du texte</p>
</section>
<section>
<H1 class="impair"> Titre section3 </H1>
</section>
<section>
<H1 class="pair"> Titre section4 </H1>
<table>
<thead>
<tr>
<th>Titre1</th>
<th>Titre2</th>
<th>Titre3</th>
</tr>
</thead>
<tbody>
<tr class="skill">
<td>ligne1 colonne1</td>
</tr>
<tr>
1
</tr>
</tbody>
</table>
</section>
<section>
</section>
<section>
</section>
</article>
<aside>
<h3>Mes liens préférés</h3>
<ul>
<li><a href="http://www.univgb.rnu.tn/">Université de Gabes</a></li>
<li><a href="http://www.isimg.rnu.tn/">L'ISIMG</a></li>
<li><a href="https://www.w3schools.com/">w3schools</a></li>
</ul>
<h3>Derniers articles lus</h3>
<ul>
<li><a href="https://docteurhtml5.com/html5/element-footer/">L’élément
footer</a></li>
<li><a href="https://docteurhtml5.com/html5/balise-header/">La balise
header</a></li>
<li><a href="https://docteurhtml5.com/html5/comprendre-la-balise-
aside/">Comprendre la balise aside</a></li>
</ul>
</aside>
</main>
<footer>
</footer>
</body>
</html>
Pour fixer les idées, voici un aperçu d’une mise en page correspondante à l’exemple précédent :
Dans cet exercice, nous allons créer deux pages web index.html (comme il est indiqué
précédemment) et la page contact.html, ainsi que la feuille de style style.css
2
1. Construire une page contact.html au même niveau que index.html. Elle doit contenir le
même template HTML (patron HTML) que index.html. En particulier:
a. elle reprend les mêmes <header> et <footer> que index.html,
b. elle appelle la même feuille de style CSS,
c. elle définit son propre <title>.
d. Dans la partie <main> de la page contact, ajoutez
1. un titre de niveau 1 Adresse
2. l’image contact.jpg.
3. Ajoutez l’adresse avec la balise <address> contenant :
Institut Supérieur d’informatique et de multimédia

Campus universitaire – BP 122, 6033 cité El Amal
Gabes, Tunisie
Email : isimg@isimg.rnu.tn
2. Nous allons changer le fond de notre page en lui donnant au <body> la couleur : #838292.
3. Limitez la largeur de l’élément <body> à 900px.
4. Centrer le body des deux pages web horizontalement,
5. Les titres des sections doivent avoir leur texte centré.
6. Il faut alterner comme couleurs de fonds pour les titres <h1> des sections les
valeurs #5BBDBF et #FF5850. Pour cela il nous faudra rajouter une classe “pair” et
“impair” aux éléments
7. Ajoutez une marge interne (rembourrage) verticale de 15px et horizontale de 10px aux
titres de sections,
8. Ajoutez une bordure aux titres <h1> :
a. de 5px à gauche et à droite et de 1px de haut et de bas,
b. de style solid des deux côtés et pointillé du haut et du bas
c. et de couleur #CCCCCC.
9. Le texte doit être aéré : utiliser une hauteur de ligne de 150%.
10. Chaque paragraphe doit être indenté de 5px.
11. Ajoutez une marge externe verticale de 30px et horizontal de 10px aux paragraphes,
12. Ajoutez les balises </thead> et </tbody> pour englober ces deux parties du tableau.
13. Dans le tableau, centrer le texte des cellules dans thead.
14. Définissez une couleur de fond #00AAFF pour les cellules d’en-tête thead du tableau.
15. Ajoutez une règle pour que le fond d’une ligne (row) paire apparaisse en blanc et d’une
ligne impaire apparaisse en gris claire SANS modifier le code HTML
16. Centrer le tableau horizontalement.
17. Ajoutez une marge interne (rembourrage) verticale de 15px et horizontale de 10px aux
différentes cellules du tableau (de thead et de tbody).
18. Donnez la couleur violette #640051 et le style italique au texte des lignes ayant la classe
skills dans le tableau sans modifier le style des éléments ayant la classe skill dans les
paragraphes
19. Réalisez le menu de la page web précédente comme suivant
<header>
<H1>Mon Site</H1>
<nav>
<div><a href="./index.html">Accueil</a></div>
<div><a href="./Education.html">Education</a></div>
<div><a href="./news.html">Actualités</a></div>
<div><a href="./contact.html">Contact</a></div>
</nav>
</header>
20. Enlevez le fait que (tous) les liens de la barre de navigation soient non soulignés.
3
21. Mettez en forme les liens de la barre de navigation pour qu’ils aient :
a. une écriture de taille 18px, de couleur #E55048, gras et centrée,
b. un display « inline-block »,
c. une bordure de droite seulement, solide, de largueur 2px et de couleur
#E55048.
d. une largeur de 70px.
e. une marge interne verticale 5px et une marge interne horizontale 15px.
f. Une marge externe verticale 10px et une marge interne horizontale 0px.
22. Enlevez la bordure droite du lien se trouvant dans la dernière div de la barre de navigation.
23. Faites en sorte que les liens <a> visités de la barre de navigation apparaissent en
couleur #e57771 avec le changement de la couleur de la bordure (de haut et de bas) à la
même couleur que l’écriture.
24. Lorsque la souris passe sur un lien, elle lui donner la couleur de fond #B99E9E.
25. Puisque <nav> est display:block par défaut (le vérifier sur Chrome si possible), il doit
prendre toute la largeur. Inspectez donc votre <nav> pour voir si c’est le cas. Que
constatez-vous ?
Explication : En fait, un élément display:block ne prend pas toute la largeur

de <body> mais de son plus proche block parent. Ici, le père de <nav> est le
bloc <header> et donc <nav> prend toute la largeur de <header>.
Le plus proche block parent s’appelle le containing block.
26. Donnez à la barre de navigation qui existe dans l’élément header la largeur 70%, une
marge de droite de 0px et un alignement à droite du texte qu’elle contient.
27. Donnez aux éléments div ayant comme parent l’élément nav, le display inline
28. Ajoutez ce code au début de l’élément header :
<H1>Mon Site</H1>
29. Donnez à l’élément header une marge verticale de 10px et une marge horizontale de 0px,
un couleur de fond #CCC.
30. Donnez à l’élément header la valeur flex de la propriété display pour que ses
enfants <H1> et <nav> s’affichent comme deux colonnes l’une à côté de l’autre.
31. Donnez à l’élément H1 enfant de l’élément header, un largueur de 30%, une marge externe
verticale de 10px et une marge externe horizontale de 15px.
32. Modifiez la couleur de l’élément H1 enfant de l’élément header à la couleur #e55048
33. Donnez à l’élément main la valeur flex de la propriété display pour que ses
enfants <article> et <aside> s’affichent comme deux colonnes l’une à côté de l’autre.
34. Fixez la largeur de <article> à 60%, et celle de <aside> à 35%. Ce dernier élément aura
une marge gauche de 5%.
35. Donnez à l’élément aside et à l’élément <article> la couleur de fond #CCC.
36. Le contenu de la balise <aside> doit être indenté de 15px.
37. Donnez à l’élément h3 enfant de l’élément aside une marge externe verticale de 20px et
horizontale de 10px.
38. Elevez les puces pour la liste non numéroté enfant de l’élément aside
4
39. Le texte à l’intérieur de la liste non numéroté doit être aéré : utiliser une hauteur de ligne
de 200%.
40. Donnez à l’élément ul enfant de l’élément aside une marge externe verticale de 0px,
horizontale de 10px, une marge interne de 0px.
41. Mettez en forme l’élément ul enfant de l’élément aside pour qu’ils aient une écriture de
type Helvetica.
42. Ajoutez une bordure de bas aux éléments li à l’intérieur de l’élément aside, cette bordure
est de largeur 1px, de style solide et de couleur #838292.
43. Ajouter le code html suivant à l’élément footer de la page index.html et contact.html
<p>© 2023 MonSite.tn</p>

<div >
<a href="#" ">Facebook</a>
<a href="#" >Twitter</a>
<a href="#" >LinkedIn</a>
</div>
44. Donnez à l’élément footer la couleur de fond #CCC.

45. Fixez le pieds de la page en bas et donnez-lui la largeur 860px, une marge interne de
20px.
46. Les liens enfants de l’élément footer ont une marge externe droite 10px, une couleur
d’écriture #333 et ils ne doivent pas être soulignés.
47. Changer la couleur des liens enfants de l’élément footer lors du survole de la souris.
Exercice 2 : (la priorité des sélecteurs)
Écrivez les priorités des sélecteurs suivants et classez-les du plus prioritaire au moins prioritaire.
On suppose que toutes ces règles sont définies dans un fichier externe, donc b=1, et les valeurs
recherchées commencent toujours par (1,...).
1. .section1 span
2. div span
3. nav.article1 .section1 div div div div div
4. ul li div.skill
5. #id
6. div > a
7. div + a
8. #conteneur p#special

TP2 Intégration Web Avancée Lam2 2022 - 2023

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

TP2 Intégration Web Avancée Lam2 2022 - 2023

Transféré par

Droits d'auteur :

Formats disponibles

Niveau : LAM2

TP2 : Display et mise-en-page

Enseignantes : Samira Ellouze

Institut Supérieur d’informatique et de multimédia

Explication : En fait, un élément display:block ne prend pas toute la largeur

<p>© 2023 MonSite.tn</p>

44. Donnez à l’élément footer la couleur de fond #CCC.

Exercice 2 : (la priorité des sélecteurs)

Vous aimerez peut-être aussi