Les divisions de la page : l’élément
L'élémentDIV
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
, l’élément
peut être directement inclut dans le corps du document . 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 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 , 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. 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
| 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
| blockquote, body, dd, del, div, fieldset, form, ins, li, map, noscript, object, td, th |
L’élément
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 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
, 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
par des divisions
(repères _, _ et _). On notera la différence d’affichage obtenue entre la figure 3-3 (paragraphes) et la figure 3-4 (blocs
). Nous ne retrouvons plus entreadeux blocs le saut de ligne qui existe entre deux paragraphes. Dans cet exemple, laaréalisation d’une séparation du texte entre les deux premiers blocs ne se justifie queasi l’on veut leur appliquer des styles différents par la suite.Exemple 3-3. Les divisions en blocs
? et vacua et tenebrae super faciem abyssi et spiritus Dei ferebatur super
? aquas dixitque Deus fiat lux et facta est lux et vidit Deus lucem …
_
Et vocavit Deus aridam terram congregationesque aquarum appellavit maria? et vidit Deus quod esset bonum et ait germinet terra herbam virentem et
? facientem semen et lignum pomiferum faciens fructum iuxta …
_
? et tenebrae super faciem abyssi et spiritus Dei ferebatur super aquas …
_
Les divisions en ligne
L’équivalent en ligne de l’élément de bloc
peut être réalisé à l’aide de l’élément . C’est le plus employé des éléments créant des divisions sémantiques en ligne. Il n’a pas de rôle prédéfini et peut remplacer nombre des éléments précédents de cette section à condition de lui attribuer un style particulier adapté à chaque besoin de présentation.Il possède l’ensemble des attributs communs et c’est son attribut class qui sera systématiquement utilisé pour lui attribuer un style.
Le code suivant :
| Le langage XHTML a pour complément indispensable ? Les styles CSS 2 |
Crée deux divisions en ligne qui utilise un style CSS particulier, défini par ailleurs dans l’élément
La masse se mesure en kg_
La force se mesure en N
_
Utilisez vite
? XHTML 1.1 promis à un grand avenir.! _
Lire de gauche à droite
XHTML ou de droite à gauche
? XHTML_
Comme le disait Boris Vian
La vérité n’est pas du coté du plus grand nombre
? car on ne veut pas qu’elle y soit. Le jour où il sera à même, par sa culture
? et ses connaissances, de choisir lui même sa vérité, il y a peu de chance
? pour qu’il se trompe._
Pour créer une boîte d’alerte en JavaScript, nous écrivons par exemple:
alert(‘Bonjour’). Dans ce cas l’exécution du script s’arrète.
Ce bâtiment a la forme d’un pentagone
(polygone à cinq cotés) et abrite des gens peu recommandables._
Si vous en avez assez, tapez : Ctrl+Alt+Suppr, et au revoir!
_
Comme Hamlet posons nous la question : Être ou ne pas être
Le type de l’équation du premier degré à deux inconnues est :
? ax+by = c. Elle n’a pas de solution unique
_
Le langage XHTML a pour complément indispensable
? les styles CSS 2
_
Dans l’équation ax+by = c les variables sont x
? et y
_
L’élément
est enfant de
et les éléments et sont eux-mêmes enfants de. Par héritage et bien sûr faute d’avoir définis des styles propres pour les éléments
, et , ceux-ci ont un contenu qui possède les styles définis pour leur parent direct ou indirect
. Ils sont donc tous en blanc sur fond bleu. Si nous créons un style différent pour l’élément, ses éléments enfants héritent alors de ces styles et non plus de ceux de l’élément
... ... ...
Exercice
<div>, <span>, <classes>, <id> et pseudo-classes
Nous allons chercher à produire un document présentant des livres. Pour chaque livre est affiché une image de la couverture ainsi que quelques informations. Ces informations sont :
Les livres sont également rangés par catégories. Celles-ci sont identifiées par une couleur d'arrière-plan différente de la rubrique d'information. Dans les exemples fournis on propose 3 catégories :
Parmi tous les livres, un et un seul est identifié comme favori. Il se distingue visuellement par une couleur d'arrière-plan différente.
L'objectif est d'obtenir une mise en page similaire à ce qui est présenté à la figure suivante :
Le résultat à obtenir (cliquez pour une vue large).
Nous procéderons par étape en commençant, comme il se doit, par la structuration et le contenu du document puis en nous occupant de sa forme.
Créez un document conforme à cette structure. Vous pouvez vous baser sur les données fournies dans le fichier livres/livres.txt. Les images des couvertures sont également dans le dossierlivres.
L'idée est que si l'on souhaite changer l'une de ces propriétés, une seule modification soit suffisante pour les deux classes d'éléments.
Le modèle de boite des divisions livre.
