NVu
Logiciel libre
auteur: Lindows inc
plate-forme: linux, windows
version: 1.0
license: mpl/gpl/lgpl
http://nvu.com
Publié sous licence Creative Commons By-NonCommercial-ShareAlike
http://creativecommons.org/licenses/by-nc-sa/1.0/
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
NVu
Publié sous licence Creative Commons By-NonCommercial-ShareAlike
http://creativecommons.org/licenses/by-nc-sa/1.0/
... 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
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:
Le fil conducteur de ce manuel
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:
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-8. Case de choix de police
Figure 1-9. Personnalisation de la barre d'outils
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.
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].
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.
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.
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.
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).
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>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]
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?
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.
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
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], 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>.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]. Si aucun style n'a encore été créé, la rubrique [Feuilles et règles] est vide.
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 (section 2, 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.
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
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.
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.
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.
Souvent, je passe en mode Source
pour me rendre compte de ce qui se passe. Lorsqu'on a saisi une grande
quantité de texte, cela devient difficile de
reconnaître où l'on est. Tout y est
écrit de la
même façon sans titres ni sections. C'est pourquoi
il est
recommandé d'y insérer des repères,
sous forme de commentaires. Il suffit de se situer, en mode Normal,
là où on veut l'insérer, et de cliquer
sur le menu [Insertion]>[Commentaires].
On saisit le texte dans la fenêtre. Cela ajoute la
balise
visible en mode Normal
aussi bien qu'en mode Balises
HTML.
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.Un site consacré à la musique traditionnelle
Mon nom: kelkun
Un site consacré à la musique traditionnelle
Mon nom: kelkun
Pas mal, non, comme en-tête?
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, soit au total trois blocs, dont deux incrustés dans un autre 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. La balise <p> n'est pas adaptée pour englober d'autres paragraphes, car 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. Par nature, les paragraphes laissent 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.
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ée là où je place le curseur, sur une ligne vide, ou dans du texteDans 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 faire?
Le plus direct est d'aller en mode Source et de poser un <br> après la balise de fin </div>.
Mais bien sûr, ce n'est pas profiter du mode Normal. Il faut avoir pris la précaution d'avoir au moins une ligne en dehors. Alors, on peut se rendre sur cette ligne vierge en-dehors du bloc. Si on a oublié de le faire, voici un moyen que j'ai trouvé: je sélectionne le conteneur DIV en cliquant sur son sélecteur dans la barre d'état. S'il n'est pas trop volumineux, je le coupe ([Edition]>[Couper]). Il reste en mémoire dans le "presse-papiers". Je me retrouve alors avec l'emplacement vide, dans lequel je peux saisir deux lignes vides dans le bloc "body". Je place le curseur sur la première et j'y colle le conteneur "div" ([Edition]>[Coller]). Et le tour est joué.
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:
Un site consacré à la musique traditionnelle
Mon nom: kelkun
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.
RemarquesVoici 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
L'ennui est que le texte est collé sur le bord gauche puisque j'ai fixé la marge du corps de texte à 0. Impossible d'y toucher si je veux que le bandeau d'en-tête reste positionné. Alors je crée un autre bloc "div" pour le contenu de texte principal, dans lequel je colle mon texte. Ce nouveau bloc "div" pourra recevoir toutes les indications de style et de positionnement que je souhaite. Très commode. Je peux par exemple donner une marge suffisamment importante (20%) pour que je puisse y placer par la suite des listes verticales (section 9).
Figure 7-4
Abordons un nouvel aspect de notre apprentissage, celui qui consiste à poser des liens. La faculté de sauter par un simple clic d'un lieu du texte à un autre lieu du même texte ou à un autre document est un avantage spécifique des documents électroniques qui est largement exploité, et c'est ce que j'ai fait également dans ce tutoriel, dans deux types de situation.
La première est la création de la table des matières. Lorsque je clique sur un titre de cette table, je me retrouve dans la section correspondante. La commande [Insertion]>[Table des matières] a fabriqué les liens nécessaires. Ceux-là sont générés automatiquement, en repérant uniquement les titres.
Or si je veux pouvoir, d'un endroit quelconque de mon document, renvoyer à un autre endroit quelconque de ce document, je dois créer des liens manuellement. Par exemple, je vous parle de la palette des couleurs, et j'ai envie de vous renvoyer à la partie du document où j'ai exposé le fonctionnement de cette palette (sous-entendu pour ne pas avoir à vous le répéter!). Le mot couleurs est mis en évidence pour vous signaler qu'il existe un lien direct entre ce mot et cet endroit. Cliquez sur le mot, et vous y êtes. C'est ce second type de création de liens que j'expose ici.
Un lien, c'est comme un fil invisible qui relie deux endroits du texte de la page. Plus exactement, il n'y a pas de fil, ça fonctionnerait plutôt comme une liaison radio ciblée. Il y a un poste émetteur qui appelle un poste récepteur bien déterminé. Lorsque j'active le poste émetteur, il se met immédiatement en relation avec le poste récepteur correspondant. Et comme en électronique on voyage à la vitesse de l'esprit, me voici transporté au lieu de ce récepteur.
Où sont les émetteurs et les récepteurs? Tout endroit du document peut être émetteur ou récepteur, à condition de lui attribuer cette fonction. Donc, si je déclare que le mot "couleurs" du paragraphe précédent est un émetteur, je dois immédiatement lui associer une cible qui aura été identifiée par un nom au préalable. C'est pourquoi il faut commencer par créer des cibles en posant des étiquettes, et c'est le rôle des ancres.
Lorsque je pose une "ancre" à un endroit du document, elle devient une étiquette à laquelle je peux attribuer un nom. Elle est un signe, une lampe qui me permettra de la repérer par la suite. Elle joue également le rôle d'un crochet qui me permettra d'y attacher le fil, mais pour le moment, rien n'est relié à ce crochet. L'analogie avec une ancre est à mon avis incorrecte, car il s'agit seulement de point d'ancrage et non de l'ancre. Il attend qu'on lui attache le filon.
Pour créer une "ancre", je positionne le curseur là où je veux la placer. Pour l'exemple j'en place une à la fin de ce paragraphe. Puis j'active l'icône [Ancre] de la barre d'outils. Dans la fenêtre [Propriétés de l'ancre], j'indique un nom, celui que je veux voir figurer sur l'étiquette de ce crochet: "crochet-cible". Je choisis un nom suggestif, afin de l'identifier sans ambiguïté pour que je puisse reconnaître l'étiquette parmi toutes les autres (il y en aura beaucoup comme vous allez voir).
Comme vous le voyez, un symbole s'est affiché pour signaler l'ancre, en mode Normal et en mode Balises HTML. La bulle qui apparaît lorsque je survole le symbole porte son nom. Si je double-clique dessus, j'ai accès à ses propriétés, en premier lieu son nom que je peux modifier.
Je peux aussi créer une ancre en sélectionnant
une
partie du texte avant d'activer l'icône "ancre", comme ici le
texte en vert.
Ce texte est inscrit dans la
fenêtre [Propriétés de l'ancre]
où il est proposé comme nom par défaut.
Je choisis le "poste émetteur", que j'appellerai l' "appel" de lien. Si je reviens à l'image d'un câble que je lance vers une cible, ce serait la "poignée" du câble. C'est un mot tel que le mot "couleur" ci-dessus, une partie de texte, une image, que je pourrai voir et identifier, et sur laquelle j'aurai à cliquer pour me rendre à la cible. Je choisis donc cette "poignée" en sélectionnant d'abord le mot, ou le texte ou l'objet. Par exemple, si je veux que les mots suivants: voir la section 9 soient la poignée d'appel, je les sélectionne puis je clique sur l'icône [Lien] de la barre d'outil. Dans la fenêtre [Propriétés du lien] qui apparaît, le texte sélectionné est inscrit dans la partie supérieure "lien texte": voir la section 9.
Figure 8-1
Je choisis maintenant ma cible dans le cadre [Emplacement du lien] dans le menu déroulant de la longue fenêtre [Entrer... sélectionner une ancre dans cette liste]. Et là, oh merveille, je vois s'afficher en ordre alphabétique tous les noms des ancres, celles que j'ai créées, et d'autres qui sont proposées automatiquement pour les titres. Il suffit que je sélectionne la cible adéquate: #9._je_crée_une_liste_verticale. Je peux encore modifier le nom dans cette fenêtre si je le souhaite (je réduis le nom à "#liste_verticale"). Puis [OK].
En mode Source, les ancres et les liens sont identifiés par la balise <a>. C'est une balise en ligne, dotée de sa boîte. Comme toutes les boîtes, son sélecteur apparaît dans la barre d'état.
A titre de démonstration, j'ai créé une ancre tout en haut du document, que j'ai nommée "haut de la page". Une balise <a> a été placée au début de la partie <body> et s'inscrit de la façon suivante:
<a name="haut_de_la_page"></a>
Je constate que les balises <a> et <a/> n'encadrent aucun texte. Elles marquent juste un point dans le corps de texte, et ce point a reçu son nom qui est identifié par "name=".
Pour comprendre comment le lien a été créé entre l'appel du texte et cette ancre, je crée ici un renvoi à titre expérimental vers le haut de la page avec le texte "revenir au début", qui renvoie à l'ancre que je viens de définir comme le haut de la page. En mode Source, je peux lire pour cette partie:
<a href="#haut_de_la_page">revenir au début</a>
Je constate que les balises encadrent et identifient le texte d'appel. De plus la commande "href" dit quelle ancre est la cible du lien. C'est l'adresse du lien. Dans cette adresse, le nom de l'ancre est identifié par le caractère #.
Il est important que le texte du lien ait une apparence différente du texte de corps afin que le lecteur puisse comprendre qu'il y a là un lien sur lequel il peut cliquer. Il est fréquent que par défaut le style appliqué soit un texte bleu souligné. Bien évidemment, j'ai la possibilité de changer ce style et de choisir mon propre style.
Puisqu'une boîte est associée à la balise <a>, je peux
Comme je viens de le faire plusieurs fois dans les paragraphes précédents, il est fréquent de choisir le titre d'une autre section du document pour cible d'un lien. Ce titre est identifié comme tel par son style <h1> ... <h6>. Or il est inutile de créer manuellement les ancres des titres: lorsque je crée un lien, je constate que les noms des titres sont déjà proposés dans la rubrique [Entrer... sélectionner une ancre dans cette liste] (figure 8-1).
Note: tant qu'un nom de titre n'a pas été sélectionné et validé, même si son nom est proposé dans la liste, il n'est pas posé comme ancre. On s'en aperçoit en mode Source, car aucune déclaration "name" n'y figure. Par contre, dès que le lien est créé, l'ancre est générée automatiquement.
Remarque: Il est à signaler que dès qu'on crée la table des matières, les noms des titres qui sont proposés et pas encore validés disparaissent, sont remplacés par des numéros et validés comme ancres... Si vous voulez alors vous en servir comme ancre, ou bien vous créez une deuxième ancre au même endroit avec un autre nom, ou bien vous copiez le nouveau nom numéroté en vous rendant sur le titre et en double-cliquant sur le symbole de l'ancre en mode Normal ou Balises. Mais il me semble que cela crée des difficultés pour reconnaître l'adresse relative de ces ancres. Il est nécessaire que le nom du document apparaissent devant le #. Cela se fait automatiquement si j'enlève la sélection [L'URL est relative à l'emplacement de la page] et que je la resélectionne!
Vous avez remarqué que l'apparence d'un lien change dans
un document lorsque le pointeur survole ce lien. C'est une
façon
d'attirer l'attention du lecteur sur le fait que le pointeur se trouve
bien sur un lien actif. Ceci est obtenu par une commande
spéciale de style. Très simple à
effectuer, mais
IL FAUT SAVOIR COMMENT. Ça ne s'invente pas. Comme
d'habitude,
je me
rends dans l'éditeur de style,
[Feuille de style
interne]>[Règle]>[Style
appliqué
à tous les
éléments d'un type]. Le nom de
l'élément à inscrire est a:hover.
C'est lui
qui commande le style d'un lien survolé. Puis je clique sur
[Créer la
règle de style] pour le définir (figure
4-6). On en verra un exemple dans la barre de menu horizontale
de
la section 11.
De même, il est possible de créer un style différent pour les liens qui ont été utilisés avec l'élément a:visited.
Suggestion aux développeurs: Le nom de cet élément doit donc être connu et copié sans faute dans l'éditeur, sinon cela ne fonctionne pas. Il serait donc particulièrement commode qu'un menu déroulant soit associé à la rubrique de l'éditeur CSS [Style appliqué à tous les éléments d'un type]. On y trouverait les noms présélectionnés des principaux éléments: body, p, h1, h2, ..., h6, div, a, a:hover, ul, etc... En attendant, je dois bien connaître leurs sélecteurs pour les inscrire moi-même. Cela limite le côté "utilisation intuitive".
Figure 8-3. Options de l'apparence des liens dans le navigateur Mozilla
Je crée d'abord un conteneur DIV, bloc dans lequel je vais saisir la liste. J'ai exposé dans la section 7 comment le faire. Il va être créé là où j'ai le curseur. Je peux le placer par exemple juste en-dessous de l'en-tête. Je lui donne un style général (largeur de boîte 15%, espacement gauche 10 px, couleur de fond, bordure). C'est ce qui va déterminer l'aspect du bloc.
A l'intérieur du bloc, je saisis le titre général du bloc "Actualités", et je lui attribue un style particulier avec la classe "titre-actualites". Puis je saisis en-dessous les différents articles de la liste séparés par deux sous-titres (figure 9-1). Je constate que cela décale le bloc de contenu principal vers le bas. Forcément, puisque j'ai placé ma liste au-dessus. Mais cela va s'arranger dans la phase suivante de positionnement.
Figure 9-1
Comme on peut le constater, il existe un espacement gauche de la balise <ul>par défaut assez important, puisqu'il est de 40 px. Il s'agit d'un espacement, non d'une marge, et on le voit au fait que la couleur de fond occupe l'espacement à gauche de la puce. La valeur de la marge par défaut est de 0px.
Pour changer la valeur de l'espacement, il faut la modifier dans la boîte associée à la balise <ul> (ou à la balise <ol>) qui contrôle tout le groupe. Comme d'habitude, cette boîte est accessible par le sélecteur <ul> de la barre d'état.
Par défaut, la puce a la forme d'un cercle plein, un disque. Il est possible de la changer en cercle vide ou en carré plein. Toutefois, pour cela, il nous faut faire appel à des fonctions avancées. On verra plus loin en quoi elles sont plus avancées, mais je donne la méthode pratique dès maintenant
La fenêtre [Editeur de propriétés avancées] est accssible de la même façon que les styles internes, par l'intermédiaire de la barre d'état. Je place le curseur dans le bloc de liste, j'affiche le menu contextuel en cliquant sur le sélecteur correspondant <ul> (ou <ol>) dans la barre d'état (en même temps ça le sélectionne pour que je vérifie si c'est le bon bloc!). Dans la rubrique [Propriétés avancées] en bas, dans la rubrique [Attribut], je sélectionne [type]. Dans la rubrique [Valeur] je choisis la forme que je veux: [disc], [square] (carré) ou [circle]. Puis OK (figure 9-4).
Figure 9-4. Editeur de propriétés avancées
Je peux même déclarer que je ne veux pas de puce du tout. Il suffit que j'efface "disc" dans la rubrique [Valeur], et que j'inscrive à la place "none", ce qui veut dire aucun. Mais dans ce cas, cela ressemble fort aux listes de définition avec lesquelles nous faisons connaissance ci-dessous, et il est peut-être plus judicieux de les employer.
L'éditeur CSS permet également de fixer la forme des puces pour tous les éléments ul du document. Il suffit de définir le style de l'élément ul selon la méthode habituelle: [Feuille de style interne], désactiver [Expert], [Règle], puis [Style appliqué à tous les éléments d'un type]. J'inscris "ul", je clique sur [Créer la règle de style].
A cette occasion, je peux choisir les propriétés du texte: la taille de police, par exemple. (c'était une révision figure 4-6). Puis je me rends dans l'onglet [Liste]. Je choisis le type de puce.
Dans la rubrique [Position de la puce], je peux choisir la disposition du texte qui suit la puce quand il revient à la ligne. S'il s'aligne sur la puce, c'est la position "puce à l'intérieur du texte". S'il s'aligne sur le premier mot suivant la puce, c'est la position "puce à l'extérieur". Enfin [Fermer].
Pour créer cette liste de définition, je sélectionne l'ensemble du texte, je clique sur la troisième icône ce qui a pour effet d'attribuer le style "dt" à toutes les lignes, puis je sélectionne le premier groupe de 3 articles, je clique sur la quatrième icône pour leur attribuer le style "dd", idem pour le groupe de 2 articles.
En mode Source, l'imbrication des différentes balises est bien visible.Par défaut, la marge des éléments <dl> est de 0px, l'espacement des éléments <dt> de 0px et celui des éléments <dd> de 40px.
Les termes de définition <dt> reviennent 2 fois, et je veux appliquer le même style "gras" aux deux. Je peux répéter la même indication pour les deux lignes. Quant aux termes <dd>, ils reviennent 5 fois. Je veux réduire leur marge et diminuer la taille de police. Comment faire pour s'épargner cette répétition et faire les déclarations de style une fois pour toutes? Il y a 3 moyens:
Il y a dans mon texte des parties, des blocs qui sont très caractéristiques et que je désigne par un nom "propre": le bloc "En-tête", le bloc "Actualités" par exemple. L'identificateur, c'est le nom que je donne à ce bloc. Je vais donc officiellement baptiser le bloc "Actualités", pas seulement dans mon esprit, mais dans le programme. Il y a deux façons. Je peux le faire directement avec la fenêtre [Editeur de propriétés avancées]. Ou bien je le fais à l'occasion de l'attribution d'un style intégré (paragraphe suivant: "Attribuer un style").
Pour accéder à la fenêtre [Editeur de propriétés avancées], je place le curseur dans le bloc, j'affiche le menu contextuel en cliquant sur le sélecteur correspondant <div> dans la barre d'état (en même temps ça le sélectionne pour que je vérifie si c'est le bon bloc!). Dans la rubrique [Propriétés avancées] en bas, dans la rubrique [Attribut], je sélectionne [id]. Dans la rubrique [Valeur] je donne le nom d'identification que j'ai choisi: "actualites" (j'évite les majuscules et les accents, ça simplifie). Puis OK.
Figure 9-6
Dès lors qu'un bloc a été identifié, je peux lui attribuer des styles propres: pour l'en-tête, je veux une bordure et pour le bloc "actualites", je veux un fond vert, etc... Comment le dire en langage html? Il y a deux façons, comme d'habitude: une à partir du style intégré, et l'autre directement dans la feuille de style interne.
Je mets en forme le bloc avec les fenêtres de propriétés accessibles par le sélecteur dans la barre d'état, comme on en a l'habitude. Puis j'extrais ce style, comme on sait également le faire. Je place le curseur dans le bloc afin de faire apparaître le symbole <div> ou tout autre bloc dans la barre d'état. En le sélectionnant, 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). Ce qui change est que je sélectionne ici [... cet élément uniquement]. Je donne un nom d'identificateur. En cliquant sur [OK], je crée à la fois l'identificateur "id=.." et le style qui correspond dans la feuille de style.
Barre de menu: [Outils]>[Editeur CSS]. L'opération n'est pas plus difficile que les précédentes déclarations de style, mais ... nous sommes passés au mode Expert. Alors, je ne désactive pas [Expert]. Je sélectionne [Feuille de style interne], je clique sur [Règle] et je coche sur la troisième ligne [Style appliqué à tous les éléments correspondant au sélecteur ci-dessous]. J'inscris l'identificateur du bloc que je veux formater, précédé de # "#actualites". Enfin je clique sur [Créer la règle de style] et je choisis les propriétés du texte: taille de police, et "gras", bordure, fond, largeur de boîte, etc... Pour finir, [Fermer].
Il y a une question qui revient souvent parmi les apprentis en langage html. Pour attribuer un style au bloc choisi ("actualites"), dois-je créer une classe ou bien dois-je baptiser le bloc par un identificateur et créer un style propre à l'identificateur?
Voici ma réponse, que je crois exprimer de façon plus claire que ce que j'ai lu: techniquement, pour le navigateur, cela revient au même, il s'en fiche. Vous pouvez créer une classe ".actualites" et l'appliquer au bloc "div", ou vous pouvez définir un style "#actualites" pour le bloc "div" que vous aurez baptisé "actualites". Vous aurez seulement saisi un nom d'identificateur en plus et changé un point en #. Pas de quoi s'en faire une fête, ni se prendre la tête!
LA VRAIE DIFFÉRENCE est au niveau de notre esprit. Tandis que l'ordinateur sait impeccablement appliquer une règle, nous humains avons besoin d'être clairs dans ce que nous lui disons de faire et cette alternative est là pour nous aider à structurer notre esprit et notre page. Une classe s'applique à un ensemble de paragraphes. Exemple: parmi les objets de type "agglomérations", je peux créer une classe "préfecture" ou une classe "ville de plus de 100 000 habitants" par exemple. Un identificateur s'applique à un seul paragraphe: "Lyon". Autrement dit les classes sont comme les noms communs des objets et les identificateurs comme des noms propres. Alors pourquoi le navigateur ne fait-il pas la différence? Parce qu'on peut très bien appliquer une classe à un seul objet: "capitale de la France". Et on peut donner le même nom propre à plusieurs villes: "Valence". Mais cela entraîne des confusions dans notre esprit!
Il est donc recommandé d'utiliser les classes pour les styles qui reviennent plusieurs fois dans des parties de texte, des paragraphes, des blocs div multiples, et on réservera le style lié à un identificateur pour un bloc baptisé.
Je vais donner un autre outil car je le trouve très utile et vous serez vraiment des experts. Lorsque dans le paragraphe "Je définis le style de la liste", j'ai défini les styles des lignes de liste pour les éléments "dd" et "dt", ce style s'applique à toutes les listes de définition de ma page, y compris celles du corps de texte. Comment faire pour qu'un style de liste ou un style de lien (ul, ol, li, a, a:hover, etc..) s'applique uniquement aux blocs et boîtes contenus dans le bloc identifié? On dit de ces blocs contenus qu'ils sont les enfants du bloc conteneur.
J'utilise à nouveau la troisième ligne de l'éditeur de style:
[Style appliqué à tous les éléments correspondant au sélecteur ci-dessous]. J'inscris le sélecteur qui est l'identificateur du bloc que je veux formater "#actualites", et je le fais suivre du sélecteur que je veux définir.
Par exemple:Les sélecteurs "dt" ou "a" visés seront seulement ceux qui sont contenus dans le bloc "actualites".
Mon bloc "actualites" est toujours placé en position inconfortable et il décale le bloc principal vers le bas (voir figure 9-1). Je vais maintenant le positionner correctement dans la marge de gauche. Pour cela, je fais appel à de nouveaux outils. Je sélectionne le bloc à positionner en y insérant le curseur et en cliquant sur son symbole dans la barre d'état <div>.
Puis je me rends avec le pointeur dans la barre de mise en forme,
et je clique sur l'outil "dissocier du texte" dont l'icône
est une "punaise". .
Ça a bougé... Le bloc "Actualités" sélectionné est décoré de symboles qui vont me permettre de le manipuler.
Et le bloc de texte principal qui suit est venu se replacer plus haut.
Comme je veux comprendre ce que j'ai fait, je me rends dans [Propriétés de la boîte] du bloc <div> (rappel: curseur dans le bloc, barre d'état, pointeur sur <div>, bouton droit de la souris, [ Styles interne]>[Propriétés de la boîte], etc..). Dans la rubrique [Position] en haut, une nouvelle indication s'est inscrite. Elle a été fixée à "Absolue" (figure 9-10). De plus, des valeurs sont apparues dans les rubriques [Excentrage]. Les autres valeurs de style intégré fixées antérieurement, comme la largeur à 15% sont restées.
Figure 9-10
J'ai créé mon bloc "Actualités" avec sa liste et je l'ai placé en bonne position. Il me reste à créer les liens. Pour les "Concerts", je souhaite renvoyer à une autre page qui donne plus de précisions. Nous avons appris à insérer des liens internes à la page, en renvoyant à des ancres. Il s'agit maintenant de liens externes, qui peuvent être soit une autre page de mon site, soit une page sur un autre site.
La méthode est la même que pour le lien interne de la section 8. Je sélectionne le texte par exemple "Cahors", et je clique sur l'icône [Lien]. Dans la rubrique [Emplacement du lien], j'indique l'adresse du lien de la façon suivante:
Bien évidemment créer un lien change le style de la ligne, puisque les styles spécifiques de lien entrent en jeu. Le style appliqué au terme "Cahors" n'est plus celui défini pour le sélecteur "dd", mais celui défini pour le sélecteur "a". Je peux donc créer des styles pour "#actualites a" et "#actualites a:hover" comme expliqué plus haut dans le paragraphe sur les identificateurs. Remarquons que si toutes les lignes "dd" de la liste sont des liens, il devient inutile de créer un style particulier pour le sélecteur "dd". Il vaut mieux le créer directement pour le sélecteur "a".
Lorsque la personne qui consulte mon site web clique sur un lien que j'ai insérer, la page s'ouvre sur son écran en remplaçant la précédente. Comment faire pour que cette nouvelle page s'ouvre dans une nouvelle fenêtre?
Dans la fenêtre "Propriétés du lien" (figure 9-11), je clique sur [Plus de propriétés]. A la rubrique [Cible], je coche le carré et je choisis [dans une nouvelle fenêtre]. La cible, c'est la page où va être projeté le nouveau document.
Figure 9-12. Ouvrir le lien dans une nouvelle fenêtre
En mode Source, cela donne une nouvelle déclaration:
<a target="_blank" href="http://aboudet.chez.tiscali.fr/">http://aboudet.chez.tiscali.fr</a>
Cette déclaration dit que la cible (target) est une page vierge (blank).Je ne suis pas complètement satisfait de cet arrangement, car il m'oblige à créer une page séparée "concert_cahors.html" pour donner des explications détaillées sur le concert de Cahors, une autre pour donner des détails sur le concert de Perpignan, et une autre pour celui de Maubeuge. Or j'aimerais que le lecteur ait directement sous les yeux l'ensemble des 3 concerts prévus regroupés sur la même page que j'appelle "mapage_concerts", et qu'il puisse les l'imprimer sur une seule feuille . Mais comment créer un lien de "index" (qui est le nom obligatoire de la page d'accueil) vers la section "Concert de Cahors" à l'intérieur de "mapage_concerts"?
Au moyen d'une ancre dans cette page concerts.
Je me rends dans "mapage_concerts", et je pose une ancre là où je désire désigner la cible: au titre "Concert de Cahors". Cette ancre reçoit un nom, "Concert_de_Cahors" comme indiqué dans la section 8. Je le copie ([Edition]>[Copier] ou Ctrl+C) dans la fenêtre [Propriétés de l'ancre] au moment où je le définis avec l'icône [Ancre]. Si l'ancre existe déjà, je double-clique sur son symbole dans le texte pour faire apparaître la fenêtre [Propriétés de l'ancre], et je copie le nom qui s'affiche.
Puis je me rends dans la page où je veux créer le lien, la page "index". Je sélectionne le texte d'appel, et je procède comme dans la partie précédente "Créer des liens avec d'autres pages". Je sélectionne le texte "Cahors", et je clique sur l'icône [Lien]. Dans la rubrique [Emplacement du lien] (figure 9-11), je clique sur [Parcourir] et je sélectionne la page "mapage_concerts". Cette adresse conduit en haut de la page. Je dois la compléter pour qu'elle conduise jusqu'à l'ancre, de la façon suivante. J'ajoute un "#" qui est le symbole de l'identificateur de l'ancre. Puis je colle le nom de l'ancre (Ctrl+V), ce qui donne finalement: "mapage_concerts#Concert_de_Cahors". C'est aussi simple que çà.
Dans cette nouvelle phase de notre apprentissage, nous allons apprendre à insérer des images dans le fil du texte et à les positionner selon notre désir.
Dans la section de saisie de texte principal, je désire illustrer mon texte par des images. C'est possible et facile avec l'icône [Image] de la barre d'outils.
L'adresse qui s'affiche est relative, c'est-à-dire repérée par rapport au répertoire "monsite" et à la page en cours "index". Il est nécessaire que les pages aient été enregistrées avant d'y insérer des images, afin d'être reconnues dans le répertoire. Ceci permet à Nvu d'utiliser automatiquement les adresses relatives pour les images lorsque vous les insérez.
Cela veut dire que la case [L'URL est relative... ] sera cochée automatiquement. Ainsi, lorsque le répertoire complet sera exporté, tout suivra ensemble sans problème. Si vous donnez une adresse absolue, donnant son emplacement dans votre disque dur, il y aura problème quand le répertoire sera installé sur un autre serveur!!!
Pour comprendre comment ça marche, il faut garder en tête que l'image s'insère dans le fil du texte (dans le flux), là où j'ai placé le curseur. Une boîte en ligne a été créée, dont la balise est <img>. Elle est analogue aux boîtes en ligne <span> avec lesquelles je me suis amusé dans la section 1. Seulement voilà, l'image a souvent une hauteur importante et cela veut dire que la ligne dans laquelle elle s'insère prend maintenant une hauteur égale à la hauteur de l'image.
Figure 10-2
C'est le bas de l'image qui est aligné sur la ligne. Cependant, on a le choix de cet alignement. On peut placer le texte qui se trouve de part et d'autre de l'image, en haut de la ligne, au centre, ou en bas. C'est le choix possible avec la rubrique [Placement du texte].
Figure 10-3
Il y a deux autres possibilités de placement: texte à gauche et texte à droite. C'est intéressant, car le texte des lignes qui suivent l'image se distribue à gauche (A gauche) ou à droite (A droite) de l'image. Attention on parle du placement du texte, pas de la position de l'image. Cependant dans ce cas, il est probablement plus intéressant encore d'utiliser la position "flottante" décrite plus loin.
Dans cet onglet [Apparence], je peux également écarter le texte de l'image en donnant des valeurs à [Espacement], [A gauche et à droite], [En haut et en bas]. Je fixe 10px. Enfin, je peux encadrer l'image par une bordure dont je peux préciser l'épaisseur. Je fixe 3px.
En mode Source, on peut constater que les indications de style sont intégrées à la balise nommée <img>:
<img src="images/trio.jpg" title="trio d'instruments à vents" alt="instruments"Dans les indications de style, on reconnaît un style interne style="", qui fixe le trait et l'épaisseur de la bordure. Les autres sont des attributs html:
Si je veux un style plus élaboré et créer des classes par exemple, il est beaucoup plus intéressant d'utiliser la boîte des styles internes associée à la balise <img>. C'est une balise en ligne. Comme pour toutes les balises, une boîte associée à la balise <img> est accessible par le menu [Styles internes] du sélecteur de la barre d'état. Je place le curseur sur l'image et le sélecteur de la balise d'image s'affiche dans la barre d'état <img>. Je peux alors jouer avec la boîte pour lui donner un style comme avec la balise <span>.
En particulier je peux préciser le style de la bordure. Dans la fenêtre [Propriétés des bordures], je trouve déjà inscrite l'épaisseur 3 px choisie dans la fenêtre [Propriétés de l'image] (fig. 10-3) et indiquée en mode Source style="border: 3px;"
Par contre l'espacement du texte qui, pour la balise <span> ou les blocs, a été spécifié dans la fenêtre [Propriétés de l'image], ne s'y trouve pas car il n'a pas été fixé par des styles internes. Il est spécifié par les attributs html hspace="10" vspace="10" .
Or dans la fenêtre [Propriétés de la boîte], je peux également donner une valeur à l'écartement du texte par les valeurs des espacements ou des marges (je fixe un espacement à la valeur 7px pour la distinguer de l'autre). Et là, la déclaration est bien ce que nous connaissons déjà style="padding-left: 7px; padding-right: 7px;". A nouveau, je remarque qu'il existe deux types de déclaration de style: celles qui sont liées à l'attribut de style interne style= et celles qui sont des attributs html. J'y reviens plus bas.
Ainsi donc, on peut donner indépendamment deux déclarations d'esapcement. Et si je renseigne les deux, vont-elles se cumuler ou entrer en conflit? Ni l'un ni l'autre, c'est le style interne de la fenêtre [Propriétés de la boîte] est prioritaire que l'attribut html, qui devient inutile. Aussi, pour la suite de la construction de ma page web, (du moins après avoir exploré la fenêtre "propriétés avancées", je choisirai de préférence le style interne [Propriétés de la boîte].
Les précisions précédentes nous conduisent à ouvrir la fenêtre [Propriétés avancées] qui affiche les attributs html. J'ai déjà eu l'occasion d'ouvrir une telle fenêtre lorsque j'ai modifié le style des puces (figure 9-4) ou encore quand j'ai donné un nom d'identificateur à un bloc (figure 9-6). Maintenant, je m'occupe des propriétés avancées de l'image et de sa boîte.
Je peux accéder à la fenêtre [Propriétés avancées] par l'une des manières suivantes
Et voici ce que je découvre:
Figure 10-4
Note: pour certains blocs comme "p" ou "div", on accède également à cette fenêtre,
Je retrouve toutes les déclarations que j'ai fixées dans l'onglet [Attributs HTML], sauf celles qui sont dans les styles internes comme la bordure. Mais je dispose également de l'onglet [Style interne] où je trouve inscrits ces styles internes. Bien évidemment, par l'intermédiaire de cette fenêtre, je peux non seulement voir les attributs, mais également les modifier ou en ajouter par les rubriques [Attribut] et [Valeur] en bas de la fenêtre. Dans cette fenêtre, on s'exprime en langage html brut.
Récapitulons, tout s'éclaire. Dans les styles intégrés à une balise, il y a deux sortes de déclarations de style:
Notons qu'on a déjà rencontré plusieurs attributs HTML. Outre l'identificateur, il y a l'attribut de l'ancre, associé à la balise <a>, name. Si je place le curseur sur une ancre (mode Normal ou mode Balises) et que j'ouvre la fenêtre de propriétés avancées, j'ai accès à son nom. Également l'attribut d'un lien, href. Pour les images, voici de nouveaux attributs: alt, title et src. Ces attributs sont proposés dans le menu déroulant de la rubrique [Attribut] en bas de la fenêtre (figure 10-4).
La grande supériorité des styles internes est qu'on peut en extraire les déclarations pour les placer dans la feuille de style. Il est donc recommandé de favoriser le style interne lorsqu'il y a doublon. A cause de cette déduction, je note cette étrangeté que dans la même fenêtre des propriétés de l'image, l'une des déclarations (bordure) est un attribut de style interne, les autres (marges gauche et droite, haut et bas) sont des attributs HTML. Je suggère aux développeurs que les marges soient déclarées de la même manière en style interne et que cette déclaration puisse se faire indifféremment par les deux voies (Propriétés de la boîte, et propriétés de l'image) comme pour la bordure.
Avec la fenêtre [Propriétés de la boîte] en style interne, j'ai la possibilité éventuelle d'attribuer une position relative ou absolue. Oui, c'est possible même pour une balise en ligne. C'est possible pour toute balise. Nous savons le faire (section 9).
Mais une autre possibilité est intéressante, la propriété "Flottante". Cette propriété permet de positionner l'image complètement à droite ou à gauche selon le choix effectué dans le menu déroulant. Bien évidemment, c'est une alternative à la façon dont je viens de la positionner avec les propriétés de l'image "Placement du texte à droite". Je retrouve le doublon [Propriétés de la boîte- styles internes] - [Propriétés de l'image - Attributs HTML].
Figure 10-5
Je choisis par exemple la valeur Flottante: [Gauche] qui me positionne l'image sur la gauche du bloc conteneur. La position de l'image en hauteur ne varie pas. Le texte qui la suit se répartit sur le côté droit et en-dessous, comme on le voit sur la figure:
Figure 10-6
En mode Source, la commande de la valeur de Flottante est style =" float: left;".
Elle est donc différente de celle du placement du texte avec les propriétés de l'image qui est align="left". Si on se hasarde à commander les deux en même temps, les propriétés de style interne supplantent les attributs de l'image. Comme pour les espacements, il me semble donc préférable d'employer les [Propriétés de la boîte] plutôt que l'onglet [Apparence] des [Propriétés de l'image] sauf si l'on veut un style un peu plus élaboré.
Il est à remarquer que la position "Flottante" s'applique à toute boîte de balise et pas seulement aux images. C'est une alternative très intéressante pour placer mon bloc "Actualités" à gauche. Elle n'est pas compatible avec un autre positionnement, comme position relative ou absolue. Même si on sélectionne [Flottante]>[Gauche] dans la fenêtre de propriétés de la boîte, elle reste inopérante si une autre position est sélectionnée dans la rubrique [Position].
Que ce soit par l'une ou par l'autre des deux méthodes, mon image est maintenant à gauche, et le texte s'écoule sur sa droite (figure 10-6). Cependant, je ne veux pas que tout le texte se mette sur le côté, et j'aimerais bien que le paragraphe suivant, le titre "Historique... ", soit placé en-dessous de l'image. Est-ce possible?
Très facile. Je place mon curseur là où je veux déplacer le texte en -dessous, donc au début de "Historique" et j'insère un saut de ligne avec le menu [Insertion]>[Saut de ligne sous les images]. Ce que ne suggère par l'expression, c'est que cette ligne est dotée d'une propriété particulière, celle de vouloir toute la place en largeur pour elle. Impossible dans la zone de l'image flottante, de sorte qu'elle va se placer là où elle trouve cette place: en-dessous de l'image. Cette propriété est indiquée en mode Source par la déclaration "clear" attribuée au saut de ligne: <br clear="all">.
Figure 10-7
C'est la façon la plus simple et la plus rapide, mais pour celles et ceux qui veulent bien maîtriser, je vais indiquer une autre façon. Je peux carrément attribuer cette propriété "clear" à la boîte du titre "Historique...". Curseur dans le titre "Historique...", sélecteur "h2" dans la barre d'état, [Styles internes], accès à la fenêtre [Propriétés de la boîte]. A la propriété [Dégagement] (c'est la propriété "clear"), je donne la valeur [Les deux]. Cela empêche qu'une boîte en position flottante vienne s'installer dans le paragraphe. Traduction en mode Source:
style="clear: both;"
Remarque: Que veut dire "dégagement" pour un bloc? Cela veut dire qu'il prend toute la largeur, il ne supporte pas d'intrus dans l'espace sur ses côtés, il veut qu'e les côtés soient dégagés de sorte qu'il se décale vers le bas pour se positionner là où il trouve toute la place, sous l'image. "Clear", ça veut dire libérer, dégager.
Il est possible de faire un lien à partir d'une image pour transporter le lecteur ailleurs. Il suffit qu'il clique sur l'image, et hop, il se retrouve en face de l'agrandissement de la photo, de sa description ou d'un autre document. Ou bien votre image est une toute petite vignette dans le fil du texte et son lien conduit à un site... Comment procéder?
Placer le curseur sur l'image. L'onglet lien est accessible de quatre manières.
Remplir les rubriques comme on sait déjà le faire, soit pour un lien interne (section 8), soit pour un lien externe (section 9).
Attention, il ne suffit pas que ce lien existe. Encore faut-il que le lecteur s'en rende compte. Il faut donc qu'il en soit averti soit par un texte tel que "cliquez ici", ou par la modification flagrante de l'apparence de l'image quand le curseur la survole (style de la balise a:hover)
J'ai créé un répertoire "monsite" dans lequel j'ai placé la première page d'accueil déjà bien rédigée, avec son en-tête, son contenu principal, et un bloc "Actualités". Il s'y trouve également un dossier contenant les images. Et plusieurs autres pages donnant des détails sur le groupe, les prochains stages et concerts, les albums, etc.., pages nommées "index", "mapage2", et "concert_cahors.html". Dans le bloc "Actualités", j'ai créé des liens renvoyant le lecteur à la page "concert_cahors.html" et à quelques autres concernant les actualités. Je me propose maintenant d'installer une barre de menu qui permettra au lecteur de naviguer dans les différentes pages de mon site.
Préalable: Même si je n'ai encore rédigé que la première page de mon site, je sais déjà que ce site va comporter plusieurs autres documents, et il est avantageux d'en créer les pages dès maintenant, même si elles ne contiennent qu'un seul mot par exemple, ou quelques idées jetées en vrac. Cela me permettra de construire les liens à ces pages à partir de la barre de menu.
Je choisis d'installer une barre horizontale qui reflète grosso modo le plan de mon site. Cela va se faire en deux temps.
Une solution intéressante est de créer une boîte contenante de dimensions données avec un bloc <div>, comme le montre la figure 11-1. Je lui attribue une largeur (70%), ou des marges gauche et droite. Éventuellement une couleur de fond, et des bordures, et le style du texte (alignement à droite). Je peux lui donner un nom d'identification tel que "menu" avec la fenêtre des propriétés avancées (pointeur sur le bloc, bouton droit de la souris). A l'intérieur, je saisis les titres de rubriques.
Figure 11-1
Comment vais-je pouvoir transformer ces titres de rubrique en petites cellules adjacentes? Le moyen est qu'elles soient chacune dotées de leur boîte.
Une première méthode est la suivante. Puisque chacun de ces titres sera un lien, les boîtes toutes trouvées sont celles des balises <a>. Il n'y a nul besoin d'en fabriquer d'autres. Il suffit que je donne un style spécifique à tous les liens qui seront contenus dans le bloc "menu". Je peux le faire soit par la méthode des classes (j'applique la classe ".rubrique" à chacun des liens de la barre de menu). Soit par la méthode de l'enfant en éditant le style "#menu a", qui va s'appliquer à tous les liens <a> du bloc identifié "menu", comme on l'a vu à la section 9 (ici texte gras, fond jaune, marge à droite de 15px, espacements gauche et droit de 10px, bordure). Puis j'établis les liens entre les titres de rubrique et les documents correspondants, ce qui a pour effet immédiat d'insérer la balise <a> et de leur appliquer le style "#menu a". On a déjà vu comment on pouvait renvoyer par un lien à une autre page dans la section 9 avec la création du bloc "Actualités". Il suffit de retravailler le style pour faire quelque chose de simple et efficace. Et voilà (figure 11-2).
Figure 11-2. Menu obtenu avec un bloc <div> contenant des boîtes <a>
J'édite également les styles "a:hover" et "a:visited".
Inconvénient de cette méthode, l'apparence est dépendante des liens. On ne voit pas l'effet des propriétés de style tant qu'on n'a pas établi les liens. D'autre part, il faut garder à l'esprit que les navigateurs de vos lecteurs ont des styles d'affichage de liens différents. Si vous voulez qu'ils conservent l'apparence que vous avez donnée à la couleur du texte et à la présence du soulignement, il faut cocher les cases [Importance] correspondantes dans l'éditeur de style, onglet [Général] (figure 8-4).
Une variante de cette méthode qui permet d'éviter la dépendance à l'établissement des liens est de créer les cellules avec des boîtes avant d'établir ces liens, à l'aide des autres balises comme <p> ou<div>. A l'intérieur d'un bloc DIV conteneur, je crée 3 blocs <p>. Mais comme vous le savez, pour créer trois boîtes séparées avec les formats [Paragraphe] ou [Conteneur générique], il faut que chacune des rubriques soient sur des lignes séparées. J'ajoute donc des "changements de paragraphe". Puis je sélectionne les trois lignes et j'applique le format "paragraphe" avec le menu déroulant de la barre de mise en forme. Puis je vais les disposer sur la même ligne, de la façon que j'indiquerai plus loin avec les listes.
Figure 11-3Car au lieu de poursuivre dans cette voie, voici une deuxième méthode pour créer un bloc contenant des cellules qui utilise le format de liste car c'est encore plus génial. En effet, si je sélectionne les trois lignes séparées des rubriques comme ci-dessus, et que j'applique le format liste, par exemple la liste non ordonnée <li>, les boîtes <li> sont incluses dans une boîte <ul>. Celle-ci peut donc remplacer le bloc <div>. Autrement dit avec les listes, j'ai immédiatement un bloc contenant des cellules. Je peux recommencer à zéro, avant la figure 11-1.
Je tape mes trois lignes de rubrique dans le corps de texte, et je leur applique la liste non ordonnée grâce à l'icône de la barre d'outils.
Figure 11-4Les listes non ordonnées, et d'autant plus les listes ordonnées, ont l'inconvénient d'être dotées de puces de décoration qui dans ce cas sont gênantes. Il est tout à fait possible de modifier ou de supprimer ces puces grâce aux Propriétés avancées comme on l'a vu dans la section 9. Je place le curseur dans la liste et les sélecteurs correspondants <ul> et <li> apparaissent dans la barre d'état. A partir du menu contextuel associé au sélecteur <ul>, je me rends dans [Propriétés avancées], dans le menu [Attribut] je sélectionne [Type] (figure 9-4). Les valeurs proposées par le menu déroulant me donnent le choix entre le disque, le carré, le cercle. Il y a également la possibilité de supprimer ces puces, or malheureusement cette option n'est pas proposée dans le menu déroulant. Je dois l'indiquer moi-même en inscrivant "none" dans la case [Valeur].
Les balises <ul> et <ol> ont également des espacements par défaut qu'il faut annuler. Il semble (peut-être) plus simple de travailler avec les listes de définition <dt> qui ne comportent ni puces, ni espacement, tandis que les éléments <dd> qui n'ont pas de puce ont un espacement de 40px par défaut. Pour la suite, je fais le choix des éléments <dt>. Les boîtes <dt> sont englobées dans le bloc conteneur <dl> (voir listes de définition).
Les boîtes associées à chaque ligne de la liste sont des blocs qui prennent toute la largeur disponible (vous pouvez les matérialiser avec les bordures) et s'affichent les uns en-dessous des autres. Il faut donc que je m'arrange pour que les boîtes se collent en ligne. Et bien, comme on peut tout faire avec le langage html et que les boîtes se transforment aisément les unes en les autres, il suffit d'ajouter une règle de style qui dit que chacune de ces boîtes est une boîte en ligne et non un bloc. Par le menu [Style interne], [Propriétés de la boîte] ou avec l'éditeur de style, Onglet [Boîte], dans la propriété [Affichage] qui se trouve en haut à gauche, sélectionner la valeur [En ligne]. Les trois boîtes abandonnent leur caractère de bloc. Leur largeur n'occupe plus que celle nécessaire pour inscrire le texte, comme un texte en ligne qu'elles sont devenues. Ce texte peut bénéficier des styles de texte en ligne, d'alignement par exemple comme on va le voir avec le "menu dl".
Je crée les règles de style pour les boîtes <dd> par le "#menu dt" et pour la boîte <dl> par le "#menu dl".
Règles de style "#menu dt": premièrement, dans l'onglet [Boîte], je sélectionne l'affichage en ligne. Puis, par exemple, marge à droite de 15px pour régler l'écart entre boîtes, espacements gauche et droit de 10px pour l'encadrement du fond, texte gras, fond jaune, bordure. (Note: j'ai choisi ces règles identiques à celles de mon "#menu a" précédent puisque c'est une méthode alternative et que je veux comparer). L'écart entre les boîtes est la somme de la marge gauche d'une boîte et de la marge droite de la boîte adjacente (essayez différentes valeurs pour voir où ça se joue).
#menu dl: C'est là que j'aligne le texte à droite pour empiler les boîtes sur la droite. Exemple: une couleur de fond bleue, marges en haut et en bas éventuellement 0px (car elles ont une valeur non nulle par défaut). Les espaces supérieur et inférieur entre la bordure des blocs jaunes <dt> et la bordure du bloc bleu <dl> sont ajustés avec les espacements haut et bas. Expérimentez.
Ça marche et voici le résultat de cette deuxième méthode (figure 11-5). Le tour est joué avec seulement quelques mots saisis et une liste de définition. Comparez avec la figure 11-2 obtenue par la première méthode. Il restera à établir les liens externes, et à définir les différents styles pour "a", "a:hover" et "a:visited".
Figure 11-5. Menu obtenu avec un bloc <dl> contenant des boîtes <dt>
Une troisième méthode pour créer un bloc contenant des cellules est d'insérer un tableau à une seule ligne (ou plusieurs si nécessaire). Par nature, le tableau est fait de blocs qui englobent des cellules. Il est plus complexe que les constructions que nous venons de bâtir puisqu'il offre la possibilité d'être structuré en lignes et colonnes, qui comportent elles-mêmes des sous-ensembles.
Pour créer le tableau, je place le curseur là où je veux l'insérer. En ce qui concerne mon site sur la musique traditionnelle, je le place en-dessous de l'en-tête (à condition d'avoir pris la précaution de laisser une ligne vide, sinon, il y a un problème pour en placer une, mais aussi une solution. Voir la remarque comment sortir des blocs div à la section 7).
Dans la barre d'outils, je clique sur l'icône [Tableau]. La boîte de dialogue [Insérer un tableau] s'affiche, et je peux choisir le nombre de lignes et le nombre de colonnes. Peu importe si je ne sais pas encore exactement le nombre de colonnes et de lignes dont j'aurai besoin, car je pourrai toujours modifier ces nombres par la suite. Avant de faire ma barre de menu à une seule ligne, je vais m'exercer en construisant un tableau à 2 lignes et trois colonnes pour en comprendre le fonctionnement.
Figure 11-6
Voici ce qui s'affiche:
Figure 11-7
Le tableau s'affiche par défaut avec une largeur de 100%, une bordure extérieure en trait plein d'épaisseur 1px, des bordures identiques pour les cellules, et des séparations entre cellules de 2 px.
Attention, il y a une différence entre l'affichage en mode Normal, qui affiche les bordures du tableau et celui du navigateur, pour lequel les séparations entre cellules ne sont pas rendues visibles si aucun texte n'est saisi dans la cellule (essayez avec l'icône Navigateur). Je vous conseille donc de saisir quelques lettres dans chacune des cellules. Le mode Aperçu n'en rend pas compte, alors qu'il devrait le faire me semble-t-il.
Si je place le curseur dans n'importe quelle cellule du tableau, de nouveaux sélecteurs de balises apparaissent dans la barre d'état. On peut y voir les balises <table>, <tbody>, <tr>, <td>. Ces balises me montrent qu'un tableau est fait de 4 niveaux de blocs imbriqués.
La balise <table> gouverne le bloc du tableau dans son entier. Vérifiez-le en cliquant dessus pour le sélectionner.
La balise <td> gouverne le bloc de la cellule dans laquelle je suis positionné.
La balise <tr> gouverne le bloc de la ligne contenant cette cellule. Un bloc <tr> inclut une ou plusieurs cellules <td>. Dans le cas présent il comprend 3 cellules par lignes et le bloc <table> comprend deux lignes <tr>.
La balise <tbody> est utile lorsque le tableau comporte beaucoup de lignes et qu'on veut les assembler en différents groupes. Il y a aussi la possibilité de spécifier que certaines lignes sont des lignes de titre (balise <th> à partir de la fenêtre [Propriétés du tableau]). Je ne m'en occuperai pas ici.
Cet emboîtement de blocs et de balises est bien visible en mode Source.
<table style="text-align: left; width: 300px;" border="12" cellpadding="2" cellspacing="2">Je remarque que le nombre de lignes et de colonnes ne se traduit pas par un déclaration de style ou autre attribut html, mais par le nombre de balises qui sont posées au préalable, avant même que les cellules reçoivent du texte.
Si j'ai envie de modifier les nombres de lignes et de colonnes que j'ai déclarés au moment de la création du tableau (figure 11-6), j'ai le choix entre 4 méthodes, comme souvent.
Voici une méthode commode et immédiate pour ajouter, supprimer et manipuler lignes, colonnes et cellules. Si je place le curseur dans le tableau, je peux constater qu'il apparaît 2 sortes de symboles sur le tableau lui-même (figure 11-7). Tout autour se trouvent des carrés qui sont comme des poignées qui me permettront plus tard de redimensionner le tableau. Sur les bords du haut et à gauche de la cellule où est positionnée le curseur (dans la figure 11-7, c'est la première case de la première ligne) deux symboles s'affichent l'un horizontal, l'autre vertical. Chacun comporte un rond central contenant une croix, une flèche à gauche et une flèche à droite.
Avec le rond on supprime (comme la croix veut le signifier), avec les flèches on ajoute. En cliquant sur le rond du symbole horizontal sur le bord supérieur, on supprime la colonne à laquelle appartient la cellule où est positionné le curseur. En cliquant sur la flèche de gauche, on ajoute une colonne immédiatement à gauche. Avec les symboles verticaux du bord gauche, on supprime et on ajoute des lignes.
On peut aussi se rendre aisément dans la barre de menu, [Tableau], et en utiliser les divers sous-menus [Insérer] et [Supprimer]. Attention, il faut d'abord vous positionner en plaçant le curseur pour indiquer clairement où vous voulez supprimer ou ajouter.
Lorsque le pointeur se trouve dans le tableau, un clic droit de la souris donne accès au menu contextuel qui affiche les mêmes fonctions que le menu.
Lorsque le curseur est placé dans le tableau et que je clique sur l'icône [Tableau] de la barre d'outils, je n'obtiens plus la fenêtre [Insérer un tableau] de la figure 11-6, mais la fenêtre [Propriétés du tableau] (figure 11-8). C'est elle qui s'affiche également lorsque je double-clique sur le tableau. Elle comporte deux onglets:
Dans le cadre du haut [Taille] sont inscrites les valeurs choisies auparavant des nombres de lignes et de colonnes. Je peux les modifier et cliquer sur [Appliquer]. Toutefois, on n'a pas le choix de l'emplacement des lignes ou colonnes enlevées ou ajoutées. Les colonnes ajoutées ou enlevées le sont systématiquement à droite et les lignes le sont en bas. Aussi, je trouve que la première méthode par les symboles affichés est très commode.
Je veux maintenant fixer le positionnement général du tableau, par sa largeur et son alignement horizontal dans la page. Toujours dans la fenêtre [Propriétés du tableau] de la barre d'outils, onglet [Tableau] de la figure 11-8, cadre [Taille], je vérifie bien que le tableau a une largeur de 100% par défaut. Je peux la modifier en pixels ou en % de la fenêtre. Les % sont intéressants car ils assurent de conserver cette proportion et de voir le tableau dans son entier même si la fenêtre est réduite. Comme pour tous les blocs d'ailleurs. Je choisis 70%.
La consigne que je viens de donner est déclarée en tant que Style Interne, et elle est affectée à la balise <table>. Il est important que ce soit clair, car comme on va le voir pour les bordures, certaines consignes peuvent s'entrechoquer...
Note: J'aurais pu indiquer la largeur du tableau au moment de sa création avec la fenêtre [Insérer un tableau], onglet [Précisément] (figure 11-6).
Il y a une autre façon de modifier la largeur du tableau ainsi que la hauteur en agissant sur les poignées (petits carrés), lorsque le curseur est dans le tableau (figure 11-7). Mais il faut savoir que les nouvelles valeurs vont être attribuées en pixels. Du coup, cela enlève la valeur de 70% que j'avais fixée.
Par défaut, le tableau est aligné sur la gauche. Par l'onglet [Tableau], toujours dans cette fenêtre [Propriétés du tableau] de la figure 11-8, je peux choisir de le placer également à droite ou au centre. Je choisis "Centre". Dans le menu déroulant, je sélectionne pour [Alignement du tableau] la valeur "Centre".
Cette consigne est traduite en code Source en fixant les marges gauche et droite du bloc <table> en style interne. L'alignement à droite a pour effet de fixer une valeur 0 pour la marge de droite, mais également une marge gauche "auto", faute de quoi ça ne marche pas. De même, c'est là que j'ai découvert comment on fait pour centrer un bloc: marge à gauche et marge à droite reçoivent la valeur "auto".
Pour constater vous-même cette opération, vous pouvez afficher les styles internes. Pour cela, on dispose de deux fenêtres.
Il est possible de modifier les valeurs de la largeur et des marges dans ces fenêtres.
Anomalie: A partir de l'onglet [Tableau] de la figure 11-8, si j'ouvre [Edition avancée] et que je clique sur OK sans rien changer, cela remet le positionnement du tableau à gauche, en effaçant les valeurs "auto" des marges. Idem si j'ouvre l'éditeur de propriétés avancées avec le sélecteur de balise <table>.Nous allons maintenant ajuster la bordure extérieure du tableau. C'est celle qui est associée à la balise <table>. Je vais en fixer l'épaisseur et le style.
Dans la fenêtre [Propriétés du tableau], onglet [Tableau] (figure 11-8), cadre [Bordures et marges], l'épaisseur de la bordure est fixée par défaut à 1px, que je modifie à volonté. Pour bien visualiser comment ça fonctionne, je fixe 12px. Cela dessine une bordure ombrée qui donne l'impression de relief.
Je constate sur la figure 11-9 que la valeur de l'épaisseur 12px n'est pas reportée en style interne. Par contre en cliquant sur l'onglet [Attribut HTML], je la retrouve (figure 11-10), ainsi que les deux autres valeurs du cadre "Bordures et marges" fixées par défaut dans la fenêtre [Propriétés du tableau].
Figure 11-10
La consigne [Bordure] établit avant tout l'existence de la bordure du tableau, mais également des bordures des cellules. Par défaut, la bordure du tableau est en relief et les bordures des cellules en encart. Cependant la valeur inscrite, 12px, ne s'applique qu'à la bordure du tableau.
Par défaut, la bordure apparaît en relief. Comment faire pour avoir un trait plein ou une cannelure? Comment en changer la couleur? Si l'existence de la bordure est posée par la déclaration précédente de son épaisseur, les modifications de style sont faites avec les styles internes propres à la balise <table>. Ceux-ci ne sont pas proposés dans la fenêtre [Propriétés du tableau]. Je dois aller les chercher ailleurs, selon la méthode habituelle, avec [Propriétés des bordures] associé au menu contextuel de la balise <table>. Je donne aux bordures le style "Arête" et une couleur verte.
Figure 11-11
Remarque: dans cette même fenêtre [Propriétés des bordures], il est possible également d'indiquer une valeur de l'épaisseur. Mais cette rubrique n'est pas active. En effet,il pourrait y avoir confusion entre les deux déclarations, l'une en attribut html, et l'autre en style interne.
Dans la fenêtre [Propriétés du tableau], je peux déterminer la couleur de fond du tableau (en vert dans la figure 11-11). C'est une consigne qui va en style interne.
Récapitulons.
Toutes les déclarations de style faites par l'intermédiaire de l'onglet [Tableau] s'adressent à la balise <table>. Cette balise est un bloc. On lui retrouve donc toutes les caractéristiques des autres blocs. Ce qui suit est vrai pour tous les types de blocs.
Les déclarations de style d'un bloc sont de deux sortes. Certaines sont des propriétés de style interne et d'autres sont des attributs html.
Je place le curseur dans le bloc (par exemple dans le tableau). Le sélecteur de la balise (<table>) apparaît dans la barre d'état . En positionnant le pointeur sur ce sélecteur, je clique sur le bouton droit de la souris et le menu contextuel se déroule (figure 2-2). Là j'ai accès aux styles internes par la rubrique [Styles internes]. La rubrique [Propriétés avancées] affiche les attributs html mais aussi les styles internes en langage html brut, tels qu'ils sont reportés en mode Source. C'est donc une deuxième fenêtre pour les styles internes.
Je rappelle que les styles internes associés à la balise peuvent être extraits, toujours grâce à ce menu contextuel de la figure 2-2, nommés en tant que classe ou identificateur, ou associés à toutes les balises d'un même type, de sorte qu'ils sont réécrits dans l'éditeur de styles (figure 2-7). Ceci n'est pas possible avec les attributs html.
Enfin, NVu offre des fenêtres spéciales [Propriétés de...] à certaines balises comme <table> et les cellules qui lui sont associées, les images <img> et les liens <a>. Dans ces fenêtres on trouve un premier panneau où sont affichées les propriétés habituelles du tableau (figure 11-8), de l'image (figure 10-1) ou du lien (figure 8-1), dans lesquelles figurent à la fois certaines propriétés de style interne et des attributs html. En cliquant sur [Edition avancée], on retrouve la fenêtre [Propriétés avancées] du menu contextuel, avec ses deux onglets [Style interne et Attributs html].
Je continue à jouer avec les styles internes associés au sélecteur de la balise <table>. Je passe à [Propriétés de la boîte].
Je peux régler les marges et l'espacement. Pour montrer l'effet du espacement, j'exagère en fixant un espacement de 10px en haut et en bas, et de 30px à gauche et à droite. On voit bien que l'espacement est interne à la bordure du tableau. C'est un espace entre la bordure du tableau et les bordures des cellules.
Figure 11-12
Passons à la structure intérieure du tableau donnée par l'aspect des cellules. Par défaut, des bordures de style "encart" ont été créées par la consigne [Bordure] de l'onglet tableau.
Dans la fenêtre [Propriétés du tableau], onglet [Tableau], les valeurs des marges des cellules (écartement entre les cellules) et des espacements des cellules (marge intérieure de la cellule) sont déjà remplies par défaut à 2px. Je peux les modifier à volonté.
Bien que ce soient des propriétés des cellules, ce sont des consignes qui sont attachées à la balise <table>, en attribut html (figure 11-10). Ce sont de nouvelles commandes (cellspacing et cellpadding) qui agissent sur toutes les cellules du tableau de façon unique.
Avec l'onglet [Tableau], j'ai donné des valeurs pour les propriétés de la balise <table>. Avec l'onglet [Cellules], je donne des valeurs aux propriétés de chacune des cellules par l'intermédiaire de leurs balises <td>. C'est ce volet que je vais explorer. Si je place mon curseur dans une cellule, l'onglet [Cellules] me permet de donner des consignes de style pour cette cellule uniquement. Ces consignes sont associées à la balise <td> de cette cellule.
Je peux y indiquer la taille, la couleur de fond, et l'alignement du texte pour une cellule. Puis je passe à la cellule suivante ou précédente pour donner d'autres consignes.
Anomalie: En principe, je peux donner les mêmes consignes à toute une rangée en sélectionnant "ligne" dans la rubrique [Sélection] ou à toute une colonne. Mais cela ne fonctionne pas. Les données ne sont pas prises en compte.
Une autre propriété de cellule est proposée, celle du style de cellule: "Normal" ou "Titre". Choisir "Titre" remplace la balise <td> par une autre balise <th>. Celle-ci peut recevoir un autre style applicable à toutes les cellules qui seront déclarées "Titre". Voici comment cela se traduit en mode Source si je déclare que la deuxième cellule de la ligne est un titre.
<tbody>Par défaut, des bordures de style "encart" ont été créées, associées à la consigne [Bordure] de l'onglet tableau. Mais leur épaisseur est fixée à 1px, quelle que soit la valeur assignée à [Bordure]. Comme puis-je modifier ce style, l'épaisseur et la couleur des bordures?
Je remarque que dans les [Propriétés du tableau] cela n'est pas prévu ni dans l'onglet [Tableau], ni dans l'onglet [Cellules]. La seule possibilité est le menu [Styles internes] du menu contextuel associé à la balise <td>. Je choisis par exemple des pointillés rouges épais de 3px.
Figure 11-13
Bien évidemment, seule la cellule correspondante reçoit ce style. Comment donner un style commun à toutes les bordures des cellules d'un tableau? Ce qui est déjà commun est l'espacement entre cellules ainsi que l'espacement. Mais le reste?
Le reste étant défini par les styles internes, je définis un style commun à la balise <td> avec l'éditeur de style. Soit pour tous les éléments de type <td> (figure 4-6), soit en donnant un nom d'identificateur au tableau (id=menu) et en définissant le style pour les éléments #menu td (figure 9-6), soit en attribuant une classe à certaines cellules (figure 2-7). Le plus simple est de le faire pour une, et d'extraire le style pour l'appliquer à l'élément de même type.De la même façon je peux définir le style des titres associés à la balise <th>.
Exemple: Si je veux un quadrillage, je choisis le style trait plein (disons rouge, 2px) commun à toutes les cellules. J'ai alors un cadre identique pour toutes les cellules, mais pas de quadrillage. En effet, le quadrillage s'obtient en éliminant l'espace entre les cellules. Je fixe la marge à zéro dans l'onglet [Tableau] (figure 11-8).
Figure 11-14
Remarque: il n'existe pas d'onglet réglant les propriétés d'une ligne entière <tr>. En effet, ce n'est pas utile. Cela compliquerait beaucoup. Si nécessaire, il est possible de le faire par les styles internes de la balise <tr>, comme on l'a expliqué ci-dessus pour tous les blocs.
Les dimensions du tableau et des cellules sont visibles dans les rectangles blancs sur les règles du haut et de la gauche de l'écran (figure 11-11), à condition toutefois que l'affichage de ces règles n'ait pas été désactivé ([Affichage]>[Barres d'outils]>[Règles]). Je peux donc redimensionner les cellules en modifiant les limites de ces rectangles.
Il est parfois souhaitable qu'une cellule d'une ligne occupe la place de deux ou trois autres de la ligne en-dessous, par exemple pour en faire un titre. Après avoir créé normalement les cellules, je vais fusionner "rubrique 2" et "rubrique 3" en une seule avec le titre "stages"
Ce n'est pas possible par les [Propriétés du tableau]. Je dois me rendre dans la barre de menus, menu [Tableau]. Deux possibilités: ou bien je sélectionne mes deux cellules et je sélectionne [Fusionner les cellules sélectionnées] dans le menu déroulant. Ou bien je place mon curseur dans une cellule et je sélectionne [Fusionner avec la cellule suivante]. Puis je saisis le texte.
Figure 11-15
Fusionner recouvre plusieurs opérations. C'est d'une part supprimer la séparation entre les cellules, donc enlever la balise de fin de la première cellule et la balise de début de la seconde, et d'autre part c'est dire que la nouvelle cellule s'étale sur 2 colonnes. En mode Source , c'est la déclaration "colspan", qui veut dire étalement (span) sur plusieurs colonnes (col).
<td>rubrique
1</td>
<td colspan="2"
rowspan="1">stages</td>
"Rowspan" indique de la même façon la fusion verticale de cellule en s'étalant sur des rangées (row).
Il me reste à saisir le texte dans chacune des cellules, à le mettre en forme, et à créer les liens.
Par défaut, le texte est aligné à gauche dans le tableau entier. Dans l'onglet [Cellules] de la fenêtre [Propriétés du tableau], rubrique [Alignement du contenu], j'ai la possibilité de choisir le type d'alignement du texte à l'intérieur de la cellule, aussi bien en large qu'en hauteur. La hauteur n'intervient que lorsque les cellules d'une ligne du tableau ont des contenus de volumes différents. Ces deux règles sont consignées en styles internes.
C'est la seule possibilité de règles sur le texte par l'intermédiaire de cette fenêtre. Je peux donner des styles plus élaborés par les styles internes associés à la balise <td> de la cellule sélectionnée. Ou encore par la barre de mise en forme (gras, italique, etc..).
Plutôt que de régler le style cellule par cellule, je veux que le même style soit donné pour toute la ligne ou pour tout le tableau. Il suffit pour cela que je sélectionne la balise correspondante (<tr>, <tbody> ou <table>) dans la barre d'état et que j'agisse soit avec la barre de mise en forme, soit avec les styles internes associés à chaque balise.
Si je sélectionne <tr> dans la barre d'état, la mise en forme de la barre de mise en forme s'applique à toutes les cellules de la ligne. Si je sélectionne <tbody>, elle s'applique aux cellules de tout le tableau, ou du moins de tout le corps contrôlé par cette balise (les tableaux plus complexes peuvent comporter plusieurs de ces balises en sous-groupes). Si je sélectionne <table> dans la barre d'état, elle s'applique à toutes les cellules du tableau.
Souvent, la première cellule de la barre de menu correspond à notre première page, la page de bienvenue ou d'accueil.
Attention à l'orthographe du mot "Accueil". Il devient de plus en plus fréquent de le voir écrit "Acceuil". Mauvaise impression d'accueil! Cette orthographe est pourtant facile à comprendre. Le "c" suivi de "u" se prononce "k". Donc "accueil", ça se prononce comme vous le savez, "akeuil". Le "c" suivi de "e" se prononce "s". "Acceuil" se prononcerait donc "akseuil" comme "accent". Oui je sais, le "eil" ne se prononce pas "eille" comme dans "pareil" mais "euille" comme dans "feuille". Je vous suis, et je suis d'avis qu'il est urgent que l'orthographe soit réformée et simplifiée. On devrait donc écrire "Accueuil". En attendant, ce n'est pas une exception. Le mot "orgueil" vous pose problème?
Voici un exemple de barre de menu dans laquelle le tableau a une bordure extérieure nulle et un fond bleu. Les cellules ont une bordure de 2px en relief, un fond jaune, un espacement gauche de 10px, un texte gras. Au tableau, j'ai ajouté un espacement gauche de 300px pour montrer qu'on peut pratiquement obtenir le même résultat qu'avec les autres méthodes de barre de menu (comparer avec les figures 11-2 et 11-5).
Figure 11-16. Menu obtenu avec un bloc <table> contenant des cellules <td>
Dans un tableau, une cellule est imbriquée dans 3 autres blocs. Si on ajoute le lien externe, cela fera 5 balises à formater, tandis que la première méthode n'en utilise que 2, et le deuxième méthode 3. Son codage est un peu plus un peu plus volumineux, et son maniement plus complexe.
J'ai le sentiment qu'une certaine répugnance à utiliser les tableaux s'est développée chez les concepteurs de sites, parce que ces tableaux ont été utilisés abondamment et abusivement pour faire des mises en forme de pages entières, à la place des blocs <div>. Cependant, le tableau possède certains avantages, et je ne vois pas pourquoi on n'en profiterait pas. Chaque fois que dans un document, on est tenté de faire une présentation de données en tableau sur une feuille de papier, il est logique de faire de même sur une page électronique, et même pour des menus. En tant que débutant à l'édition web, j'aime bien le tableau justement parce qu'on peut poser et visualiser immédiatement sa structure, même lorsqu'aucun texte n'a été saisi dans les cellules. C'est rassurant parce qu'on pose bien les cadres avant de les remplir. Une autre différence avec les précédentes méthodes: lorsqu'on réduit la fenêtre, les cellules de bout de rangée ne sont pas reportées à la ligne. Chacune d'elle est réduite en proportion si la largeur du tableau est réglée en pourcentage.
A ce point de mon avancement, j'ai créé une ou plusieurs pages que j'ai l'intention d'exposer sur mon site.
Je suppose que j'ai créé ces pages sous forme de fichiers "index", "mapage2", "mapage3", mapage_concerts"', etc... que j'enregistre dans un dossier (ou répertoire) de mon disque dur que j'appelle "monsite".
Publier ça veut dire que ce dossier va devenir public, c'est-à-dire accessible au public pour qu'il puisse le consulter. Ce n'est pas possible si ce dossier reste sur mon ordinateur, à moins qu'il reste allumé en permanence et qu'il soit configuré comme un serveur. Généralement cependant, je devrai déposer une copie de ce dossier chez un fournisseur d'accès internet. C'est ce qu'on appelle "publier". Le fournisseur chez qui vous gérez votre courrier électronique vous offre également cette possibilité d'installer votre site personnel chez lui. De plus, il fournit quelques outils gratuits et conseils pour le réaliser.
Une fois votre site publié, le public internaute le découvrira à condition qu'il en connaisse l'existence. Il y a pour cela deux moyens. On bien vous écrivez à vos connaissances et correspondants pour leur donner l'adresse du site. Ou bien les moteurs de recherche le débusquent selon des critères de mots-clés.
Premier travail de visibilité de vos pages, il est important que chaque page du site soit bien identifiée par son titre. Le titre de ma page est celui que je veux voir affiché par les navigateurs dans la barre de titre de la fenêtre du navigateur. Il apparaîtra également dans les résultats des recherches des moteurs.
Pour saisir le titre: je vais dans le menu [Format] et je clique sur [Titre et propriétés de la page]. Dans la boîte de dialogue ainsi ouverte, j'inscris le titre de ma page dans la rubrique "titre" (première ligne de la boîte):
Informations sur la musique traditionnelle
Figure 12-1
Dans la même fenêtre, je peux inscrire le nom de l'auteur de la page.
Les indications de titre et d'auteur ne sont pas enregistrées dans le corps de texte et sont invisibles au public. Cependant, elles sont visibles en mode Source, dans la partie <head>. Voici comment elles ont été prises en compte:
<title>Informations sur la musique traditionnelle</title>
<meta content="Alain
Boudet" name="author">
Les moteurs de recherches parcourent des millions de pages. Comment repèrent-ils mes pages en fonction des mots-clés que je leur indique? Ils ne lisent pas tout. Ils sont sensibles aux mots contenus dans l'adresse, aux titres et sous-titres de la page identifiés par les sélecteurs h1 à h6. Il lisent également des indications non-affichées qui sont contenues dans la partie <head> visible en mode Source. Ce sont le titre de la page, le nom de l'auteur, et également la "description" et les "mots-clés". C'est ce qu'on appelle le référencement.
J'ai accès à la rubrique [Description] avec la même fenêtre [Format]>[Titre et propriétés de la page] (figure 12-1). J'y inscris une description courte et fidèle du contenu.
NVu n'a pas prévu d'insérer des mots-clés en mode Normal. Or cette opération est très utile. Il suffirait de l'ajouter dans une rubrique à [Propriétés de la page]. Dans une prochaine version? Pour inscrire des mots-clés, il est donc nécessaire d'opérer en mode Source, mais c'est facile. Belle occasion d'aller voir un peu plus la partie <head>.
Précédant la balise de fin </head>, ou suivant les autres meta-balises <title> et <meta content>, j'insère le texte suivant:
<meta name="keywords" content="j'inscris ici les mots clés">.
Attention, n'écrire que des lettres en code html. Pas de é, è ou à, mais é è à. On peut mettre ce texte n'importe où entre <head> et </head> sauf à l'intérieur d'un bloc, le bloc de style par exemple, situé entre la balise de début <style> et la balise de fin </style>.
<head>
...............
<meta content="Multiples
informations sur les divers aspects de la
musique traditionnelle française et
étrangère. Articles, agenda"
name="description">
<meta name="keywords" content="musique
traditionnelle,
bretagne, italie, klezmer">
</head>
Une autre question que je me suis posée: lorsque je navigue avec Mozilla, certaines pages n'affichent pas correctement les lettres spéciales comme é, è, à. Pourquoi? Est-ce que mes propres pages seront correctement affichées par les navigateurs? Merci à André de m'avoir fourni la réponse:
Ca ne
vient pas de
toi, mais du fait que le rédacteur
de la page n'utilise pas la même page de code que toi. Je
m'explique.
Le code ASCII qui permet de
représenter les caractères sur un octet, n'a
été
normalisé à l'origine que pour les 128
premières valeurs (soit 7 bits) car l'ASCII a
été
créé pour les transmissions de texte. Depuis le
code ASCII est utilisé de manière
générale, et on a ajouté des
caractères spéciaux
représentés sur les 128
codes suivants (utilisant donc les 8 bits). Mais comme ce
n'était pas normalisé,
plusieurs interprétations ont fleuri, c'est ce qu'on appelle
les pages de
code (Latin occidental IS0 8859-1, UTF-8, etc.). Le monde Unix utilise
de plus en plus l'UTF, alors que le monde
Windows reste sur l'ISO 8859, ce qui produit ce que tu vois.
En fait, si le
rédacteur de la
page avait utilisé la
norme html, ça ne serait pas arrivé.
En effet,
pour éviter ça, il y
a des séquences html pour représenter les
caractères spéciaux :
é pour e accent aigu
è pour e accent grave
ê pour e accent circonflexe
à pour a accent grave
ô pour o accent circonflexe
° pour le petit rond qui signifie 'degré'
j'en passe et des meilleures
Ces séquences sont indépendantes des pages de
code et
sont interprétées par le navigateur (par toujours
bien
avec IE, comme d'hab) pour
produire le
caractère désiré.
Conclusion: comme NVu utilise les normes html, je ne risque rien.
Dans mon ordinateur, j'ai créé un répertoire "monsite" dans lequel figurent mes différents fichiers de page: "index", "mapage2", "mapage3", mapage4"', etc... Le nom de fichier de la page d'accueil doit forcément être "index.html". C'est à cette condition que cette page va s'ouvrir par défaut lorsque quelqu'un indiquera l'adresse de mon site.
Lorsque je publierai le site, une copie du répertoire "monsite" sera transporté sur le serveur distant avec tout son contenu. Il faut donc qu'y soient jointes également les images que j'ai insérées dans mes pages. Comment agencer tous ces fichiers dans le répertoire? Est-il obligatoire de le structurer en sous-dossiers et lesquels?
Non, il n'est pas obligatoire de le structurer, mais c'est conseillé. Je peux très bien concevoir mon répertoire comme un vaste coffre à jouets où je fourre en vrac tous mes fichiers, pages, images, feuilles de style externe, etc... Le navigateur trouve toujours le fichier s'il a son nom. Cependant, si la machine n'est pas gênée, l'humain que je suis risque d'avoir du mal à s'y retrouver lorsque je voudrai faire des corrections ou modifier le contenu du site. Ce n'est donc pour une question technique qu'il est fortement conseillé de structurer le site, mais pour aider notre esprit. Faites-le donc selon votre goût.
Il est vivement conseillé de créer des sous-dossiers: "images" par exemple, et pourquoi pas plusieurs sous-dossiers correspondant à chacune des pages. Je peux aussi créer des sous-dossiers pour un ensemble de pages dans une arborescence: tous mes documents "musique irlandaise" dans l'un, les documents "musique italienne" dans un autre, etc...
Est-il possible d'importer des textes déjà saisis en traitement de texte, sans avoir à les ressaisir entièrement? Il est évidemment possible de faire des "copier-coller", et ça marche. Le problème est que ce n'est pas bien propre sur le plan des codes de mise en forme, car on importe aussi tous les styles intégrés (sauf pour les traitements de texte qui utilisent des feuilles de style). Si je veux que le texte collé bénéficie de la feuille de style interne de ma page, je dois l'importer sans aucune mise en forme. Il est nécessaire pour cela de l'"Enregistrer sous" en mode texte (.txt) avant de le copier. Utiliser également la commande [Format]>[Annuler le style de texte].
Avant de publier ma page, je vais procéder à quelques vérifications pour éviter de mauvaises surprises:
Euh,
il est un peu gros! Je peux le réduire, mais les lettres
deviennent difficilement lisibles. Le modèle en anglais est
plus stylé."made with NVU" 
Si de plus je souhaite que mes correspondants me laissent leurs coordonnées, il y a bien mieux employer un formulaire. Mais ceci est une autre histoire que vous pourrez apprendre dans d'autres tutoriels et dans l'Aide. Ce n'est pas plus difficile que le reste, mais je ne veux pas écrire sur toutes les possibilités de NVu, je ne n'en finirais pas. Il faut bien stopper quelque part.
Voici la partie la plus importante de tout ce tutoriel.
Vous maîtrisez l'utilisation de l'éditeur NVu et
vous savez construire votre site web. Mais qu'allez-vous y mettre
dedans? La question essentielle est:
Qu'est-ce que je veux communiquer?
Faire de belles pages c'est bien. Respecter la syntaxe html, être doué et astucieux en technique, c'est SUPER. Mais quel sera le contenu des pages? Imaginez une belle vitrine, avec de nombreuses astuces et de belles décorations, mais vide, ou absurde, encombrée, incompréhensible, ennuyeuse, sans intérêt. Comment donner de l'intérêt, du sens à votre site? L'intérêt et le sens du contenu dépendent de la réponse à ces deux questions:
La réponse à la première question ne peut être que personnelle.
Pourquoi donc faire un site? Est-ce que j'ai envie de jouer avec l'outil, est-ce que c'est pour faire comme les autres, pour me sentir à la page? Est-ce pour communiquer ma passion pour un sujet? Ou parce que j'ai des documents, des opinions à proposer et partager pour apporter ma contribution à un monde meilleur? La condition pour répondre à cette question, c'est de prendre du temps pour s'interroger. Impossible d'esquiver ce temps de maturation. Prendre le temps de laisser mûrir cette réflexion avant de passer à la réalisation. Un temps de méditation. Laisser émerger ce qui vient...
Toutes les réponses sont bonnes, à condition qu'elles soient sincères. La sincérité est ce qui donnera de l'intérêt, du sens, de la cohérence, du piment, de la force, à votre site. Si c'est pour jouer, votre site sera construit réellement dans ce but. N'essayez pas de faire semblant d'être autre chose. C'est ce qui détermine la teneur du message. Un message, ce n'est pas forcément une idée intellectuelle ou une information précise, c'est ce que j'ai envie de partager, ce que j'ai envie que le lecteur perçoive de ce que je montre.
Deuxième question: sous quelle forme communiquer pour intéresser le lecteur? Comment présenter le message pour qu'il soit lisible et compréhensible?
Cette question met en lumière la distinction entre l'idée et les mots qui communiquent l'idée. Vous connaissez ça dans les conversations? Vous voulez dire quelque chose et puis, vous ne trouvez pas le mot qui l'exprime. Quelqu'un vous suggère un mot, et non, il ne représente pas votre idée. Constatez que l'idée existe en-dehors des mots. Les mots sont là pour l'habiller, lui donner un corps plus concret, je pourrais dire un corps de chair. L'idée, c'est l'esprit et le mot, c'est le corps.
Choisir les mots, ou encore d'autres langages tels que des dessins ou images, ça fait partie des techniques de communication, et ça peut se perfectionner. On peut recueillir de nombreux conseils à ce sujet. Mais ça ne peut pas fonctionner si vous n'avez pas la réponse à la première question sur le sens de ce que vous voulez communiquez. Pour donner corps au message, il faut que l'intention du message soit claire.
Exemple de conseils
Déterminer quel public vous voulez toucher. Adaptez votre langage à celui de votre public. Notez: l'idée reste la même, en accord profond avec vous, mais le langage peut changer pour être compris des autres. Ainsi, si vous adoptez un langage SMS, c'est pour toucher ceux qui parlent comme ça. Pour les autres, ce sera comme une langue étrangère, et ils n'auront pas envie de faire l'effort d'apprendre. Dans le même ordre d'idée, si vous parlez bien en français, mais avec des mots techniques compris uniquement de ceux qui ont la culture, pourquoi pas? Avec le langage de la communication informatique par exemple, blogs, php, javascript, ftp, paramètres proxy ou même des mots très courants comme "publier" qui ont un sens précis qu'on ne peut pas deviner si on est en-dehors du coup. Tout ça c'est possible à condition d'être cohérent: cela signifie que vous vous adressez à ces personnes de façon spécifique et voulue.
Le langage pour faire passer ses messages ne comporte pas seulement des mots, mais toute la présentation, avec ses couleurs, ses formes, la disposition des différents éléments, le nombre de pages, les images, les dessins, les sons, les animations, etc... Trop d'animations, de couleurs, ou trop d'informations entassées dans une même page risque de distraire le lecteur et de le détourner du vrai message.
Le site que je vous ai conduit à créer reflète à la fois mes conceptions et une logique d'apprentissage progressif. C'est seulement un exemple. C'est comme cela que j'ai appris à utiliser NVu et que j'ai constitué mon site.
Abandonnez mon schéma et créez votre site à votre goût. Il y a bien d'autres exemples de sites à votre disposition, tels ceux proposés sur le forum NVu en français. Il y a bien d'autres outils, fonctionnalités et ressources à votre disposition, que vous pouvez utilement vous approprier. Il vous suffira d'aller consulter l'aide et d'autres tutoriels qui sont cités plus loin. Exemples d'outils et de fonctionnalités:
Oui, je vois, vous voulez absolument un compteur. Tout le monde en veut un. Alors rendez-vous chez votre fournisseur d'accès ou à http://www.123compteur.com.
Demandez-vous cependant dans quel but vous en voulez un. Est-ce pour votre seule information ou pour ceux qui liront votre page?
Le manuel d'apprentissage que vous avez sous les yeux, ainsi que plusieurs des tutoriels cités sont installés sur le site de Framasoft, un annuaire de logiciels libres. Vous aurez avantage à vous rendre à Framasoft, rubrique tutoriels: http://www.framasoft.net/rubrique4.html.
Qu'est-ce que Framasoft? Voir http://www.framasoft.net/article3050.htmlVoici des sites et des pages web qui expliquent le langage html ou exposent des façons de mettre en page en langage html.
2 logiciels gratuits à télécharger comprenant une palette de définition des couleurs de façon très simple, en RVB et TLS, avec une luminosité définie du noir au blanc, et une astucieuse pipette capable de prélever, enregistrer et recopier n'importe quelle couleur de votre écran.
La Boîte à Couleurs, par Benjamin Chartier, http://pourpre.com/colorbox
Programme RVB. http://www.ptorris.com/