Partir
de Windows pour découvrir le libre, les
tutoriels libres présentés par le site
Framasoft
http://www.framasoft.net
J'apprends à utiliser le
logiciel
NVu
et à construire mon site
Deuxième
édition
révisée,
conforme à la version 1.0 de NVu
5 Septembre
2005
Initiation progressive
à l'édition de documents web
J'apprends
à saisir du texte brut et à le mettre en forme.
Je construis un site avec plusieurs documents comportant un texte
principal, des images, un en-tête,
une barre de menu horizontale, un bloc
latéral.
Alain
Boudet
http://aboudet.chez.tiscali.fr
...
Vous ouvrez un
éditeur de texte web pour la
première fois ou presque...
Vous
voulez commencer
à saisir du texte,
mais vous ne savez pas par où commencer.
Vous
avez l'habitude de taper en traitement de texte habituel, et sans
réfléchir, vous êtes tenté
de transposer vos connaissances à NVu
.
Malheureusement,
ça ne se
comporte pas comme vous vous y
attendiez, et vous ne savez pas pourquoi ni comment faire.
Alors vous cherchez un manuel
simple à lire
pour commencer votre saisie. Vous avez des difficultés
à comprendre de quoi parlent les tutoriels et les aides,
certes simples à lire, mais bourrés de mots
nouveaux et de références inconnues, classe,
attribut,
bloc,
ancre, et beaucoup d'autres, en général
précédés d'indications
générales très techniques
sur les caractéristiques du matériel et
son installation.
Vous voulez un vrai tutoriel,
qui vous prend là où vous en
êtes, et vous amène progressivement vers de plus
hautes
compétences, grâce à une
véritable explication des notions nouvelles et à
une progression
dans l'exposé des notions.
Si vous êtes dans ce cas, ce texte est pour vous.
Le fil conducteur de ce manuel
On peut être à la fois débutant en
éditeur de documents web tout en ayant une
expérience de la bureautique et d'un éditeur de
texte habituel. Le passage de l'un à
l'autre n'est pas forcément évident, car il faut
comprendre le mode de pensée de l'éditeur html.
Certaines
notions qui n'existent pas en
traitement de
texte habituel doivent être connues en html. Un
débutant en
éditeur web a besoin d'être initié
à ces
notions de base.
Le
parti que j'ai adopté est de rédiger un manuel
d'apprentissage (tiens,
maintenant on dit
"un "tutoriel" grâce aux anglais suivis par les
informaticiens
français), et non un mode d'emploi
(tiens, maintenant on dit une "aide" grâce etc...). Un mode
d'emploi est classé par rubriques.
Par exemple dans la rubrique "style", vous trouvez tous les styles
applicables à un texte, et dans la rubrique "tableau", vous
trouvez
toutes les fonctionnalités existantes s'y rapportant. Un
tutoriel comme
celui-ci vous prend
là où vous en
êtes, et vous amène progressivement vers de plus
hautes
compétences.
Mais me direz-vous, chacun en est à
des endroits différents, a une culture
différente selon ses expériences
passées. Évidemment. C'est pourquoi il faut
définir le
public
ciblé par un profil moyen. C'est ce que j'ai fait en haut
de la page: ce sont "les gens comme moi" !!!.
Une autre façon de dire comment j'ai conçu ce
tutoriel
est que j'y fais le récit de
ma propre découverte de NVu, au fur et à mesure
de la
construction de mon site web.
Note:
L'allusion aux aides et tutoriels ci-dessus n'est en aucune
façon une critique pour les tutoriels
concernant NVu déjà publiés auxquels
je rends hommage. Ils sont
véritablement le résultat d'un gros travail, et
c'est
grâce à eux que j'ai pu élaborer
celui-ci. Je me
propose d'apporter ma part à cet échafaudage
construit en
commun avec ce tutoriel ciblé sur d'autres personnes, pour
contribuer au succès de NVu, à sa
diffusion et à son apprentissage.
Le
fil conducteur de ce
manuel est d'accompagner le lecteur dans la réalisation de
sa page web, en commençant par la première
tâche, saisir du texte quand on vient d'ouvrir le
logiciel NVu. Puis en améliorant ce texte par des
styles. Les notions de base sont
donc
introduites progressivement, non pas dans la logique de leur
complexité, mais au fur et à mesure des besoins
pratiques, bien évidemment en commençant par
les plus simples. Par exemple,
n'apparaîtra
d'abord qu'une seule balise, puis un seul
mode de formatage. Et puis cela deviendra plus riche et plus
complexe, jusqu'à avoir les notions essentielles
à la réalisation de la page, avec un texte, des
images, un
en-tête, une barre de menu horizontale, et une liste
latérale. D'où
la progression suivante rapportée par la table des
matières:
Table
des
matières
Le fil conducteur de ce manuel
On peut être à la fois débutant en
éditeur de documents web tout en ayant une
expérience de la bureautique et d'un éditeur de
texte habituel. Le passage de l'un à
l'autre n'est pas forcément évident, car il faut
comprendre le mode de pensée de l'éditeur html.
Certaines
notions qui n'existent pas en
traitement de
texte habituel doivent être connues en html. Un
débutant en
éditeur web a besoin d'être initié
à ces
notions de base.
Le
parti que j'ai adopté est de rédiger un manuel
d'apprentissage (tiens,
maintenant on dit
"un "tutoriel" grâce aux anglais suivis par les
informaticiens
français), et non un mode d'emploi
(tiens, maintenant on dit une "aide" grâce etc...). Un mode
d'emploi est classé par rubriques.
Par exemple dans la rubrique "style", vous trouvez tous les styles
applicables à un texte, et dans la rubrique "tableau", vous
trouvez
toutes les fonctionnalités existantes s'y rapportant. Un
tutoriel comme
celui-ci vous prend
là où vous en
êtes, et vous amène progressivement vers de plus
hautes
compétences.
Mais me direz-vous, chacun en est à
des endroits différents, a une culture
différente selon ses expériences
passées. Évidemment. C'est pourquoi il faut
définir le
public
ciblé par un profil moyen. C'est ce que j'ai fait en haut
de la page: ce sont "les gens comme moi" !!!.
Une autre façon de dire comment j'ai conçu ce
tutoriel
est que j'y fais le récit de
ma propre découverte de NVu, au fur et à mesure
de la
construction de mon site web.
Note:
L'allusion aux aides et tutoriels ci-dessus n'est en aucune
façon une critique pour les tutoriels
concernant NVu déjà publiés auxquels
je rends hommage. Ils sont
véritablement le résultat d'un gros travail, et
c'est
grâce à eux que j'ai pu élaborer
celui-ci. Je me
propose d'apporter ma part à cet échafaudage
construit en
commun avec ce tutoriel ciblé sur d'autres personnes, pour
contribuer au succès de NVu, à sa
diffusion et à son apprentissage.
Le
fil conducteur de ce
manuel est d'accompagner le lecteur dans la réalisation de
sa page web, en commençant par la première
tâche, saisir du texte quand on vient d'ouvrir le
logiciel NVu. Puis en améliorant ce texte par des
styles. Les notions de base sont
donc
introduites progressivement, non pas dans la logique de leur
complexité, mais au fur et à mesure des besoins
pratiques, bien évidemment en commençant par
les plus simples. Par exemple,
n'apparaîtra
d'abord qu'une seule balise, puis un seul
mode de formatage. Et puis cela deviendra plus riche et plus
complexe, jusqu'à avoir les notions essentielles
à la réalisation de la page, avec un texte, des
images, un
en-tête, une barre de menu horizontale, et une liste
latérale. D'où
la progression suivante rapportée par la table des
matières:
1.
Je saisis mon texte dans le
corps de texte
J'ouvre
NVu.
J'ai devant moi un document blanc. En haut à gauche, le
curseur clignote.
Je
vous engage
à le faire vous aussi!
Figure 1-1
Par défaut, l'affichage est en mode
Normal. Nous le vérifions en constatant en bas
à
gauche que c'est l'onglet
qui
est
activé (figure 1-2).
Corps
de texte. Balise <body>
Je tape un
mot, n'importe lequel, par exemple:
bonjour
Afin
de mieux comprendre le fonctionnement
d'un
éditeur Web, je passe en mode
Source
en cliquant sur l'onglet dans la barre des modes d'édition
en
bas de page. Vous
aussi,
faites-le!
Figure
1-2. Barre des modes d'édition
Figure
1-3. Mode Source
En bas du texte, je
découvre ceci:
<body>
bonjour
</body>
Remarque:
Chaque fois que je vous montre quelque chose en mode Source, il est
présenté dans le style ci-dessus, avec fond mauve.
Les signes,
<body>
et
</body>
sont des codes,
appelés balises,
qui donnent des indications au logiciel qui affiche le texte.
La
balise <body>
indique le début du corps
de
texte, et la balise </body>,
la fin de ce corps. La partie comprise entre les deux est celle qui
sera
affichée par le navigateur. Par opposition, on trouve
au-dessus
la partie <head>
</head>
qui encadre des indications non affichées par le navigateur,
des indications de style par exemple, ou l'auteur, comme on le verra
dans d'autres sections (par exemple section
12).
Structurer
le corps
de texte en paragraphes. Balise <br> de fin de
ligne
Maintenant,
je commence
à taper du
texte, par exemple cette ligne que vous être en train de
lire. En tapant sur la touche ENTRÉE
(dite
aussi
"Retour chariot" par référence aux machines
à
écrire qui ont précédé les
microordinateurs), je fais un changement
de ligne.
Je peux donc créer mes paragraphes à
volonté en
changeant de ligne avec cette touche.
Si je tape
deux fois, cela
crée un ligne vide de séparation entre deux
paragraphes.
Puis je passe en mode Source
pour voir ce qui se passe, et je
vois ceci: (en ignorant la mise en forme des mots en gras)
<body>
Maintenant,
je commence à taper du texte, par
exemple cette ligne que vous être en train de
lire. En tapant sur la touche
ENTRÉE(dite aussi "Retour
chariot" par référence aux machines
à
écrire
qui ont précédé les
microordinateurs),
je fais un changement de ligne. Je peux donc
créer mes paragraphes à
volonté
en changeant de ligne avec cette touche.<br>
Si
je tape deux fois, cela crée
un ligne vide de séparation entre deux paragraphes.
<br><br>
Puis
je passe en mode Source pour
voir ce qui se passe, et je vois ceci:</body>
En
mode Source,
on voit qu'une balise <br>
a
été
ajoutée à la fin de chaque ligne. La balise
<br>
est un code signifiant FIN
DE
LIGNE.
Espace
blanc
insécable, attention
Il arrive qu'on veuille que l'espace blanc créé
par la barre d'ESPACEMENT soit
inséparable du mot
précédent et du mot suivant pour faire une
chaîne fixe. Par exemple dans l'expression "3 cm", je ne veux
pas
que "3" et "cm" soient
séparés par un retour automatique à la
ligne. Ou
encore quand, dans la typographie normale française, on met
un blanc entre un mot et la
ponctuation ( : ; ? ! ) qui le suit, comme dans "voici :" entre "voici"
et ":" (bien que je trouve que cette habitude de la typographie
française introduit des complications et n'est pas
particulièrement jolie. En ce qui concerne ce cas
précis, je préfère la
sobriété de la typographie anglaise, sans espace
entre le mot et ":" ou "?"). C'est ce qu'on
nomme un blanc insécable, ou blanc forcé. Les
blancs
insécables sont
comme des caractères
qui font partie du mot auquel ils sont accolés. Qu'est-ce
qu'un
mot? Un mot est
délimité par
un blanc ordinaire (sécable) avant et un après.
En mode Source,
pas de
problème, il suffit d'écrire son code:
Question
pour
l'espace insécable: En mode Normal,
je n'ai pas trouvé
de façon contrôlée de poser un blanc
forcé, comme par un exemple l'équivalent de
Word,
MAJ-ESPACEMENT. Il y a bien une
fonction dans le menu FORMAT>STYLE DE TEXTE qui s'appelle
INSÉCABLE, mais elle semble ne pas fonctionner. Elle ne pose
aucune balise de style.
Par
contre, j'ai constaté qu'en tapant deux ou plusieurs fois
sur
ESPACEMENT,
le premier blanc est ordinaire, le deuxième est
automatiquement insécable, puis le troisième
ordinaire, le quatrième insécable et ainsi de
suite de façon alternée.
Pour
poser un blanc
insécable, il est ainsi possible de taper deux
blancs avec la touche ESPACEMENT, puis
de supprimer le premier. Comme ceci: 2 cm.
Attention:
Il arrive que par le jeu des "copier-coller", on colle un blanc
insécable sans s'en rendre compte. C'est pourquoi lorsque
vous avez modifié, corrigé un texte, des mots se
trouvent accolés sans possibilité de coupure
pour retour à la ligne. Si cela vous arrive, il est probable
qu'un blanc
forcé s'est inséré là de
façon abusive. Supprimez tous les blancs entre ces deux
mots, et insérez un blanc tout neuf.
Style
de caractère
Résumons:
nous avons appris à saisir du texte
brut dans le corps de texte et à changer de ligne pour
créer des paragraphes. C'est suffisant pour que vous
puissiez préparer le texte de votre première page
web, et saisir quelques paragraphes.
Or maintenant, je veux agrémenter le texte, le
rendre plus lisible en lui appliquant des styles, des formats. Pour le
moment, je n'ai pas choisi ma police de caractère, et le
logiciel utilise ceux qui sont fixés par défaut.
Puis-je choisir le style par défaut du corps de texte? Oui,
on le verra plus loin.
Commençons par changer seulement des parties de texte, comme
je fais dans la phrase suivante. Certains mots sont en gras,
d'autres en rouge,
et
certains
titres sont en grosses
lettres.
Comment ai-je fait?
Il y a plusieurs façons. Ce tutoriel se voulant
progressif,
j'introduis les notions une
à une, au fur et à mesure des besoins et je ne
donne pas
l'ensemble des
possibilités
maintenant. Notons que si on veut avoir un panorama de toutes les
possibilités, il suffit de consulter l'Aide
dans la barre de menus: [Aide]>[Contenu de l'aide].
Je commence
donc par
la mise
en forme dans le fil du texte,
celle qui est la plus immédiate lorsqu'on est
par
exemple habitué à un traitement de texte.
Comme dans un traitement de texte habituel, après avoir
écrit le texte brut, je
sélectionne une partie de texte et je lui
applique un élément de style de la barre de mise
en forme en haut de la page, ou en me rendant dans le menu [Format] de
la
barre de menu.
Style
gras. Notion de balise. Balise
<span>
Je souhaite mettre un mot en
évidence en l'affichant en caractères gras. Pour
cela, je le
sélectionne avec la souris, et je clique sur le symbole B de la barre
de mise en forme, (cinquième case à
partir de la gauche).
De façon
équivalente, je peux utiliser la barre de menu:
[Format]>[Style de texte]>[Gras].
Il y a
également un équivalent avec le clavier,
indiqué dans le menu précédent, c'est
CTRL+B.
Figure
1-4. Barre de mise
en forme
Comment cette commande
est-elle traduite en mode Source?
Je choisis par exemple de
mettre un mot en évidence en le
sélectionnant
et en cliquant sur le symbole B
de la <span style="font-weight: bold;">mise
en forme dans le fil du texte</span>,
(cinquième
case à partir de la gauche.
Cela
crée un code <span> avant
l'expression mise en forme et un code </span>
à la fin.
Remarque: Il se peut qu'à la place de <span>,
vous ayez <b>.
Cela dépend du réglage des
préférences (voir paragraphe suivant).
Ces codes sont appelés des balises.
Elles ont une importance capitale en langage Source HTML. En effet,
votre
texte sera lu et affiché par un logiciel lecteur, le
navigateur
de la personne qui consulte votre site, ou l'éditeur web en
mode
WYSIWYG (ce qui veut dire "ce que tu vois est ce que tu obtiens) comme
par exemple le mode Normal de NVu.Ce lecteur lit le code Source de
façon linéaire et obéit aux codes.
Chaque balise de début <span
est suivie d'une déclaration
de style style="
">. Il est nommée une propriété,
ici "font-weight", c'est-à-dire l'épaisseur du
caractère, à laquelle on attribue une
caractéristique ou valeur
(bold, c'est-à-dire gras). Lorsque le logiciel lecteur
rencontre la balise de
début <span>, il
sait qu'il doit afficher ce qui suit selon ce qui est
déclaré dans style=""
, jusqu'à ce
qu'il rencontre la balise de fin </span>.
Les
balises sont la base du langagee source html. Tout est basé
sur
elle, et le reste de ce tutoriel consiste à peu
près
à apprendre à utiliser les différents
types de
balises et à leur attribuer des caractéristiques
diverses.
Eléments
html. Balises <b>,
<i> et <u>.
Préférences
Ce paragraphe n'est pas utile ici pour construire votre page web. C'est
une subtilité. Cependant, si les
préférences ne sont pas celles par
défaut de la version 1.0, il se peut qu'au lieu des balises
<span>, vous ayez trouvé la balise <b>.
D'autre part, en lisant des documents html créés
par d'autres, vous allez rencontrer ces balises <b>.
Aussi, voyons de quoi il s'agit et comment on peut revenir à
la balise <span>.
La balise <b> code directement le style gras (bold) sans
qu'il est besoin de lui indiquer la propriété
concernée. C'est ce qu'on appelle un attribut html. C'est
direct. D'autres balises codent d'autres attributs: <i>
et <u> codent pour l'italique et le souligné,
par exemple, et la balise <font> donnera les indications
concernant les polices et les couleurs.
Alors quel est l'intérêt de la balise
<span> qui semble plus compliquée? Cela
apparaîtra par la suite,
comme la possibilité d'extraire des styles pour
créer des classes et fabriquer des feuilles de style.
Choisissons donc l'emploi des balises <span> si ce n'est
déjà en usage par défaut.
Dans la barre des menus, cliquer sur
[Outils]>[Préférences].
S'ouvre alors la fenêtre d'option, section
"général". Dans la fenêtre,
assurez-vous que soit cochée la ligne "Edition avec des
feuilles de style" (figure 1-5).
Figure 1-5.
Préférences, édition avec des feuilles
de style
Styles
italique et
souligné.
Si
je veux maintenant que le mot soit écrit en italique
ou en souligné,
je le
sélectionne et j'utilise le symbole I
et le symbole U de la
barre
de mise en forme.
Alternativement, je peux
utiliser la barre de menu:
[Format]>[Style de texte]>[Italique] ou
[Souligné], ou les équivalents avec le
clavier,
CTRL+I, CTRL+U.
Ces commandes sont traduites en mode
Source par les balises <span>
et </span> suivies de la
déclaration de style d'une part, font-style:
italic;
et text-decoration: underline;
d'autre part.
Si je veux maintenant que le mot
soit écrit en
<span style="font-style:
italic;">italique</span>
ou en <span
style="text-decoration: underline;">souligné</span>,
Balises
SMALL et BIG
Dans la barre de mise en forme du
texte (fig. 1-4), à gauche des symboles
précédents, on trouve deux fonctions
pour diminuer la taille des
caractères (icône A,
troisième case) ou l'agrandir
(icône A).
En mode Source,
cela pose
les
balises <small> et <big>,
ainsi que leurs balises de fin correspondantes dans lesquelles se
trouve en plus le signe /. Notons en passant qu'elles ne sont pas
intégrées à la déclaration
de style d'une balise <span> et sont donc des
éléments HTML.
La commande
équivalente par le menu est
[Format]>[Taille]>[Plus petite] ou [Plus grande], et
l'équivalent clavier CTRL+- et CTRL++.
Remarquons
que la barre d'outils de mise en forme ne permet pas
d'afficher directement une valeur absolue de la
taille de police
en
nombre de points comme dans un traitement de texte habituel. C'est
parce
qu'il existe
une grande variété d'unités de taille,
absolues ou relatives.
On aura accès à ces unités lorsqu'on
aura
abordé la notion
de boîte et de style intégré un peu
plus loin.
Visualisation
des
balises
On peut visualiser les balises grâce au
mode d'édition Balises
HTML. Dans la barre des modes d'édition (figure
1-2), je clique
sur l'onglet Balises
HTML. Par rapport au mode Normal,
on voit en plus des icônes indiquant l'existence et le
positionnement des balises, et donc l'application d'un style. Dans le
texte présent, je vois donc les indicateurs des
balises SPAN, BIG, SMALL, B, et d'autres que j'ai utilisés
pour cette
présentation et que nous apprendrons à
connaître plus loin.
La
balise BR
n'est pas
représentée.
Attention, seule
figure la balise de début. Alors comment
reconnaître la portion de texte qu'elle gouverne? En cliquant
dessus. Cela a pour effet de sélectionner cette portion,
comme on peut le constater dans la figure 1-5 avec l'expression "barre
de mise en forme".
Figure 1-6. Affichage en mode Balises HTML
La balise BR
n'est pas
représentée.
Choix des
couleurs du texte. Les trois niveaux de déclaration de style
La
couleur du texte actuel est montrée en bas à
droite,
avec son code hexa qui est son nom dans un langage propre.
La couleur du texte ets noire par défaut. Pour la modifier,
je sélectionne la portion de texte concernée et
je clique sur le carré
supérieur des couleurs de la barre de mise
en forme (figure 1-4) dans la deuxième case. Cela ouvre la
fenêtre [Couleur
du texte] (fig. 1-7).
Cette
fenêtre est également
accessible par la barre de menu [Format]>[Couleur de texte].
Figure 1-7. Choix d'une couleur de
texte 
La couleur actuelle du texte
où se trouve le curseur est montrée en bas
à
droite (dans le cas de la figure 1-7, c'était
l'expression ci-dessus "Pour
la modifier"
en rouge). Figure également
son code hexa qui est son nom dans un langage codé, et
éventuellement son nom si elle fait partie des quelques
couleurs qui ont reçu un nom précis.
Pour
appliquer une nouvelle couleur, il faut d'abord la choisir
la couleur.
Il est possible de
- utiliser la dernière couleur
utilisée dans une
couleur de texte, qui est rappelée au-dessus. On clique sur
la case et la couleur s'affiche dans le carré.
- sélectionner
une couleur prédéfinie parmi les couleurs de la
palette en haut à droite, en cliquant dessus
- définir
une couleur par ses trois coordonnées, et
ceci
dans les deux systèmes usuels, RGB ou TLS, en bas
à
gauche. Je peux aussi partir d'une couleur donnée
et la
modifier
en changeant la valeur des coordonnées grâce aux
flèches.
- faire un
copier-coller du code hexa utilisé ailleurs
Lorsque
la couleur choisie et affichée dans le carré est
la bonne, je clique sur OK pour l'appliquer.
En mode
Source,
on constate que la balise de début est
suivie d'une déclaration de style "color"
qui encadre
le
texte en couleur. Elle annonce la
couleur
du texte choisie par son
code RGB "255, 0, 0":
l'expression ci-dessus "<span style="color:
rgb(255, 0, 0);">Pour
la modifier</span>"
en rouge). Figure également
On remarque donc
que le mode de commande de style
comporte trois
niveaux:
- une balise,
<span> indique que
c'est le texte suivant qui va être
concerné.
- une
déclaration d'attribut, "color", indique
la nature de l'attribut de cette police qui va être
fixé. C'est la
couleur, et donc pas la taille, ni l'épaisseur
- enfin
la valeur fixée à cet
attribut, le rouge
Si une couleur est déjà appliquée et
que je n'en veux pas, cette
fenêtre n'offre pas le choix "aucune couleur".
Aussi faut-il simplement
effacer le code de la case hexa et cliquer sur OK. Cela a pour
conséquence d'appliquer la couleur de texte par
défaut,
sans ajouter un autre code inutile.
L'équivalent en attributs HTML (voir paragraphe "éléments html")
est la balise <font> qui encadre le
texte en couleur. Elle est
suivie d'une déclaration de style "color" qui annonce la
couleur
du texte choisie par son
code hexa "FF0000".
Systèmes
RGB et TLS de
codage des couleurs
Le
système le plus intuitif pour choisir un
ensemble de couleurs dans une page est le système TLS, qui
code
une couleur par les trois caractéristiques: teinte -
luminosité - saturation. La
Teinte
est la couleur parmi la palette de l'arc-en-ciel, la Saturation
c'est
quand elle est pure et la désaturation quand elle tire vers
le
gris, enfin la Luminosité
est la mesure du noir au blanc.
Par
exemple, si vous avez une couleur claire et que vous voulez changer
d'ambiance, vous pouvez garder exactement la même
clarté
et changer la teinte. Inversement si vous voulez un ensemble de 3 ou 4
couleurs dans les mêmes teintes, vous agissez seulement pour
l'obscurcir ou l'éclaircir. Le code RVB aboutit
aux
mêmes couleurs avec trois autres coordonnées, le
rouge, le
vert,
le bleu. On peut exprimer une couleur soit dans un système,
soit
dans l'autre. Dans la fenêtre de couleur de texte, les deux
codes
sont donnés et je constate que si je modifie l'un,
l'autre est modifié en conséquence.
Proposition
de
modification: Malheureusement,
la
présentation
qui est incluse dans NVU ne respecte pas l'échelle des
luminosités intuitives en TLS car elle
s'étale du noir à la couleur pure
et ne se
prolonge pas vers le blanc comme il est fréquent et commode
(voir mon
article
en
préparation sur les
couleurs). Pour
aller vers le
blanc, il faut ensuite désaturer. Deux petits logiciels qui
sont basés sur cette présentation sont
proposés dans la section de fin de ce document: "Aller
plus loin".
Choix de la
couleur du
fond. Surligner
Dans
la barre de mise en forme, on trouve de plus un carré
sous-jacent au précédent. Contrairement
à quoi on pourrait s'attendre, il ne commande pas la couleur
de
fond du texte, mais la couleur du fond de la page entière.
Anticipant
sur la
notion de bloc que j'aborderai dans la section suivante, j'indique que
la couleur de fond consignée par le carré
s'applique plus précisément à
l'ensemble
du bloc dont il fait partie. Comme je n'ai encore
créé
aucun bloc, il va s'appliquer au seul bloc existant par
défaut
qui est la page entière.
Pour
appliquer une couleur de fond à une portion de texte, ce qui
revient à le surligner,
on actionne l'icône qui se trouve juste à droite
de la
précédente et qui représente un feutre
de
surlignage (figure 1-4).
<span
style="background-color: rgb(255, 255, 51);">Pour
appliquer une couleur de fond à une portion de texte, ce
qui
revient à le surligner, on actionne
l'icône qui se trouve juste à droite de la
précédente et qui
représente un feutre de surlignage</span>
Je constate effectivement que surligner, c'est attribuer une couleur de
fond.
Anomalie
pour
le surlignage:
la mémoire de la dernière couleur
utilisée ne survit pas à la fermeture du document.
Police
de caractère.
Je
peux également changer la police de caractère qui
est
affichée par défaut, par la barre de menu, ou par
la
barre de mise en forme.
[Format]>[Police] puis choisir .
- Par la barre de mise en forme
Le menu déroulant se
trouve dans
la case qui affiche [Largeur variable]. Je
sélectionne un texte et je lui applique une autre police,
comme celle-ci.
Figure
1-8. Case de choix de police
En mode Source,
la commande est codée par la déclaration font-family
suivie de la valeur Comic
Sans MS;.
<span style="font-family:
Comic Sans MS;">Je
sélectionne un texte et je lui applique une autre police,
comme celle-ci. </span>
L'équivalent en attribut HTML est la balise <font>
qui signifie "police", suivie de l'attribut "face"
suivi du choix de la
police. On remarque qu'il y a également trois niveaux.
Personnaliser
les barres d'outils
La barre de mise en forme comporte deux lignes d'outils, qu'il est
possible de modifier par le menu [Affichage]>[Barres
d'outils] de la barre de menu.
Pour l'afficher ou non:
[Affichage]>[Barres
d'outils]>[Mise en forme].
Bien
évidemment, on peut faire de même avec les autres
barres: principale, modes d'édition, barre
d'état.
Pour modifier la présentation
Menu [Affichage]>[Barre d'outils]>[Personnalisation de la
barre
d'outils]>[Barre d'outils de mise en forme], ou par
le clic
droit
de la souris lorsque le pointeur se trouve dans la barre de mise en
forme ([Personnalisation de la barre d'outils]). On accède
à la fenêtre suivante:
Figure 1-9. Personnalisation de la
barre
d'outils
C'est
une boîte de stockage d'icônes d'outils
supplémentaires. On peut prélever un outil et le
transporter dans la barre. Ou bien l'inverse, enlever un outil de la
barre dont on ne se sert pas, et le déposer dans cette
fenêtre. Exemple ici de l'outil de police de
caractère: avec la souris,
placer le pointeur sur la case [Largeur variable] de la barre de mise
en forme, et, en maintenant enfoncé le clic
gauche de
la souris, transporter cette case dans la fenêtre
ouverte, pour obtenir le résultat de la figure 1-9. Elle a
disparu de la barre de mise en forme.
Lorsque cette fenêtre est ouverte, il est
également possible de transporter un outil d'un
endroit de la barre à un autre, d'une ligne à
l'autre par exemple.
On peut faire de même avec la barre d'outil
principale.
2.
Boîtes en ligne. Style interne. Classes de style
Mettre
en forme un texte
encadré par une balise
de
début et une balise de fin, cela revient
à le mettre
dans une boîte
fictive comme celle-ci, délimitée
par
les balises <span>
ou éventuellement d'autres balises comme <b>
et <i> et située dans le courant
d'une
ligne de texte. C'est
à cette boîte que sont attribuées les
différentes caractéristiques que
nous avons vues: police, couleur, taille, etc. Dans cette section, je
montre que la boîte existe vraiment, que je peux lui donner
un cadre et
quelquefois des dimensions, la décorer en sorte. Comme ceci
par exemple:
boîte
fictive comme celle-ci
Le cadre que j'ai ajouté
ci-dessus met bien la boîte en évidence. La notion
de
boîte
est importante dans la gestion des styles et on va la retrouver et la
développer par la suite.
Notion
de boîte. Sélection d'une boîte
La
boîte est un véritable objet
que je peux sélectionner pour la copier, la coller, la
modifier, etc. Je
peux le faire de la façon habituelle avec le glisser de la
souris ou le clic+MAJ. Mais je peux aussi utiliser une
méthode qui se sert des balises, comme expliqué
ci-après. Et là, nous entrons dans la
spécificité de l'éditeur web.
En mode Normal,
je place le
curseur dans la boîte, c'est-à-dire
dans le
texte
qui a été formaté: boîte
fictive comme celle-ci. Essayez!
Alors, apparaît dans
la barre
d'état, tout en
bas de la page, une nouvelle indication.
Ordinairement, on trouve écrit sur la gauche
<body>.
A la
droite de cette indication, il y a maintenant <span>.
C'est l'identifiant de la balise du texte formaté,
qu'on
appelle le sélecteur.
Si je clique dessus, alors la
boîte est
sélectionnée.
C'est une autre
façon de mettre la boîte en évidence
(figure 2-1). La
boîte est un véritable objet
que je peux sélectionner pour la copier, la coller, la
modifier, etc.
Figure 2-1. Sélecteur de
balise dans la barre d'état
Styles
internes
Pour agrémenter la boîte, je vais lui ajouter une
bordure,
des marges et une couleur de fond. Pour cela, il faut qu'elle
existe déjà, avec une balise SPAN ou BIG, par
exemple avec un
texte formaté en gras:
boîte
fictive comme celle-ci.
A nouveau, je place le curseur dans la boîte, le
sélecteur <span>
apparaît donc dans
la barre
d'état. J'amène
le pointeur de ma souris sur ce sélecteur, et j'ai alors
accès
à un nouveau menu contextuel avec le clic droit de la
souris. Je vais
explorer la rubrique [Styles
internes].
Figure
2-2. Menu contextuel des styles internes
Bordures
Je
vais dans [Styles
internes],
et
je clique sur [Propriétés
des bordures]. Là,
je peux choisir: même bordure
sur les 4 côtés, ou des bordures
différentes, pas
de bordure, le style du trait de bordure, l'épaisseur et la
couleur
du
trait.
Cela donne ceci: boîte
fictive comme celle-ci.
Marges internes et marges externes
Je continue
à
exploiter les possibilités des styles internes
proposés
par le menu contextuel de la figure 2-2.
Pour éloigner le cadre du texte, je vais dans [Style
interne]>[Propriétés
de
la boîte],
rubrique [Espacement],
et
j'indique par exemple 3 pixels à
gauche, à droite et 1pixel en haut. L'espacement est un
écartement
du trait par rapport au texte, ce que les encadreurs pourraient nommer
la marie-louise.
Il y a aussi la rubrique [Marges]
qui
fixe un espace autour du cadre. Fixer une marge dans une
boîte située
sur une ligne n'a pas vraiment de sens, mais on peut
éventuellement
fixer
une marge gauche et droite. Les rubriques des dimensions
[Hauteur], [Largeur] ne sont pas opérationnelles. Elles ne
fonctionneront que dans les boîtes de blocs que nous
étudierons plus
loin.
Agrémenter
une
boîte
une couleur de fond. Surligner
J'ajoute une
couleur de fond - ce qui est équivalent à
surligner - avec [Propriétés
du fond].
J'accède
à la palette des couleurs en
cliquant sur le bouton situé sur la droite de la
fenêtre. Le fond de couleur s'ajoute en surimpression au fond
du corps de texte, si toutefois j'en ai défini un, ce qui
n'est
pas encore le cas ici. Voici le texte précédent
avec
cadre, espacement et couleur de fond.
boîte
fictive comme celle-ci
Style du texte en
style
interne
Enfin, on peut modifier les polices, leur style, la casse, et
fixer leur taille en points, en pixels ou d'autres unités,
avec [Propriétés
du texte].
Unités
de taille
de
police. Les em
La taille de police et la hauteur de ligne peuvent être
exprimées en diverses unités, y compris les
points,
et les pixels, mais aussi des pourcentages et des "em".
S'il s'agit de
la hauteur de ligne ou d'autres propriétés qui ne
sont
pas la taille de police, l'em
exprime le
pourcentage de sa taille par rapport à la taille de la
police.
S'il s'agit de la
taille de police elle-même, le pourcentage de l'em a rapport
à la taille de
police du bloc qui contient le texte. Par exemple, ici, de la taille du
corps de texte. Il doit être
exprimé
à la façon anglaise avec un point et non une
virgule: 1.5
em.
Déclarations
de style interne. Style
intégré
Où ces nouvelles
indications de style interne se
trouvent-elles inscrites en HTML? Voyons ce qu'il en est pour la
boîte boîte
fictive comme celle-ci en mode Source:
Voyons ce qu'il en est pour la
boîte
<span style="border-style:
solid; border-color: rgb(204, 153, 51); font-weight: bold;
padding-left: 3px; padding-right: 3px; background-color: rgb(255, 204,
51); font-family: Verdana;">boîte
fictive comme celle-ci</span>
Je
peux
constater que la balise de début <span
est suivie d'une déclaration
de style style=" ">
. Toutes les déclarations de style ont
été
inscrites dans style="
". Il est indiqué qu'une ou
plusieurs propriétés
(la
bordure, la couleur du trait de bordure, l'épaisseur du
texte,
l'espacement à gauche, l'espacement à droite, la
couleur
de fond, la police) de la portion de texte située
entre
la
balise de début <span
style="
"> et la balise de fin
</span>
doivent avoir telle caractéristique ou telle valeur
(trait plein, couleur (204, 153, 51), gras, 3 pixels, Verdana).
L'ensemble des propriétés regroupées
sous la déclaration style=" "
est appelé Style
interne dans le menu.
Le style interne est une composante du Style
intégré.
Intégré
à quoi?
à la
boîte, par la balise de
début.
Nous verrons dans la
section 10
que le style
intégré comprend des styles
internes
et des attributs html.
Le style intégré est vraiment une
spécificité des éditeurs web.
Substituer
une balise par une autre
Il est possible de
substtuer une balise par une autre: remplacer <span> par
<b> éventuellement. On peut bien sûr
passer en mode Source
et inscrire directement <b> à la place de
<span>, et </b> à la place
de </span>. Mais il existe un moyen astucieux en
mode Normal
qui fait appel à une autre fonction du menu contextuel de
l'indicateur de balise et qui s'appelle Modifier la balise.
Placer le pointeur sur l'indicateur de balise <span> dans
la
barre
d'état et faire apparaître le menu contextuel avec
le clic
droit de la souris (figure 2-2). Cliquer sur [Modifier la
balise].
L'apparence de l'indicateur dans la barre d'état change,
indiquant qu'il
est modifiable. Taper "b" et appuyer sur la touche
"Entrée". C'est fait.
Emboîtement
des boîtes. Conteneur. Notion
d'héritage
Et maintenant, que se passe-t-il si à l'intérieur
d'une
boîte, je surajoute un style sur une partie de cette
boîte?
Par exemple, il
y a un texte formaté en vert, et une partie de ce texte est
en
gras.
une
partie en couleur, et dedans un
mot en gras.
J'ai ajouté des bordures pour visualiser les
boîtes qui sont
emboîtées l'une dans l'autre. Vous en aurez une
meilleure idée si vous observez l'affichage en mode Balises HTML.
On y voit l'emplacement des balises du mode Source.
Une première
balise ouvre la première boîte. Une
deuxième balise
ouvre la sous-boîte. Les balises de fin ne sont pas
représentées. En mode Source,
la sous-boîte est ensuite
fermée par une balise de fin, et enfin la
première
boîte est fermée à son tour. On dit que
la boîte contient la sous-boîte.
Figure 2-3. Emboîtement
des boîtes en mode Balise
HTML
La notion de boîte
contenante
est évidente, mais elle est essentielle et va souvent
intervenir. On a l'habitude de l'appeler le conteneur. Lorsqu'on
voudra affecter
un style à une partie de texte ou un paragraphe, on se
posera
souvent la
question: quel est le conteneur de ma boîte? Quel style lui
est
lié? En effet la sous-boîte hérite
des styles de sa boîte conteneur, sauf modifications. Dans
l'exemple ci-dessus, la sous-boîte hérite de la
couleur de texte verte. Par contre le style de lettre est
modifié explicitement en gras.
La notion de boîte est une analogie qui reste
limitée, car il y a une grande différence
avec des boîtes de chaussure (outre les 3
dimensions de la boîte de chaussures): nos boîtes
ont un sens, une orientation.
Elles ont un
début et une fin,
dans le sens de
l'écriture.
Je compare cela au déroulement des jeux olympiques qui se
tiennent dans une grande
ville. Avant le début des jeux, il y a une ville
où la vie se déroule de façon banale,
avec ses activités économiques, associatives, de
loisirs, etc... C'est le corps de texte. Remarquez que dans cette vie
ordinaire, il y a des changements de ligne: les changements de jours...
Et puis, un jour particulier, a lieu la cérémonie
d'ouverture: c'est la balise de début. La
cérémonie de fermeture posera la balise de fin.
Entre les deux, un style particulier, dont les
caractéristiques sont fixées par le
Comité de mise en forme. Cependant, certains moments
bénéficient d'un autre style, les remises de
prix. Elles commencent à une certaine heure en
présence des officiels (ouverture d'une
sous-boîte) et se termine selon un protocole bien
établi (fermeture de la sous-boîte). A l'une de
ces remises de prix, il y a même un panache particulier. Le
chef de l'Etat est venu y assister en personne. On met l'accent - on
dira l'emphase
-
sur celle-ci
par un ajout de style (voir
[Format]>[Style de texte]>[Mise
en évidence]).
C'est une sous-boîte avec un style modifié par
rapport aux autres. L'orientation des boîtes est bien
évidemment celle du temps.
D'où une autre question: si je veux que toutes mes
sous-boîtes aient un style identique de remise de prix,
est-ce
que je dois à chaque fois redonner
les indications aux boîtes? N'y a-t-il pas moyen de copier le
style d'une boîte pour l'appliquer à une autre?
Oui, et cela introduit la notion de classe,
que je vais explorer plus loin.
Hiérarchie
des
emboîtements dans la barre d'état. Boîte
<body>
Je place le curseur dans la sous-boîte "un mot" de
l'expression
suivante:
une
partie en couleur, et dedans un
mot en gras.
Faites-le
vous-aussi.
Figure 2-4
Dans la barre d'état apparaissent trois sélecteurs
de
balises, qui correspondent aux trois boîtes
emboîtées
dans
lesquelles est situé le curseur, indiquées de
façon hiérarchiques, de la plus
générale et
vaste à gauche, à la plus particulière
à
droite.
Si je clique sur le <span>
de droite, alors je
sélectionne
la sous-boîte.
Figure 2-5
Si je clique sur le deuxième <span>
vers la
gauche, je
sélectionne la boîte qui contient la
sous-boîte.
Figure 2-6
Enfin, si je clique sur la balise <body>,
je
sélectionne
le corps de texte en entier qui contient toutes les boîtes.
Et
oui, le corps de texte
est lui aussi
une boîte!
Boîte
<body>. Fixer
le style du
corps de
texte avec un style interne
Enfin, si je clique sur
la balise <body>,
je
sélectionne
le corps de texte en entier qui contient toutes les boîtes.
Et
oui, le corps de texte
est lui aussi
une boîte! Alors, puisqu'une boîte est
associée au
corps de texte, je
vais en profiter pour lui
appliquer un style interne.
Le corps de texte, c'est la vie de tous les jours avant et
après les jeux. Il constitue la grande
boîte qui contient toutes les autres. C'est la
boîte racine.
Je peux m'en assurer en voyant la présence de son
sélecteur
<body> dans la
barre d'état quel que soit l'endroit où se trouve
le curseur. Et comme les autres boîtes, je
peux la sélectionner en cliquant sur ce
sélecteur.
Je peux aussi lui appliquer les styles internes de
boîte. En survolant
le symbole <body>, j'ai accès au menu
contextuel [Styles internes] qui me
permet de régler à ma convenance la police, les
bordures, la couleur de fond et les marges. Voilà enfin
comment changer le style par défaut s'il ne nous
plaît pas!
Par
défaut, le corps de texte comporte des marges.
Il est parfois indiqué de les mettre à
zéro (voir section 7 lors du positionnement des blocs
DIV). Ou bien on
peut avoir envie de la fixer à une valeur plus grande.
La couleur du fond de <body> est accessible de
façon
équivalente par le menu [Format]>[Couleur et fond de
page]. Note:
la couleur de fond
du corps de texte s'applique sur tout le champ visuel de
l'écran, pas seulement à
l'intérieur des bordures.
Où vont se loger toutes ces indications de style?
Eh bien
de
la même manière que pour les balises SPAN, on les
retrouve
dans les déclarations de style incluses dans la balise
d'ouverture <body>,
tout
au début du texte. Vous vous souvenez?
C'est
la première balise avec <br> qu'on a vu
écrite en
Mode HTML.
<body style="color:
rgb(0, 0, 0); background-color: rgb(255, 255, 204);">
On pourrait en rester
là en ce qui concerne la
définition du style du corps de texte, mais il y a une autre
méthode qui est meilleure et qui sera
étudiée plus loin avec la notion de style interne
à un sélecteur dans l'éditeur de style.
Sortir
d'un style ou d'une boîte
Je tape du texte, dans le format de paragraphe "corps de texte". Et
puis, je
décide de continuer à saisir en style gras. Comme on l'a vu plus haut,
je clique sur le
symbole B
dans la barre de mise en forme. Pour
interrompre ce style, il suffit de cliquer à nouveau sur le
symbole. Et je continue en
corps de texte. Cela a posé
la balise de fin.
Autre cas: je suis dans des boîtes
emboîtées,
et je
veux
sortir de toutes les boîtes à la fois? J'ai la
possibilité de retomber au niveau "Corps de texte", soit par
le
menu [Format]>[Annuler
le style de
texte], soit par le raccourci
clavier: CTRL+MAJ+Y
Je peux également faire les même
opérations sur une
partie de texte déjà saisie: enlever un style ou
enlever
tous les styles (jusqu'au niveau corps de texte). Il suffit de
sélectionner la partie, et d'effectuer les mêmes
manoeuvres.
Un autre procédé astucieux est de positionner le
curseur,
de survoler le sélecteur de la barre d'état, et
dans le
menu contextuel, de sélectionner [Supprimer la balise].
Créer
un
style de classe. Partie <head>
Imaginons maintenant que j'ai plusieurs boîtes auxquelles je
veux
donner le même style, comme plusieurs remises de prix
à
l'intérieur des jeux olympiques. Comment faire pour ne pas
répéter toujours les mêmes indications?
Et bien, je
vais regrouper les déclarations de style dans un ensemble
qu'on
appelle une classe,
c'est-à-dire, un style générique. A
cette classe,
je vais donner un nom, afin de faire appel à elle quand je
veux.
Je reviens à l'exemple ci-dessus, que je place à
nouveau
ici par un
copier-coller: boîte
fictive comme celle-ci
Je place le curseur dedans afin de faire apparaître le
symbole
<span> dans la barre d'état. En le survolant,
je fais
apparaître le menu contextuel avec le clic droit de la
souris. Je
clique sur [Styles internes] >[Extraire
et créer un
style
générique].
Figure
2-7
La fenêtre [Créer un style
générique] s'affiche. Enlever la
sélection [...cet élément
uniquement] et
cocher [...tous
les éléments] et [de classe]. Enlever
également la sélection [De même type].
De même type: sous-entendu
que cette
balise <span>. Dans le cas
contraire, on
ne
créerait la classe que pour les
éléments
<span>. Je souhaite que cette classe puisse s'appliquer
où je veux. Ensuite, il suffit de donner un nom à
la
classe de style: "boite" (en évitant tout accent dans
l'orthographe).
Qu'est-ce que ça change en HTML?
D'une part, je peux observer que les déclarations de style
intégré ne
sont plus dans la balise <span>. A la place, une
indication
renvoie
vers la
classe "boite".
un copier-coller:
<span
class="boite">boîte fictive
comme celle-ci</span><br>
Quant à la classe "boite", elle est enregistrée
dans
la
partie <head>
située en haut de la page HTML.
<head>
<style
type="text/css">
*.boite
{
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: rgb(204, 153, 51);
border-right-color: rgb(204, 153, 51);
border-bottom-color: rgb(204, 153, 51);
border-left-color: rgb(204, 153, 51);
font-weight: bold;
background-color: rgb(255, 204, 51);
padding-top: 1px;
padding-left-value: 3px;
padding-left-ltr-source: physical;
padding-left-rtl-source: physical;
padding-right-value: 3px;
padding-right-ltr-source: physical;
padding-right-rtl-source: physical;
}
</style>
</head>
L'éditeur
CSS
de
feuille de style interne
Cette modification de l'emplacement des
déclarations de
style, qu'est-ce que ça change? Le style "boite" a
été extrait de son petit coin au sein d'une
balise de
boîte ou de paragraphe, et il est maintenant disponible quand
je veux pour tout ce que je veux pour la page entière dans
les déclarations de style de la partie
<head>.
L'ensemble des
déclarations de styles
consignées dans cette partie <head> est ce
qu'on nomme la feuille
de style
interne.
Attention: Feuille de style interne
parce qu'il existe aussi des feuilles de style externes. C'est pourquoi
la
feuille de style de la partie <head> est
appelée interne,
interne au document. Ne
pas confondre cette feuille interne avec le style interne
dans le menu contextuel, interne à la balise,
c'est-à-dire intégré.
Je
rappelle que les styles intégrés des balises sont
soit
des styles internes (annoncés par style =" "),
soit des
attributs html, non encore étudiés. Pour ne pas
faire
confusion, je parlerai de style intégré et de
feuille
interne.
Y a-t-il un moyen de voir cette feuille de
style sans
passer par le mode Source? Bien sûr
grâce à l'éditeur
de cette fameuse
feuille de
style. [Outils]>[Éditeur
CSS].
Faites-le:
La fenêtre de
l'éditeur
s'affiche. Dans la rubrique [Feuilles
et règles], en haut
à gauche, je clique sur le + de [Feuille
de style
interne]. On y
voit bien répertorié le style ".boite". Un point
(.) s'y
est ajouté, indice spécifique d'une classe.
Figure 2-8
Créer
une
classe limitée aux balises de même type
Et si j'avais
coché non seulement [...tous
les éléments] et [De classe] comme au-dessus,
mais aussi
[De même
type]?
Puisque j'extrais le style d'une boîte <span>,
cela
voudrait dire que j'aurais créé la classe pour
l'appliquer seulement aux
éléments
<span>. J'aurais créé la classe
"span.boite".
En fait, créer la classe ".boite" et l'appliquer
ensuite à
l'élément <span> que je
sélectionne comme j'ai fait ci-dessus est
équivalent. Cela donne <span class="boite">.
Reste à savoir comment appliquer cette classe à
un
élément donné.
Appliquer
une classe
de style à un texte sélectionné
Appliquer la classe définie à un texte
sélectionné est
vraiment immédiat. Je sélectionne le texte ou le
paragraphe sur lequel je porte l'attention. Par exemple un mot,
"bonheur". La classe est maintenant accessible par la barre de mise en
forme
dans le menu déroulant de la première case
à
gauche de la deuxième ilgne (figure 2-9). Je
sélectionne la ligne "boite". Voici
le
résultat: bonheur
Figure 2-9
Si je place le curseur dans "bonheur",
j'ai
accès au sélecteur <span> dans la
barre
d'état. Ainsi, une balise <span> a
été placée automatiquement
en appliquant une classe.
Ensuite,
j'ai accès au
menu contextuel de la barre d'état comme on l'a vu plus haut
pour les balises <span>, mais aussi <b>,
<i>, etc..
Je peux donc voir la rubrique [Styles internes]
associée.
Je constate qu'il n'y a
aucune indication dans la fenêtre
[Propriétés de la
boîte], par exemple. Bien évidemment puisqu'elles
ont
été extraites et propulsées dans la
feuille de
style. Une classe
n'est pas un style intégré à la
balise.
Cependant je peux utiliser cette
fenêtre
de style interne pour
modifier localement cette boîte "bonheur" sans modifier la
classe qui est un style générique. Les
indications que je vais inscrire de façon locale seront
prédominantes par
rapport aux indications générales de la classe. Le particulier l'emporte sur le
plus
général.
Pour enlever le style de classe, recliquer dessus dans le menu
déroulant, ou
supprimer
la balise dans le menu contextuel si elle ne contient pas d'autres
propriétés de style.
Modifier
le style d'une
classe avec l'éditeur de feuille de style
Inversement, si je veux que la modification s'applique de
façon uniforme à toutes les parties de texte
auxquelles
j'ai attribué le style ".boite", alors je dois le faire
à
partir de l'éditeur
CSS.
[Outils]>[Editeur
CSS], puis
je clique sur le + devant [Feuille de
style interne]. Je sélectionne la classe ".boite" , et
toutes
les caractéristiques de cette
classe
s'affichent dans la partie droite, associées à
l'onglet
[Général].
Figure
2-10
Avec les autres onglets, je peux modifier les
caractéristiques. Ils sont directement analogues aux
menus des styles intégrés [Styles internes] dans
la barre
d'état: propriétés du
[Texte],
du [Fond], des [Bordures] et de la [Boîte] (et [Audio] que je
n'aborde pas). Puis cliquer sur le bouton "[Fermer] en bas à
droite.
3.
Création de
blocs "paragraphe"
Avec ce que nous avons appris au-dessus, 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 page de
présentation au début 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 (première case à gauche: "corps de
texte"). 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 (première case à gauche: "corps de
texte"). 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 le 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électionne [Paragraphes] dans le
menu déroulant des formats de paragraphes de la barre de
mise en forme (première case à gauche:
"corps de
texte"). C'est-ce que je vais effectuer pour le paragraphe que vous
lisez, après l'avoir recopié pour voir la
différence. </p>
En mode Balises
HTML, je constate que le
paragraphe est identifié par le symbole de balise P.
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.
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, et 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. Même si on peut
remplir les
rubriques des propriétés de boîte pour
une
boîte en ligne, elles 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 formaté comme tel. É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].
Question:
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>
(et quelque fois en plus un caractère!).
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].
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.
- On peut avoir envie d'appliquer un style particulier
à un
seul paragraphe.
- On peut vouloir donner un style spécial
à toute
une classe de paragraphes (on utilisera alors la notion de classe).
- 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. En suite, 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.
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 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).
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".
Ça ne s'invente
pas!
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ême marge à gauche et
à
droite, et laisser la largeur indé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 créer un style de
classe).
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â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
acollé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 vu ci-dessus. Toujours avec le
curseur
dans un 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]</
