Vous êtes sur la page 1sur 8

Etablissement 

: ISET-Charguia Département : Technologies de l’Informatique


Matière : Atelier Programmation Web1 classes : TI 101 et 107
Année Universitaire : 2021-2022

TP n°8 : Structuration d’une page HTML5

Objectifs du TP  :

- Utiliser les balises header, section, footer, nav, artice, aside.

Exercice 1 :

Réaliser la page ci-dessous en utilisant les balises de structuration de html5


(header , nav , section, article et footer)

Page à reproduire avec les balises sémantiques


//Source : www.exelib.net

Son code en html5 est le suivant :

1. <! doctype html>


2. <html>
3. <head>
4. <meta charset="utf-8"/>
5. <title>Les balises sémantiques</title>

1
6. </head>
7. <body>
8. <header>
9. <h1>Titre de l'entete de la page</h1>
10. <nav>
11. <ul>
12. <li><a href="#">Accueil</a></li>
13. <li><a href="#">Services</a></li>
14. <li><a href="#">Partenaires</a></li>
15. <li><a href="#">Contact</a></li>
16. </ul>
17. </nav>
18. </header>
19. <section>
20. <header>
21. <h2>Titre de la section</h2>
22. </header>
23. <article>
24. <header>
25. <h4>Titre de l'article 1</h4>
26. </header>
27. <p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod ....</p>
28.  
29. </article>
30. <article>
31. <header>
32. <h4>Titre de l'article 2</h4>
33. </header>
34. <p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod....</p>
35. </article>
36. </section>
37. <footer>
38. <span> © 2015 All Rights Reserved </span>
39. </footer>
40. </body>
41. </html>

2
Exercice 2

1) Page simple qui contient : bandeau, contenu, pied de page.

Nous allons commencer par créer un modèle de page, comprenant un bandeau, une zone de
contenu, et un pied de page :
 Bandeau : couleur du fond : #00CCFF ; dim : 600 x 50 px
 Contenu : couleur du fond : #FFCC00 ; dim : 600 x 400 px
 Pied de page : couleur du fond : #33FF99 ; dim : 600 x 50 px

Ce qui va se traduire dans le fichier CSS par :

#bandeau {
width:600px;
height:50px;
background-color:#00CCFF;
}
#contenu {
width:600px;
height:400px;
background-color:#FFCC00;
}

#piedpage {
width:600px;
height:50px;
background-color:#33FF99;
}

Une fois les propriétés de ces trois éléments sont définies, on va écrire dans HTML le code
suivant (entre <body> et </body>) :

<header id="bandeau">Ceci est le bandeau</header>


<section id="contenu">Ceci est le contenu</section>
<footer id="piedpage">Ceci est le pied de page</footer>

2) Ajout d'une barre de menu à gauche du contenu.

En CSS :
#menu {
float:left;
width:100px;
height:400px;
background-color:#FF6699;
}
En HTML :

<nav id="menu">Ceci est le menu</nav>

3
3) Diviser mon menu en deux blocs égaux (ça revient à diviser  quoi  ?)

CSS :
#menuhaut {
width:100px;
height:200px;
background-color:#66CC33;
}
#menubas {
width:100px;
height:200px;
background-color:#CC99CC;
}
En HTML :

<nav id="menu">
<div id="menuhaut">Menu haut</div>
<div id="menubas">Menu bas</div>
</nav>

4) Ajouter, dans un côté, un bloc de news, en haut à droite du contenu,

#blocnews {
float:right;
width:150px;
height:150px;
background-color:#FF3300;
}

En HTML :
<section id="contenu">
<aside id="blocnews">Bloc News</aside>
Ceci est le contenu de la section
</section>

Exercice 3
Structurer la page en trois colonnes en utilisant float :

<! doctype html>


<html>
<head><title> formulaire </title>
<style>
.column1 { float:left; width: 33%; }
.column2 { float:left; width: 33%; }
.column3 { float:left; width: 34%; }
</style>

4
</head>

<body>
<div class="column1">
<p> Texte 1 Texte 1 Texte 1 Texte 1 Texte 1 Texte 1 Texte 1 Texte 1 Texte 1 Texte 1 Texte 1
Texte 1 Texte 1 Texte 1 Texte 1 Texte 1 Texte 1 Texte 1 Texte 1
Texte 1 Texte 1 Texte 1 Texte 1 Texte 1 Texte 1 Texte 1 Texte 1 Texte 1 </p>
</div>
<div class ="column2">
<p>Texte colonne 2 Texte colonne 2Texte colonne 2 Texte colonne 2 Texte colonne 2 Texte colonne 2
Texte colonne 2 Texte colonne 2 Texte colonne 2 Texte colonne 2 Texte colonne 2 Texte colonne 2
Texte colonne 2 Texte colonne 2 Texte colonne 2 Texte colonne 2 </p>
</div>
<div class ="column3">
<p>Texte 3 Texte 3 Texte 3 Texte 3 Texte 3 Texte 3 Texte 3 Texte 3 Texte 3 Texte 3 Texte 3
Texte 3 Texte 3 Texte 3 Texte 3 Texte 3 Texte 3 Texte 3</p>
</div>
</body>
</html>

Exercice 4
Tapez le Code source suivant et prévoir son résultat
<! doctype html>
<html>
<head><title> Exemple </title>
<style>
header {border : 1px solid black ; background-color: yellow}
nav {border : 1px solid black ;
width : 100px; background-color: red ;
float:left; }

section {margin-left : 100px; border : 1px solid black ; background-


color: green}
footer{float : right; background-color: blue ;}
</style>
</head>
<body>
<header>
Titre du site
</header>
<nav>
Menu
</nav>
<section>
Contenu
</section>
<footer>
Pied de page
</footer>

5
</body>
</html>

Exercice 5: Réalisation d’un menu avec HTML/CSS

Réaliser un menu en utilisant le code HTML

Par exemple, pour un menu comportant 5 items:

Code HTML Résultat

<ul id="navigation">
<li><a href="…" title="aller à la section 1">item1</a></li>
<li><a href="…" title="aller à la section 2">item2</a></li>
<li><a href="…" title="aller à la section 3">item3</a></li>
<li><a href="…" title="aller à la section 4">item4</a></li>
<li><a href="…" title="aller à la section 5">item5</a></li>
</ul>

On va limiter la largeur du menu à une valeur donnée (200px), supprimer les margin et
padding par défaut ainsi que la puce des éléments:

CODE CSS Résultat

#navigation {
width: 200px ;
margin: 0 ;
padding: 0 ;
list-style-type: none
}

On va donner une bordure, une couleur de fond et une couleur de texte aux éléments <li>:

CODE CSS Résultat

6
#navigation li {
background: #c00 ;
color: #fff ;
border: 1px solid #600 ;
margin-bottom: 1px ;
}
#navigation li a {
display: block ;
background: #c00 ;
color: #fff ;
font: 1em "Trebuchet MS" ;
line-height: 1em ;
text-align: center ;
text-decoration: none ;
padding: 4px 0 ;
}

Il ne reste plus qu'à faire en sorte que les liens réagissent au passage de la souris ou lorsqu'ils
reçoivent le focus (pour ceux qui naviguent au clavier):

#navigation li a:hover, #navigation li a:focus, #navigation li


a:active
{ background: #900 ;
text-decoration: underline ;
}

Exercice 6
On considère la page index.html suivante :

7
1) Donnez la structuration html5 de la page, ci-dessus.
2) Donner le code html  permettant de donner cet aperçu
3) Ecrire, éventuellement, la feuille de style permettant de définir la mise en forme de
la page telle que décrite

Vous aimerez peut-être aussi