TP7 Web2017 - 2018 PDF

Etablissement : ISET-Charguia Département : Technologies de l’Informatique
Matière : Programmation Web1 Année : 1ère année

Année Universitaire : 2017 - 2018
TP n°7 : Structuration d’une page et positionnement avec

CSS
Objectifs du TP :
- Utiliser les balises header, section, footer, nav, article et aside.

- Utiliser les propriétés CSS de positionnement
Exercice 1 :
Ecrire le code html suivant et tester le code avant et après avoir appliqué le style. Commenter
Code HTML Code CSS
<p><span class="gauche">partie à p { text-align: center;}

gauche</span>
.gauche {float: left;}
<span class="droite">partie à
.droite { float: right;}
droite</span> partie au centre</p>
span {background-
color:red;}
Exercice 2 :
1) Ecrire le code html5 nécessaire pour obtenir l’affichage de 3 paragraphes sous forme de
3 colonnes comme suit :
TP 7 : Structuration d’une page et positionnement avec CSS 1

Figure 1: Page Ex2.html
2) Apporter les modifications nécessaires pour que l’affichage de la 1ère colonne ait une
largeur équivalente aux 2 autres colonnes.
Exercice 3 :
On souhaite développer la page suivante :
Figure 2: Page Societe.html
Initialement le code html5 associé est le suivant :
<!DOCTYPE html>
<html>
<head>

<title> Exo 3 </title>
<meta charset="utf-8" />
</head>
<body>
<div> <img src = "Images/logo.jpg" alt="logo" />
<h1> Dev Plus</h1>
<div id="slogan"> Une solution clés en main! </div>
</div>
<div> <h2> Menu </h2>
<ul> <li> <a href="#">Nos activités </a> </li>
<li> <a href="#">Contact </a> </li>
</ul>
</div>
<div> <h2> Présentation de la société </h2>
<p> Société de développement informatique spécialisée en Web </p>
</div>
<div> <h2> Historique </h2>
<p> La société a été fondée en 2013 </p>
</div>
<div>
<p> Copyrignt Dev @2017 </p>
</div>
</body>
</html>
1) Remplacez les divisions (nécessaires) par des balises structurantes html5.

2) Définir le style associé à cette page sachant que :
- Le positionnement utilisé est exclusivement le positionnement flottant
- L’entête a une couleur de fond : RGB(153,255,153);
- L’image a une hauteur et une largeur de 50 pixels
- Le menu a une couleur de fond RGB(241, 250,158), une largeur de 200 pixels
et une hauteur de 230 pixels
- Le menu a une marge intérieure de 10 pixels par rapport au haut
- Le contenu de la page a une couleur de fond de RGB(244, 223,164) et une marge
intérieure de 10 pixels
- Le pied de page est encadré a une bordure verte d’une épaisseur de 1 pixel
- La page doit offrir un rendu tel qu’illustré dans la figure 2.
Exercice 4 :
1) Ecrire les codes Html et CSS suivants :
Code HTML Code CSS
<div id="div1"> Division 1 </div> div {border :1px solid red;
<div id="div2"> Division 2 </div> width:100px;
<div id="div3"> Division 3 </div> height:60px;

<div id="div4"> Division 4 </div> margin-top:5px;
background-color:yellow;}
2) Ajouter les propriétés styles suivantes et commenter à chaque fois
#div1 {position:static;
left:200px;
top:150px;
background-color: red;}
#div2 {position:relative;
left:50px;
top:50px;
background-color: blue;}
3) Modifier le code html comme suit, observer le résultat et commenter

<div id="div1"> Division 1
<div id="div2"> Division 2 </div>
</div>
4) Modifier le code CSS #div1 de sorte à obtenir un positionnement relatif :

#div1 {position:relative;…} Commenter le résultat obtenu
5) Ajouter le style suivant et commenter le résultat obtenu :
#div4 {position:absolute;
left:50px;
top:50px;
background-color:green;}
6) Modifier les codes html et CSS comme suit et commenter

HTML CSS
<div id="div1"> Division 1 </div> div {border :1px solid red;
<div id="div2"> Division 2 </div> width:100px;
height:60px;
<div id="div3"> Division 3 </div> }
top:20px;
left:20px;
background-color: red;}
top:20px;

right:20px;
background-color: blue;}
bottom:20px;
left:20px;
background-color:yellow;}
bottom:20px;
right:20px;
background-color:green;}
Exercice 5 :
L’objectif de cette partie est de créer la page Web « Index.html » dont l’aperçu est présenté
par la figure 1 suivante :
Logo.gif
780px
A 60px
50px
B
25px 30px 25px
25px E
C 25px
280px
D 190px
Cat.gif
30px
25px
F
50px
Figure 3 : La page « Index.html »
En utilisant des styles internes et sans définir des sélecteurs de classe, écrire le code HTML5
de la page web « Index.html » en tenant compte des spécifications fournies dans la figure 1
ainsi que des contraintes supplémentaires suivantes :

 Les images nommées « logo.gif » et « cat.gif » se trouvent dans le même dossier que la
page « Index.html ».
 On utilisera pour les blocs A, B, C, D, E et F les balises structurantes de HTML5.
 Les blocs ont tous une bordure verte de 1 pixel de largeur.
 Dans le Bloc A, on utilisera un positionnement par éléments flottants.
 Les blocs D et E ont une largeur de 280 pixels, une hauteur de 170 pixels et une couleur
de fond verte.
 Les blocs D et E sont contenus dans le bloc C et ils sont flottants.
 « Commander » est un lien hypertexte qui renvoie vers la page « Commande.html »
située dans le même répertoire
 L’image « cat.gif » est un lien hypertexte qui renvoie vers la page « Catalogue.html ».
 L’image « cat.gif » est décalée de 190 pixels par rapport à sa position normale.
Exercice 6: 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>
</ul>
On va limiter la largeur du menu à une valeur donnée (200px), supprimer les marges et padding
par défaut ainsi que la puce des éléments:
CODE CSS Résultat
#navigation {
width: 200px ; list-style: none ;
margin: 0 ; padding: 0 ;
}
Il est nécessaire de supprimer les marges et les padding pour obtenir le même rendu dans tous
les navigateurs.
On va donner une bordure, une couleur de fond et une couleur de texte aux éléments <li>:
CODE CSS Résultat

#navigation li {
background: #c00 ;
color: #fff ;
border: 1px solid #600 ;
margin-bottom: 1px ;
}
#navigation li a {
display: block ;
background: #c00 ; Figure 4: Menu vertical
color: #fff ;
font: 1em "Trebuchet
MS",Arial,sans-serif ;
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 7:
On souhaite développer un menu responsive qui s’affiche, par défaut, horizontalement et
ensuite verticalement dès que la taille de l’écran devient inférieure à 600px conformément aux
figures 5 et 6.
Figure 5: Affichage horizontal du menu

Affichage du menu après
réduction de la taille de
l’écran à 600px
Figure 6: Affichage vertical du menu
La construction du menu va s’effectuer en plusieurs étapes comme suit :

1) Ecrire le code HTML et CSS suivants :
Code HTML Code CSS

<div id="menu"> #menu {
<a class="c1" href="#" > Accueil </a> border:2px solid blue;
<a class="c1" href="#" > Présentation </a> margin:10px; height:60px;
<a class="c1" href="#" > Nos produits </a> display:flex;
<a class="c1" href="#" > Catalogue </a> }
<a class="c1" href="#" > Contact </a> .c1 { background-color: #DEE9EC; width:90px;
</div> text-align:center; padding:5px;}
2) Ajouter au code CSS la propriété flex-direction et tester ses 4 valeurs possibles : row,
row-reverse, column et column-reverse. Conserver la valeur par défaut.
3) Ajouter au code CSS la propriété justify-content et tester ses 5 valeurs possibles: flex-
start, flex-end, center, space-around et space between. Opter pour la valeur qui donne
l’affichage suivant :
4) Ajouter au style la propriété align-items et tester ses différentes valeurs possibles :

stretch, flex-start, flex-end, center et baseline. Opter pour la valeur qui offre l’affichage
tel que demandé dans ma figure 5.
On souhaite maintenant que l’affichage du menu se fasse à la verticale lorsque la taille de
l’écran atteint 600pixels.
5) Ajouter au style le code associé au media query suivant
@media (max-width:600px)
{ #menu { flex-direction:column;
height:100%; width :200px ;}
}
Redimensionner la page pour observer le changement du menu
On souhaite maintenant que, dans le menu vertical, le dernier élément contact s’affiche en
décalage vers la droite
1) Pour cela, ajouter au media query le code CSS suivant et observer le résultat
.c1:nth-child(5)
{
align-self:flex-end;
}
On souhaite que l’élément « Catalogue » soit affiché en dernière position.
2) Ajouter au media query le code CSS suivant et observer le résultat
.c1:nth-child(4)

{
order: 1;
}
Exercice 8:
On souhaite développer la page Voyages.html (figure 7) d’une agence de voyages.
1) Ecrire le codehtml de la page « Voyages.html » en utilisant les balises structurantes de
HTML5
2) Définir le style associé à cette page sachant que :

- Le positionnement utilisé est exclusivement basé sur le modèle flexbox (se
référer à la figure pour identifier les différentes propriétés et valeurs à adopter).
- L’entête de la page a:
 Une couleur de fond : #F8FE77
 Une bordure d’épaisseur 2 pixels arrondie avec un radius de 5 pixels qui est de
couleur #FBDA5F
 Une image de hauteur et de largeur de 80 pixels
 Une zone de navigation vers 4 liens fictifs nommés Accueil, Excursions,
Voyages et Contact
- La zone de navigation a :
 Une couleur de fond : #FBDA5F
 Une marge intérieure et extérieure de 5 pixels
 Une largeur de 30% par rapport à la largeur de la page
- Le contenu de la page a
 une couleur de fond : #E9F13D
 Une hauteur de 80% par rapport à la hauteur de la page
 Des images dont la hauteur et la largeur est de 100 pixels avec une marge
extérieure de 5 pixels
- Le pied de page a :
 Une couleur de fond : #F8FE77
 Une hauteur de 40 pixels

Figure 7: Page "Voyages.html"
Exercice 9 :
On considère la page index.html suivante :

Figure 8: Page Accueil.html
1) Discuter la structuration permettant de donner cet aperçu.

2) Donner le code html5 et css3 permettant de donner cet aperçu
3) Ecrire la feuille de style permettant de définir la mise en forme de la page telle que
décrite

TP7 Web2017 - 2018 PDF

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

TP7 Web2017 - 2018 PDF

Transféré par

Droits d'auteur :

Formats disponibles

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

Matière : Programmation Web1 Année : 1ère année

TP n°7 : Structuration d’une page et positionnement avec

- Utiliser les balises header, section, footer, nav, article et aside.

Code HTML Code CSS

<p><span class="gauche">partie à p { text-align: center;}

TP 7 : Structuration d’une page et positionnement avec CSS 1

Figure 2: Page Societe.html

Initialement le code html5 associé est le suivant :

TP 7 : Structuration d’une page et positionnement avec CSS 2

1) Remplacez les divisions (nécessaires) par des balises structurantes html5.

TP 7 : Structuration d’une page et positionnement avec CSS 3

2) Ajouter les propriétés styles suivantes et commenter à chaque fois

3) Modifier le code html comme suit, observer le résultat et commenter

4) Modifier le code CSS #div1 de sorte à obtenir un positionnement relatif :

5) Ajouter le style suivant et commenter le résultat obtenu :

6) Modifier les codes html et CSS comme suit et commenter

TP 7 : Structuration d’une page et positionnement avec CSS 4

Figure 3 : La page « Index.html »

TP 7 : Structuration d’une page et positionnement avec CSS 5

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

Code HTML Résultat

CODE CSS Résultat

CODE CSS Résultat

TP 7 : Structuration d’une page et positionnement avec CSS 6

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

Figure 5: Affichage horizontal du menu

Figure 6: Affichage vertical du menu

La construction du menu va s’effectuer en plusieurs étapes comme suit :

TP 7 : Structuration d’une page et positionnement avec CSS 7

Code HTML Code CSS

4) Ajouter au style la propriété align-items et tester ses différentes valeurs possibles :

TP 7 : Structuration d’une page et positionnement avec CSS 8

2) Définir le style associé à cette page sachant que :

TP 7 : Structuration d’une page et positionnement avec CSS 9

TP 7 : Structuration d’une page et positionnement avec CSS 10

1) Discuter la structuration permettant de donner cet aperçu.

TP 7 : Structuration d’une page et positionnement avec CSS 11

Vous aimerez peut-être aussi