J'apprends à construire mon premier site
Initiation progressive à l'édition de documents web avec le logiciel NVu/Kompozer

Cinquième leçon: En-tête. Conteneur DIV

7. Je crée un en-tête dans ma page web. Le conteneur générique DIV

A ce point de notre apprentissage, j'ai saisi un texte que j'ai formaté avec des titres, des sous-titres et des paragraphes mis en évidence par le style "Paragraphe", des zones de texte distinguées par des classes de style. Avec tout cela, il y a de quoi réaliser une très belle page web.

Un en-tête avec des paragraphes

Par exemple, si je veux construire un en-tête sur la page d'accueil de mon site, je peux imaginer un bloc de couleur mauve avec deux zones de texte indépendantes, l'une qui qui annonce le thème du site, avec un texte aligné à gauche, et l'autre qui donne mon nom aligné à droite. Je crée pour cela une classe spéciale "entete" avec fond mauve, largeur de 90%, remplissages gauche et droit de 5% et bordures, que j'applique aux deux paragraphes.

Un site consacré à la musique traditionnelle

Mon nom: kelkun

Malheureusement, ils sont séparés et je voudrais qu'ils ne fassent qu'un seul bloc. Par leur nature de paragraphe, ils sont nantis d'une marge en haut et en bas. Mais cela, je peux le modifier, n'est-ce pas? Avec l'éditeur de style, je vais dans l'onglet [Boîte] (figure 4-9) et je règle les marges en haut et en bas égales à zéro.

Note sur les marges des blocs: Au moment où je fixe la marge du bas égale à zéro, rien ne se passe. Bien sûr, car l'espace entre les deux paragraphes n'est pas la somme de la marge du bas du premier et de la marge du haut du suivant. Il est égal à la marge la plus grande des deux. Elles s'interpénètrent. Si j'enlève la marge du bas, il reste celle du haut qui fixe cet espace et rien n'est visible tant que je n'ai pas annulé également la marge du haut.

Les voilà collés:

Un site consacré à la musique traditionnelle

Mon nom: kelkun

Cependant, les bordures qui séparent les deux blocs sont disgracieuses. Je les supprime grâce au style intégré [Propriétés des bordures] du menu de la barre d'état, en désactivant la case [Utiliser le même style pour tous] afin que chaque côté puisse être différent. Pour le premier paragraphe, j'indique [Style] >[Bas]: "aucun", et pour le deuxième [Style] >[Haut]: "aucun". Comme cela:

Les deux paragraphes collés sans bordure séparatrice:

Un site consacré à la musique traditionnelle

Mon nom: kelkun

Pas mal, non, comme en-tête?

Conteneur générique <div>

La méthode des paragraphes collés n'est pas très légère. Il est plus intéressant de créer un troisième bloc qui englobe les deux paragraphes, donc deux blocs incrustés dans le troisième appelé le bloc contenant ou conteneur. On bénéficie ainsi d'une meilleure souplesse pour le style et le positionnement du contenu global. A l'intérieur de ce bloc conteneur, chacun des deux paragraphes reçoit un style intégré indépendant. Il est impossible de se servir de la balise <p> pour englober d'autres paragraphes. Si l'on tente de le faire, les navigateurs ne l'interprètent pas. Quand à NVu, il corrige automatiquement en ajoutant d'autres balises </p> ou <p> pour compléter les paragraphes. Les paragraphes sont faits pour être des paragraphes, c'est-à-dire des entités (des éléments) qui s'empilent verticalement les unes en-dessous des autres en laissant un espace entre eux.

Il est bien plus intéressant d'utiliser un nouvel élément, le bloc <div> (division), qui désigne un conteneur générique. C'est sa raison d'être. div, c'est la balise qui signifie division, ou section. Une division, c'est une partie du document de taille quelconque qui est délimitée par un bloc neutre. Neutre, ça veut dire qu'il n'a aucune fonction prédéfinie, aucun style prédéfini. Si on saisit du texte, il est par défaut en format corps de texte. Ainsi, cette division est une sorte de boîte de corps de texte, et elle fonctionne un peu pareil. A l'intérieur, on peut saisir du corps de texte, des paragraphes, des titres, insérer des images, etc. Elle peut donc contenir d'autres boîtes-blocs telles que paragraphes et titres, mais également d'autres sous-divisions DIV.

Je crée la division DIV

Si j'applique cela à la ligne précédente, voici le résultat:

Rien n'a changé en apparence (j'ai ajouté le fond jaune pour le présenter comme une figure) si ce n'est que le sélecteur de la balise DIV est apparu dans la barre d'état, indiquant que le texte est dans un bloc DIV. Cependant, comme je n'ai pas attribué de style particulier à la balise <div>, le texte a le format corps de texte. Dans le menu déroulant de format de paragraphe, c'est d'ailleurs le nom "Corps de texte" qui est affiché.

En mode Balises HTML, je peux repérer le symbole de la balise.

Figure 7-1

En mode Source, également:

<div>Le bloc se cr&eacute;e l&agrave; o&ugrave; je place le curseur, sur une ligne vide, ou dans du texte
d&eacute;j&agrave; saisi. J'utilise le menu d&eacute;roulant [Format de paragraphe] dans la barre de
mise en forme et j'applique le "format" [Conteneur g&eacute;n&eacute;rique].</div>

Remarques:

Insérer du contenu dans un bloc DIV

Dans le cas où j'ai déjà saisi du texte dans le bloc <body>, comment puis-je placer une partie de ce texte dans un nouveau bloc DIV que j'ai créé sans en récrire la totalité?

Si je sélectionne plusieurs lignes du corps de texte (délimitées par des fins de ligne) et que j'applique le format div, cela ne crée pas un seul bloc englobant toutes les lignes. Cela crée autant de blocs div que de lignes sélectionnées, de la même façon que le format "Paragraphe".

De même, si le texte comporte plusieurs paragraphes que je sélectionne et que je leur applique le format "div", cela crée autant de blocs DIV que de paragraphes.

On ne peut donc pas, en mode Normal, transformer directement toute une partie de texte en un seul bloc "div", du moins pas de cette façon. Dommage.

De plus, s'il existe des blocs internes dans la partie de texte sélectionnée, tels que "titres", ils sont ramenés au format "corps de texte".

La méthode est donc de créer un bloc sur une ligne vide, et d'y recopier ce qu'on a déjà saisi. Ensuite, je peux attribuer des styles "paragraphe" ou "titre" au texte intérieur au bloc div.

Comment sortir d'un bloc?

Je suis devant ma nouvelle page vide, je n'ai encore saisi aucun texte, et je commence par créer un bloc div, dans lequel je saisis le texte voulu. Puis je cherche à sortir de ce bloc afin de continuer à saisir du texte dans le corps de texte normal. Comment passer de l'autre côté de la balise de fin, sans avoir à se rendre dans le mode Source?

C'est très simple: lorsque mon curseur est sur le dernier caractère du bloc div, j'appuie sur la touche [Flèche à droite]. Cela nous fait passer après la balise de fin. Ensuite je pose ce que je veux, par exemple un paragraphe. 

On peut faire la même chose pour se placer avant le bloc div. En se plaçant au premier caractère, et en appuyant sur la touche [Flèche à gauche].

Il existe une méthode encore plus astucieuse qui marche avec tout bloc, que ce soit "div", ou "p", ou "h". Je place le curseur n'importe où dans le bloc, je repère le sélecteur correspondant, <div> ou autre, dans la barre d'état en bas d'écran, je clique dessus, ce qui a pour effet de sélectionner tout le bloc. Ensuite, je peux passer avant ou après ce bloc, selon que j'appuie sur  [Flèche à gauche] ou [Flèche à droite].

Donner des styles différents au bloc DIV d'en-tête

L'intérêt de ce bloc conteneur est que je lui attribue un style commun, un fond bleu clair, et je donne des styles particuliers au texte des paragraphes (marges, couleur de fond, bordures) avec une classe de style pour le contenant et d'autres classes pour les blocs internes. Comme ceci, par exemple:

On remarque qu'il reste cependant une marge sur la gauche du bloc conteneur bleu. Normal, car les marges d'une boîte-bloc s'alignent sur celles de son bloc contenant. La marge du bloc "div" est de 0 par défaut. Le bloc bleu est contenu dans le grand bloc <body> qui par défaut a une petite marge gauche, droite et haute. Afin d'éliminer la marge, il faut leur attribuer les valeurs 0.

Application: Dans cette page, j'ai voulu que l'en-tête général de mon site "Accompagnant etc."  figure sans marges. J'ai donc fixé les marges gauche et droite de "body" à zéro.

Remarques

• La couleur de fond de <body> occupe tout l'écran de visualisation et pas seulement la grandeur de sa boîte. Elle ignore les marges
• Les paragraphes mauves ont une marge en haut qui peut déborder du bloc "div" bleu de l'en-tête. Si je veux qu'il soit positionné tout en haut de la page, je dois également donner à la marge haute du paragraphe une valeur faible ou nulle.

Voici un exemple dans lequel j'ai seulement donné aux paragraphes des indications de propriétés de texte, sans bordures ni couleur de fond.

Figure 7-2

Un autre bloc DIV pour le contenu principal

Il ne me reste plus qu'à saisir le corps de texte à la suite. L'ennui est que le texte est collé sur le bord gauche puisque j'ai fixé la marge du corps de texte à 0 (fig. 7-3). Impossible d'y toucher si je veux que le bandeau d'en-tête reste positionné.

Figure 7-3

Aussi, à la suite de l'en-tête, j'ai créé un bloc "div" pour le contenu de texte principal, qui coure jusqu'à la fin de la page. Pour ce bloc, j'ai fixé des marges gauche et droite de 10 px. Bien plus, ce nouveau bloc "div" pourra recevoir toutes les indications de style et de positionnement que je souhaite (fig. 7-4). Très commode. Je peux par exemple donner une marge gauche suffisamment importante (20%) pour que je puisse y placer par la suite des listes verticales. C'est ce que j'ai fait dans ma page de bienvenue de ce site (leçon 7).

Figure 7-4

La suite

Contenu de la leçon 6

• Comment fonctionne un lien?
• J'étiquette les cibles avec des "ancres"
• Je fais le lien avec la cible
• La balise <a>
• Modifier le style du lien
• Les ancres pour les titres sont proposées automatiquement
• Styles a:hover et a:visited
• Modifier les propriétés du lien
• Vérifier les liens. L'outil Navigateur. Propriété Importance

  Retour à la leçon 4: blocs de titres 

 Aller à la leçon 6  

Mise en ligne 18 octobre 2006