SNT – ELLA
LEWEB : HTMLETCSS
S ÉANCE 4 - D ÉCORER ET POSITIONNER DES BLOCS GRACE AU LANGAGE CSS
TPNOTÉ SUR10
P
ARTIE1
: MODIFICATION DE LA TAILLE ET DE LA POSITION DES BLOCS D’UNE PAGE WEB1. E
XERCICE DE DÉCOUVERTE DES PROPRIÉTÉS WIDTH ET HEIGHTE
Le but de cet exercice est d’apprendre à modifier la taille d’un bloc
1. Lancer le logicielnotepad++et créer les fichiersS4_tailleblocs.htmlets4_deco.css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Taille des blocs </title>
<link href="s4_deco.css" rel="stylesheet"/>
</head>
<body>
<h1>3 blocs différents</h1>
<div class="bloc1">
Bienvenue au bloc 1 <br />
</div>
<div class="bloc2">
Bienvenue au bloc 2 <br />
</div>
<div class="bloc3">
Bienvenue au bloc 3 <br />
</div>
</body>
</html>
/* fichier S4_deco.css */
.bloc1, .bloc2, .bloc3 {
/* propriété communes aux trois blocs */
margin : 10px 20px 10px 20px;
border : 4px solid #000000;
padding : 20px 10px 20px 10px;
}
.bloc1 { /* autres propriétés de bloc1 */
background : #FFFFDD ;
}
.bloc2 { /* autres propriétés de bloc2 */
background : #FFDDFF ;
}
.bloc3 { /* autres propriétés de bloc3 */
background : #DDFFFF ;
}
2. Modification de la largeur et de la hauteur des trois blocs.
La propriétéwidthpermet de définir la largeur d’un bloc.
La propriétéheightpermet de définir la hauteur d’un bloc.
a) Compléter la classe.bloc1afin de définir sa largeur et sa hauteur :
.bloc1 { /* autres propriétés de bloc1 */
background : #FFFFDD ;
width : 200px; /* largeur du bloc (sans tenir compte des marges) */
height : 50px; /* hauteur du bloc (sans tenir compte des marges) */
}
b) Compléter de même les classes.bloc2et.bloc3afin d’obtenir un rendu ressemblant à celui-ci :
DEPÔT 1
S4_tailleblocs.html et s4_deco.css sur votre zone dehttp://entraide-ella.fr© S. COLOMBAN - Lycée Ella Fitzgerald – Année 2020/2021 1/3
2. E
XERCICE DE DÉCOUVERTE DE LA PROPRIÉTÉ DISPLAYE
Le but de cet exercice est d’apprendre à positionner les blocs côtes à côtes
1. Définir la largeur (hors marges) de chacun des trois blocs précédents à 250px.
2. Définir la hauteur (hors marges) de chacun des trois blocs précédents à 300px.
3. Positionnnement des blocs
La propriétédisplaypermet de définir le positionnement d’un bloc de trois manières différentes.
display : inline ; dans le flux du texte (le bloc se comporte comme un<span>) display : block ; en dessous dans la ligne (le bloc se comporte comme<div>) display : inline-block ; à côté du bloc précédent ←intéressant pour nous
a) Compléter la classe.bloc1afin de définir son positionnement :
.bloc1 {
background : #FFFFDD ;
width : 250px;
height : 300px;
display : inline-block;
}
b) Compléter de même les classes.bloc2et.bloc3.
P
ARTIE2
: RÉSUMÉ DES PRINCIPALES PROPRIÉTÉS DES CLASSESCSSVUES JUSQU’ICI1. T
ABLEAU DE RÉFÉRENCE À CONSERVER!
.unebalise {
width : 300px ; largeur en pixels height : 400px ; hauteur en pixels
display : inline-block ; positionnement du bloc (inlineoublockouinline-block) background : #FF0000 ; couleur d’arrière plan (ici rouge)
color : #0000FF ; couleur de la police de caractère (ici bleue) margin : 10px 20px 30px 10px ; marges extérieures dans l’ordre h-g-b-d
border : solid 3px #0000FF ; bordure solide, bleue de 3px :solidoudottedoudashed padding : 10px 20px 30px 10px ; marges intérieures dans l’ordre h-g-b-d
text-align : center ; alignement du texte :leftoucenterouright font-size : 20px ; taille en pixels de la police de caractères font-weight : 700 ; graisse de la police de caractères
(100=léger←→900=gras)
font-style : italic ; style de la police :italicounormalouoblique }
2. R
EMARQUER
En général on ne définit pas la hauteur (propriétéheight) afin que la hauteur du bloc s’adapte automatiquement à son contenu.
© S. COLOMBAN - Lycée Ella Fitzgerald – Année 2020/2021 2/3
P
ARTIE3
: TACHE FINALE CRÉATION D’UNE PAGE WEB– CAHIER DES CHARGES NOTÉ SUR 10 – L’histoire du WEB.
Après avoir fait quelques recherches, créer une page web (histoireweb.html décorée par histoireweb.css) regroupant les 4 personnages du WEB qui vous paraissent les plus importants.
Cette pagedevracontenir :
• Le très gros titre, rouge et centré
/1
• Votre nom aligné à droite
/0,5
• 4 cadres correctement mis en page
/2
• 4 photos
/1,5
• deux listes non numérotées
/1
• deux listes numérotées
/1
• un contenu riche et exempt de fautes d’orthographes
/3
– Suggestion de présentation –
DEPÔT 2
histoireweb.html et histoireweb.css sur votre zone dehttp://entraide-ella.frDEPÔT 3
les 4 photos des personnages sur votre zone dehttp://entraide-ella.fr© S. COLOMBAN - Lycée Ella Fitzgerald – Année 2020/2021 3/3
