B. Les divs
a) Description
La balise HTML div permet de séparer un document en sections logiques.
C'est un conteneur, c'est à dire un élément qui peut en contenir d'autres. La balise body est également un conteneur puisqu'elle peut contenir d'autres éléments comme des paragraphes, des titres... ou des div.
Vous allez apprendre à utiliser cet élément, en conjonction avec les feuilles de style.
b) Bases
Copiez le fichier base.html dans un répertoire TP8 que vous créerez. Ouvrez-le avec un éditeur de texte (gedit par exemple) et avec votre navigateur pour le visualiser.
Quatre sections DIV ont été faites dans le fichier, chacune contenant le même texte. Dans la fenêtre d'affichage du navigateur, les quatre paragraphes (identiques) apparaissent juxtaposés, sans distinction: les DIV n'ont pour l'instant, aucun aspect particulier.
Pour "styler" les DIV, vous allez utiliser une feuille de style dont vous connaissez à présent le maniement. Pour cela, liez le fichier base.html à une nouvelle feuille de style base.css que vous créerez.
B1 Pour visualiser les quatre DIV, identifiez chacune d'entre elle par un nom de classe particulier (un, deux, tros et quatre respectivement) puis, dans la feuille de style, donnez leur une couleur particulière. Vous donnerez également la couleur ``dimgray" au corps de la page html (grâce à la feuille de style).
B2 Quelle est la taille (largeur, hauteur) par défaut d'un DIV?
B3 Comment les DIVs évoluent-ils quand on module la taille de la fenêtre du navigateur?
B4 En utilisant des valeurs négatives pour les marges à droite et à gauche sur une des quatre DIVs, trouvez la largeur par défaut (à gauche et à droite) de la marge en pixels.
B5 Par défaut, le contenu du DIV est collé à ses bords: la propriété padding permet d'espacer le contenu avec les bordures d'un DIV, mais aussi d'autres conteneurs (comme body). Faîtes apparaître un écart du contenu avec les bords de DIVs de 5 pixels à gauche et à droite et de 3 pixels en haut et en bas.
B6 Autour de la troisième DIV (celle identifiée par class=trois), créez une bordure solide, noire, de largeur 2px. Que constatez-vous?
B7 Dans chaque DIV, mettez le texte entre les balises <p> et </p> : quel est l'effet produit lorsque vous visualisez la page Web? Conclusions?