Formation HTML les divisions de la page

Formation HTML les divisions de la page, tutoriel & guide de travaux pratiques en pdf.

L’élément DIV

L’élément DIV permet de spécifier l’aspect fonctionnel d’un paragraphe (une barre de navigation par exemple), et de regrouper plusieurs paragraphes ensemble. Nous l’utiliserons surtout en relation avec des feuilles de style.
Comme l’élément <p>, l’élément <div> peut être directement inclut dans le corps du document <body>. Il crée une division de la page. Ce type de division permet de grouper dans un seul bloc un ensemble composé soit de texte soit d’éléments inclus, auxquels on pourra appliquer globalement des styles particuliers. À la différence des paragraphes, une division créée avec <div> permet d’inclure une très grande variété d’éléments XHTML, comme du texte brut, les éléments en ligne et la totalité des éléments de niveaux bloc comme l’autorise <body>, mais également les titres, les listes et les formulaires, ce qui est interdit dans un paragraphe. Les tableaux 3-5 et 3-6 donnent respectivement la liste de tous les éléments enfants et parents de l’élément <div>. C’est donc un élément très riche qui se prête bien à la création de la structure d’une page en grands blocs distincts auxquels il est possible d’appliquer par la suite des styles propres et des positions précises (voir le chapitre 13, Créer une mise en page : le dimensionnement et le positionnement).

Tableau 3-5. Liste des éléments enfants de l’élément <div>

Texte, a, abbr, acronym, address, b, bdo, big, blockquote, br, button, cite, code, del, dfn, div, dl, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, i, img, input, ins, kbd, label, map, object, ol, p, pre, q, table, samp, script, select, small, span, strong, sub, sup, textarea, tt, ul, var

Tableau 3-6. Liste des éléments parents de l’élément <div>

blockquote, body, dd, del, div, fieldset, form, ins, li, map, noscript, object, td, th

L’élément <div> admet l’ensemble des attributs communs dont id, class, title, dir, xml:lang, qui sont les plus utilisés. Une des applications les plus courantes des divisions <div> consiste à créer des calques auxquels on applique des styles de positionnement permettant de remplacer avantageusement les cadres. Il nous sera, par exemple, possible de diviser la page web en zones bien définies ayant chacune un rôle précis. Comme nous le verrons dans la deuxième partie de cet ouvrage, l’application de styles à des divisions permettra de créer facilement un en-tête, une zone de menu, une zone de contenu et un pied de page distincts qu’il sera possible de répéter dans chaque page (voir le chapitre 13).
Il nous sera également possible à l’aide de scripts simples de créer des effets graphiques sur des divisions en les faisant apparaître ou disparaître en fonction des actions du visiteur.
Notons aussi que, contrairement aux paragraphes <p>, la fin d’une division n’entraîne pas un saut de ligne par défaut, mais seulement un retour à la ligne. Les contenus des différentes divisions peuvent donc se succéder sans rupture. L’exemple 3-3 reprend le même contenu que l’exemple 3-2 en remplaçant les éléments <p> par des divisions
<div> (repères _, _ et _). On notera la différence d’affichage obtenue entre la figure 3-3 (paragraphes <p>) et la figure 3-4 (blocs <div>). Nous ne retrouvons plus entre deux blocs <div> le saut de ligne qui existe entre deux paragraphes. Dans cet exemple, la réalisation d’une séparation du texte entre les deux premiers blocs <div> ne se justifie que si l’on veut leur appliquer des styles différents par la suite.