Cours HTML

Cours HTML : Les divisions de la page


Télécharger Cours HTML : Les divisions de la page

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


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

Chapitre 1 La création du monde

In principio creavit Deus caelum et terram terra autem erat inanis

? 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 …

_

Le huitième jour

In principio creavit Deus caelum et terram terra autem erat inanis et vacua

? 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

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

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 :

  • 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.

  1. 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.

  1. Comment gérer/marquer les différentes catégories des livres ? Proposez une solution et appliquez la.
  2. Comment faire pour marquer un et un seul des livres comme favori ? Choisissez votre favori et marquez le.
  3. 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.

  1. 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.
.


2422