2.7.1. But

Les blocs servent à grouper des éléments html (Texte, tableaux, listes, images etc..) et à les faire apparaître sur l'écran en une position et un temps bien déterminé.

2.7.2. Définition d'un bloc


La balise <div> définit un bloc:

.......
<div>Ceci est le contenu d'un bloc!</div>
.......

2.7.2. Positionnement d'un bloc


L'attribut style (CSS) permet de fixer la taille du bloc et le positionnement sur l'écran :

Positionnement absolu

Attribut Propriété Valeur Explication
style position absolute Position absolue sur l'écran indiquée à partir du coin supérieur gauche
style top taille (voir →Tailles et unités) Coin supérieur gauche du bloc à distance taille du bord supérieur de l'écran
style left taille (voir →Tailles et unités) Coin supérieur gauche du bloc à distance taille du bord gauche de l'écran
style width taille (voir →Tailles et unités) Largeur du bloc
style height taille (voir →Tailles et unités) Hauteur du bloc

Essayez:

.......
<div style="position:absolute;top:300px;left:250px;width:300px;height:300px"> Ceci est le contenu d'un bloc de 300x300 pixels dont le coin supérieur est à 300 pixels du bord supérieur et 250 pixels du bord gauche!</div>
.......

Positionnement relatif

Attribut Propriété Valeur Explication
style position relative Position relative sur l'écran indiquée à partir de la position courante
style top taille (voir →Tailles et unités) Coin supérieur gauche du bloc à distance verticale taille en bas de la position courante
style left taille (voir →Tailles et unités) Coin supérieur gauche du bloc à distance horizontale taille à gauche de la position courante
style width taille (voir →Tailles et unités) Largeur du bloc
style height taille (voir →Tailles et unités) Hauteur du bloc

Essayez:

........
<br />Texte courant
<div style="position:relative;top:-30px;left:20px;width:300px;height:300px"> Ceci est le contenu d'un bloc de 300x300 pixels dont le coin supérieur est à 30 pixels plus haut que le bord supérieur et 20 pixels à gauche de la position courante = fin du Texte courant après un retour à la ligne!</div>
.......

Le positionnement décrit ci-dessus peut d'ailleurs s'appliquer aussi à d'autres balises telles que<h1>, <span>, <p>, etc..


2.7.3 Exercice

Vous trouvez →ici une image de tous les profs du Lycée Hubert-Clément de l'annéee 2009-2010.
Enregistrez cette image (touche droite de la souris, enregistrer ..), chargez-la dans Photoshop (commercial) ou →Gimp (gratuit) ou →Paint.net (gratuit) ou →Pixia (gratuit) ou online dans →Pixenate, sélectionnez les têtes de vos profs et enregistrez-les séparément dans le format .jpg
Construisez ensuite une page appelée mesprofs.html où vous introduirez les têtes des profs dans des blocs <div> placés décorativement sur toute la page.
Donnez du style à cette page (stylesheet qui définit arrière-fonds, titre et écriture ) et essayez de placer les noms des profs dans des <span> en-dessous de leurs têtes.
Faites ensuite référence à cette page sur votre page index.html