Développement personnel et Expression vocale ...

... avec Alain Boudet

Bienvenue

Accompagnement

Agenda

Mon parcours

Documentation

Documentation > informatique

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

Troisième leçon: Création et style des blocs

3. Création de blocs "paragraphe"

Avec ce que nous avons appris dans les 2 leçons précédentes, nous avons tous les éléments pour nous permettre de saisir le texte de notre page web et de le formater de façon agréable. Lorsque j'ai saisi un paragraphe en corps de texte, il suffit que je le sélectionne et que je lui applique une classe pour lui donner les styles les plus divers.

Cependant, il me manque la possibilité d'entourer une zone entière par une bordure, de lui donner des marges et un fond coloré comme je l'ai fait dans la présentation dans la première leçon de ce tutoriel. Car les bordures, marges et les fonds que j'ai appris à créer en corps de texte sont limités aux suites de caractères et ne s'appliquent pas à une zone entière. Ainsi, essayez d'appliquer la classe ".boite" à tout un paragraphe.

Grâce à la notion de blocs, je vais pouvoir combler ce manque et réaliser bien d'autres choses encore. Pour en comprendre le fonctionnement, je vais d'abord explorer le fonctionnement des blocs "Paragraphes".

Format de paragraphe. Balise <p>

Par défaut, j'ai saisi le texte dans le format corps de texte. Les caractéristiques de ce format sont définis, également par défaut, par NVu. En corps de texte, un paragraphe est une partie de texte encadrée par deux fins de lignes, deux balises <br>.

Pour lui attribuer vraiment la nature d'un paragraphe, et qu'il ne soit pas seulement une partie du corps de texte, je place le curseur dans le paragraphe de corps de texte. Puis je sélectionne [Paragraphes] dans le menu déroulant des formats de paragraphes de la barre de mise en forme (fig. 3-1). C'est ce que je vais effectuer pour le paragraphe que vous lisez, après l'avoir recopié pour voir la différence.

Figure 3-1

Pour lui attribuer vraiment la nature d'un paragraphe, et qu'il ne soit pas seulement une partie du corps de texte, je place le curseur dans le paragraphe de corps de texte. Puis je sélectionne [Paragraphes] dans le menu déroulant des formats de paragraphes de la barre de mise en forme (fig. 3-1). C'est-ce que je vais effectuer pour le paragraphe que vous lisez, après l'avoir recopié pour voir la différence.

Mis à part le fond jaune que je viens d'ajouter pour que vous distinguiez ce paragraphe comme une figure, (grâce d'ailleurs à sa nature de bloc comme nous allons le voir), il y a vraiment peu de changements. Dans le cas présent, cela n'a fait que décaler le texte vers le bas. Pas grand intérêt? Et bien si. Maintenant, mon paragraphe est singularisé et identifié, et je vais pouvoir lui donner d'autres attributs, un autre formatage.

Comment ces paragraphes sont-ils repérés et identifiés? Par les balises html de début <p> et de fin </p>. La balise de fin de paragraphe crée un retour à la ligne qui se substitue à la balise <br>.

<p> Pour lui attribuer
vraiment la nature d'un paragraphe, et qu'il ne soit pas seulement une partie
du corps de texte, je place le curseur dans le paragraphe de
corps de texte. Puis je s&eacute;lectionne [Paragraphes] dans le
menu d&eacute;roulant des formats de paragraphes de la barre de
mise en forme (fig. 3-1). C'est-ce que je vais effectuer pour le paragraphe que vous
lisez, apr&egrave;s l'avoir recopi&eacute; pour voir la
diff&eacute;rence.</p>

En mode Balises HTML, je constate que le paragraphe est identifié par le symbole de balise P (fig. 3-2).

Figure 3-2

Notion de bloc. Boîtes en ligne et boîte de bloc.

En déclarant une partie de texte en tant que paragraphe repéré par sa balise, je crée un bloc. Les blocs peuvent être mis en évidence en mode Normal ou Balises par le menu [Affichage]>[Mise en évidence des blocs]. Faites-le (fig. 3-3)

Figure 3-3

Vous voyez que le bloc est bien délimité par son cadre qui le distingue du corps de texte. La notion de bloc est proche de celle de boîte, car le bloc est en lui-même une boîte et on va pouvoir lui conférer des styles internes comme aux autres boîtes. Disons qu'on peut distinguer deux types de boîtes correspondant à deux types de balises:

• Les boîtes en ligne sont associées aux balises en ligne que nous avons déjà vues comme <span>, <big>, <small>, <b>, <i> et quelques autres comme <a> et <img> que nous aborderons plus loin. Elles se positionnent dans le fil du texte (on dit le flux) ainsi que nous les avons rencontrées dans les lignes. A moins qu'elles n'aient pas assez de place, auquel cas elles sautent à la ligne suivante.
• Les boîtes de blocs sont attribuées aux balises-blocs <p>, et aussi à la balise <body>. Et oui, le corps de texte est un bloc. Elles sont également attribuées aux balises titres <h...>, listes <li> et divisions <div> que nous apprendrons à connaître plus loin. Elles possèdent des attributs plus complets que les balises en ligne, tels que les dimensions de la boîte, et les positionnements. Les rubriques de propriétés de boîte pour une boîte en ligne ne sont pas opérationnelles. Par défaut, les blocs se suivent verticalement, ce qui signifie que leur balise de fin indique aussi un retour à la ligne. La balise <br> est inutile.

Nature du format "Paragraphe". Saisie de texte et changement de paragraphe

Examinons ce qui se passe lorsqu'on saisit du texte dans un paragraphe déclaré comme tel par la balise <p>. Évidemment, j'ai la possibilité de saisir du texte à l'intérieur du bloc paragraphe, au lieu de faire la mise en forme après la saisie. Mais que se passe-t-il lorsque j'appuie sur la touche ENTRÉE? Est-il possible de faire des sauts de lignes à l'intérieur d'un paragraphe? Et comment sortir du paragraphe?

Essayez. La touche ENTRÉE crée un saut de ligne à l'intérieur du paragraphe en posant une balise <br>, mais pas de nouveau paragraphe. Mais attention, si je tape une deuxième fois sur la touche ENTRÉE, la ligne vide précédente est changée en un nouveau paragraphe,
<br></p>
<p></p>
avec une balise de fin </p> pour clore le premier paragraphe, et deux balises <p> </p> pour créer le suivant. Du coup la première balise <br> est inopérante et superflue, mais elle reste. C'est pourquoi, il y a un outil prévu pour éliminer les balise <br> superflues: [Outils]>[Nettoyeur de balise]. Cocher [Nettoyer les <br> superflus].

Remarque Cela explique pourquoi quand je veux effacer cette fin de paragraphe avec la touche "Efface le dernier caractère", certaines fois (mais pas toujours!), il faut que j'appuie deux fois sur la touche. La première action efface <p></p> et la deuxième efface <br> .

Cependant, attention à nouveau: cela peut se passer autrement selon l'option "Comportement de la touche ENTRÉE". Dans le menu [Outils]>[Préférences], je sélectionne [Avancées], puis dans la rubrique [Comportement de la touche Entrée], je coche: [Crée automatiquement un nouveau paragraphe]. En corps de texte, cela ne fait aucune différence, mais là, en format "Paragraphe", ça change quelque chose. Si je tape la touche ENTRÉE, je crée directement un second paragraphe-bloc avec les balises <p></p>. Les deux paragraphes sont bien séparés par un espace vide, une marge en haut et une marge en bas.

Et si je veux un retour à la ligne dans le même paragraphe? Ça peut être utile si je donne un fond de couleur au paragraphe. Si j'ai un seul paragraphe avec plusieurs lignes, il aura un fond continu. Si j'ai deux paragraphes, j'aurai deux fonds séparés par la marge blanche. Très simple: Je crée un saut de ligne en appuyant sur MAJ+ENTRÉE, comme dans les traitements de texte habituels.

Il faut donc bien distinguer les fins de ligne (retour à la ligne) par lesquelles le style n'est pas interrompu, et les fins de paragraphe qui mettent fin au paragraphe et à son style. Dans le premier cas, je reste dans le paragraphe, dans l'autre cas, j'en sors immédiatement. 

Autre possibilité pour sortir du format "Paragraphe", ou pour enlever le format Paragraphe, sélectionner [Corps de texte] dans le menu des styles de paragraphe (figure 3-1). Ou encore curseur dans le paragraphe, aller dans le menu contextuel du sélecteur de la barre d'état, et sélectionner [Supprimer la balise] (fig3-4).

Figure 3-4

Selon mon expérience, il est plus commode de choisir l'option [Crée automatiquement un nouveau paragraphe], et de changer de ligne à l'intérieur d'un paragraphe avec MAJ+ENTRÉE. On retrouvera le même comportement dans d'autres blocs.

Ces petits détails nous révèlent la nature des blocs paragraphes. Ils permettent de créer des paragraphes, grande découverte. Cela signifie que par défaut, le style d'un paragraphe est identique à celui du corps de texte avec une marge en haut et une marge en bas qui rend inutile l'insertion d'une ligne vide. Il y a interpénétration des marges de paragraphes successifs de telle sorte que la marge en haut du deuxième paragraphe ne s'ajoute pas à la marge en bas du précédent. Et lorsque je quitte un paragraphe en changeant de ligne, un nouveau paragraphe démarre. Idéal pour écrire une suite de paragraphes!

Évidemment! J'insiste cependant, car au fur et à mesure que j'ai avancé plus loin dans l'édition web, je me suis demandé qu'est-ce qui faisait la différence entre les différents types de blocs. Car enfin, nous allons découvrir qu'à n'importe quel bloc, on peut donner à peu près n'importe quel style.

Par exemple, si je veux, je peux donner immédiatement au paragraphe des marges nulles. C'est ce que nous allons examiner tout de suite.

4. Donner un style aux blocs paragraphes

Lorsque j'ai attribué au paragraphe en corps de texte le format "Paragraphe", nous avons constaté qu'il se décalait vers le bas, n'est-ce pas? C'est parce que le style par défaut génère des marges supplémentaires en haut et en bas. Bien sûr, on peut modifier ces marges et choisir tous les autres attributs que l'on veut (texte, boîte, bordure, fond) pour créer un style distinct du corps de texte, et cela de trois façons différentes, en fonction de ce que l'on veut obtenir.

1. On peut avoir envie d'appliquer un style particulier à un seul paragraphe.
2. On peut vouloir donner un style spécial à toute une classe de paragraphes (on utilisera alors la notion de classe).
3. Ou bien, et c'est nouveau, on veut définir un style par défaut à la balise <p> qui sera systématiquement appliqué à tous les paragraphes.

Créer un style interne pour un paragraphe

Je peux donner un style particulier à un seul paragraphe, par exemple celui que je suis en train d'écrire, formaté en "Paragraphe". On connaît déjà cette façon de procéder, car elle est est la même que pour n'importe quelle balise. C'est celle qui consiste à fixer les propriétés de la boîte associée.
Je place le curseur dans le paragraphe, et le sélecteur de la balise <p> apparaît dans la barre d'état en bas de la page. Je survole ce sélecteur pour accéder au menu [Styles internes] avec le clic droit de la souris. Ensuite, je peux fixer le style que je veux dans ce menu (figure 4-1): [Propriétés du texte], [Propriétés des bordures], [Propriétés du fond], [Propriétés de la boîte]. Par exemple, dans ce paragraphe, j'ai fixé une taille de police de 1.2 em, et une couleur de fond rose, une largeur de 76% et des remplissages gauche et droit de 4px.

Figure 4-1

De nouvelles propriétés sont réglables avec [Propriétés de la boîte], comme la largeur du bloc, fixée dans ce paragraphe à 75%, la hauteur, les marges, l'espacement. 

L'espacement est la marge interne, l'espace qu'on ajoute à la largeur de texte pour définir le fond et les bordures. Les marges s'ajoutent autour du fond et des bordures. Si l'on veut calculer l'occupation totale de la boîte en largeur, il faut ajouter les trois (du moins, lorsqu'on affiche le texte avec Mozilla. Ce n'est pas le cas avec Internet Explorer)

La position sur la ligne, à gauche ou à droite, au milieu est obtenue en choisissant les marges. 

Remarque: si je veux que le paragraphe soit aligné à droite, je suis tenté de fixer la marge droite à 0. Et bien, dans le cas de l'affichage avec Internet Explorer, cela ne marche pas. Dans le cas de Mozilla, cela ne marche que si j'inscris pour la marge gauche "auto" (figure 4-2).

Figure 4-2

Pour centrer, choisir la même marge à gauche et à droite, et laisser la largeur indéfinie. Car bien sûr, il faut que les chiffres soient compatibles. La somme des marges, des espacements et de la largeur ne doit pas dépasser 100% par exemple. Donc il est recommandé de choisir certaines valeurs (les marges et les espacements, ou une marge et la largeur), et laisser une propriété indéterminée afin qu'elle se règle automatiquement (la deuxième marge ou la largeur du texte qui s'ajuste à l'écran).

Note: La manière la plus spécifique pour centrer le bloc est d'inscrire dans les cases [Marge gauche] et [Marge droite] la valeur "auto", du moins avec Mozilla comme afficheur. Ça ne s'invente pas! Cependant, ATTENTION. Internet Explorer ignore cette déclaration. Pour IE, il faudra employer par exemple un attribut html align="center".

Je vous rappelle que quand nous fixons ces valeurs de style, le logiciel va coller les déclarations de style à l'intérieur de la balise: <p style ="  ">, comme le montre le mode Source.

<p style="font-weight: inherit; background-color: rgb(255, 226, 226); width: 75%; padding-right: 1%; padding-left: 1%; margin-left: auto; margin-right: auto; font-size: 1.1em;"><br>
Pour <span style="font-weight: bold;">centrer</span>, choisir la m&ecirc;me marge &agrave; gauche et &agrave; droite, et laisser la largeur ind&eacute;finie. Car bien

Afficher les règles

Astucieux: Je peux aussi modifier la largeur, la hauteur et la position du bloc grâce aux règles que vous voyez probablement sur les bords en haut et à gauche de l'écran, et qui marquent les limites du bloc  (fig. 4-3). Il suffit de faire coulisser les extrémités de ces règles. Elles indiquent la largeur cumulée du texte et du remplissage. 

Figure 4-3. Utiliser les règles, en haut et à gauche

Pour afficher ou non les règles, il faut aller dans la barre des menus:

[Affichage]>[Barres d'outils]>[Règles]

Créer un style de classe à partir d'un paragraphe

Afin de distinguer toute une catégorie de paragraphes de façon spécifique, par exemple les paragraphes qui me servent de démonstration et que je voudrais mettre en évidence comme une figure, je vais définir un style pour cette catégorie ou classe, appelé un style de "classe", et j'appliquerai ce style de classe aux paragraphes sélectionnés.

On sait déjà comment créer un style de classe puisqu'on s'en est servi avec la balise <span> (voir leçon 2). Il suffit de faire la même chose avec la balise <p>. Je formate un paragraphe tel que je le veux, tel le paragraphe mauve ci-dessus. Je place le curseur dans ce paragraphe. 

Par le menu [Styles internes] de la barre d'état, j'utilise la fonction [Extraire et créer un style générique]. La boîte de dialogue s'ouvre (figure 2-7), j'enlève la sélection [cet élément uniquement] et je coche [tous les éléments] et [de classe]. Je donne un nom à la classe: "mauve". Là j'ai encore un choix: [de même type] ou pas?

• Si je ne sélectionne pas [de même type], je crée ma classe de façon indépendante des balises <p> et je pourrai plus tard l'appliquer à n'importe quel élément, y compris d'autres balises <p>. Le procédé utilisé par le logiciel est d'extraire les attributs du style de ce paragraphe, de les placer dans la feuille de style, et d'attribuer à la balise la déclaration <p class="mauve">, qui renvoie à la feuille de style.

<p class="mauve">
<span style="font-weight: bold;">Astucieux:</span> Je peux aussi
modifier la largeur, la hauteur et la position du bloc gr&acirc;ce

• Si je choisis  [de même type] lors de l'extraction, la classe ne sera applicable qu'aux balises <p> et la déclaration de style est accolée de la façon suivante <p.mauve>.

Euh, du moins c'est ce qu'il devrait faire, mais en fait, c'est la même indication qui s'affiche en mode Source, preuve qu'elles sont équivalentes. Les deux procédés donnent le même résultat.

Remarque: Une fois que cette opération a été effectuée, la fonction [Extraire et créer un style générique] n'est plus active. Bien sûr, puisqu'une fois que vous avez extrait le style intégré pour le placer dans la feuille de style, il n'y a plus rien à extraire.

Appliquer le style de classe à d'autres paragraphes

Pour appliquer le style de classe créé (.mauve) à un autre paragraphe déjà saisi ou en cours de saisie, je procède de façon (presque) identique à ce que j'ai fait en corps de texte. Je sélectionne le paragraphe (et pour cela, il suffit que le curseur soit positionné dans le paragraphe), je vais dans le menu déroulant de la barre de mise en forme (deuxième ligne, première case à gauche), et je sélectionne la classe voulue.

La classe sélectionnée apparaît alors dans le haut du menu déroulant au-dessus d'une barre horizontale. Si je clique une deuxième fois, cela l'annule.

Autre méthode: je me rends dans la barre d'état, au-dessus de la balise <p>. On a l'habitude d'aller voir [Styles internes]. Cette fois, je vais voir [Classes]. Je clique sur la classe que je veux, et elle se retrouve en-haut du menu, séparée par une barre horizontale et cochée (figure 4-4).

Figure 4-4

Créer un style générique pour <p> à partir de la barre d'état

Enfin, troisième cas, je peux avoir envie de définir un style commun à tous les éléments <p>, remplaçant le style par défaut de cet élément. On agit de la même façon que pour définir une classe, procédé vu ci-dessus. Avec le curseur dans le paragraphe façonné au format voulu, j'affiche le menu contextuel de la barre d'état et je sélectionne [Extraire et créer un style générique] (figure 2-7). J'enlève la sélection [cet élément uniquement] et je coche [tous les éléments]. La différence est que je sélectionne maintenant  [de même type], et je ne coche pas [de classe]. Automatiquement, tous les paragraphes <p> sont formatés dans ce style.

En mode Source, il n'y a plus aucune déclaration après la balise <p>. Les déclarations sont reportées dans la feuille de style de l'en-tête: <head> </head>, entre les balises <style> et </style>.

  <style type="text/css"> p
{  font-size: 1.2em;
  background-color: rgb(255, 226, 226);
}

.boite { border-style: solid;
border-color: rgb(204, 153, 51);
font-weight: bold;
background-color: rgb(255, 204, 51);
padding-top: 3px;

  </style>
</head>

Créer un style générique pour <p> avec l'éditeur de style CSS

Puisque la manoeuvre d'extraction a pour effet de reporter les déclarations de style dans la feuille de style, il est également possible de les y inscrire directement. Voici donc une méthode alternative générale pour définir le style générique de <p> qui utilise directement la feuille de style, par l'intermédiaire de l'éditeur CSS. Elle a l'avantage qu'on peut y définir les styles avant même d'avoir saisi aucun paragraphe ni corps de texte, comme choix de départ.

Pour accéder à la feuille de style, je me rends dans [Outils]>[Editeur CSS] (fig. 4-5). Si aucun style n'a encore été créé, la rubrique [Feuilles et règles] est vide.

Figure 4-5

Pour créer une feuille de style, il y a une méthode pour débutant et une pour expert. Je vous recommande de désélectionner [Mode Expert], cela affichera une fenêtre plus simple, puis cliquez sur [Règle]. Voici ce que nous obtenons:

Figure 4-6. Créer un style pour un type de balise

Je sélectionne [style appliqué à tous les éléments d'un type], et j'inscris le sélecteur du type: "p". Puis je clique sur [Créer la règle de style]. J'obtiens ceci (figure 4-7).

Figure 4-7

Puis je procède exactement comme avec les classes (leçon 2 et figure 2-10). Avec les onglets, je peux choisir les caractéristiques: propriétés du [Texte], du [Fond], des [Bordures] et de la [Boîte]. Puis cliquer sur le bouton "[Fermer] en bas à droite.

Créer tout type de style et modifier les styles existant avec l'éditeur de style

Récapitulons ce que nous savons de la création de styles par cet éditeur de feuille. Au cours des sections précédentes, nous avons créé des classes qui s'appliquent à des portions de texte ou à des blocs, et un style de paragraphe obtenu par extraction. La feuille de style existe donc déjà (figure 2-10). A partir de cette feuille, je peux

• créer de nouveaux styles (un style "body", un style "paragraphe" si je ne l'ai pas déjà fait par extraction, ou de nouvelles classes)
• modifier des styles existants

Pour créer ou modifier un style, la méthode est toujours la même. Je clique sur le + en haut à gauche devant [Feuille de style interne]. J'y vois bien tous les styles déjà créés. Je désélectionne [Mode Expert]. Je clique sur [Règle] (figure 4-5). J'obtiens le tableau "Nouvelle règle de style". Puis:

S'il s'agit de créer de nouveaux styles, comme je viens de le faire pour le sélecteur <p>, je ne sélectionne rien à gauche, et c'est le panneau "Nouvelle règle de style" qui reste à droite.

• Pour définir le style par défaut dans une page de tous les éléments d'un même type, par exemple <p>, je coche la deuxième ligne [style appliqué à tous les éléments d'un type] et j'inscris le nom de l'élément: p, sans les balises <> (figure 4-6). Je peux également définir le corps de texte "body" ainsi que d'autres types d'éléments comme les titres h, les listes ol, ul, dt, etc... que nous apprendrons à connaître plus loin.
• Pour créer une nouvelle classe, je coche la première ligne [style nommé] et je donne un nom à la nouvelle classe. Par exemple "mauve"

Figure 4-8. Créer une classe

Puis je clique sur [Créer la règle de style] et les onglets des propriétés sont accessibles à nouveau.

S'il s'agit de modifier un style déjà créé, je le sélectionne dans le tableau de gauche. Les règles déjà définies sont inscrites dans le tableau de droite, dans l'onglet [Général]. Je peux les modifier en cliquant sur les onglets [Texte], [Fond], [Bordures], [Boîte]. On sait déjà le faire.

Figure 4-9. Modifier un style

Formater dans le fil du texte

Bien entendu, on peut toujours formater des parties de texte à l'intérieur d'un paragraphe en utilisant les styles en-ligne avec lesquels nous avons fait connaissance dans la leçon 1, indiqués par les balises <span>, <big>, etc.. Ce sont des balises en-ligne contenues dans un bloc.

Hiérarchie des styles de la feuille de style

Une boîte imbriquée dans une autre hérite des propriétés de la boîte conteneur. La boîte conteneur est encore dite "parent" et la boîte contenue est dite "enfant". Une classe n'est définie habituellement que par quelques valeurs de propriétés, par exemple uniquement la couleur de fond. Lorsque j'applique cette classe à un partie de texte incluse dans un paragraphe, les autres propriétés de ce texte telles que la taille de la police seront héritées du paragraphe. Si la taille n'est pas précisée dans le style du paragraphe, celui-ci la reçoit du corps de texte. Il y a donc une hiérarchie des styles. Par défaut, la marge gauche d'une boîte est alignée sur la marge gauche du bloc conteneur.

Dans la feuille de style, les styles des classes et des éléments s'inscrivent dans l'ordre de leur création. Cet ordre a-t-il une importance? Oui, en partie. Comme le navigateur lit les styles dans l'ordre de leur écriture, les éléments parents doivent être indiqués en premier. On inscrit d'abord les styles les plus généraux et on va vers les plus spécifiques et particuliers. D'abord obligatoirement "body", puis les différents éléments p, h1, etc.. suivis des classes.

Il est facile de modifier l'ordre de création en utilisant les boutons [Monter] et [Descendre] (figure 4-8).

Anomalie: Cependant, la touche [Descendre] ne fonctionne pas.

La suite

Contenu de la leçon 4

• Blocs de titres h. Styles
• Changement de ligne dans un bloc
• Insérer une table des matières
• Formater le corps de texte avec l'éditeur de style
• Préformaté
• Ajouter des commentaires

 Retour à la leçon 2: Boîtes. Style interne. Classes de style 

 Aller à la leçon 4 

Mise en ligne 18 octobre 2006