TP HTML Zoning

RETROUVEZ L’INTÉGRALITÉ DES COURS SUR EPROJET.FR EVOGUE.
FR LIAM TARDIEU
TP : Zoning HTML / CSS
Si l'on souhaite créer un site web, cela commence par apprendre à créer des zones (un zoning).
Avant d'intégrer des images ou encore de saisir du texte, nous avons besoin de définir des emplacements pour un positionnement précis de nos
informations.
Conseil : Pour concevoir des structures de sites web, aidez-vous de l'extension ﬁrebug.
01 Exercice 1
Création de deux nouveaux fichiers : modele1.html & modele1.css
Reproduire cette image :
Correction :
modele1.html
?
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mon Modele</title>
<link rel="stylesheet" href="modele1.css">
</head>
<body>
<div id="conteneur">
<header>
<p> Zone du Haut</p>
</header>
<div class="gauche">
<p> Zone de Gauche</p>
</div>
<div class="milieu">
<p> Zone du Milieu</p>
</div>
<div class="clear"></div> 
</div>
</body>
</html>
modele1.css
?
#conteneur{
background: #336699; width: 800px;
}
header{
background: #ff5555; width: 800px; height: 70px;
}
.gauche{
background: #5585ff; width: 150px; height: 530px; float: left;
}
.milieu{
background: #55D87C; width: 650px; height: 530px; float: left;
}
.clear{
clear: both;
}
02 Exercice 2
Correction :
modele2.html
?
?
<!Doctype html>
<html>
<head>
</head>
<body>
<header>
</header>
</div>
<p> Zone du Milieu</p>
</div>
<div class="droite">
<p> Zone de Droite</p>
</div>
<div class="clear"></div>
</div>
</body>
</html>
modele2.css
?
#conteneur{
background: #336699; width: 800px;
}
header{
background: #ff5555; width: 800px; height: 70px;
}
.gauche{
background: #5585ff; width: 150px; height: 530px; float: left;
}
.milieu{
background: #55D87C; width: 500px; height: 530px; float: left;
}
.droite{
background: #9f6f3f; width: 150px; height: 530px; float: left;
}
.clear{
clear: both;
}
03 Exercice 3
Correction :
modele3.html
?
<!Doctype html>
<html>
<head>
</head>
<body>
<div class="gauche">gauche</div>
<div class="droite">droite</div>
<footer>Bas</footer>
</div>
</body>
</html>
modele3.css
?
#conteneur{ width: 1000px; margin: 0 auto;}
.gauche{ background: #40A497; height: 400px; width: 500px; float: left;}
.droite{ background: #9A40A4; height: 400px; width: 500px;float: left; }
footer{ background: #F0C000; height: 80px; width: 1000px; }
.clear{ clear: both; }
04 Exercice 4
Correction :
modele4.html
?
<!Doctype html>
<html>
<head>
</head>
<body>
<header>Haut</header>
<nav>Menu</nav>
<section>Milieu</section>
</div>
</body>
</html>
modele4.css
?
#conteneur{ width: 1000px; margin: 0 auto; border: 2px solid; }
header{ background: #40A497; height: 80px; }
nav{ background: #9A40A4; height: 30px; }
section{ background: #F0C000; height: 500px; margin: 20px; }
footer{ background: #40A497; height: 60px; }
05 Exercice 5
Correction :
modele5.html
?
<!Doctype html>
<html>
<head>
</head>
<body>
<header>Haut</header>
<nav>Menu</nav>
<section>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
</section>
</div>
</body>
</html>
modele5.css
?
#conteneur{ width: 1000px; margin: 0 auto; border: 2px solid; }
header{ background: #40A497; height: 80px; }
nav{ background: #9A40A4; height: 30px; }
section{ background: #F0C000; height: 500px; margin: 20px; }
.a{ background: #32a7a0; height: 250px; width: 480px;float: left; }
.b{ background: #d69f1b; height: 250px; width: 480px; float: left; }
.c{ background: #b1b2d8; height: 250px; width: 480px; float: left;}
.d{ background: #1217f2; height: 250px; width: 480px;float: left; }
footer{ background: #40A497; height: 60px; }
06 Exercice 6
Correction :
modele6.html
?
<!Doctype html>
<html>
<head>
</head>
<body>
<header>
<p>zone du haut</p>
</header>
<nav>menu</nav>
<section>
<div class="GZ couleur_rouge">
<div class="PZ">PZ1</div>
</div>
<div class="GZ couleur_jaune">
</div>
<div class="GZ couleur_verte">
</div>
<div class="GZ couleur_marron">
</div>
</section>
<footer>
<p>Zone du bas</p>
</footer>
</div>
</body>
</html>
modele6.css
?
#conteneur{ width: 960px; background: pink; color: white; margin: 0 auto; }
header { background: purple; height: 60px; line-height: 60px; text-align: center; }
nav { background: blue; height: 30px; line-height: 30px; text-align: center; }
section{ height: 500px; background: gray; margin: 10px; }
.GZ { border: 1px solid; float: left; height: 248px; width: 468px; }
.PZ { border: 1px solid; float: left; height: 122px; line-height: 122px; text-align: center; width: 232px; }
.couleur_rouge{ background: red; }
.couleur_jaune{ background: orange; }
.couleur_verte{ background: green; }
.couleur_marron{background: brown; }
footer { background: silver;height: 70px;line-height: 70px; text-align: center; }
07 Exercice 7

Correction :
modele7.html
?
<!Doctype html>
<html>
<head>
</head>
<body>
<header>
</header>
</div>
<div class="z_milieu">
Z1
</div>
Z2
</div>
Z3
</div>
Z4
</div>
Z5
</div>
</div>
<div class="droite">
<p> Zone du Droite</p>
</div>
<div class="bas">
<p>Zone du bas</p>
</div>
</div>
</body>
</html>
modele7.css
?
html, body, div, span, applet, object, iframe, h1, h2, h2, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img,
ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot,
thead, tr, th, td,article, aside, canvas, details, embed, figure,figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark,
audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; text-align: center; color: white; }
#conteneur { background: none repeat scroll 0 0 #336699; height: 600px; margin: 0 auto; width: 800px;}
header{ background: #ff5555; width: 800px; height: 70px; line-height: 70px; }
.gauche{ background: #5585ff; width: 150px; height: 530px; float: left; line-height: 530px; }
.droite{ background: #5585ff; width: 150px; height: 530px; float: left; line-height: 530px; }
.milieu { background: #55d87c; float: left; height: 450px; line-height: 530px; width: 500px; }
.z_milieu { border: 1px solid; float: left; height: 448px; width: 98px; }
.bas { background: gold; bottom: 80px; height: 80px; line-height: 80px; left: 150px; position: relative; width: 500px; }
.clear{ clear: both;}
© Copyright Aucune reproduction, même partielle (textes, documents, images, etc.), ne peut être faite sans l'accord de son auteur.
Liam TARDIEU
EVOGUE.fr - EPROJET.fr

TP HTML Zoning

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

TP HTML Zoning

Transféré par

Droits d'auteur :

Formats disponibles

RETROUVEZ L’INTÉGRALITÉ DES COURS SUR EPROJET.FR EVOGUE.

TP : Zoning HTML / CSS

Création de deux nouveaux fichiers : modele1.html & modele1.css

Reproduire cette image :

Création de deux nouveaux fichiers : modele2.html & modele2.css

Reproduire cette image :

Création de deux nouveaux fichiers : modele3.html & modele3.css

Reproduire cette image :

Création de deux nouveaux fichiers : modele4.html & modele4.css

Reproduire cette image :

Création de deux nouveaux fichiers : modele5.html & modele5.css

Reproduire cette image :

Création de deux nouveaux fichiers : modele6.html & modele6.css

Reproduire cette image :

Création de deux nouveaux fichiers : modele7.html & modele7.css

Reproduire cette image :

Vous aimerez peut-être aussi