Cours HTML : Les divisions de la page
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
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
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
) et la figure 3-4 (blocs
Exemple 3-3. Les divisions en blocs
Chapitre 1 La création du monde
? 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 vidit Deus quod esset bonum et ait germinet terra herbam virentem et
? facientem semen et lignum pomiferum faciens fructum iuxta …
_
Le huitième jour
? 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
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
Abréviations
La masse se mesure en kg_
La force se mesure en N
_
Acronymes
Utilisez vite
? XHTML 1.1 promis à un grand avenir.! _
Sens de lecture
Lire de gauche à droite
XHTML ou de droite à gauche
? XHTML_
Citations
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._
Code source en ligne
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.
Définition en ligne
Ce bâtiment a la forme d’un pentagone
(polygone à cinq cotés) et abrite des gens peu recommandables._
Saisies clavier
Si vous en avez assez, tapez : Ctrl+Alt+Suppr, et au revoir!
_
Citations courtes
Comme Hamlet posons nous la question : Être ou ne pas être
Exemples en ligne
Le type de l’équation du premier degré à deux inconnues est :
? ax+by = c. Elle n’a pas de solution unique
_
Le conteneur span
Le langage XHTML a pour complément indispensable
? les styles CSS 2
_
Variables
Dans l’équation ax+by = c
les variables sont x
? et y
_
L’élément
est enfant 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
, 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 :
- le titre,
- lorsque le livre appartient à une série, le nom de cette série,
- le ou les auteurs,
- l'année de parution du livre.
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 :
- science-fiction (rgb(254,128,128))
- fantasy (rgb(128,128,254))
- bandes-dessinées (rgb(238,238,204))
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.
- Donc commençons par structurer le document. L'en-tête contient la légende présentant les différentes rubriques puis on trouve une zone contenant les livres. Chaque livre sera décrit dans une division (élément <div>) qui sera marquée sémantiquement par une classe, l'appeler livreparaît raisonnable... Un division livre sera elle-même divisée en deux blocs (d'autres divisions) : la couverture et les informations. Les informations se divisant comme décrits précédemment. Pour chaque livre, les auteurs seront regroupés dans une même division et chaque auteur sera également rangé dans un élément <span> séparé. L'année de parution peut être marquée par un élément <time>. Toutes ces rubriques seront marquées sémantiquement.
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.
- Comment gérer/marquer les différentes catégories des livres ? Proposez une solution et appliquez la.
- Comment faire pour marquer un et un seul des livres comme favori ? Choisissez votre favori et marquez le.
- Nous pouvons maintenant nous occuper un peu de la forme... Commencez par écrire un seulbloc de règles qui fasse que les éléments <header> et la zone contenant les livres ont la même couleur d'arrière-plan (par exemple rgba(128,255,128,0.3)) et occupe 90% de la page, en étant centrés.
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.
-
On va s'intéresser maintenant aux divisions livre(en dehors des aspects favori abordés un peu plus loin). Gérons d'abord les blocs indépendamment et nous verrons dans la question suivante comment les positionner les uns par rapport aux autres.
- Voici pour ces divisions les informations fournies par l'outil Modèle de boite:
Le modèle de boite des divisions livre.
- En ce qui concerne les informations, elles sont alignées sur la gauche de leur division. Le titre est en gras, la série est en italique et de taille plus petite (smaller). Les auteurs apparaissent en italique (nous verrons plus loin pour l'auteur qui apparaît en souligné). Le tout avec des couleurs différentes pour chaque information.
- Les blocs contenant la couverture et les informations sont centrés dans cette division. De plus la couverture occupe 70%de la hauteur et les informations 20%. Ajoutez à cela quelques marges (intérieure et/ou extérieure), des bordures (et/ou box-shadow), un peu de couleur pour ressembler (globalement) à la figure précédente.