N|VU

Ze|N tutoriel

Logiciel:	Nvu

Auteur(s):	Lindows Inc.

Plateforme(s):	Linux, Windows

Version:	0.41 fr

Licence:	mpl/gpl/lgpl

Site:	http://nvu.com

Par

Fun Sun (jean-marc juin )

14/05/04 (première version)

24/06/04 (corrections + mise à jour 0.3)

25/08/04-->19/10/04 (amélioration générale, enfin je l'espère...)

Correcteurs

Christian (Choul)

Goofy

Version francisée 0.41

Publié sous licence Creative Commons By-NonCommercial-ShareAlike

http://creativecommons.org/licenses/by-nc-sa/1.0/

Ce document sera mieux lu avec la police bitstream, la télécharger à cette adresse

http://ftp.gnome.org/pub/GNOME/sources/ttf-bitstream-vera/1.10/

TABLE DES MATIERES

Table des matières

A) Introduction	6

1) Créez des pages Web et un site complet	6

1.1) L'orientation choisie : conformité aux recommandations du w3c	6

2) Connaissances requises	7

2.1) Vous avez déjà des connaissances au préalable ?	10

3) La double face du langage WYSIWYG	10

3.1) Petite explication	10

3.2) Savoir faire la différence	11

3.3) Le format texte brut	14

3.4) Le langage des pages Web	14

3.5) Pour approfondir la connaissance du langage HTML	15

4) Les structures d'une page Web et d'un site	16

4.1) Rudiments de la structure logique d'une page Web	16

4.2)Rudiments de la structure logique d'un site Web	17

4.3) Le design des pages Web : voir ou lire ?	17

4.4) Outils d'aide supplémentaires pour le design des pages Web	18

4.5) Comment créer un site Web ?	19

B) Installation et configuration	20

1) Installation	20

1.1) Sous windows	20

1.2) Sous Linux	21

2) Configuration	22

2.1)Avec Édition/Préférences...	22

2.2)Avec Paramètres d'édition des sites	23

C) Utilisation	25

1)Exemple de texte à reproduire tel quel (à la main)	26

1.1) Début du premier exercice	26

2) Edition d'une page Web	29

2.1)Première étape : paramètres généraux d'une page HTML.	29

2.2)Petits assistants utiles à l'élaboration d'une page	31

2.3)Deuxième étape : retranscription du texte	34

2.3.1) La structure du texte	34

2.3.2)Les éléments structurels : listes, liens, tableaux	36

2.3.2.1) Édition de liens externes	36

2.3.2.2) Édition de liens internes dans un document	38

2.3.2.3) Édition des listes	41

2.3.3) Édition de tableaux	41

2.3.4) Insertion d'une image	44

2.4)Récapitulatif : structure d'une page HTML	47

2.5)Exemple de code HTML	52

2.6)Fin du premier exercice	53

D) Mise en forme d'une page HTML	54

1)Les différentes mises en forme avec Nvu	54

1.1) Début du deuxième exercice	54

1.2)Mise en forme avec une feuille de style	55

2) 1re manière : mise en forme intégrée au code HTML	56

2.1) La barre d'outils Format (alt + v + w + f).	57

2.1.1) Corps de texte (attributs des caractères, couleur de page)	58

2.1.2) Hauteur des caractères, styles des caractères	58

2.1.3) Listes	59

2.1.4) Alignement des paragraphes	60

2.1.5) Calques	60

2.2) Le menu Format (alt + o)	61

2.3)Récapitulatif : mise en forme intégrée dans le HTML	62

2.4)Exemple de code HTML pour une mise en forme intégrée	65

2.5) Fin du second exercice	66

3) 2e manière : utilisation des styles internes	67

3.1) Début du troisième exercice	67

3.2) Découverte de l'éditeur CSS Cascades	69

3.3) Création d'une feuille de style interne	72

3.4) Un peu de pratique !	90

3.4.1) Premier exercice : mise en forme simple	90

3.4.2) Deuxième exercice : mise en forme complexe	92

3.4.2.1) Transformer rapidement un hyperlien en bouton	92

3.4.2.2) Mise en forme des calques	94

3.4.2.3) Modification des paramètres d'un calque avec l'éditeur CSS	96

3.4.2.4) Modification des paramètres du sous-titre du calque	98

3.5) Récapitulatif	99

3.6) Exemple de Code HTML et CSS	100

3.7) Fin du troisième exercice !	101

4) 3e manière : exporter une feuille de style	103

4.1) Début du quatrième exercice	103

4.2) Export de la feuille de style avec l'éditeur cascades	104

4.2.1)Adresses relatives	106

4.3) Attacher plusieurs pages avec une même feuille CSS	108

4.4) Petits fignolages	109

4.4.1) La correction orthographique	109

4.4.2) Ajouts de styles en ligne	112

4.4.3) L'éditeur de propriétés avancées	113

4.4.4) Sélection des classes et des identificateurs à la volée	116

4.5) Gérer des pages modèles	117

4.5.1) Comment créer une page modèle ?	117

4.5.2) Comment travailler avec une page modèle ?	119

4.5.3) Définir des zones éditables avec une page modèle	119

4.6)Comment maintenir votre site en ligne avec Nvu ?	120

4.7)Récapitulatif	121

4.8)Exemple de code HTML et CSS (feuille de style exportée)	121

4.9) Fin du quatrième exercice	122

5)Créer des Formulaires	123

5.1)Qu'est-ce qu'un formulaire ?	125

5.2)La méthode choisie	125

5.2.1) Méthode suivie	126

5.3) Définir un formulaire (début du cinquième exercice)	127

5.3.1) Première approche : créer un liste de choix pour simplifier la navigation dans un site Internet.	128

5.3.2)Définir les mentions générales du formulaire	129

5.3.3)Création du bouton de navigation	132

5.3.4) Création de la liste de choix	134

5.3.4.1) Inscription des groupes et des options	136

5.3.5) Explication du code JavaScript	138

5.3.5.1) L'explication du code	140

5.3.5.2) Ajouter la navigation au clavier à notre script	143

5.3.5.3) Ajoutons de l'élégance à notre script	144

5.3.5.4) Le top de l'élégance	145

5.4)Approfondir : réaliser un formulaire qui réagira en fonction de l'entrée de l'utilisateur.	147

5.4.1) Définition générale du formulaire	147

5.4.1.1) Définition de l'événement à l'aide de JavaScript	148

5.4.2)Définir des champs particuliers	150

5.4.2.1)Les champs texte nom et prénom	150

5.4.2.2)Le champ Zone de texte	154

5.4.2.3) Définition d'étiquettes relationnelles pour les champs nom et prénom	157

5.4.2.4)Définir les propriétés de champs des formulaires.	158

5.4.3) Styliser votre formulaire avec l'éditeur Cascades	159

5.4.4) Vérifier les saisies du formulaire à l'aide de javascript	160

5.4.4.1) Courte présentation du code à insérer	161

5.5)Fin du cinquième exercice	165

6) Pour aller plus loin	166

6.1)Gérez votre site avec le gestionnaire interne !	166

6.1.1) Paramètres de l'éditeur de sites	167

6.2)La gestion des erreurs (ou Bugs) sous Nvu	169

6.3)Pour aller plus loin encore...	170

7)Conclusion	171

8)Annexes	173

A) Familles de polices et tailles des polices	173

B) Auteur, utilisateur, navigateur web	176

C) Les médias	177

D)Remerciements	179

Introduction

Créez des pages Web et un site complet

Un éditeur de pages Web comme NVU se présente sous la forme d'un simple traitement de texte avec toutes les fonctions relatives au traitement de texte, sauf qu'ici, elles sont orientées vers la publication de pages pour Internet.

On parle alors d'éditeur en mode WYSIWYG, c'est-à-dire que vous créez votre page Web entièrement en mode graphique : vous voyez à l'écran ce que vous faites et ce que vous avez fait sera ce qui sera vu par les autres. Nul besoin de connaître parfaitement le langage HTML ; il vous suffit de connaître les bases de l'édition avec Nvu pour élaborer très facilement un site Web et mettre en ligne avec le même programme vos pages, ou pour effectuer une maintenance de votre site en ligne.

Nvu s'adresse aussi bien au débutant qu'au plus confirmé. Malgré sa jeunesse, version 0.41, au moment où ce tutoriel est écrit, il offre un large éventail d'outils qui vous laisse un libre choix pour la création de vos pages HTML. Ce tutoriel vous expliquera pas moins de trois manières différentes pour créer des pages Web !

L'orientation choisie : conformité aux recommandations du w3c

A la suite de plusieurs messages lus ici et là, je précise l'orientation générale de Nvu qui me semble n'avoir pas été saisie véritablement.

Étant un projet libre à l'origine. Nvu respecte une certaine forme d'écriture pour le code HTML qui correspond à la spécification du w3c, HTML 4.01 transitionnel.

Par ce choix, le code HTML produit par Nvu respecte une écriture standardisée de HTML qui n'inclut pas du code propriétaire (inclusion d'éléments multimédias comme le flash par exemple) ou difficilement compréhensible par des navigateurs non graphiques (frames, images mapées).

Une telle orientation nécessite une adaptation qui n'est en aucun cas une restriction mais bien une ouverture à l'autre.

Vous vous assurez que vos pages seront lisibles par n'importe quel navigateur qu'il soit graphique ou non, qu'il n'y aura aucune restriction suivant le système d'exploitation et/ou le type de navigateur. (Par exemple, une grande chaîne de magasin de disques m'empêche d'accéder à son site parce que le système d'exploitation que j'utilise n'est pas propriétaire...)

Outil supplémentaire :

Gérer un site avec Nvu 0.41 par Isabelle Motte :

http://www.framasoft.net/article3200.html
Ce tutoriel est un véritable Manuel de prise en main de Nvu. A lire si vous souhaitez connaître les bases de l'interface graphique de Nvu.

Connaissances requises

Dois-je connaître au préalable le langage HTML pour pouvoir utiliser Nvu ?

Non. Mais connaître quelques bases est indispensable, d'où le partage de ce document en deux sections principales :

La première donne une approche succincte du langage HTML avec quelques liens essentiels.

La seconde aborde directement l'utilisation de Nvu.

Je présuppose donc que vous maîtrisez quelques fonctions de base dans l'utilisation d'un ordinateur :

Savoir vous servir d'un ordinateur.

Savoir créer un répertoire ou un dossier (les fameux dossiers jaunes sous Windows) dans un endroit spécifique de l'arborescence.

Partir de zéro alourdirait considérablement ce tutoriel (si vous partez de zéro, je vous conseille de lire celui consacré à Mozilla Composer [www.framasoft.net/article1456.html]; il vous donnera toutes les informations nécessaires pour un grand débutant. Sachez que Nvu et Mozilla Composer sont basés sur le même moteur, Gecko ; ainsi, vous ne serez pas dépaysé).

De toute façon la meilleure aide dont vous disposerez est votre motivation ; c'est elle qui vous aidera le mieux à transformer un obstacle d'apparence infranchissable en une chose simple et parfaitement maîtrisable. Un tutoriel vous donnera quelques directives tout au plus.

Notes pour ce tutoriel

Ce tutoriel a été réalisé par un amateur s'intéressant à l'édition Web à ses moments perdus. Nvu m'a beaucoup aidé dans la compréhension du fonctionnement de certaines parties de l'édition Web (notamment les CSS), d'où l'idée de réaliser un tutoriel pour ce programme très prometteur, car son utilisation est extrêmement simple, même s'il est encore en phase de développement et qu'il risque de beaucoup changer dans le futur. Je pense toutefois que les bases sont là, et qu'elles ne changeront pas avant longtemps, bien que cela soit possible...

Débutant dans l'édition de pages Web, je n'ai pas eu le temps d'acquérir des mauvaises habitudes pour la réalisation de pages au format HTML. J'ai trouvé assez vite cette nouvelle manière de concevoir le Web qui a pour but de séparer la structure (page HTML pure) de la présentation (feuille de style css).

C'est cette forme-là que j'ai voulu retransmettre ici tant elle est simple d'utilisation et évidente. D'ailleurs Nvu le permet très facilement. Écrire une page uniquement avec les balises HTML puis ajouter une décoration, un style en CSS ensuite.

Je maîtrise pas complètement toutes les propriétés CSS. Lorsque je connais mal une propriété, je me réfère à la spécification CSS2 du W3C ou à vos remarques toujours pertinentes.

Mon explication risque de ne pas être toujours très claire. En conséquence, je vous invite à en modifier les termes si vous avez une approche plus simple et pratique.

D'une manière générale, si vous trouvez certains passages mal expliqués ou si vous estimez que j'ai écrit une grosse ânerie, n'hésitez pas à le signaler.

Veuillez contacter l'équipe des tutoriels de Framasoft pour la coordination des modifications.

Vous avez déjà des connaissances au préalable ?

Vous pouvez passez directement à la section B) Installation et configuration de Nvu .

La double face du langage WYSIWYG

Tout le monde a, au moins, une fois dans sa vie, tapé du texte à l'aide d'un traitement de texte, MS-Word le plus souvent. Les traitements de texte de ce type sont nommés traitements de textes en mode WYSIWYG. Nul ne s'imagine ce qui se passe pendant qu'il tape son texte. Ce qui est plutôt normal, lorsque le processus interne de transcription du programme vous est, délibérément, caché. Le caché est le codage qui n'apparaît pas. Ce codage qui n'apparaît pas est protégé par une licence de type propriétaire. Avec un programme protégé par une licence libre, vous avez accès à ce codage.

Petite explication

Il ne sera jamais assez dit qu'un ordinateur est complètement stupide ; son intelligence provient de la manière dont l'être humain l'utilise et non l'inverse (sauf pour le cinéma et les livres d'anticipation). Un ordinateur ne sait rien dans l'absolu, il faut tout lui dire. Lorsque nous lisons un livre (un passionné de livres est un liseur et non un lecteur ; le lecteur lit le journal ou un magazine), nous savons faire la différence entre le titre, le sous-titre, un paragraphe, une image, un tableau, etc. L'ordinateur, quant à lui, ne sait rien distinguer et il n'a, ni connaissance préalable, ni connaissance intuitive de la structure qui organise un texte.

Lorsque, dans un traitement de texte, nous désirons un titre général, nous utilisons un titre de hauteur 1 (ou titre 1 pour la plupart des suites bureautiques). Ce format correspond, par une convention explicite ou implicite, à des caractères gras accompagnés d'une certaine hauteur des lettres qui va permettre de le différencier du texte, par exemple. Il suffit d'observer la structure de ce texte pour le comprendre.

Cette distinction est pertinente pour nous, humains, mais pour l'ordinateur, elle ne l'est absolument pas. Pour lui, ce sont des paramètres techniques qui ont été programmés et attribués en mémoire, attendant que l'utilisateur déclenche, par une commande spécifique, l'utilisation de ces paramètres pré-programmés à l'aide d'un logiciel d'aide au traitement automatisé du texte comme OpenOffice.org ou Microsoft Word, par exemple, pour obtenir une présentation de texte honnête .

Savoir faire la différence

Donc, lorsque nous écrivons un texte à l'aide d'un traitement de texte, il se produit deux choses simultanément :

la première fait apparaître le texte tel que nous le souhaitons avec une structure organisée et pertinente pour l'humain (ce qui apparaît sur la feuille blanche),

la seconde transcrit en un langage interne toute une série de paramètres techniques, préalablement mis en mémoire, et qui correspondent au format désiré par l'auteur du texte (ce qui n'apparaît pas sur la feuille blanche, mais qui constitue un dialogue interne avec le programme).

Exemple (l'envers du décors) :

Utilisons le traitement de texte Abiword (traitement de texte libre, est-il encore besoin de le préciser ?) et écrivons ce simple texte :

Une phrase d'exemple.

Enregistrons ce document au format natif "abw" , puis essayons de voir ce que, d'habitude, nous ne voyons pas. Pour obtenir ce résultat, il suffit d'ouvrir le fichier abw à l'aide de n'importe quel éditeur en mode texte comme notepad sous windows ou mieux notepad2 toujours sous windows (le dernier bijou en date et libre qui plus est), par exemple.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE abiword PUBLIC "-//ABISOURCE//DTD AWML 1.0 Strict//EN" "http://www.abisource.com/awml.dtd">
<abiword template="false" styles="unlocked" xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:svg="http://www.w3.org/2000/svg" xmlns:dc="http://purl.org/dc/elements/1.1/" fileformat="1.1" xmlns:math="http://www.w3.org/1998/Math/MathML" xmlns:awml="http://www.abisource.com/awml.dtd" xmlns="http://www.abisource.com/awml.dtd" xmlns:xlink="http://www.w3.org/1999/xlink" version="2.0.6" xml:space="preserve" props="dom-dir:ltr; lang:en-US">
<!-- ======================================================================== -->
<!-- This file is an AbiWord document. -->
<!-- AbiWord is a free, Open Source word processor. -->
<!-- More information about AbiWord is available at http://www.abisource.com/ -->
<!-- You should not edit this file by hand. -->
<!-- ======================================================================== -->
<metadata>
<m key="dc.format">application/x-abiword</m>
<m key="abiword.generator">AbiWord</m>
<m key="abiword.date_last_changed">Tue Oct 19 22:14:26 2004</m>
</metadata>

<styles>
<s type="P" name="Normal" followedby="Current Settings" props="text-indent:0in; margin-top:0pt; margin-left:0pt; font-stretch:normal; line-height:1.0; text-align:left; bgcolor:transparent; lang:en-US; dom-dir:ltr; margin-bottom:0pt; text-decoration:none; font-weight:normal; font-variant:normal; color:000000; text-position:normal; font-size:12pt; margin-right:0pt; font-style:normal; widows:2; font-family:Times New Roman"/>
</styles>

<pagesize pagetype="Letter" orientation="portrait" width="8.500000" height="11.000000" units="in" page-scale="1.000000"/>
<section props="page-margin-footer:0.5in; page-margin-header:0.5in">
<p style="Normal">Une phrase d'exemple.</p>
</section>
</abiword>

</office:document-content>

Remarques : Comme vous pouvez le voir, il y a là tout une série de codes qui correspondent au format du document, alors que notre phrase est tout en bas.

Passons sur le sens de ce codage. Vous remarquerez trois choses essentielles :

- les caractères du texte ne possèdent aucun signe diacritique (accents et cédilles en tout genre accompagnant voyelles ou consonnes suivant les langues). On dit alors que le format du texte est UTF-8, comme vous pouvez le lire dans la première ligne. Quant à nous, nous utiliserons le terme de texte brut,

- vous remarquerez aussi les signes <> et </> qui représentent ce que nous appellerons des balises. Ces balises servent à distinguer le texte que vous écrivez de l'élément code qui spécifie la forme stylistique et l'aspect typographique.

-La structure des fichiers abiword est très proche de la structure d'un fichier HTML. Vous y retrouvez une section Doctype qui correspond à la définition du type de document pour les pages HTML, une section metadata qui correspond au méta données en HTML, une section styles que vous retrouvez aussi en HTML, une section pagesize qui correspond à l'élément body en HTML et aussi des balises que vous allez très vite rencontrer comme p qui définissent un paragraphe.

Le format texte brut

On pourrait presque dire que c'est le format d'écriture natif à tout ordinateur. Il ne demande aucun style typographique, n'accepte aucun accent et a besoin de codes spéciaux pour rétablir l'accentuation des lettres. Le format texte brut est l'entité d'écriture la plus simple qui existe pour un ordinateur. Elle n'a pas besoin d'interface graphique poussée.

Ainsi, ce format d'écriture peut très bien fonctionner sans interface graphique. Les plus attentifs d'entre vous auront compris pourquoi Linux est réputé pour son double fonctionnement graphique et non graphique, et pourquoi il utilise autant de fichiers Scripts, au format texte brut, qui vous permettent de le configurer comme bon vous semble. Lorsqu'il y a plantage de l'interface graphique, il vous suffit alors de choisir une console virtuelle en mode non graphique. Le système fonctionne toujours, vous pouvez faire absolument tout ce que vous voulez hormis, bien évidemment, utiliser les applications qui nécessitent une interface graphique poussée.

Le langage des pages Web

Pour écrire une page Web, vous utilisez ni plus ni moins que du texte brut agrémenté de codages spéciaux qui transforment votre texte au format brut en un texte au format graphique, donc avec un style et une typographie propres et lisibles par n'importe quel navigateur Web et compréhensibles intuitivement.

Ce langage propre à la publication des pages Web est appelé HTML pour Hyper Text Markup Language. Autrement dit, c'est un langage de balises qui transforme du texte brut en un hypertexte destiné au format électronique.

L'hypertexte se distingue du texte normal, en cela qu'il peut contenir des liens de connexions avec d'autres textes quelque part sur le Web ou à l'intérieur d'un site. Chose impossible à obtenir physiquement avec un livre. On peut dire, d'une certaine manière, que les appels de notes et autres renvois bibliographiques sont les prédécesseurs des liens électroniques actuels, donc de l'hypertexte.

Le langage HTML établit l'ensemble des balises qui transforment un texte brut en un texte stylisé et typographié avec paragraphes, tableaux, images, etc. C'est une convention universelle dont le World Wide Web Consortium (http://www.w3.org) est le coordinateur principal. C'est lui qui définit ce qui est appelé les standards du Web. Nous y reviendrons plus tard.

Exemples de texte brut avec leurs balises de transformation :

<h3>Le langage des pages Web</h3>

Les balises sont toujours les mêmes et signifient :

<> : pour ouverture d'une balise qui transformera le texte brut ;

</> : pour fin de la transformation du texte brut. À l'intérieur de ces balises, vous glissez toutes les commandes de styles et de typographies possibles et imaginables (dans la limite de la possibilité du langage HTML, bien sûr).

Dans notre exemple, j'ai demandé un titre de hauteur 3 (ou h3), parce que je suis la convention suivante :
- titre général avec un titre de hauteur 1 (ou h1)
- titres de paragraphes avec un titre de hauteur 2 (ou h2)
- sous-titres de paragraphes avec un titre de hauteur 3 (ou h3)
- sections à l'intérieur des sous-titres ou des titres de paragraphes avec un titre de hauteur 4 (ou h4).
- je réserve les titres de hauteur 5 (h5) et 6 (h6) pour tout autre usage, nom d'auteur en fin de texte, par exemple.

<h4>Exemples</4>

Vous devriez être capable d'en comprendre le sens.

Pour approfondir la connaissance du langage HTML

Une seule référence tant elle est complète, didactique et très bien présentée. Vous pouvez la télécharger gratuitement sur Internet ou en acheter la version papier en librairie. C'est la référence absolue en la matière pour tout débutant, je n'ai pas trouvé mieux.

SelfHTML (http://www.selfhtml.com.fr/)

Les structures d'une page Web et d'un site

Rudiments de la structure logique d'une page Web

Même si une page Web est écrite entièrement en texte brut et formatée à l'aide du langage HTML, elle n'en possède pas moins une structure logique simplissime, mais très utile.

En parcourant le contenu réel d'une page de traitement de texte, nous observons qu'il existe de nombreux paramètres externes à notre phrase. Ces paramètres fournissent des indications au programme qui les lit, afin de rendre à l'identique ce que vous êtes en train de taper sur votre feuille blanche. Vous observerez qu'il n'existe pas de style typographique (gras, souligné, italique ). Tout est écrit au format texte brut sans aucun style typographique.

Une page Web est partagée en deux sections essentielles :

l'en-tête de la page (ou head) et

le corps de la page (ou body).

L'en-tête de la page ou head

Dans l'en-tête sont inscrits toutes les données nécessaires à la bonne compréhension de la page par le navigateur. On y trouve :

la déclaration de type de document (DTD) ; à savoir quelle version du langage HTML vous utilisez (3.2, 4.01, xHTML 1.0, xHTML 1.1, etc.),

les méta données qui précisent le nom de l'auteur, l'encodage des caractères (européens, asiatiques, arabes,...), par exemple,

les langages de scripts extérieurs ou internes auxquels vous faites appel (JavaScript, CSS, etc.).

Le corps de la page ou body

C'est à l'intérieur de cette section que vous écrivez vos pages.

Ne vous inquiétez pas de ces sections ! Nvu se chargera de les remplir automatiquement pour vous. Elles vous sont précisées à titre indicatif.

Rudiments de la structure logique d'un site Web

Image 1 Arborescence simplifiée d'un site web Une site web est composé par : Un répertoire racine qui contiendra toutes vos données ; il aura le même nom que votre site, ici acrose. Dans ce répertoire, vous glisserez toutes vos pages HTML. Si votre site n'est pas volumineux, inutile de les insérer dans un nouveau répertoire. Le contraire sera vrai en conséquence. Insérez toujours plusieurs autres répertoires : un pour vos images que vous nommerez img, images, ou comme vous voulez un autre pour vos feuilles de styles CSS (si toutefois vous les utilisez) un troisième pour vos scripts, etc.

Le design des pages Web : voir ou lire ?

C'est certainement le point le plus crucial à étudier en profondeur tant la plupart des sites Web sont quasi illisibles pour les raisons suivantes :

soit il y a une utilisation excessive de l'utilisation graphique et le site est alors fait pour être vu et non pour être lu,

soit le site est orienté vers la lecture, mais la présentation n'est absolument pas maîtrisée et est pensée comme si l'on avait affaire à un livre en papier, ce qui est absurde en soi.

Consulter sur le sujet le Guide pratique de conception et d'évaluation ergonomique de sites Web (http://www.crim.ca/rd/publications/ERG_MilFal_0108-21.pdf).

Gardez en mémoire que ce guide est destiné, tant aux débutants, qu'aux plus expérimentés, et qu'il est orienté vers une utilisation professionnelle. Dans un cadre non professionnel, il est possible et même souhaitable de prendre des libertés par rapport au contenu ergonomique d'un site Web. Cependant, si on parle toujours de charte graphique, pensez à la charte typographique ! Faites en sorte que votre site soit lisible et que la lecture soit adaptée au médium utilisé.

Outils d'aide supplémentaires pour le design des pages Web

« Principles of Graphic Design » par Andrew Mundi est une superbe animation tout en flash et en anglais qui vous livre les principes de base du design. En 5 étapes, vous pourrez comprendre, tester et interagir avec cette animation. De plus, vous pouvez télécharger l'animation et la consulter chez vous hors-ligne (gratuit) !

Les étapes :

1) Introduction, qu'est-ce que le design ?

2) La théorie des couleurs

3) Mise en page

4) Perspective

5) Typographie

Chromoflash (en français). Pour tester en ligne l'harmonie des couleurs sur une page web fictive, le résultat peut être envoyé par courriel. C'est gratuit.

Chroma (en français). Un dictionnaire complet sur les couleurs et la théorie des couleurs. Possibilité de le télécharger pour le consulter hors-ligne.

color blender (en anglais) par le célèbre Eric Meyer . Permet d'obtenir un échantillon de plusieurs couleurs par dégradé à partir de deux couleurs choisies par l'utilisateur.

colorMatch Remix (en anglais). Un superbe outil similaire à CHROMOFLASH, mais différent dans son traitement des couleurs. Il est possible de télécharger une archive et de l'installer chez soi (nécessite quelques connaissances, le programme est livré brut de chez brut).

Ncolor (en français et en anglais). Un superbe outil que vous pouvez consulter en ligne ou chez vous hors ligne. Très bien écrit tout en javascript. Hormis le classique choix des couleurs pour le fond de page, bloc de texte et couleur du texte son principal atout est de tenir compte des principaux défauts de perception des couleurs lié au daltonisme.

selfhtml (en français). Vous trouverez dans la section «Petits assistants » un outil nommé choix des couleurs. Simple, mais efficace (couleur de fond + couleur du texte).

Je vous conseille comme outils de référence si vous hésitez :

Principles of Graphic Design

Ncolor

Comment créer un site Web ?

La procédure pour créer un site Web se déroule en quelques étapes essentielles et nécessaires :

il est impératif que la structure générale du site existe au préalable sur papier ; elle vous servira de guide pour l'élaboration ultérieure du site.

Quel type de site Web est-ce que je veux ? Quels sont mes moyens ?

Quelle sera sa structure ? Comment la concevoir ?

Quelle sera sa charte graphique ? Qu'est-ce qui doit être vu et qu'est-ce qui sera lu ?

Qui va écrire le code : moi ? Quelqu'un d'autre ? À plusieurs ?

Qui va maintenir le site et le mettre à jour ? Quelle sera sa fréquence de mise à jour ?

Si aucune de ces questions ne rencontre de difficultés, alors vous êtes prêt à partir à l'aventure.

Installation et configuration

Adresse de téléchargement : http://nvu.com

Installation

Sous windows

Le fichier est sous la forme d'un fichier exécutable. La procédure d'installation est automatisée et suit les étapes suivantes :

lecture et accord de la licence,

choix du dossier de destination pour installer Nvu.

Choix de l'installation du raccourci Nvu.

N'oubliez pas que vous pouvez spécifier un répertoire d'installation différent de c:\Program Files.

Image 3 Installation sous Windows Par exemple : vous pouvez créer un répertoire (un dossier jaune), portant le nom suivant, Net (pour Internet), et, installer Nvu dans ce répertoire. Le bouton Parcourir vous permet de choisir le répertoire de destination voulu ou d'en créer un selon votre convenance. Image 2 Installation sous Windows Par exemple : vous pouvez créer un répertoire (un dossier jaune), portant le nom suivant, Net (pour Internet), et, installer Nvu dans ce répertoire. Le bouton Parcourir vous permet de choisir le répertoire de destination voulu ou d'en créer un selon votre convenance.

Sous Linux

Il faut télécharger l'archive, l'installer dans le répertoire destiné aux applications optionnelles /opt et la décompresser (tar -xzf).

Vérifiez que vous possédez bien la librairie suivante : stdc++. La version 6 est requise, mais Nvu fonctionne correctement avec la version 2.2.

Lancement de Nvu en mode graphique :

Ouvrez un navigateur fichiers (Konqueror ou Nautilus), allez dans le répertoire /opt/Nvu et cliquez sur le fichier nvu (lancement automatique ; il suffit de cliquer dessus) ;

Lancement avec un terminal :

cd /opt/nvu-0.4/ + touche entrée (cd = change directory, soit Changer de répertoire Directeur). ./nvu + touche entrée.

Vous pouvez aussi utiliser nvu -edit + l'url de votre page HTML. (url = adresse dans l'arborescence du système de fichiers. Imaginons que votre page HTML (mapage.htm) se trouve dans le répertoire Documents.

Il suffit d'inscrire la ligne de commandes suivante :

$ nvu -edit /home/nomutilisateur/Documents/mapage.htm

*Pour les utilisateurs sous windows, il faudra d'abord vous placer dans le répertoire où vous avez installé Nvu, puis lancer la commande.

> cd c:\net\Nvu (cd pour Change Directory = Changer de répertoire Directeur) si vous avez placé Nvu, à l'installation, dans le répertoire net à la racine de C:.

c:\net\Nvu> nvu -edit c:\documents and settings\nomutilisateur\mes documents\mapage.htm

Configuration

Avec Édition/Préférences...

Dans la section « Général » et plus particulièrement dans les parties

Menu des pages récentes

À Nombre maximal de pages listées, si votre ordinateur n'est pas trop vieux vous pouvez augmenter le nombre de pages à vingt disponibles. À vous de tester selon les capacités de votre ordinateur.

Lors de l'enregistrement ou de la publication de pages

Cochez la case Conservez le format source d'origine. Cette option enlèvera un des points noirs des éditeurs WYSIWYG, le reformatage automatique de vos pages Web ; il n'y a rien de plus énervant !

Le reformatage est utile lorsque vous passez d'une feuille de traitement de texte exportée au format HTML vers Nvu. Nvu nettoiera de lui-même le code.

Laissez cochée l'instruction suivante : Enregistrer les images et les autres fichiers associés. Vous serez sûr que l'ensemble des documents multimédias joints seront sauvés automatiquement.

La dernière option, Toujours afficher la fenêtre du gestionnaire lors de la publication des pages. est utile si vous utilisez Nvu pour publier vos pages.

Édition des feuilles de style (CSS)

Vérifiez que la case soit bien cochée, afin d'utiliser un formatage CSS.

Gestionnaire de site

Laissez la case cochée par défaut, celle-ci vous assure que chaque nouvelle page HTML sera ouverte dans un onglet à la place d'une nouvelle fenêtre.

Dans la section Polices

Vous paramétrez les différentes polices de caractères selon vos habitudes ainsi que l'encodage propre à votre aire géographique (Occidentale, Asie, Moyen-Orient, Inde, etc)

Dans la section Paramètres de pages

Auteur

Inscrivez vos nom et prénom ou votre pseudo ; celui-ci apparaîtra dans les méta-données de l'en-tête de chaque nouvelle page HTML générée et vous identifiera comme l'auteur de ces pages.

Apparence par défaut des pages

Cette option vous permet de définir des formats généraux pour toutes les pages que vous allez créer par la suite.

Internationalisation

Langage

Écrivez fr, si vous écrivez en français. Le bouton Choisir une langue ouvre une liste de choix de langues disponibles selon votre localisation géographique.

Sens d'écriture

Choisissez De gauche à droite pour une écriture de type occidental, ou de Droite à gauche pour une écriture de type oriental.

Dans la section Avancées...

« Comportement de la touche entrée »

Cochez la case pour obtenir la création automatique d'un nouveau paragraphe à chaque retour de chariot (lorsque vous tapez sur la touche entrée).

Avec Paramètres d'édition des sites

Cette boîte de dialogue vous permet de configurer une connexion Internet avec votre hébergeur (à moins que vous n'hébergiez vous-même votre propre site, auquel cas cette fonction est inutile).

Image 4 Paramètres du gestionnaire de sites web Il suffit de remplir les champs suivants : Notez bien : si vous utilisez des paramètres proxy, retournez à la boîte de dialogue Preferences (Edit/Preferences...), allez dans la section Advanced, cliquez sur Connection Settings et inscrivez vos paramètres proxy. Édition de sites - Bouton Nouveau site : Création du paramètre nouveau site - Bouton Éditer par défaut : Paramètre par défaut pour votre site principal ou si vous en avez qu'un. - Bouton Supprimer le site : Suppression des paramètres pour un site précis. Nom du site : - le nom de votre site (celui du répertoire général). Information sur la page web - Adresse HTTP de votre page d'accueil : l'adresse http ou ftp de votre hébergeur. Serveur d'édition - Adresse de publication : l'adresse de votre serveur de publication de sites web. - Identifiant : votre nom d'utilisateur - Mot de passe : votre mot de passe ; cochez la case, si vous souhaitez garder le mot de passe en mémoire.

Utilisation

Ayant réfléchi sur le contenu de notre site Web, essayons de créer la(les) page(s) correspondante(s). Nous allons garder exactement la même méthode que celle qui vous a servi à créer des documents avec un traitement de texte.

Cette méthode consiste à différencier le fond de la forme, le texte brut sans la présentation. Le grand avantage d'un traitement de texte est de pouvoir taper d'abord un texte tel quel (on parle de frappe au kilomètre) et, ensuite, d'appliquer la mise en page.

Cette méthode est si pratique qu'elle en est devenue le standard pour la publication des pages Web. Nous continuerons donc à utiliser cette bonne vieille méthode, mais en l'appliquant à la création de pages destinées à Internet.

Le texte, tel quel, correspondra au langage HTML. La présentation correspondra à une feuille de style nommée CSS.

L'intérêt de Nvu est de pouvoir utiliser plusieurs méthodes. Quelles que soient ces méthodes, commencez toujours par écrire votre texte tel quel, en précisant seulement les formats relatifs à la structure d'un texte : titres, paragraphes, listes, tableaux.

Pour cela, il faut avoir, au préalable, préparé son texte et savoir quelles en sont les parties principales, celles qui correspondent à la structure d'un texte.

Exemple de texte à reproduire tel quel (à la main)

Début du premier exercice

Notez bien la méthode de travail : Pour le bon déroulement de l'exercice il est préférable de ne pas copier/coller le texte de travail ci-dessous ; la raison en est simple. Le code HTML produit par un texte copié/collé est souvent très aléatoire et ce dernier ajouterait à la confusion si vous maîtriser mal ce langage. Si vous ne souhaitez pas copier le texte entièrement, reproduisez au moins une ligne par paragraphe.

Le texte est tiré de l'encyclopédie coopérative libre wikipedia. Adresse de la page : http://fr.wikipedia.org/wiki/HTML. Adresse de la page d'où est extrait le texte sur les CSS : http://fr.wikipedia.org/wiki/CSS. Il nous servira de référence de base pour la création d'une page Web.

Les parties surlignées en jaune correspondent aux liens. Nous n'en ferons que deux ou trois. Exercez-vous avec les autres.

La partie surlignée en turquoise correspond au titre général.

Les parties surlignées en rouge correspondent aux titres de paragraphes.

Les parties surlignées en vert correspondent à une liste.

Je rajoute une partie sur les CSS et un tableau de comparaison au texte.

Hypertext markup language

Présentation

HTML, sigle de HyperText Markup Language (littéralement langage de marquage hyper-texte), est le langage conçu pour créer les pages du World Wide Web. C'est un langage de description de document basé sur SGML.

Explication du langage HTML

Les documents HTML sont généralement stockés sur un serveur Web, et sont affichés par un navigateur Web. Le document lui-même est constitué de balises, c'est-à-dire un nom de marqueur placé entre un signe plus petit (<) et plus grand (>). Par exemple, la balise br s'écrit <br>. Il existe aussi des balises de fin, qui représentent la fin d'une balise apparue plus tôt dans le document, et qui sont marquées par une barre oblique (/). Par exemple : </li> ferme une balise précédente <li>.

Il y a trois types de balises HTML :

un marqueur de structure : décrit la fonction du texte. Exemple : <h1>Titre</h1>

un marqueur de présentation : définit la façon dont un texte doit être présenté. Exemple : <b>Texte en gras</b>

un marqueur hypertexte : établit des liens avec d'autres documents, au sein d'une page, d'un site ou entre des pages de sites différents. Exemple : <a href="http://www.wikipedia.org">Wikipedia</a>

Origine du langage et but

Tel qu'il a été pensé à ses origines par Tim Berners-Lee, le HTML ne sert pas à décrire le rendu visuel des pages Web (contrairement à la PAO), mais plutôt le sens des différentes parties du texte : titre, liste, mise en évidence... Son ambition était d'avoir un langage de description de documents au format ouvert qui soit indépendant de l'architecture des ordinateurs qui serviraient à lire les pages. Par conséquent, il n'est pas prévu que telle ou telle police de caractère soit utilisée explicitement, ni que le moniteur du client utilise telle ou telle résolution. Le logiciel exploité pour la navigation devrait lui aussi ne pas être une source de discrimination.

Perspective et avenir du HTML

Le HTML est un standard du W3C, l'organisme responsable de la standardisation du Web. La version la plus récente est le HTML 4.01 et date du 24 décembre 1999.

Aujourd'hui, le langage n'est plus développé, même s'il est toujours le plus utilisé sur le Web. Un autre langage, le XHTML, est maintenant à la version 1.1 et remplace progressivement le HTML.

Présentation des feuilles de style CSS

CSS est principalement utilisé pour définir les couleurs, les polices, le rendu, et d'autres caractéristiques d'un document, et a été créé pour effectuer la séparation entre sructure (écrit en HTML ou similaire) et présentation (en CSS.) Cette séparation fournit un certain nombre de bénéfices, permettant d'améliorer l'accessibilité, de changer plus facilement de structure et de présentation, et de réduire la complexité de l'architecture d'un document. Enfin, CSS permet de s'adapter aux caractéristiques du récepteur.

HTML ne décrit que l'architecture interne, et CSS décrit tous les aspects de la présentation. CSS peut définir couleur, police, alignement de texte, taille, mais aussi le formatage non visuel, comme la vitesse à laquelle un texte doit être lu par des lecteurs de texte (non graphique).

Ainsi, les avantages des feuilles de style sont multiples :

Toute l'architecture visuelle d'un document réside dans un seul fichier, et peut être donc mis à jour facilement.

Un même document peut donner le choix à plus feuilles de style (impression ou lecture à l'écran par exemple.) Certains navigateurs Web permettent d'accéder facilement à un choix de feuille de style.

Le code HTML est considérablement réduit en taille et en complexité, puisqu'il ne contient plus de balises de présentation.

Tableau comparatif entre HTML 2.0 et xHTML 1.1

HTML 2.0 (1995)	XHTML 1.1 (2001)
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <title>Hello, World!</title> <p>Hello, World!	<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xHTML11/DTD/xHTML11.dtd"> <HTML xmlns="http://www.w3.org/1999/xHTML"> <head> <title>Hello, World!</title> </head> <body> <p>Hello, World!</p> </body> </HTML>

Edition d'une page Web

Première étape : paramètres généraux d'une page HTML.

Prenons de bonnes habitudes. Nvu s'ouvre directement avec une page vierge. Avant de commencer quoi que ce soit, commençons par fournir quelques données essentielles pour la bonne compréhension de votre page HTML par un navigateur. Il s'agit de ce que l'on appelle les données méta. Ces données se situent dans l'en-tête de la page HTML ; vous en connaissez au moins une, votre nom, qui a été spécifiée lors de la configuration générale de Nvu.

Vous pouvez le vérifier en cliquant sur l'onglet <HTML> Source qui se trouve en bas à gauche avec d'autres onglets de la barre d'outils Barre d'édition par onglets (Menu Affichage/Barres d'outils/Mode d'édition par onglets soit « alt + a + a + e » sous windows, il faut jouer avec la touche « shift » combinée à la touche « alt ») que nous verrons au fur et à mesure de notre avancée dans l'élaboration d'une page Web.

Image 5 Les différents onglets d'édition

Vous devriez trouver ceci : <meta content="(votre nom ou pseudo)" name="author">.

Nous allons configurer quelques données supplémentaires. Cliquez sur l'onglet Normal qui est la page par défaut. Maintenant, allez dans le menu Format (le « o » souligné indique que vous pouvez utiliser le raccourci clavier « alt + o ») et glissez jusqu'à Titre et Propriétés de la page... (« g » souligné donc « alt + g »). Ce qui revient à « alt + 0 + g ».

Cette boîte de dialogue vous permet d'inscrire quelques données essentielles :

Informations générales

Emplacement

Le chemin où se situe votre page enregistrée, si elle n'a pas été enregistrée il apparaît [Nouvelle page, pas encore enregistrée]

Dernière modification

Date de la dernière modification

Titre :

le titre de votre page qui doit, normalement, correspondre au contenu de la page. Pour notre exemple de travail, nous inscrirons : le langage HTML.

Attention ! Le titre de la page servira de titre par défaut lorsque vous enregistrerez votre page.

Auteur :

Votre nom ou votre pseudo (il doit normalement être déjà préinscrit).

Description :

Une courte description du contenu de la page.

Par exemple : une brève introduction au langage HTML.

Modèles :

Vous alloue la possibilité d'assigner cette page comme modèle général qui sera valable par la suite pour toutes les autres pages HTML que vous créerez. Ne cochez pas l'option, elle ne nous servira à rien pour le moment.

Enfin, ajouter d'autres données méta est souhaitable, mais celles-ci ne sont pas prévues dans la version actuelle de Nvu. En conséquence, il faudra faire un tour par le code source, mais comme l'indique le texte, cela est réservé aux « utilisateurs chevronnés ».

Petits assistants utiles à l'élaboration d'une page

Dans le menu Affichage/Barres d'outils/Personnalisation de barre d'outils, vous pouvez ajouter ou retirer les icônes des deux barres d'outils principales : Mise en forme et Composition.

Je vous conseille d'ajouter à la barre d'outils Mise en forme, les célèbres outils copier (copy), couper (cut) et coller (paste). Quant à la barre d'outil Composition, à vous de voir ce qui vous sera le plus utile.

Dans le menu Édition, vous disposez d'outils de recherche et de remplacement de texte. Rechercher et remplacer (alt e+r), Rechercher à nouveau (alt e+g), Rechercher le précédent (alt e+h).

Vérifier l'orthographe

Un correcteur orthographique vu en détail plus bas : la correction orthographique avec spell checker

Dans le même menu Affichage, la sélection de Mise en évidence des blocs fera apparaître les blocs auxquels appartiennent chaque balise. Cette propriété est particulièrement intéressante pour comprendre la notion fondamentale de bloc avec les CSS. En CSS, à chaque balise correspond un bloc qui va permettre de lui attribuer de nombreuses propriétés. Cette fonction vous sera grandement utile, au début, si vous n'avez jamais travaillé avec des feuilles de style CSS.

Toujours dans le menu Affichage, Taille du texte est un zoom de texte pour travailler, mais il ne grossira pas le texte de vos page en lignes (c'est une fonction utilisateur).

Dans le menu Insertion/HTML..., une boîte de dialogue vous offre la possibilité d'ajouter du code HTML. Néanmoins, elle peut être utile pour vous aider à apprendre les bases du codage HTML pur.

Dans le même menu Insertion/Caractères et symboles..., la fenêtre de dialogue insère les diphtongues de type œ, les majuscules accentuées, quelques symboles grecs et de nombreux caractères non francisés. L'attribution de ces mêmes caractères au clavier serait plus utile dans le cas d'un clavier bilingue par exemple.

Toujours dans le menu Insertion/Table des matières... Insère une table des matières. Voir la description complète dans la partie astuce de la section Édition de liens internes dans un document (II.2. Configuration)

Dans le menu Outils/Valider le code HTML, ce lien vous connecte à un service de validation de votre page HTML. Ceci vous permet de vérifier que votre page est conforme aux standards ouverts non propriétaires (Ce qui est le but de l'édition avec Nvu). Voici une page nommée validator.html validée par le service de validation du w3c.

Image 6 Page validée avec Nvu

La page a été validée HTML 4.01 Transitionnel. Vous pouvez insérer un code HTML qui fera apparaître le logo du w3c.

Dans le même menu Outils/Éditeur CSS..., un outil complet pour gérer les feuilles de style. Il sera étudié plus en détail dans la quatrième section.

Toujours dans ce même menu Outils/Développement Web (pour utilisateurs avancés) : des outils d'aide JavaScript (console, débogueur, inspecteur DOM).

Image 7 Le nettoyeur de code HTML intégré Cet outil bien pratique marque aussi les limites d'un éditeur WYSIWYG qui a tendance à produire plus de code qu'il n'en faut. Ce problème vient du fait que nous avons appris à utiliser les traitements de la plus mauvaise manière qui soit. Tout le monde utilise la touche entrée pour générer un paragraphe ; notre plus mauvaise habitude qui cause bien du souci aux programmes chargés d'interpréter cette mise en page approximative alors que la séparation entre titres et paragraphes s'effectue d'une manière beaucoup plus précise à l'aide des styles du traitement de texte combinés aux outils de format des paragraphes Réparer les listes imbriquées Cette option met de l'ordre dans les listes. Supprimer les <br> superflus Cette option enlève les marqueurs <br> qui fleurissent un peu partout. Supprimer les blocs vides À force de faire et défaire un bloc, il arrive que Nvu laisse des blocs vides <> ; cette option les enlève. Supprimer l'alignement dans les cellules vides Comme son nom l'indique en anglais, enlève l'alignement dans les cellules vides d'un tableau. Toujours dans le même menu, Nettoyeur de balises... :

Dans le menu Insertion, glissez jusqu'à Autres insertions et Cliquez sur Bouton Made with Nvu button. Vous installez un bouton qui indique que votre site a été réalisé avec Nvu. Ce bouton ne sera toutefois visible qu'une fois votre site en ligne, car il s'agit d'un lien vers une image du site nvu.com. Il existe aussi un calendrier dans le même menu.

Deuxième étape : retranscription du texte

La structure du texte

Pour retranscrire le texte vu plus haut, nous allons utiliser les codes décrits ci-dessous pour la structure sémantique de la page. Vous travaillerez avec l'onglet des paragraphes, qui se situe en haut à gauche avec Corps de texte inscrit par défaut ; voir l'image ci-après. Vous pouvez y accéder par le menu Format,

Paragraphe (alt + o + p).

Vous avez le choix de la procédure :

Vous sélectionnez d'abord Titre 1 et vous inscrivez le texte ensuite.

Vous écrivez d'abord le texte, laissez le curseur texte à la fin du mot et sélectionnez Titre 1.

Image 8 Les différentes options de format de texte Le titre surligné en turquoise correspondra à la sélection Heading 1 ou titre de hauteur 1. Les titres de chaque paragraphe (surligné en rouge) correspondront à la sélection Heading 2. Les paragraphes correspondront à la sélection Paragraph

Astuce !

Nous allons voir une propriété plus qu'utile pour le débutant avec Nvu. Reportez-vous à la barre d'édition par onglets et choisissez Balises HTML :

Image 9 L'onglet HTML Tags en particulier

L'intérêt de cette page réside dans le fait que vous allez pouvoir visualiser en direct au fur et à mesure de l'avancée de votre travail les marqueurs (tags) HTML en jaune. Ceci vous aidera grandement à la compréhension de la structure d'une page HTML.

Image 10 La structure d'un page web avec HTML Tags À vous de voir lequel des deux modes d'édition vous convient le mieux. Normal (sans les marqueurs) ou Balises HTML (avec les marqueurs).

Noter que dans ce mode d'édition, les images n'apparaissent pas.

Les éléments structurels : listes, liens, tableaux

Image 11 Les éléments structurels mis en relief

Édition de liens externes

- Lorsque vous cliquez sur l'icône Lien, sélectionnez l'expression server web (dans le texte de l'exercice, ci-dessus, surligné en jaune -voir le paragraphe 1 de la section C) dans votre texte et cliquez sur le bouton lien (en bleu sur l'image précédente) ou allez dans le menu Insertion puis Lien (soit « alt + i + l ») La boîte de dialogue suivante s'ouvre :

Image 12 Le boîte de dalogue de création d'hyperliens

Lien texte

L'expression server web apparaît automatiquement, puisque nous l'avons sélectionnée auparavant.

Emplacement du lien

Entrez l'adresse correspondant à l'emplacement du lien. Ici, c'est un lien vers une page externe. Insérez directement : http://fr.wikipedia.org/wiki/Serveur_Web.

En outre, si le lien doit être un lien vers une autre page de votre site, sélectionnez Parcourir... et cochez la case « l'URL est relative à l'emplacement de la page ».

Nvu insérera automatiquement l'adresse relative de votre page et non l'adresse complète.

Adresse relative ? Une adresse est dite « relative », lorsqu'elle se réfère à une page interne d'un site. Vos pages sont publiées sur un serveur externe (votre hébergeur) et non sur votre ordinateur personnel avec un chemin complet ! Si c'était le cas, il serait impossible de se connecter à cette page.

Les options « Plus de propriétés » et « Édition avancée... » vous seront utiles plus tard, surtout l'option Édition avancée..., grâce à laquelle vous pourrez attribuer un identificateur HTML supplémentaire (« id » ou « class »), des styles particuliers (CSS) ou du JavaScript.

L'option «Plus de propriétés» est un langage qui permet de définir la nature du lien selon le degré d'affinité relationnelle entre les personnes. Ce langage nommé xfn pour XHTML Friendly Network n'est pas encore complètement implémenté et parfaitement compréhensible par tous les navigateurs .

Édition de liens internes dans un document

Vous pouvez avoir besoin de créer des liens à l'intérieur d'une même page Web. Pour cela, vous disposez de l'édition de liens ancrés à la page (Ancre).

Image 13 Ancre et Lien, deux manières pour éditer des liens dans un document

Sélectionnez la partie que vous souhaitez ancrer, puis cliquez sur l'icône Ancre. Pour l'exemple, nous reprenons server web du texte de travail.

Image 14 boîte de dialogue ancre Cliquez sur ok. Dans votre page HTML, à côté du texte sélectionné une ancre marine a due apparaître. Celle-ci indique que cette partie du texte peut-être liée dynamiquement à une autre. Maintenant, cliquez sur Lien dans la section Emplacement du lien, un menu déroulant est disponible à droite ; cliquez dessus et votre ancre apparaîtra avec d'autres ancres présentes, mais que vous n'avez pas sélectionnées. Pourquoi ? Voyez l'astuce ci-après.

Image 15 vue de l'ancre dans le menu déroulant pour établir un lien interne à une page.

Astuce !

Nvu gère un système de table des matières très utile. Il pré-sélectionne l'ensemble de vos titres (h1, h2, h3, h4, etc.) comme ancres pour une future table des matières.

Allez dans le menu Insertion/Table des matières/Insérer (alt + i + b + i).

Image 16 Le dialogue pour créer automatiquement une table des matières Vous pouvez choisir les niveaux de votre table des matières en sélectionnant les titres qui vous intéressent. Vous remarquerez la présence de flèches qui indiquent un menu déroulant. Imaginons que votre table des matières ne comprenne que trois niveaux. Pour les niveaux suivants, 4, 5 et 6 vous sélectionnerez dans le menu déroulant les deux tirets (--) qui signaleront que vous ne souhaitez pas utiliser ces niveaux. Vous remarquerez aussi que les niveaux de la table des matières sont indépendants des titres. Le niveau 2 peut très bien contenir un Titre 1 si le niveau 1 correspond à une section de votre document.

Attention ! Si vous avez numéroté vos titres, décochez la case « Numéroter toutes les entrées dans la table des matières », sinon vous risquez d'être perdu par rapport à celle automatisée.

Enfin, cochez la dernière case si vous souhaitez interdire la modification de votre table des matières.

Édition des listes

- Repérez la sélection verte (voir image ci-dessus) et cliquez, soit sur la liste numérotée, soit sur la liste à puces. Pour plus de choix, allez dans Format/Liste (alt + o + l). Pour quitter le format de liste, cliquez à nouveau sur le type de liste que vous avez choisi. Pour obtenir une liste imbriquée, appuyez sur la touche tabulation. Pour revenir à un niveau précédent, utilisez la combinaison shift + tabulation. (La touche shift correspond à la touche montrant une flèche vers le haut).

Édition de tableaux

Cliquez sur l'icône Tableau (en bleu dans l'image 9 ci-dessus) ou « alt + b +i + t », la boîte de dialogue suivante s'ouvre :

Image 17 Créer un tableau avec l'onglet Rapidement Trois onglets sont à votre disposition : Rapidement, Avec précision et Cellule. L' onglet Rapidement Vous choisissez graphiquement, à l'aide du curseur les dimensions de votre tableau. Vous pouvez en modifier les paramètres avec le bouton Advanced Edit... L'onglet Avec précision Vous choisissez de définir manuellement votre tableau en précisant le nombre de Lignes, de Colonnes et la Largeur de votre tableau par rapport à la feuille ; vous avez le choix entre une taille fixe en pixels et une taille relative en pourcentage. C'est cette dernière qui est à préférer. L'onglet Cellule Vous définissez l'alignement horizontal (gauche, droite, centre) et vertical (haut, bas, milieu) des cellules ainsi que l'Espacement et la Marge des cellules.

L' onglet Avec précision Image 18 Créer un tableau , onglet Avec Précision Taille Lignes et Colonnes Choix du nombre de Lignes et de Colonnes d'un tableau Largeur Dimension du tableau par rapport à la page en pixels (taille fixe) ou en pourcentage (taille relative). Une taille relative s'adapte en fonction de la taille de l'écran du visiteur de votre site. Un tableau qui représente 25% de la taille totale de votre page, mesurera toujours 25% quelle que soit la taille de l'écran du visiteur 1024x768 pixels, 1280x1204 pixels ou 800x600 pixels. Tandis qu'un tableau qui mesure 250 pixels mesurera toujours 250 pixels quelle que soit la taille. A vous de voir ce qui est le plus adapté à vos besoins. Bordure Taille des bords du tableau en pixels. Attention ! Si vous ne définissez pas de bords du tableau dans les balises HTML mais uniquement en CSS, soyez attentif à l'impression d'un tableau afin d'éviter toute mauvaise surprise. Image 19 L'édition avancée pour affiner la mise en forme d'un tableau Le bouton Édition avancée... Ouvre le dialogue correspondant. Vous sélectionnez l'attribut que vous souhaitez modifier (width [largeur], cellspacing [espacement cellules], cellpadding[marge cellules] ou border [bordure]) et vous changez sa valeur dans la case Valeur. Vous pouvez aussi ajouter d'autres attributs ou d'autres propriétés pour le style du tableau avec l'onglet Style interne ou encore ajouter des Événements JavaScript.

Lors de l'édition du tableau sur la page HTML, vous porterez une attention particulière aux détails spécifiés sur cette image :

Image 20 Les outils graphiques de mise en forme d'un tableau

Avec les flèches de direction, vous pouvez ajouter des lignes ou des colonnes (à droite ou à gauche, en haut ou en bas de celles déjà existantes). Le petit cercle croisé au milieu des flèches enlève la colonne ou la ligne désirée. Ces fonctions sont très pratiques pour l'édition de tableaux. N'oubliez pas d'utiliser le menu contextuel pour un travail plus classique si ces flèches vous rebutent. Le menu contextuel dispose d'outils très avancés y compris pour la fusion de cellules entre elles.

Avec les poignées (représentées par les carrés blancs), vous redimensionnez la taille du tableau comme bon vous semble.

Vous porterez attention aux règles (au-dessus et à gauche du tableau.) Ces règles calculent automatiquement la taille de votre tableau en pixels.

Avec l'option Propriétés du tableau (alt + b + o), vous spécifiez exactement les options de votre tableau et de vos cellules.

Enfin, utilisez l'option de texte preformaté que vous trouverez dans l'image du paragraphe pour retranscrire le texte du tableau : La structure de texte (section C, paragraphe 2.3.1). Si nous suivons toujours notre exemple de texte, les codes sources sont généralement écrits en texte préformaté. Or comme notre exemple présente une comparaison entre la version 2 de HTML et sa nouvelle version XHTML, il sera utile d'utliser cette option.

Insertion d'une image

Attention !

Si l'image à insérer doit servir à la mise forme de la page, par exemple un papier peint, je vous conseille vivement d'utiliser une feuille de style.

En outre, si l'image est pertinente par rapport à votre page, utilisez cette option.

Cliquez sur l'icône image (voir l'image 9 dans Les éléments structurels section C, paragraphe 2.3.2)

Image 21 Les onglets différents pour l'insertion d'une image

Onglet Emplacement

Emplacement de l'image : adresses complète et relative

La structure logique d'un site Web est toujours la même. Au minimum, il existe un répertoire général qui contient tous les autres répertoires. Ce dernier porte le nom de votre site (acrose), on a coutume de dire qu'il est la racine du site à l'instar du disque C: sous Windows qui est la racine du système de fichiers. À l'intérieur, vous y glisserez vos pages HTML, vos images rattachées qui doivent être classées dans un sous-répertoire. Ici, dans l'exemple, « Tutoriel_Nvu» (nom du répertoire qui contient l'image « ancrelien.png»)

Cette précision vous sera utile en observant que l'adresse est relative lorsque votre page est enregistrée. Lorsque la page n'est pas enregistrée l'adresse est complète comme vous pouvez le remarquer ci-dessus.

C'est-à-dire : lors de la création d'un site Web, le répertoire racine auquel se réfèreront tous vos liens sera le répertoire « acrose ». De même que tous les liens ou nœuds de votre ordinateur se réfèrent au répertoire racine C:\ dans Windows.

Si la page HTML avait été enregistrée d'abord, Nvu aurait automatiquement mis une adresse relative soit : « ../ancrelien.png ».

Vignette

Le nom de l'image

Texte alternatif

Le texte alternatif est très important dans le cas où votre image ne peut pas être lue pour une raison quelconque ou qu'un visiteur utilise un navigateur non graphique ou encore qu'une personne malvoyante consulte votre site. Le texte alternatif permet de signaler l'existence d'une image ; donc ne l'oubliez pas !

Onglet Dimensions

Il vous permet de retailler l'image avec l'option Modifier la taille. Choisissez dans le menu déroulant le pourcentage qui est beaucoup plus pratique et rapide que le redimensionnement au pixel près.

Onglet Apparence

Espacement

Définit l'espace, en pixel, entre l'image et votre texte à Gauche et à Droite, En haut et en bas.

Bordure, définit une bordure solide (trait plein) à votre image.

Adaptation au texte

définit le comportement du texte par rapport à l'image, respectivement En haut, au centre, En bas, À gauche, À droite.

Image map

Quand vous utilisez une image où des parties de cette image sont des liens suivant des coordonnées précises. Le logiciel libre, Le Gimp dispose d'un plugin puissant pour réaliser ce genre de tâches très pratiques. Cependant pensez à insérer des liens alternatifs s'ils sont importants, ce genre d'images peut être handicapant pour une personne qui utilise un navigateur non graphique par exemple.

Onglet Lien

Vous définissez l'image comme hyperlien externe, interne ou comme ancre. A la différence d'une image map où les liens sont des coordonnées géométriques en rapport à la dimension de l'image et à l'intérieur de l'image, vous pouvez vous simplifier le travail en faisant d'une image un lien. Le texte alternatif servira de lien dans le cas d'une navigation non graphique.

Récapitulatif : structure d'une page HTML

La structure sémantique et hiérarchique, ou squelette, d'une page HTML s'écrit sans aucune mise en forme ; uniquement le texte accompagné de ses marqueurs distinctifs.

La structure hiérarchique et les quelques marqueurs décrits ci-après sont donnés à titre informatif ; Nvu se charge de préparer automatiquement tout cela. De plus, avec l'onglet HTML Tags, vous pouvez voir la structure hiérarchique du corps de la page (body) en mode graphique.

Image 22 Structure générale d'une page HTML Structure hiérarchique d'une page HTML :

Structure de l'en-tête ou head

Image 23 Structure de l'en-tête d'une page HTML

Structure du corps de la page ou body

Image 24 Structure du corps d'une page HTML

Pour le titre de votre page et les méta-données correspondant à l'en-tête :

menu Format/Page Title and properties...

Pour les titres, il existe plusieurs hauteurs différentes (de la plus grande à la plus petite) h1, h2, h3, h4, h5, h6.

Pour un paragraphe, les marqueurs sont respectivement <p> et </p> début et fin de paragraphe.

Pour un tableau, les marqueurs correspondant sont table, td, tr, thead, th, tbody et tfoot. Ce tableau a été inspiré par le tutoriel selfHTML.

Image 25 Les éléments de construction d'un tableau

<table>début du tableau et fin du tableau </table>

<thead> en-tête du tableau

<tr>rangée du tableau

<th>cellule d'en-tête du tableau

<tbody>corps du tableau

<tr>rangée du tableau

<td>cellules du corps de tableau

<tfoot>pied du tableau

<tr>rangée du tableau

<td>cellules du pied de tableau

Pour une liste d'items

liste ordonnée

<ol>

<li></li>

</ol>

liste non ordonnée

<ul>

<li></li>

</ul>

<ol> et <ul> marqueurs de listes

<li> items de liste, autant de fois que vous en avez besoin.

Liste d'items imbriqués

exemple :

1re énumération

1re énumération intermédiaire

2e énumération intermédiaire

Lancez la liste choisie, et appuyez sur la touche Tabulation (Tab). Pour revenir à une section supérieure, appuyez sur la combinaison « shift + Tab ».

Pour une insertion de liens

<a href="http://www.framasoft.net">framasoft</a>

Sélectionnez le mot à lier, activez la boîte de dialogue liens (link) et insérez l'adresse.

Pour une insertion d'image

<img src="" alt="">

Option à utiliser selon la pertinence du propos de la page ; si ce n'est qu'un papier peint, utilisez de préférence une feuille de style dédiée spécialement à cela.

Exemple de code HTML

À chaque fin d'exercice où nous voyons une fonctionnalité majeure de l'éditeur, nous allons observer ce qui s'inscrit dans le code le HTML. Nous ne garderons, pour les exemples, que les premières phrases afin d'alléger le code. Vous pourrez ainsi mieux faire la relation avec ce qui a été décrit dans la section précédente : La double face du langage HTML.

Les conventions d'écriture sont les suivantes (valables pour les exemples HTML et CSS). Couleur bleue pour la description d'une propriété ; couleur rouge pour la valeur attribuée à cette propriété.

Voici le code HTML correspondant à votre frappe en mode WYSIWYG :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN>

<html lang="fr">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>mapage1</title>
<meta content="votre nom ou pseudo" name="author">
</head>
<body>
<h1>Le langage html</h1>
<h2>Pr&eacute;sentation</h2>
<p>HTML, sigle de
HyperText Markup Language (litt&eacute;ralement
langage de
marquage hyper-texte), est le langage con&ccedil;u pour
cr&eacute;er les pages du World
Wide Web. C'est un langage de description de document bas&eacute;
sur
SGML.</p>
</body>
</html>

Fin du premier exercice

Ce premier exercice vous a permis de vous familiariser avec Nvu, ainsi qu'avec la structure sémantique simple d'une page Web sans aucune forme de décoration, uniquement du texte, des paragraphes, des titres et une liste.

Dans les prochaines parties, nous allons voir comment nous pourrons mettre en forme une page Web. À chaque nouvel exercice, nous irons un peu plus loin dans la sophistication de la mise en forme. Elle se déroulera en trois étapes principales :

mise en forme intégrée au code HTML,

mise en forme avec une feuille de style interne,

mise en forme avec une feuille de style externe.

Mise en forme d'une page HTML

Les différentes mises en forme avec Nvu

Début du deuxième exercice

Vous disposez de pas moins de trois manières pour rendre une mise en forme avec Nvu. Nous allons voir les trois à partir de notre page de base.

En ayant suivi les instructions décrites ci-dessus, vous avez dû obtenir une simple page blanche, avec un titre général, des titres de paragraphes, des paragraphes, deux listes et un tableau.

Les trois manières de mise en forme sont les suivantes :

Une mise en forme classique et graphique (la plus rapide)).

Une mise en forme particulière avec une feuille de style intégrée dans la page.

Une mise en forme générale pour toutes les pages de votre site avec une feuille de style externe.

Pour les deux dernières mises en forme, Nvu met à votre disposition un outil très performant : l'éditeur cascades. Vous verrez, il fait plus que vous faciliter la vie.

Créez trois pages HTML différentes. Il suffit d'enregistrer trois fois la même page avec un nom différent à chaque fois : mapage1.htm, mapage2.htm, mapage3.htm. N'oubliez pas l'extension « htm », car Nvu ne la met pas automatiquement (peu importe que votre extension soit « htm » ou « html », cela revient au même.) Ainsi, vous disposerez de trois exemples de référence à l'avenir.

Mise en forme avec une feuille de style

« Pourquoi travailler ainsi », pouvez-vous vous demander ? D'abord, afin d'apprendre à séparer clairement contenant et contenu, ou structure d'un texte et sa mise en forme. Ensuite, en respectant cette forme de mise en page, vous ouvrez l'accès de vos pages aux personnes ayant un ou plusieurs handicaps, sans compter qu'aujourd'hui et encore plus demain, il n'y aura pas que l'écran de l'ordinateur qui servira à visualiser les sites Internet. Autant commencer à s'initier dès aujourd'hui !

Voici, en extrait, ce que préconise la référence absolue en matière de création de pages Web respectant les standards du Web, le célèbre W3C :

« L'objectif du Web est de permettre l'échange d'informations quelque soit le support.

À opposer à l'approche Word :

En général la description d'un document Word se limite à la présentation, essentiellement l'usage de fontes (polices de caractères). Si le destinataire ne dispose pas des mêmes fontes, le document peut être illisible.

La solution préconisée est d'utiliser un modèle de description clairement défini et ouvert. C'est ce que permet de faire le HTML en définissant un modèle de document Web standard.

Avec les CSS (Cascading Style Sheets), il y a même séparation entre la structure + contenu et la présentation.

L'auteur d'un document Web doit distinguer ce qui est du ressort de la structure (titres, paragraphes, listes, etc.) de ce qui n'est que de la présentation (taille de caractères, couleurs, etc.) ».

1re manière : mise en forme intégrée au code HTML

Cette mise en forme est la plus ancienne et la plus lourde à utiliser, puisqu'elle oblige pour chaque marqueur à répéter plusieurs fois une même chose. Même si elle a tendance à disparaître, son utilisation reste toujours d'actualité, et c'est souvent par ce biais que le débutant apprend à mettre en forme ses premières pages.

Chargez votre première page (mapage1.htm). À peu de choses près, votre page devrait ressembler à cela :

Hypertext markup language

Présentation

HTML, sigle de HyperText Markup Language (littéralement langage de marquage hyper-texte), est le langage conçu pour créer les pages du World Wide Web. C'est un langage de description de document basé sur le SGML.

Explication du langage HTML

Les documents HTML sont généralement stockés sur un serveur Web, et sont affichés par un navigateur Web. Le document lui-même est constitué de balises, c'est-à-dire un nom de marqueur placé entre un signe plus petit (<) et plus grand (>). Par exemple, la balise br s'écrit <br>. Il existe aussi des balises de fin, qui représentent la fin d'une balise apparue plus tôt dans le document, et qui sont marquées par une barre oblique (/). Par exemple : </li> ferme une balise précédente <li>.

Il y a trois types de balises HTML :

un marqueur de structure : décrit la fonction du texte. Exemple : <h1>Titre</h1>

un marqueur de présentation : définit la façon dont un texte doit être présenté. Exemple : <b>Texte en gras</b>

un marqueur hypertexte : établit des liens avec d'autres documents, au sein d'une page, d'un site ou entre des pages de sites différents.

Exemple : <a href="http://www.wikipedia.org">Wikipedia</a>

La barre d'outils Format (alt + v + w + f).

Astuce !

Avant de vous lancer dans la mise en forme de votre page Web, regardez bien ce qui se passe, en bas à gauche de l'écran, dans la barre des tâches, lorsque vous cliquez sur certaines parties du texte.

Cliquez sur « le langage HTML », et vous devriez voir apparaître en bas les marqueurs correspondants <body> <h1>. Maintenant, glissez vers eux et vous verrez qu'ils s'activent, lorsque vous déplacez le curseur. Cliquez sur <body>, et le corps entier de votre page est automatiquement sélectionné. Cliquez sur <h1> et uniquement le titre de votre page « le langage HTML » est automatiquement sélectionné.

Image 26 Mise en relief des éléments HTML

Ces sélections deviendront très vite indispensables, tant pour une mise en forme simple, que pour une mise en forme plus complexe (faites un clic droit pour voir les menus contextuels).

Non seulement ces marqueurs vous indiquent la structure logique d'une page Web, mais en plus, grâce à eux, vous allez pouvoir leur donner très rapidement une forme indépendamment des autres marqueurs et cela en un seul clic !

À vous de jouer !

Corps de texte (attributs des caractères, couleur de page)

Image 27 Mise en forme d'un texte (hauteur des titres, polices, couleur du texte)

Le menu déroulant Corps de texte (que vous connaissez déjà) définit le style de texte (paragraphe, niveau de titre, texte pré-formaté, etc.).

Le menu déroulant Largeur variable définit le type de police de caractères ou fontes que vous attribuez au texte ; les fontes les plus courantes lues sans aucun problème sont Arial, Helvetica, Verdana, et les familles génériques serif, sans-serif et monospace. Selon la spécification css2 du W3C, il existe cinq familles génériques à savoir : serif, sans-serif, monospace, cursive et fantasy .

Les cases noires et blanches correspondent respectivement à la couleur du fond de la page et à la couleur des caractères ; c'est la définition la plus courante. Le texte que vous lisez depuis un petit moment a un fond de page de couleur blanche et une couleur noire pour les caractères.

Le petit marqueur, à côté, vous sert à surligner telle ou telle partie du texte que vous souhaitez faire ressortir.

Hauteur des caractères, styles des caractères

Image 28 Taille et graisse des caractères

Les « A » suivis d'une flèche définissent la taille des caractères.

Les « B, I, U » respectivement pour gras, italique, et souligné.

Listes

Image 29 Listes ordonnées ou non

Respectivement : liste numérotée et liste à puces.

Astuce !

Pour obtenir une sous-section dans une liste, utilisez la touche de tabulation.

Pour obtenir une liste alphabétique, commencez à insérer votre premier item de liste, puis faites un clic droit sur <ul>, en bas à gauche (voir l'astuce précédente) ; glissez sur « Advanced Properties » et cliquez sur l'onglet « Inline Style ». Vous devriez obtenir cette fenêtre :

Image 30 Édition avancée, onglet inline style pour obtenir une liste au format alphabétique Insérez dans la case Property : list-style-type et dans la case Value : lower alpha

Validez en appuyant sur « ok », puis continuez votre liste comme d'habitude. Vous pouvez aussi faire l'inverse : construisez votre liste d'abord, puis sélectionnez vos items de listes, et ensuite cliquez sur <ul>. Cela revient au même ; à vous de choisir la méthode qui vous convient le mieux.

Alignement des paragraphes

Image 31 Les différents alignements de paragraphe

Respectivement : texte justifié à gauche,justifié au centre, justifié à droite, justifié à droite et à gauche.

Indentation du texte (dans le cas de la typographie française, car la typographie anglo-saxonne n'indente pas les débuts de paragraphes).

Calques

Image 32 Les calques

Les calques vous permettent de placer dans n'importe quelle partie de votre page des blocs de textes différents, à condition qu'ils ne se chevauchent pas.

Exemple :

Sélectionnez le premier paragraphe à l'aide du sélecteur <p> (en bas à gauche de la fenêtre ; il apparaît lorsque vous cliquez sur votre paragraphe). Le paragraphe est entièrement surligné. Maintenant, cliquez sur la punaise des calques. Vous devriez obtenir quelque chose de similaire à l'image suivante :

Image 33 Mise en relief des propriétés graphiques pour gérer les calques

Vous venez de transformer votre paragraphe en une feuille de papier calque. Ce qui veut dire que si vous le désélectionnez, le texte viendra se mélanger aux autres textes. Imaginons que nous travaillons sur un dessin ; lorsque nous ajoutons une feuille de calque sur un papier blanc, la feuille transparente laisse le contenu du calque se mélanger avec le reste du dessin ! Pensez-y, sinon vous risquez d'avoir quelques surprises.

Deux objets essentiels à retenir : la rose des vents et les poignées. La rose des vents vous permet de placer le calque n'importe où dans la page ; les poignées servent à le redimensionner comme bon vous semble.

Tant qu'il est en mode sélection, vous pouvez lui donner un aspect différent de votre mise en page, en lui donnant, par exemple, une couleur de fond et une couleur de caractères spécifiques.

Enfin, vous remarquerez que le sélecteur correspondant au calque est <div> (pour le retenir, pensez à division). Cela nous servira plus tard, si nous souhaitons ajouter des valeurs CSS.

Le menu Format (alt + o)

Le menu Format contient déjà de nombreuses mises en formes que nous avons vues avec la barre d'outil Format. Cependant, il en rajoute quelques unes supplémentaires utiles, comme le menu Style de Texte, ou le menu Liste qui ajoute la liste de Définition et la liste de Termes ; notez la boîte de dialogue Propriétés de la liste avec laquelle vous définirez les propriétés de votre liste.

Récapitulatif : mise en forme intégrée dans le HTML

Avec Nvu, la mise en forme se fait le plus simplement du monde. Pour cela, utilisez la barre d'outils Format pour tout ce qui correspond à la mise en forme du texte.

Image 34 La barre d'édition de texte complète

N'oubliez pas l'outil « calques de texte » qui vous permet de mettre vos textes là où bon vous semble et d'améliorer sensiblement la présentation de vos pages.

Avec cette barre d'outils, travaillez sur la composition de vos pages.

Image 35 Les outils de gestion interne/externe Nouveau, gère la création de nouvelles pages. La flèche lance un sous-menu

- Page dans un nouvel onglet ouvre une autre page dans l'éditeur. Vous pouvez ouvrir ainsi plusieurs pages de votre site en même temps.

- Page dans une nouvelle fenêtre ouvre une nouvelle page avec une nouvelle instance (fenêtre) de NVU.

- Plus d'options... active une boîte de dialogue qui sera étudiée dans la section 4.5.1) Comment créer une page modèle ?

Ouvrir, ouvre un fichier situé en un endroit spécifique du disque dur.

Enregistrer, sauve le document en cours (pensez aussi au raccourci clavier, le désormais célèbre, ctrl + s).

Publier, pour publier vos pages sur Internet par l'intermédiaire d'un serveur ftp ou http selon votre hébergeur.

Navigateur, vous testez l'allure de vos pages avec un navigateur externe. Nous appellerons ces outils, les outils de gestions interne/externe.

Image 36 Les outils d'interactivité

Nous appellerons cette partie de la barre de composition les outils d'interactivité.

Ancre, sert à créer une ancre rattachée à un élément HTML de votre page (titre, paragraphe, liste). Elle servira de repère pour, ensuite, générer un hyperlien à l'intérieur de votre page.

Lien, permet de lier plusieurs pages entre elles (hyperlien), soit à l'intérieur de votre site, soit vers un autre site Internet ou une page externe.

Image, outil pour insérer une image dans le corps d'une page html.

Tableau, pour créer des tableaux élégants.

Formulaire, insère des formulaires (le fin du fin dans le domaine de l'interactivité.)

Image 37 L'espace de correction

Cette partie sera appelée l'espace de correction.

Orthographe, le correcteur orthographique interne à Nvu (dans la version 0.5 à venir, cette partie a été sensiblement améliorée).

Imprimer, imprime votre document. Choisissez, dans la boîte de dialogue, l'option fichier. Ainsi, votre page sera imprimée dans un fichier prêt à l'impression de type PDF sous Windows (à condition d'avoir configuré une imprimante virtuelle PDF pour Windows) et PostScript sous Linux. Je vous conseille d'essayer chacune de vos pages (mapage1, mapage2, mapage3) représentant chacune une mise en forme différente. Vous pourrez ainsi apprécier les résultats différents obtenus selon la mise en forme, avec ou sans CSS.

Je ne présente plus les désormais célèbres couper/copier/coller.

Image 38 L'outil de recherche et de remplacement de texte Rechercher, (l'icône n'apparaît car elle n'a pas été installée lors de la prise photo) cet outil de recherche peut s'avérer utile dans un document long. Il cherche une chaîne de caractères précise (Find text) et la remplace par une autre (Replace with).

Petit exemple : Le langage HTML

Insérer dans le champ Rechercher, langage, et dans le champ Remplacer par, parler. Nous demandons de rechercher la chaîne de caractères « langage » et de la remplacer par « parler ».

Cliquez sur le bouton Remplacer et rechercher et le titre « Le langage HTML » se transforme en «Le parler HTML » !

Les limites de cette fonctionnalité. Attention ! À l'instar des autres programmes de recherche, ce système analyse des chaînes de caractères et non des mots. Par exemple, demandez-lui de rechercher «lecteur » que vous souhaitez remplacer par « liseur ». Si, dans votre page, vous utilisez le terme sélecteur, ce dernier sera remplacé par séliseur, sic !

Exemple de code HTML pour une mise en forme intégrée

Reprenons notre exemple précédent, vu au paragraphe 2.5) Exemple de code HTML, section C). Maintenant, nous souhaitons, pour notre page, une couleur grise pour le corps de la page et une couleur rouge pour notre titre de hauteur 1. La police de caractère Bitstream pour le corps général de la page (ou tout autre qui vous convient). Enfin, nous souhaitons mettre en évidence le sigle HTML avec une couleur jaune. Nous laissons la couleur de police noire par défaut qui correspond à la valeur rgb(0,0,0). Nous utilisons un seul et même outil ; voir l'image 23. et les explications qui suivent pour l'utiliser.

Pour obtenir la couleur grise pour la page entière, cliquez en haut de la page dans un espace vide. Puis sélectionnez, Choisir une couleur de fond qui correspond au petit rectangle blanc de l'image, on parle de couleur d'arrière plan 23. L'autre, le noir, correspond à la couleur d'avant plan, celle du texte d'une manière plus générale. La boîte de dialogue des couleurs est appelée ; choisissez votre gris. Pour l'exemple, j'ai pris un gris pré-défini qui correspond en valeur hexadécimale à #cccccc soit en valeur rgb (204, 204, 204). Je précise la valeur rgb, car Nvu transforme automatiquement la valeur hexadécimale en valeur rgb pour le code HTML.

Le titre « Le langage HTML » reçoit la valeur h1 (Titre 1). Laissez le curseur à côté en cliquant et réitérez la même opération que pour le corps de page. Le rouge que j'ai choisi correspond en valeur hexadécimale à #cc0000, soit en valeur rgb(204, 0, 0).

Le sous-titre « Présentation », la valeur h2 (Titre 2)

Le texte « HTML, sigle de HyperText Markup Language (littéralement langage de marquage hyper-texte), est le langage conçu pour créer les pages du World Wide Web. C'est un langage de description de document basé sur SGML. » reçoit la valeur p (paragraphe).

Pour surligner en jaune le sigle HTML, sélectionnez-le et utilisez le petit marqueur à côté des rectangles. J'ai aussi utilisé un jaune pré-défini, soit #ffff00, en valeur rgb(255, 255, 255).

Voici le code HTML complet qui s'est inscrit automatiquement au fur et à mesure de vos choix. Les mentions « link, alink et vlink » correspondent aux mentions pour les hyperliens. Ce sont des mentions par défaut.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN>

<html lang="fr">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>exemple</title>
</head>
<body
style="direction: ltr; background-color: rgb(204, 204, 204); color: rgb(0, 0, 0);"
link="#0000ee" alink="#0000ee" vlink="#551a8b">
<h1
style="background-color: rgb(204, 0, 0); font-family: Bitstream Vera Sans;">Le
langage html</h1>
<h2 style="font-family: Bitstream Vera Sans;">Pr&eacute;sentation</h2>
<p style="font-family: Bitstream Vera Sans;"><span
style="background-color: rgb(255, 255, 0);">HTML,</span> sigle de
HyperText Markup Language (litt&eacute;ralement
langage de
marquage hyper-texte), est le langage con&ccedil;u pour
cr&eacute;er les pages du World
Wide Web. C'est un langage de description de document bas&eacute;
sur
SGML.</p>
</body>
</html>

Fin du second exercice

Nous arrivons à la fin du second exercice. Il vous a permis de voir comment modifier l'aspect d'une page avec les outils graphiques qui intègrent la mise en forme directement dans le code HTML. N'oubliez pas d'enregistrer les modifications de votre page.

Gardez-la pour plus tard, elle servira de page témoin avec les deux autres pages. Ouvrez la deuxième page htm (mapage2.htm), et commençons par découvrir les autres possibilités étonnantes et efficaces de Nvu. Maintenant, nous allons séparer la mise en forme du code HTML. Nous utiliserons pour cela le Graal du concepteur Web actuel : les feuilles de style.

2e manière : utilisation des styles internes

Début du troisième exercice

Si vous suivez ce tutoriel depuis le début (bravo, si vous l'avez suivi d'un seul bloc !), vous avez dû vous apercevoir que j'insistais sur la mise en page avec des feuilles de style.

Pourquoi tant insister ? Tout simplement parce que les feuilles de style rendent la vie du concepteur Web beaucoup plus facile et, surtout, avec l'éditeur CSS cascades de Nvu, cela devient presque un jeu d'enfant !

Chargez votre deuxième page (mapage2.htm).

Allez dans le menu Affichage et sélectionnez Mise en évidence des blocs (ou au clavier « alt + a + n » ).

Cette sélection entoure des parties bien spécifiques, lesquelles apparaîtront surlignées si vous cliquez sur les sélecteurs en bas à gauche. Ces parties sont appelées blocs.

En CSS, ces blocs peuvent être comparés en quelque sorte à des conteneurs, bien que cette appellation soit plus souvent rattachée aux calques. Vous remarquerez aussi un petit défaut de Nvu : ce dernier n'entoure pas de pointillés le premier de tous les blocs, le bloc <body>.

À ces blocs, nous pouvons leur attribuer, soit des propriétés générales, soit des propriétés particulières.

Les propriétés générales sont définies une fois pour toutes avec le bloc conteneur général <body>. On y définit la couleur du fond de page, le style de police, la taille, l'alignement du texte, etc.

Les propriétés particulières viendront prendre le dessus sur les propriétés générales et se rajouteront comme des calques par dessus les anciennes propriétés (tout au moins, il y aura une modification). Donc, si vous avez défini une couleur de fond pour le corps d'une page, et, si vous souhaitez donner un fond particulier à un titre de hauteur 1, il vous suffira juste de préciser sa couleur de fond (ou background-color) ; inutile de repréciser la taille des caractères, l'alignement du texte. Pensez toutefois au contraste entre le fond et la couleur des caractères.

Attention !

Il va de soi que nous ne verrons que les propriétés générales de mise en page. Pour une exploration plus en profondeur de toutes les possibilités offertes par une mise en page CSS, reportez-vous au site français OpenWeb (comme son nom ne l'indique pas), adresse : http://www.openweb.eu.org

Vous pouvez aussi consulter, avec profit, quoiqu'un peu technique, les extraits, mis en ligne, de l'ouvrage de Daniel Glazman (si, si l'homme qui est derrière le code Nvu) consacré aux feuilles de style. Vous y apprendrez beaucoup de choses. Adresse : CSS2, des feuilles de styles pour le Web

Voyons tout cela plus en détail avec l'éditeur CSS.

Découverte de l'éditeur CSS Cascades

Pour l'activer, menu Outils/Éditeur CSS... (alt+o+c)

Voici la page d'accueil d'un outil qui va plus que vous simplifier la vie !

Image 39 L'éditeur Css Cascades à l'ouverture

Boutons Lier feuille et Nouveau groupe

Considérez les deux boutons Lier feuille et Nouveau groupe. Le premier vous servira à lier une même feuille de style pour plusieurs pages HTML (nous verrons cela plus en détail dans le prochain exercice). Le bouton Nouveau groupe est celui qui nous intéresse pour cet exercice, il sert à désigner un nouveau groupe de règles CSS pour tel ou tel marqueur HTML.

Fenêtre Feuilles et règles

La fenêtre au-dessous de Feuilles et règles est une vue en arbre de votre feuille de style (feuilles) avec les sélecteurs auxquels vous avez attribué des propriétés ou règles.

Boutons Monter, Descendre, Recharger, Supprimer

Ces boutons sont essentiellement des gestionnaires pour vos règles.

Les onglets :

Général :

Définition générale de votre feuille de style, son nom, à quel média elle s'applique : écran d'un ordinateur (screen), imprimante (print) ou à tous les médias (all) (médias = écran d'ordinateur, écran de télévision, écran d'une console de jeu, d'un téléphone portable,etc)

Tel est l'avantage des feuilles de style : pouvoir définir un style, soit pour un média précis avec à chaque fois une feuille différente, soit plusieurs médias différents, mais avec une seule et même feuille (cette solution sera un peu plus contraignante que la précédente pour de bonnes raisons : imaginez l'impression d'une page Web en couleurs ; pas évident !)

Attention !

Ces onglets s'appliquent, aussi bien pour le conteneur général <body> ou corps de la page HTML, que pour un bloc particulier : titre de hauteur 1 ou <h1>, paragraphe ou <p>, etc.

Texte

Vous définissez tout ce qui se rapporte au texte, Famille de police, Taille de la police, Couleur de la police, et Décoration du texte.

Fond

Vous définissez tout ce qui se rapporte au fond : Couleur, ajout d'une Image. Doit-elle ou non défiler avec le texte (l'image défile avec la page) ? Doit-elle être répétée sur toute la page (Répétition) ? Quelle sera sa Position?

La fonction de répétition d'une image est utile pour une image de type papier peint accordable.

Bordures

Vous définissez le Style des bords de vos blocs, soit à la volée pour les quatre côtés du bord (Utiliser le même style pour tous), soit un par un, ainsi que leur Épaisseur, leur Couleur, auquel cas vous décochez Utiliser le même style pour tous.

Boîte

Voici une autre notion importante : la notion de boîte. Faîtes une association de ce style : boîte d'un bloc. La boîte est la forme extérieure de votre bloc, forme à laquelle vous allez donner une taille (hauteur et largeur), un emplacement précis dans le corps de la page, flottement de votre boîte sur la droite, sur la gauche, une Position absolue avec un emplacement au pixel prêt, une dépendance relative par rapport aux autres boîtes soit une Position relative.

Vous indiquerez aussi l'espacement par rapport aux marges du corps de la page (Marges), l'espacement à l'intérieur du bloc afin que le texte ne colle pas trop au bord du bloc (Remplissage), un Excentrage par rapport à la page dans le cas d'une Position relative de votre boîte.

Son

Vous définissez des règles de lecture de vos pages Web, afin d'aider les personnes rencontrant certains handicaps en définissant le débit de lecture, la Pronociation.

Création d'une feuille de style interne

Cliquez sur le bouton Nouveau groupe. La fenêtre suivante apparaît :

Image 40 Création d'une feuille de style

L'onglet Général s'active. Dans le champ Liste médias, vous précisez le ou les médias pour lesquels cette feuille de style est activée. Titre, donnez un nom à votre feuille. Puis cliquez sur le bouton Créer un feuille de style.

Image 41 Suite de la création d'une feuille de style interne à la page HTML

Nous venons de créer une feuille de style interne. Elle est directement attribuée à la page html avec laquelle vous travaillez, et ses règles ou propriétés ne s'appliqueront qu'à cette page. Au contraire, une feuille de style externe attribuera un même style, voire plusieurs à un ensemble de pages HTML différentes, votre site par exemple. Ceci fera l'objet du prochain exercice.

Le dialogue se décline comme suit :

J'ai créé une feuille de style pour une sortie écran (screen) d'ordinateur et je l'ai nommée (essai) ; pour une sortie imprimante, je l'aurai nommée print.

En ce qui concerne le bouton Exporter la feuille de style et passer à la version exportée, nous verrons plus tard l'exportation externe de la feuille de style.

Vous remarquerez que d'autres boutons se sont activés @import, @media et Règle. La règle @import permet l'importation d'une autre feuille de style dans celle en cours ; la règle @media signale à quel média (print pour l'impression par exemple) est destinée telle ou telle propriété css de la feuille de style en cours. Enfin le bouton Règle sera certainement celui que vous utiliserez le plus pour définir des règles de style à tel ou tel marqueur HTML.

Dans la fenêtre de gauche apparaît la spécification interne de la feuille de style et un « + » qui indique un déploiement en forme d'arborescence.

Passons à l'étape suivante, et créons notre première règle en appuyant sur le bouton Règle.

Image 42 Onglet « General » mis en évidence

Nouvelle règle de style

Créer une nouvelle :

style nommé

C'est l'entrée par défaut ; elle définit une classe (class). Qu'est-ce qu'une classe ? C'est un ensemble d'attributs particuliers que vous rattachez à un ou plusieurs blocs spécifiques. À ne pas confondre avec l'attribut « id » (pour identifiant) .

Appliquer le style à tous les éléments de type

C'est cette case que vous cocherez le plus souvent ; elle vous servira à définir les styles pour tous les éléments de type titre de hauteur 1 ou <h1> par exemple, ou à tous les éléments paragraphe ou <p>, etc.

appliquer le style à tous les éléments concernant le sélecteur suivant

Imaginons que vous souhaitiez appliquer un style particulier à un type de paragraphe. À l'instar de ce tutoriel, j'ai créé un style particulier que j'ai nommé « paragraphe-info-nvu ». Ce style, je l'attribue aux paragraphes d'information Attention ! et Astuces ! ; j'écris le paragraphe tel quel comme les autres et je lui applique, par la suite, un style qui le différencie des autres paragraphes.

Vous allez pouvoir faire la même chose avec Nvu en cochant cette option. Cependant, n'oubliez pas de spécifier un nom et juste devant le nom le sigle suivant # : #parainfo (pour PARAgrapheINFOrmation).

Pour notre exercice, il faut cocher cette case et inscrire dans le champ dessous body qui correspond à l'attribution de règles générales pour le corps de la page.

Astuces !

1) Les sigles génériques d'attribution de classe et d'identification

Le sigle # est un sigle générique et vous servira pour tous les identifiants (id), de même que le sigle générique pour les classes est un point (.). Sur la feuille HTML, le code suivant sera reporté <p id="parainfo"> soit : à ce paragraphe, j'applique une seule fois les règles comprises dans l'identificateur #parainfo de la feuille de style.

Notez ceci cependant : vous pouvez appliquer cet identificateur sur plusieurs pages HTML différentes, mais qu'une seule fois seulement ; si vous souhaitez attribuer ses règles plusieurs fois dans une seule et même page, choisissez plutôt une classe d'attribution dans la feuille de style .parainfo (au lieu de #parainfo , et elle sera reportée dans la feuille HTML avec le code suivant <p class="parainfo">.

Ne vous inquiétez pas, tout cela se réalise très facilement avec Nvu !

2)Comprendre la différence...

...entre attribution d'une classe à un ou plusieurs éléments HTML et attribution d'un style à un ensemble de marqueurs HTML.

Dans une page HTML, le marqueur que vous rencontrerez le plus souvent est le marqueur <p> pour paragraphe. Avec l'éditeur CSS vous reportez la lettre p et lui attribuez plusieurs règles de styles.

Cependant, vous souhaitez attribuer des règles différentes à quelques uns des paragraphes, c'est à ce moment où la règle class intervient et vous permet d'attribuer à plusieurs éléments HTML identiques une même classe d'attribution. Ainsi vous obtenez plusieurs styles différents pour vos paragraphes, pratique !

3) Comment connaître le marqueur auquel je vais appliquer une règle ?

Rien de plus simple ! Cliquez sur l'onglet Balises HTML de la barre d'édition où tous les marqueurs HTML sont indiqués. Il suffit de relever ceux qui vous intéressent et de les reporter directement dans l'éditeur Cascades.

Pour l'exercice : Passons à la création des règles de mise en forme en appuyant sur le bouton Créer une feuille de style. Body s'affiche dans la fenêtre de gauche et, maintenant, vous avez accès aux onglets. Voyons-les en détail.

Image 43 L'onglet "Text' mis en évidence L'onglet Text :

Cet onglet définit les règles générales pour le texte

section Famille de police :

Non définie

Cette option doit être cochée, si vous avez auparavant défini une famille générique de police de caractères spécifique.

Exemple :

Vous avez défini la famille de police de caractères Arial pour le corps de votre page. Pour un titre de paragraphe, il suffira d'ajouter un fond, par exemple, afin de le distinguer du reste du corps de la page, sans spécifier la police de caractères, puisque déjà précisée pour le corps général de la page. Choisissez une autre option, si vous souhaitez attribuer, en plus, une famille de polices de caractères différente pour le titre de paragraphe, par exemple : Verdana.

préféfinie

Sélection de polices pré-définies. Par habitude, elles sont classées par trois : si la première famille n'est pas présente chez l'utilisateur, alors la deuxième est automatiquement lue. Si la seconde est aussi absente, alors on utilise une famille totalement générique compatible avec n'importe quel navigateur.

Personnaliser les polices définie

Je vous conseille d'utiliser cette option si vous souhaitez que le rendu de vos pages ne soit pas trop mauvais sous Linux. Inscrivez les polices suivantes :

Arial, Verdana, Sans-serif

Menu Déroulant Taille de la police

Vous pouvez choisir plusieurs tailles de police.

Tailles définies par le navigateur Web

La taille de la police s'adaptera automatiquement par rapport aux choix de configuration du navigateur de l'utilisateur.

tailles absolues :

[ Très petite | plus petite | petite | moyenne | grande | plus grande | très grande ]

tailles relatives :

[ Plus large | Plus petite ]

Tailles de polices définies par vous.

Ces longueurs ne tiennent pas compte des choix de configuration du navigateur et obligent ce dernier à respecter la longueur déterminée par l'auteur du document.

Taille absolue :

de votre police de caractères, une longueur de 12pt est généralement suffisante si vous choisissez une sortie sur un écran d'ordinateur par exemple.

Taille relative :

Avec la multiplicité des possibilités de visualisation (une sortie pas uniquement sur un écran d'ordinateur), une longueur de police relative en em carré typographique (em), en pixel (px) ou en x-height (ex) sera préférée .

Menu déroulant Hauteur de ligne

Si vous souhaitez que les visiteurs aient un certain confort de lecture, passez l'écart de vos lignes à 15 pt environ ; à vous de voir. La remarque est identique à la propriété précédente ; une définition à 15 pt correspond au choix du créateur de la page, alors que l'option normale, dépend du choix de configuration par l'utilisateur de son navigateur.

Section Couleur

Couleur

Pour spécifier une couleur de police.

Épaisseur de la police

L'épaisseur de la police : Normale, Gras, Plus gras, Plus léger, Non définie ou Héritée.

Héritée

La fonction d'héritage crée une relation de dépendance avec un élément parent supérieur. Si vous définissez une police précise dans l'élément body ; vous pouvez choisir héritée à la définition d'une police pour un titre de paragraphe par exemple. Le titre de paragraphe hérite de la valeur précédente, nommée parent.

Style

Le style de la police : Normale, Italique, Oblique, Non définie et Héritée.

Casse du texte

La casse des caractères : Non définie, Ne pas changer, Minuscule, Majuscule ; Mettre en majuscule = chaque première lettre de chaque mot est en majuscule.

Alignement

Texte justifié sur la marge de Gauche, justifié sur la marge de Droite, texte justifié au Centre et texte Justifié sur les marges de gauche et de droite.

Section Décoration du texte :

Ligne au dessus

une ligne sur le dessus du texte.

Barré

une ligne pour barrer un texte.

Souligné

un texte souligné

Clignotant

un texte clignotant.

Nrmal

aucune décoration.

(Cet attribut est utilisé, le plus souvent, pour ôter le soulignement par défaut des hyperliens.)

Notez que la fenêtre du bas vous montre les changements effectués en temps réel.

L'onglet Fond

Image 44 Onglet Fond mis en évidence

Coleur

Définit la couleur de fond de votre page. Cliquez sur le petit rectangle pour ouvrir la boîte de dialogue des sélections de couleur.

Opacité

Définit la taux de transparence d'une couleur ou d'une image. Certes très pratique, mais ne fonctionne qu'avec des outils liés à Mozilla (donc cette propriété ne fonctionnera pas avec Internet Explorer par exemple ; à utiliser avec parcimonie).

Image

Insertion d'une image de fond. Contrairement à l'adresse de la feuille de style qui a tendance à être absolue (au moment de sa création), l'adresse relative de l'image fonctionne à merveille.

Répétition (type de raccord de votre image de fond) +

les options :

horizontalement et verticalement : l'image est répétée sur toute la page (intéressant si votre image de fond utilise des motifs répétitifs qui se raccordent entre eux).

Pas de répétition : aucun raccord, l'image sera placée là où vous le souhaitez suivant la Position cochée : Gauche, Centrer, Droite et/ou Haut, Centrer, Bas.

Horizontalement : raccord uniquement horizontal.

Verticalement : raccord uniquement vertical.

L'image défile avec la page

C'est une propriété et un effet intéressant, car il permet de fixer l'image tout en laissant le texte défiler pendant la lecture de la page.

Case cochée : l'image défile avec le texte

Case non cochée : l'image reste fixe, seul le texte défile.

Position

Position dans l'espace de la page de votre image. (voir ci-dessus)

L'onglet Borders

Image 45 Onglet "Borders" mis en évidence

Utiliser le même style pour tous (les bords)

Vous définissez une bordure pour votre bloc de texte identique pour chaque côté. Si cette case est décochée, alors vous devrez spécifier le côté que vous souhaitez styliser.

Style :(menu déroulant)

-Non défini(e)

Option par défaut, vous n'avez rien défini.

-Aucun

Aucun style de défini pour ce bord précis.

-Caché

peut se rattacher à la propriété display (faire apparaître). Le bord est caché pour une règle d'impression.

-Plein

un trait plein

-Pointillé

des pointillés courts

-Tiret

des tirets

-Double

comme son nom l'indique

-Cannelure

donne l'apparence d'une bordure gravée dans la feuille

-Arête

l'inverse de Cannelure, bordure en relief (proche d'une bordure de tableau par exemple)

-Encart

bordure creusée dans la feuille.

-En relief

l'inverse de Encart.

Astuce !

Les propriétés Encart et En relief sont très utilisées pour les boutons hyperliens (utilisation astucieuse de la notion de bloc pour les liens de type <a href> en HTML).

Cette option s'adresse aux utilisateurs avancés, mais il existe de nombreux tutoriels qui vous expliqueront l'astuce. En français, allez voir du côté d'OpenWeb (http://www.openWeb.eu.org). En anglais, consultez les excellents didacticiels du site CSSmaxdesign (http://www.CSSmaxdesign.com.au). Ah ! Le jour où je produirai de tels tutoriels, Framasoft sera aux anges !

Les utilisateurs plus chevronnés pourront obtenir le même résultat pour Encart et En relief en attribuant manuellement un bord solide et en jouant avec l'attribution des couleurs à certains côtés du bloc.

Épaisseur

Définit l'épaisseur de bordure. Je vous conseille de travailler avec des pixels (px) pour obtenir un travail plus fin.

Couleur

Active la boîte de dialogue de sélection des couleurs.

L'onglet Boîte

Image 46 Onglet "Box" mis en évidence

astuce !

Si jusqu'à présent cette notion de bloc vous semblait abstruse et obscure, là, vous allez comprendre tout de suite. Avant toute description plus détaillée de la boîte, reportez-vous à Largeur, choisissez une taille en pourcentage (%). Votre texte s'amenuise automatiquement vers la marge gauche pour disparaître. Maintenant, augmentez la taille du bloc avec les flèches et observez ce qu'il se passe ! Pour que l'exemple soit totalement éprouvé, revenez à l'onglet Bordures, et paramétrez un bord solide de taille de 10px et de couleur noire par exemple.

Affichage

Vous permet de faire apparaître et disparaître un bloc associé avec certains événements.

Menu déroulant

Non défini(e)

Le type d'affichage n'est pas précisé.

Aucun

Le bloc en question ne sera pas visible dans la page

En ligne

Le bloc ou les blocs sont affichés les uns à la suite des autres sur une ligne imaginaire

Bloc

Le bloc est affiché.

Élément de liste

Affiche ou non un élément de liste

Tableau

Toute une série d'options pour faire apparaître ou disparaître certains éléments de présentation de vos tableaux.

Nous abordons ici le positionnement des blocs dans la page avec les propriétés Flottante et Position ; n'abandonnez pas si vous ne saisissez pas tout du premier coup. Ce n'est pas toujours très évident à comprendre, surtout avec une explication aussi succincte !

Le meilleur exercice est de vous entraîner avec chacun de ces positionnements et d'observer leur comportement en fonction de ce que vous souhaitez obtenir.

Flottant

Faire flotter un bloc à droite ou à gauche de la page, s'il n'y a pas de positionnement absolu.

Position

Statique : la boîte est située dans le flux (lecture par le navigateur) normal de la page.

Fixe : la boîte est fixée à un endroit spécifique par rapport au reste de la page. Un peu comme une image de fond que l'on veut fixe par rapport au défilement du texte. Ici, ce sera par rapport au reste de la page.

Absolue : identique à fixe, mais sans un positionnement fixe.

Relative : la position du bloc est relative par rapport aux autres blocs, fonction de dépendance.

Index Z, Visibilité, Effacer les espaces libres et Débordement : à réserver aux utilisateurs chevronnés. Se reporter aux adresses mentionnées plus haut pour une approche en profondeur de ces notions.

Largeur et Hauteur :

Définissent la taille en hauteur et largeur de vos blocs. Je vous conseille vivement de définir ces tailles en pourcentage (%). Une boîte dont la largeur sera de 80% par rapport à la page du navigateur sera toujours de 80% quelle que soit la résolution de l'écran, tandis que si un bloc de 700 px avec une résolution en 1024 x 768 px se positionne relativement bien et laisse de la marge ; avec une résolution de 800 x 600 px, il fera toujours 700 px et laissera beaucoup moins de marge.

Hauteur/Largeur Minimales et Maximales :

Définissent une hauteur et une largeur minima et maxima à respecter.

Marges

Définit l'espace des marges à l'extérieur du bloc par rapport aux bords de la fenêtre.

Remplissages

Définit l'espace des marges à l'intérieur du bloc (pour éviter que le texte ne colle à un bord visible).

Excentrages

Changement de place de votre bloc par rapport au bord haut, droit, gauche ou au bas de la page ; en relation avec les propriétés de Position : Relative, Fixe et Absolue.

Onglet Son

Image 47 Onglet "Aural" mis en évidence

Ces spécifications définissent des règles de lecture pour des navigateurs vocaux. Si vous ne définissez pas une feuille de style dédiée, vous pouvez utiliser la règle @media aural {} et préciser entre les accolades les règles de lecture pour un navigateur vocal .

Volume

Réglage du volume (plusieurs options prédéfinies sont disponibles dans le menu déroulant). Le curseur définit un volume sonore précis

Prononciation

Options :

Aucune

Prononciation normale

Une lettre à la fois

Pauses avant/après

Déterminer une pause entre chaque élément lu de la page. Favorise une meilleure compréhension. Les valeurs s'expriment en millisecondes ou en pourcentage.

Débit

Options

Doucement

Rapidement

Très doucement

Doucement

Moyen

Rapidement

Très rapidement

Signaux avant/après

Spécifier un signal sonore qui favorisera une meilleure distinction des éléments d'une page.

Un peu de pratique !

Premier exercice : mise en forme simple

Cette description de l'éditeur CSS Cascades vous a paru éprouvante et abstraite ? Elle l'est ! Passons à un petit exercice pour assimiler toutes ces notions. Le but de l'exercice : je vous donne les propriétés CSS pour la mise en page, retranscrivez-les avec l'éditeur et observez les changements qui se produisent au fur et à mesure. N'oubliez pas de créer une règle nouvelle pour chaque nouveau marqueur en cliquant sur Règle.

N'oubliez pas de cliquer sur l'onglet Balises HTML pour bien repérer les marqueurs auxquels je fais référence ici.

Amusez-vous avec les paramètres ; ceux que je vous donne ne sont là qu'à titre indicatif, et découvrez ainsi la puissance des CSS et de l'éditeur CSS !

Pour le corps de la page ou Body, vous réglerez les paramètres suivants :

onglet Texte.

Dans Personnaliser les familles de police, inscrivez : arial, verdana, sans-serif.

Dans Taille de police, appliquez une longueur relative de 0.9em par exemple : pour mieux affiner la longueur, utilisez une longueur définie en pixels .

Dans Hauteur de ligne, appliquez un espacement de 16pt.

Dans Alignement, appliquez un texte justifié à droite et à gauche, justifié.

onglet Fond.

Appliquez une couleur de fond de page de valeur hexadécimale #adb7b1

onglet Bordures

Appliquez une bordure Pleine commune aux quatre côtés de 3px d'épaisseur et de couleur blanche (valeur hexadécimale #ffffff)

onglet Boîte

Sur Position, appliquez relative.

Sur Largeur, donnez une largeur de 70% (par habitude, la hauteur n'est pas précisée, elle s'adapte automatiquement en fonction de la longueur du texte.)

Sur Remplissages, Haut, Gauche et Bas : 3px

Sur Excentrages, Gauche : 15%

Puis cliquez sur Règle pour lancer une nouvelle règle.

Pour le titre général ou h1

onglet Texte

Vous spécifiez uniquement la Couleur du texte, soit : #006600

onglet Fond

Laissez-le tel quel.

onglet Bordures

Désélectionnez Utilser le même style pour tous. Et sur Haut et Bas, spécifiez pour Style : plein, Épaisseur : 2px, Couleur : #660000

onglet Boîte

Changez uniquement les valeurs de Remplissages, Haut et Bas, et mettez-les à 5px.

Cliquez ensuite sur Règle pour lancer une nouvelle règle.

Pour les sous-titres ou h2

onglet Texte

Modifiez uniquement la couleur : #ffcc33 et l'Alignement : Centrer.

onglet Fond

Couleur : #336666

onglet Bordures

Laissez coché Utiliser le même style pour tous

puis pour Style, choisissez En relief. Épaisseur : 1px, Couleur : #000000

onglet Boîte

Modifiez :

Position : relative

Largeur : 55%

Remplissages (Haut et Bas) : 2px

Excentrages, Gauche : 10%

Pour les paragraphes

Vous intervenez uniquement dans l'onglet Boîte où vous assignez à Remplissages, Gauche et Droite : 3px.

Deuxième exercice : mise en forme complexe

Une mise en forme avec des éléments plus complexes repose sur une utilisation plus fine des propriétés CSS.

Transformer rapidement un hyperlien en bouton

Nous allons lier cette page (mapage2.htm) avec la première page (mapage1.htm). Pour cela, nous allons utiliser un hyperlien, la modalité pour éditer et créer un hyperlien a été vue dans la section C, paragraphe 2.3.2.1.

La position de l'hyperlien dépend d'une logique de lecture de la page. Il sera généralement placé, soit au début, soit à la fin de chaque page. Avec le positionnement CSS, il est possible de créer des mises en page pour les liens beaucoup plus sophistiquées, notamment par la combinaison de listes et de liens. (voir l'excellent site sur ce sujet http://www.CSSmaxdesign.com.au, malheureusement réservé aux anglophones).

Ouvrez l'éditeur CSS Outils/Éditeur CSS... (Alt + o + c). Ouvrez l'arborescence en cliquant sur feuille de style interne (fenêtre à gauche), cliquez sur Règle pour générer une nouvelle règle CSS. Cochez Appliquer le style à tous les éléments de type et inscrivez a dans le champ en-dessous. Le sigle HTML pour hyperlien est un a minuscule. Nous allons donner des règles à ce a pour que ce simple lien se transforme en un bouton qui, lorsque le visiteur le survolera, donnera l'impression visuelle que ce dernier s'enfonce.

Nous allons appliquer des règles différentes aux deux instances de a. D'abord, au lien en tant que tel et, ensuite, au lien lorsqu'il est survolé, soit « a:hover ».

Règles pour a :

Onglet Texte

Couleur : #3366ff;

Décoration du texte : Normale;

Onglet Fond

Couleur : #c0c0c0;

Onglet Bordures

Style : En relief;

Épaisseur : 1px;

Couleur : #000000;

Onglet Boîte

Largeur : 8em; (la taille em se trouve dans le menu déroulant).

Cliquez à nouveau sur Règle. N'oubliez pas de cocher Appliquer le style à tous les éléments de type et inscrivez en-dessous a:hover

Règles pour « a:hover »

Onglet Bordures

Changez le Style en Encart.

Et voilà notre bouton créé ! Le seul élément changé est le comportement des bords du bloc. Ce changement de comportement donnera l'impression que le bouton s'enfonce réellement ! Pour tous les autres onglets, nous laissons prévaloir les règles précédentes définies avec a.

Mise en forme des calques

Nous avons vu que nous pouvions nous servir des calques afin de modifier sensiblement la mise en page. Appliquons une mise en forme supplémentaires sur ces calques.

Nous allons reprendre la suite du précédent exercice. Le but sera de faire ressortir, par rapport à la mise en page, le premier paragraphe contenant le sous-titre (h2) « présentation » et le paragraphe (p) qui l'accompagne.

Pour la commodité de l'exercice, nous allons commencer par décaler le bloc le plus grand (celui qui est entouré de blanc, si vous avez suivi les instructions précédentes ou d'une autre couleur, si vous avez choisi la vôtre).

Lancez l'éditeur CSS Outils/Éditeur CSS... (Alt + o + c). Ouvrez l'arborescence et sélectionnez Body, puis choisissez l'onglet Boîte, et allez jusqu'à Excentrages où il devrait y avoir inscrit sur Gauche : 15% ; passez cette valeur à 25%. Vous devriez obtenir un espace plus grand sur la gauche. Nous allons nous servir de cet espace pour y ajouter un calque avec une mise en forme différente de la mise en forme générale. Fermez l'éditeur et revenez à votre page ; sélectionnez l'onglet Balises HTML et dans le menu Affichage, choisissez Mise en évidence des blocs.

Pour la sélection commune de deux ou plusieurs blocs, appuyez sur la touche shift (la touche shift correspond à la touche du clavier avec une flèche), la pression sur la touche Shift sera lâchée, lorsque les sélections multiples seront terminées. Soit sélection -> Shift -> nouvelle sélection. Une fois le titre et le paragraphe sélectionnés, appuyez sur l'épingle des calques .

Image 48 épingle calque Bien ! À l'aide de la rose des vents et des poignées de redimensionnement, arrangez-vous pour que le calque vienne se glisser dans la partie gauche de votre page où il reste un espace vide.

Ne vous inquiétez pas du sort du titre « présentation » qui risque de modifier son aspect, ceci est dû aux règles CSS qui s'appliquent toujours malgré le redimensionnement du calque !

Voici une image pour vous donner une idée du résultat:

Image 49 Résultat de la création du calque "presentation" Le sous titre (h2) nommé présentation, ainsi que le paragraphe qui l'accompagne (p), sont, désormais, dépendants d'un calque nommé div. Qu'avons-nous fait, si ce n'est exactement cela, générer une DIVision dans la mise en page ?

Afin de pouvoir mettre en forme ce calque ou « div » et uniquement celui-ci, nous allons lui donner un IDentificateur personnel en quelque sorte. Pour le reconnaître facilement, nous lui donnerons le nom de « presentation » (sans accent sur le « e » !), soit « id=presentation ».

Modification des paramètres d'un calque avec l'éditeur CSS

Image 50 Création de l'identificateur "presentation" avec l'éditeur de propriétés avancées Dans l'onglet Attributs HTML, sélectionnez dans Attribut, à l'aide du menu déroulant, l'identificateur id et inscrivez dans Valeur « presentation» qui correspond au nom qui identifie le calque. Puis cliquez sur ok. Cliquez dans le calque pour l'activer. Reportez-vous dans la barre de tâches en dessous de Balises HTML , l'élément <div> doit être activé (mis en relief). À l'aide du clic droit, sélectionnez Propriétés avancées (ou, plus simplement, cliquez deux fois dans le calque, et la boîte de dialogue s'ouvrira.)

Nous venons d'identifier ce calque auquel est adressé un nom en propre. Pour terminer l'opération, nous allons faire la même chose avec l'éditeur CSS. Grâce à cet identificateur, nous pourrons presque faire tout ce que nous désirons !

Activez l'éditeur Outils/Éditeur CSS... (Alt + o + c), cliquez sur Feuille de style interne, puis sur le bouton Règle et sélectionnez Appliquer le style à tous les éléments concernant le sélecteur suivant et inscrivez dans le champ dessous #presentation (pour le sigle générique #, reportez-vous à la section IV, chapitre 2, § 3.3, « Création d'une feuille de style interne », et plus particulièrement à l'astuce de la page 42).

Image 51 Création de la règle identifiée "presentation" avec l'éditeur Css Cascades

Cliquez sur Créer une règle de style. Appliquez les règles suivantes :

Onglet Texte

alignement : Gauche

Onglet Fond

Couleur : #cfd8bf;

Onglet Bordures

Style : Cannelure;

Épaisseur : 2px;

Couleur : #000000;

Onglet Boîte

Notez Bien :

Étant donné que nous avons utilisé la méthode graphique pour déplacer et appliquer un calque, il ne nous est pas possible d'intervenir dans l'onglet Boîte pour placer le bloc ailleurs. Il est automatiquement placé en Position absolue. Cependant, en activant la boîte de dialogue Propriétés avancées liée au calque (un double clic suffit), il est possible de modifier ce paramètre. Dans l'onglet Style interne, vous remplacez la valeur de positionnement du calque : reportez-vous à l'attribut « Position », sélectionnez-le et changez sa valeur à « relative », par exemple.

Nous pouvons définir d'autres paramètres. Ici, les marges de remplissages pour un meilleur confort de lecture.

Remplissages Gauche et Droite à 5 px.

Modification des paramètres du sous-titre du calque

Il va falloir modifier l'aspect pas trop réussi du sous-titre "présentation" et répéter les opérations précédentes :

Sélectionnez le sous-titre h2, puis par un double clic ouvrez la boîte de dialogue de modifications des attributs. Rechercher dans Attribut l'identificateur id et inscrivez en Valeur #presentation2.

Activez ensuite l'éditeur Cascades, créez une nouvelle règle avec les paramètres vus ci-dessus et inscrivez h2#presentation2. Dit autrement, vous attribuez au titre h2 l'identificateur # ayant pour nom : presentation2.

Onglet Texte

Couleur : #ffffff

Onglet Fond

Couleur : #80888a

Onglet Bordures

Style : Cannelure

Épaisseur : 2px

Couleur : #000000

Onglet Boîte

Position : relative

Largeur : 80%

Remplissages : 5px

Excentrages, Gauche à 8%

Image 52 Résultat final de la mise en forme du calque identifié "presentation" Le résultat final doit ressembler à cela, à quelques détails près :

Récapitulatif

Il n'est certainement pas évident de comprendre du premier coup les propriétés CSS. C'est pour cela que l'éditeur cascades est vraiment d'une très grande qualité et utilité. Il ne servira pas à comprendre précisément telle ou telle propriété, mais à en sentir l'effet en l'utilisant. Ce qui, pour des débutants, n'est nullement négligeable, surtout si l'édition Web est, pour eux, plus un hobby qu'un métier, comme c'est mon cas...

Les propriétés des feuilles de style ont cette qualité étonnante : chaque marqueur HTML est considéré comme un bloc, lequel peut être entièrement paramétré (Largeur et Hauteur du bloc ; sa couleur de fond, la couleur du texte ou couleur de premier plan ; son emplacement par rapport à la feuille suivra-t-il le flux de lecture, relation de dépendance -relative- ou en sera-t-il indépendant -fixe , absolue- ?)

Il est possible de pousser encore plus loin certaines propriétés en choisissant de changer l'aspect du bloc suivant, certains événements à l'instar du bouton hyperlien que nous avons vu. Enfin, les calques, ou DIVision, vous offrent encore plus de souplesse pour une mise en page très stylée.

Après avoir passé le temps du balbutiement, vous allez lentement découvrir la puissance de Nvu et les possibilités qu'il peut vous offrir, afin d'obtenir une mise en page plus réussie.

N'hésitez pas à vous entraîner encore et encore.

Exemple de Code HTML et CSS

Nous poursuivons nos petits exemples de code avec toujours le même texte et les mêmes valeurs. Sauf qu'ici, nous utilisons pour la mise en forme une feuille de style interne. Pour retrouver le texte et les valeurs définies, reportez-vous à la même section D, § 2.4

Voici le code HTML avec l'insertion d'une feuille de style CSS. Comparez les deux codes sources, et vous remarquerez toute la différence qu'il y a avec une feuille de style. Par exemple en CSS, le type de police de caractères est défini une seule fois, alors que dans notre exemple précédent il était défini pour chaque élément de la page : titres de hauteur 1, de hauteur 2, paragraphes.

<html lang="fr">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>exemple</title>
<style type="text/css">
body { direction: ltr;
background-color: rgb(204, 204, 204);
color: rgb(0, 0, 0);
font-family: Bitstream Vera Sans;
}
h1 { background-color: rgb(204, 0, 0);
}
#surligne { background-color: rgb(255, 255, 0);
}
</style>
</head>
<body>
<h1>Le
langage html</h1>
<h2>Pr&eacute;sentation</h2>
<p><span id="surligne;">HTML,</span>
sigle de
HyperText Markup Language (litt&eacute;ralement
langage de
marquage hyper-texte), est le langage con&ccedil;u pour
cr&eacute;er les pages du World
Wide Web. C'est un langage de description de document bas&eacute;
sur
SGML.</p>
</body>
</html>

Fin du troisième exercice !

Ouf ! Un gros morceau vient de passer et, pourtant, il reste encore de nombreuses choses à voir ! Mais reposons-nous 5 minutes avant de replonger dans la suite de ce tutoriel.

La bonne nouvelle ; si vous avez suivi toute cette partie consacrée à la présentation et à l'utilisation de l'éditeur Cascades, la dernière partie sera encore plus simple, puisqu'il suffira de changer un seul paramètre pour exporter une feuille de style. Enfin, nous verrons encore quelques outils bien pratiques, puis ce tutoriel sera quasi fini !

Astuce !

Cette astuce est valable uniquement pour Internet Explorer 6. Avec Internet Explorer 5, il faudra mettre la main dans le cambouis un peu plus longuement.

Nous n'avons pas vu la fonction Navigateur. Essayons de voir le résultat dans un navigateur externe. Si vous possédez Mozilla ou un navigateur de la famille Mozilla et que celui-ci est défini comme navigateur par défaut (Nvu, se cale sur le navigateur par défaut automatiquement), et si vous êtes sous Windows, le résultat devrait être fidèle. Cependant, si Internet Explorer est votre navigateur par défaut, aïe, aïe, aïe, vous risquez d'avoir quelques surprises dans la mise en forme ! Vous avez dû maugréer en voyant que le résultat n'était pas le même entre Nvu et Internet Explorer !

D'où cela provient-il ? D'une chose étrange que l'on appelle la « dtd » (soit définition de type de document). Si vous souhaitez obtenir le même résultat que sous Nvu, il va falloir légèrement modifier la dtd pour qu'Internet Explorer lise correctement vos spécifications ! C'est-à-dire, enlever un mot. Le mot qui gêne tant Internet Explorer est transitional.

Voyons cela en direct. Cliquez sur l'onglet <HTML> source et vous devriez avoir tout en haut ceci : <!Doctype HTML public "-//w3c//dtd HTML 4.01 transitional//en">. L'opération est simple, il faut supprimer le mot transitional pour transformer votre HTML 4.01 transitional en HTML 4.01 strict et hop ! Tout redevient normal. Si vous n'arrivez pas à modifier le doctype avec Nvu, ouvrez votre page dans n'importe quel éditeur en mode texte basique du style de Notepad ou Wordpad (sous Windows) ou encore avec l'excellent et libre notepad2. Et là vous pourrez atteindre le fameux doctype et remplacer Transitional par Strict.

Bon, pas très pratique pour un gros site je l'avoue, mais pardonnez Nvu, c'est un programme encore tout jeune. Vous verrez, il s'améliorera avec le temps.

Ce n'est pas le seul problème avec Internet Explorer et ses différentes versions. Par exemple, si vous attribuez une taille à votre corps de page de 70%, IE5 ne la reconnaît pas. Le texte occupera la fenêtre entière. Si vous voulez avoir un corps de page à 70%, il va falloir ajouter un calque qui aura la taille de 70% ! Là, IE5 lira correctement la page.

Le code html suivant :

<body id="miseenpage"> et la css correspondante : #misenpage {width:70%;} ne sera pas compris par IE5.

Cependant, le code html suivant :

<body>

<div id="miseenpage"> avec la CSS correspondante sera lu sans problèmes.

3e manière : exporter une feuille de style

L'inconvénient majeur d'une feuille de style interne, c'est que le style s'applique uniquement à cette feuille. Or, un site Web comporte plusieurs pages. Attribuer en une seule fois un style défini pour toutes les pages du site serait bien pratique. Qu'à cela ne tienne ! Nvu et l'éditeur cascades vont, une fois de plus, vous simplifier la vie.

Début du quatrième exercice

Revenons un instant à la conception d'un site. Un site est composé d'un répertoire général, qui contiendra d'autres répertoires, ainsi que vos pages HTML. Reportez-vous à la partie I, introduction, chapitre 3, « structure d'une page Web et d'un site », § rudiments de la structure logique d'un site Web.

Dans notre exemple, c'est le répertoire acrose. On y trouve trois autres dossiers : img pour y loger les images, scripts pour y loger des scripts, et style sera le répertoire où nous allons exporter notre feuille de style.

Export de la feuille de style avec l'éditeur cascades

Pour la commodité de l'exercice, je vous invite à créer au moins une page supplémentaire, soit en renommant mapage3.htm en mapage4.htm, soit en en créant une entièrement nouvelle. À vous de voir.

De même, si jusqu'à présent, vous n'avez pas créé de site virtuel, je vous conseille de le faire, afin de faciliter la compréhension de l'exercice .

Image 53 Arborescence simplifiée d'un site web Un dossier général comportant le nom de votre site. Plusieurs sous-dossiers et plusieurs pages HTML. Bien. Maintenant, ouvrez Nvu, puis mapage3.htm, et enfin, l'éditeur cascades. À l'ouverture de l'éditeur, votre feuille de style interne apparaît dans la fenêtre de gauche. Cliquez dessus. Cliquez sur Exporter la feuille de style et passer à la version exportée. Un dialogue s'ouvre vous demandant où enregistrer la feuille de style. Sélectionnez votre dossier contenant le site virtuel, puis ouvrez le dossier « style » et inscrivez dans le champ Nom du fichier, export.css. Puis sauvez le tout. Et voilà votre feuille de style externe est créée ! Pas plus dur que cela ! Au bout du compte, vous devriez avoir quelque chose de ressemblant à ceci :

Astuce !

Il y a un problème un peu gênant. L'éditeur inscrit dans le code HTML l'adresse complète et non relative. Nous allons donc devoir intervenir sur la source HTML, mais avec tout ce que je vous ai fait faire, si vous redoutez cette opération..., je ne peux rien faire de plus pour vous.

Sinon, allez dans le code source de la page HTML mapage3.htm en cliquant sur l'onglet <HTML>Source. Pourquoi est-ce gênant ? Si vous préparez un site Internet, c'est pour le publier sur Internet. Or, comme il y a de grandes chances pour que votre site soit hébergé ailleurs que sur votre ordinateur, autant apprendre à corriger ces petites erreurs tout de suite, car le serveur et le navigateur auront besoin des adresses relatives avec pour répertoire racine le nom de votre site.

En cherchant vers le haut de la page, vous devriez trouver ceci :

<linkmedia="screen"rel="stylesheet"href="file:///home/toto/Documents/tutoriel20NVU/acrose/style/export.CSS" type="text/CSS">

(cette adresse correspond à une adresse sous Linux ; sous Windows, elle sera du genre : file:///C:/net/acrose/style/export.css, par exemple).

Il va falloir intervenir sur l'adresse du lien en enlevant tout sauf style/export.CSS.

Ce qui donnera par la suite :

<linkmedia="screen"rel="stylesheet"href="style/export.CSS"type="text/CSS">

Encore un petit défaut de jeunesse !

Adresses relatives

Nous allons aborder le problème des adresses relatives. Les adresses relatives sont des liens en relation avec des répertoires considérés comme racines. Elles sont différentes des adresses complètes qui, elles, se réfèrent toutes à une seule et unique racine, le disque dur ou la lettre C:\ pour Windows et / pour Linux.

Reprenons la construction en arbre de notre site virtuel. Considérons une page test, essai.htm, que nous allons placer dans plusieurs endroits de l'arborescence du site virtuel et observons comment s'écrit une adresse relative en fonction de sa place et du répertoire racine de notre site, acrose. Pour la commodité de l'exercice, j'ai ajouté une pseudo-page HTML à titre comparatif :

+---acrose

¦ essai.htm

¦ adresse.htm

¦ ajout.htm

¦ amis.htm

¦ ano.htm

¦

+---img

+---script

+---style

export.css

export.htm

Premier cas. La page test est enregistrée avec les autres pages HTML du répertoire acrose et nous cherchons à lier les deux fichiers suivants : export.css et export.htm qui se trouvent dans le répertoire style. L'adresse relative est

style/export.css, pour une feuille de style :

<linkmedia="screen" rel="stylesheet" href="style/export.css" type="text/CSS">

style/export.htm, pour une page HTML

<a href="style/export.htm" title="une page lien">une page lien</a>

ce qui correspond bien à

+---style

export.css

export.htm

Deuxième cas. La page HTML est à l'extérieur du répertoire acrose et nous souhaitons lier les mêmes pages, l'adresse relative sera alors

acrose/style/export.css, pour une feuille de style

<linkmedia="screen"rel="stylesheet"href="acrose/style/export.css"type="text/CSS">

acrose/style/export.htm, pour une page HTML

<a href="acrose/style/export.htm" title="une page lien">une page lien</a>

ce qui correspond bien à

¦ essai.htm

+---acrose

+---style

export.css

export.htm

Troisième cas, la page test se trouve à l'intérieur d'un répertoire nommé html qui lui-même appartient à l'arborescence du site acrose.

-acrose

+---html

¦ essai.htm

¦ adresse.htm

¦ ajout.htm

¦ amis.htm

¦ ano.htm

¦

+---img

+---scripts

+---style

export.css

export.htm

Pour retrouver les adresses relatives il va falloir remonter d'un répertoire, c'est-à-dire sortir du répertoire html pour pourvoir retrouver la bonne adresse. Ce qui donnera :

../style/export.css

L'élément d'échappement ../ indique qu'il faut remonter d'un répertoire pour retrouver la bonne adresse. S'il y avait deux répertoires à remonter, il y aurait ../../style/export.css

../style/export.css, pour une feuille de style

<linkmedia="screen"rel="stylesheet"href="../style/export.css"type="text/CSS">

../style/export.htm, pour une page HTML

<a href="../style/export.htm" title="une page lien">une page lien</a>

Ce qui correspond bien à :

-acrose

+---html

¦ essai.htm (remonter d'un répertoire pour sortir ../ et trouver style)

+---style

export.css

Attacher plusieurs pages avec une même feuille CSS

Insérez votre dernière page mapage4.htm dans Nvu. Ouvrez l'éditeur CSS. Et là, au lieu de cliquer sur Nouveau groupe, cliquez sur Lier feuille. Voici comment la fenêtre apparaît :

Image 54 Comment attacher plusieurs pages HTML à une même feuille de style

Dans la case « url », enlevez l'adresse complète pour ne laisser que l'adresse relative. Dans Liste médias, inscrivez screen, dans Titre, export2 et cliquez sur Créer une feuille de style.

Le tour est joué ! Votre feuille de style s'est automatiquement liée à votre nouvelle page HTML ! J'espère qu'avec cet exemple, vous comprenez tout l'intérêt qu'il y a à travailler avec des feuilles de style. Vous définissez une bonne fois pour toutes un style, puis vous l'appliquez à toutes les autres pages HTML de votre site et voilà ! Comme on dit.

Petits fignolages

La correction orthographique

Nvu incorpore un correcteur orthographique classique. Néanmoins je vous conseille vivement de faire relire vos travaux par une personne humaine. Il est des erreurs que le plus fiable des correcteurs ne saurait détecter !

Étudions le correcteur orthographique :

Image 55 Installation et fonctionnement du correcteur orthograhique Installation automatique de dictionnaires. Dans la partie Langue, un menu déroulant ouvre un dialogue avec l'option Télécharger un dictionnaire. Vous pouvez télécharger le/les dictionnaire(s) de votre choix. Installation manuelle Vous pouvez installer manuellement les dictionnaires. Pour cela recopiez, par exemple, le dictionnaire français qui se trouve dans OpenOffice.org et placez-le dans Nvu. L'opération est la même pour les autres langues. Marche à suivre : Dans OOo, il faut aller dans le répertoire : « OpenOffice.org1.1.1/share/dict/ooo » puis copiez les deux fichiers suivants « fr_FR.aff » et « fr_FR.dic » Dans Nvu, il faut aller dans le répertoire : « nvu-0.4.1/components/myspell » puis coller les fichiers « fr_FR.aff » et « fr_FR.dic » Relancez Nvu, ouvrez le correcteur et à Langue sélectionnez Français/France. Et voilà ! Pour l'activer, il suffit de cliquer sur l'icône Orthographe. Si cette dernière n'est pas installée dans votre barre d'outils, allez dans menu Édition et glissez jusqu'à Vérifier l'orthographe et glisse. Vous pouvez ouvrir aussi le dialogue en utilisant la combinaison de touches suivante : Ctrl + k

Fonctionnement de l'outil orthographique Revérifier la page Analyse la page entière depuis le début Vérifier le mot Analyse le mot courant Champ Absent du dictionnaire Le mot présentant une erreur orthographique (le plus souvent, une erreur de frappe). Remplacer par « Doit être remplacé par », un champ vous montre le mot à changer. Tenez compte de la fenêtre de suggestions. Suggestions Toutes les suggestions possibles. Il suffit de sélectionner le mot pour qu'il apparaisse dans le champ Remplacer par. Remplacer Remplace le mot sélectionné dans le champ Remplacer par dans votre document. Remplacer tout Remplace tous les mots présentant la même erreur ou non, une sécurité en quelque sorte si vous utilisez plusieurs fois un même mot. Ignorer Ignorer la correction, cela arrive souvent avec l'utilisation de mots d'une autre langue ou de sigles. Ignorer tout Tout ignorer. Que dire d'autre ? Dictionnaire personnel Ajouter un mot En cliquant sur ce bouton, vous ajoutez un mot à votre dictionnaire personnel. Très utile ! Éditer... Ouvre un éditeur afin de gérer votre dictionnaire personnel. Vous pouvez ainsi ajouter, retirer donc modifier à souhait ce dictionnaire. Fermer : ferme l'outil de correction orthographique.

Ajouts de styles en ligne

Vous souhaitez modifier le style d'un titre sans qu'il y ait intervention dans le style général ? Prenons, pour l'exemple, le paragraphe « explication du langage HTML » . Vous allez donc générer un style en ligne, c'est-à-dire, un style propre à ce marqueur qui sera intégré dans le code HTML.

Donc, toujours les mêmes opérations de sélection. Cliquez sur le titre « explication... » pour activer son marqueur en bas, et sélectionnez par un clic droit Styles internes.

Un menu contextuel, dans lequel vous reconnaîtrez les différents onglets de l'éditeur CSS, apparaît en autant de boîtes de dialogues distribuées individuellement. Choisissez Propriétés du texte et passez la couleur du texte à « #c0c0c0 ». Et voilà la couleur de votre titre de paragraphe changée ; facile non ?

Voici le code correspondant pour un style interne :

<h2 style="color: rgb(192,192,192)>explication...</h2>

Ce style est interne à cet élément précis. Nous allons voir comment extraire ce style interne pour le transformer en style générique et l'insérer dans une feuille de style.

Image 56 Extraire des styles particuliers vers une feuille de style générale Cette boîte de dialogue fabrique des styles génériques que vous appliquerez, soit à l'élément intéressé (...cet élément uniquement), soit à tous les marqueurs de type h2 (...tous les éléments) et, en plus, vous pourrez l'appliquer aux éléments ayant une classe, du même type ou encore provoquer un changement quand le pointeur passe dessus (j'aime beaucoup cette option). Enfin, vous avez la possibilité de choisir un nom pour identifier ce style ou de laisser Nvu choisir pour vous (choisir pour moi !). Malheureusement, ce style générique ne s'appliquera qu'à cette feuille comme un style interne. Le bonheur serait d'avoir la possibilité de pouvoir l'exporter vers une feuille de style externe. Maintenant, voyons encore une autre propriété de Nvu. Re-cliquez, en bas à gauche, sur h2 avec un clic droit, re-sélectionnez Styles internes, un nouveau dialogue s'active : Extraire et créer un style générique. Cliquez dessus.

L'éditeur de propriétés avancées

Nous l'avons rencontré plusieurs fois au cours des différents exercices. Nous allons voir succinctement son fonctionnement. Il sert à attribuer certaines propriétés sur des sélecteurs précis, un titre de hauteur 2 (h2), un paragraphe (p), etc. L'éditeur se partage en trois onglets principaux :

On peut lancer l'éditeur de deux manières :

Tout d'abord en utilisant le clic droit sur le sélecteur courant, en bas à gauche, puis en cliquant sur Propriétés avancées...

Ensuite en utilisant un double clic sur un titre de paragraphe ou sur le paragraphe entier, ce qui activera l'éditeur.

Image 57 L'éditeur de propriétés avancées

Attributs courants pour : <p>

J'ai lancé l'éditeur afin d'attribuer certaines valeurs à un paragraphe particulier, d'où la valeur <p>. Si j'avais sélectionné un titre de hauteur 2, il y aurait marqué Attributs courants pour : <h2>

Onglet Attributs HTML

Cet onglet se partage en deux parties principales, une fenêtre générale (la plus grande) séparée en deux sections Attribut et Valeur. Le bouton Supprimer enlèvera l'attribut et sa valeur correspondante. Pour modifier la valeur d'un attribut, sélectionnez-le en cliquant dessus (Cliquez sur un item ci-dessus pour modifier sa valeur). En-dessous, deux champs à remplir correspondant respectivement à Attribut et Valeur.

Analysons le menu déroulant Attribut :

Align

Vous attribuez un alignement général à ce paragraphe, auquel correspondra une valeur dans le champ suivant pour justifier le texte, soit sur la marge de gauche (left), soit sur la marge de droite (right), soit centré (center), soit justifié à droite et à gauche (justify).

Id

Pour Identificateur. Cet attribut vous sera très utile pour affecter un identificateur précis à un bloc spécifique. Dans le champ Valeur, vous insérerez le nom de votre identificateur.

Class

Une classe en CSS à la même fonction que l'id précédent, excepté que vous pouvez attribuer plusieurs fois une même classe à l'intérieur d'une même page, alors qu'un identificateur ne peut être attribué qu'une seule fois. Dans le champ Valeur, vous insérerez le nom correspondant à cette classe précise.

Title

Vous donnez un nom à votre paragraphe

Lang

Vous spécifiez la langue courante, fr pour french, en pour english, etc. Utile lorsque vous utilisez des mots d'une autre langue que la langue native du document.

dir

Vous spécifiez la direction de lecture de votre texte. Les valeurs sont :

ltr (LeftToRight), lecture de gauche à droite.

Rtl (RightToLeft), lecture de droite à gauche.

Onglet Style interne

Vous ajoutez des styles en ligne, c'est-à-dire, vous définissez un ou plusieurs styles particuliers au marqueur sélectionné, ici <p>. À réserver aux utilisateurs chevronnés, car il nécessite une bonne connaissance des styles. L'entraînement est permis toutefois !

Onglet Événements JavaScript

Vous pouvez insérer des événements de type JavaScript, par exemple : le changement d'une image lors du passage du curseur sur la souris ou l'ouverture d'une fenêtre pop-up. À réserver aussi aux utilisateurs chevronnés ayant une bonne connaissance de JavaScript.

Sélection des classes et des identificateurs à la volée

Nvu s'est enrichi d'une sélection des styles de classe et d'identificateurs (Classes et ID). Aller dans la barre des tâches (en bas à droite), sélectionnez un marqueur et par un clic droit est ajouté Classes et ID. Vous avez une vue directe de tous les identificateurs et classes qui se rapportent à la feuille HTML en cours. Un trait de séparation vous indique quel style de classe ou quel identificateur est en cours d'utilisation. Celui-ci est précédé d'un point. Vous pouvez ainsi attribuer un style à n'importe quel marqueur HTML ou en changer. Plutôt pratique.

Image 58 identificateurs et classes à la volée

Gérer des pages modèles

Il ne suffit pas simplement de réaliser un site et des pages HTML pour qu'un site vive, il faut aussi y ajouter des pages. Que vous soyez seul ou à plusieurs pour maintenir un site, il est toujours pratique d'avoir une page modèle afin de garder l'homogénéité du site. Avec Nvu, cette possibilité est aussi prévue et sera encore plus simplifiée si vous travaillez avec des feuilles de styles !

L'avantage des feuilles modèles est de permettre à toute autre personne que vous de pouvoir créer simplement et facilement une page HTML pour votre site. En cela, Nvu vous facilite la vie, puisqu'il fonctionne entièrement en mode graphique ! Nul besoin que vos collègues soient des pros du HTML, il leur suffit d'ouvrir une page modèle, d'insérer un texte, d'enregistrer cette page au format HTML et vous n'avez plus qu'à la mettre en ligne !

Comment créer une page modèle ?

Allez dans la partie gestion interne/externe de la barre d'outils de composition, cliquer sur la flèche à côté de Nouveau, glissez jusqu'à plus d'options...

Image 59 Création d'une page modèle

Quel type de fichier souhaitez-vous créer ?

Document vide

Ouvre une page HTML vide.

Nouveau document utilisant un modèle

Ouvre une page modèle existante, utiliser le bouton Parcourir... afin de spécifier son emplacement.

Modèle vide

Crée une nouvelle page modèle.

Nous allons nous servir de cette option. Cliquez sur Ouvrir. Une nouvelle page s'ouvre. Si vous travaillez avec des feuilles de style externes, la seule chose que vous avez à faire est d'ouvrir l'éditeur CSS, de lier votre feuille de style (avec Lier feuille), puis d'enregistrer votre feuille avec l'extension mzt au lieu d'HTM ou d'HTML. Cette extension indiquera à Nvu que cette page est une page modèle.

Comment travailler avec une page modèle ?

Cliquez sur Ouvrir, lorsque le dialogue apparaît dans le champ Fichiers de type, sélectionnez Modèles HTML (templates). Si vous avez rattaché la feuille de style externe de l'exercice précédent, un cadre blanc devrait apparaître. Maintenant tapez : « Un modèle de page » et sélectionnez titre de hauteur 2 (heading 2) et, hop, le titre est automatiquement mis en forme en respectant la charte graphique que vous avez désignée pour vos pages.

Attention !

Au moment de l'enregistrement, ne cliquez pas sur l'icône Enregistrer, il faudra aller dans le menu Fichier et cliquer sur Enregistrer sous... (Alt + f + g). Dans la boîte de dialogue au champ Type, choisissez Tous les fichiers à la place de HTML templates *.mzt, sélectionné par défaut, et enregistrez votre page avec l'extension HTM ou HTML.

Pourquoi cela ? Si vous désirez garder un modèle vide réutilisable, c'est la seule manière. Autrement dit, vous indiquez que les modifications établies sur cette page ne doivent pas être prises en compte comme page modèle.

Définir des zones éditables avec une page modèle

Bien que je n'aie pas complètement saisi le sens d'une zone éditable, je donne quelques informations sur son utilisation.

Dans votre page modèle, choisissez dans la barre des tâches le marqueur HTML que vous souhaitez utiliser comme zone éditable. Puis par un clic droit, glissez jusqu'à Modèles/Rendre éditable.

Une boîte de dialogue s'active vous attribuez un nom à la zone éditable sélectionnée ainsi que diverses propriétés. Je l'ai testé, mais je n'en comprends pas le sens. Désolé. Si quelque un sait...

Néanmoins, la zone éditable peut servir de guide. Imaginons qu'une autre personne utilise un modèle, la zone éditable contient le nom de zone Titre, une autre, le nom Corps de page. L'utilisateur n'a plus qu'à remplir les zones correspondantes, enregistrer la page avec l'extension HTM ou HTML.

Lors de la publication de la page dans un navigateur, les zones d'édition n'apparaissent pas mais le texte inséré oui. Pratique pour partager le travail !

Comment maintenir votre site en ligne avec Nvu ?

Vous devez activer le gestionnaire de site en appuyant sur la touche F9. En cliquant sur Édition des sites, une boîte de dialogue s'ouvre avec les paramètres suivants :

le nom de votre site

l'adresse ftp ou www de votre hébergeur

l'adresse locale où se trouve votre site chez votre hébergeur

votre nom d'utilisateur

votre mot de passe.

La connexion s'établit, puis apparaît dans la fenêtre de gauche l'arborescence de votre site. À noter que le sélecteur choose vous permet de choisir, soit tous les fichiers, soit uniquement les images ou les pages HTML.

Ensuite, vous cliquez sur la page que vous souhaitez modifier, elle se télécharge, et vous effectuerez vos modifications avec Nvu.

Enregistrez vos modifications. Nvu rechargera votre page vers le serveur de votre hébergeur et voilà !

Récapitulatif

L'avantage d'une feuille de style externe est de pouvoir assigner une même mise en forme à plusieurs pages. Le plus pratique est de générer directement une page HTML modèle avec la feuille de style en question.

Le reste n'est plus qu'un jeu d'enfant ! Ceci doit vous rappeler l'importance de la préparation d'un site. Toutes ces astuces pratiques qu'offre Nvu ne peuvent être réellement exploitables qu'à partir du moment où l'ensemble du site a été pensé auparavant. Il doit exister sur papier ou, au moins, vous devez avoir une représentation mentale suffisamment claire pour que l'élaboration du site se fasse sans trop de mal, en exploitant le potentiel d'un éditeur HTML comme Nvu.

L'essentiel d'un site repose sur cela. Par la suite, le choix du langage, de la mise en forme est affaire de goût ; vous connaissez trois manières différentes pour créer vos pages désormais. À vous de voir celle qui vous va le mieux.

Exemple de code HTML et CSS (feuille de style exportée)

La feuille de style, identique à l'exemple vu plus haut, §3.6, section D, est exportée à l'extérieur de la page HTML. Les changements s'opèrent dans l'adressage de l'en-tête. Dans le code HTML est apparue une nouvelle ligne qui indique que cette page est mise en relation avec une feuille de style externe et qu'un lien (link) est créé avec l'adresse exacte (href="style/export.css). Enfin, cette feuille de style cible plus particulièrement les écrans d'ordinateur (media="screen").

<link media="screen" rel="stylesheet" href="style/export.css"
type="text/css">

Voici le code HTML complet :

<html lang="fr">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>mapage1</title>
<meta content="votre nom ou votre pseudo" name="author">
<link media="screen" rel="stylesheet" href="style/export.css"
type="text/css">
</head>
<body>
<h1>Le langage html</h1>
<h2>Pr&eacute;sentation</h2>
<p>HTML, sigle de HyperText Markup Language (litt&eacute;ralement
langage de
marquage hyper-texte), est le langage con&ccedil;u pour cr&eacute;er
les pages du World
Wide Web. C'est un langage de description de document bas&eacute; sur
SGML.</p>

Fin du quatrième exercice

Ce dernier exercice vous aura montré comment produire une feuille de style et comment réaliser une page modèle pour votre site.

Nous avons avons survolé l'essentiel de Nvu. Il ne vous reste plus qu'à vous entraîner encore et encore !

Créer des Formulaires

Introduction

Nous avons vu comment fabriquer avec Nvu un site web classique et plutôt statique mais respectueux des standards du Web. Le fin du fin est de pouvoir ajouter une partie dynamique qui rendra votre site plus attractif. La technique du formulaire est un moyen particulier parmi d'autres. Elle permet de recueillir et de traiter les données fournies par un utilisateur. C'est la technique la plus utilisée. Pour cela, il nous faut deux choses principales : un langage de formulation de données (le formulaire) défini par des balises HTML et un langage qui traitera les données entrées par l'utilisateur, un langage de script, mais pas nécessairement.

Cependant un problème subsiste. Les formulaires sont faits pour échanger des données avec le visiteur de votre site. Pour donner un aperçu de l'utilisation des formulaires, nous allons contourner le problème en créant deux types de formulaires. Le premier aura pour but de simplifier la navigation dans votre site. Le second vous présentera un cas typique de récupération de données. Ce détournement est rendu possible grâce à un langage de script bien pratique, le JavaScript.

Que les choses soient claires : ce n'est pas avec ce manuel que vous apprendrez à utiliser le JavaScript. Pour cela, je vous renvoie à l'excellent ouvrage SELFHTML qui traite d'une manière quasi exhaustive de « HTML, JavaScript et des scripts cgi » pour un traitement complet de vos formulaires. Nous nous attachons, uniquement, à découvrir l'option formulaire de Nvu. Nous verrons ainsi ce qu'il est capable de faire, mais aussi ses limites en la matière.

L'idée est de créer des formulaires que le JavaScript traitera et dont il donnera une sortie en fonction de ce que nous lui demandons. Pour mieux vous rendre compte, voici une image du résultat :

Image 60 Exemple d'un formulaire simplifié L'image ci-contre vous montre un formulaire simple dans lequel nous avons deux champs à remplir (nom et prénom). Au moment où vous appuierez sur le bouton « envoyer ! », le résultat de la saisie du formulaire apparaîtra dans l'écran du bas. Enfin, si l'utilisateur n'a pas rempli tous les champs, une fenêtre lui demandera de remplir le champ manquant. À tout moment l'utilisateur pourra annuler sa saisie avec le bouton « annuler ». Finitions : Les boutons « envoyer !» et « annuler », lorsqu'ils seront survolés, changeront la forme du curseur qui se transformera en pointeur (la fameuse main) comme si c'était un lien ! (indication graphique supplémentaire et pratique.)

Nous veillerons aussi à ce que le formulaire soit compréhensible et fonctionnel sans habillage à défaut d'être bien présenté (nous l'appellerons par la suite : le squelette.), voir l'image ci-dessous : Image 61 Le même formulaire sans feuille de style

Qu'est-ce qu'un formulaire ?

Un formulaire est un moyen de récupérer des données entrées par un utilisateur. Ces données peuvent être réduites à trois catégories principales :

L'obtention d'informations sur l'utilisateur (nom, prénom, adresse électronique et/ou physique).

Une série de questions optionnelles à cocher par l'utilisateur (que l'on rencontre sous la forme de boutons radio, de cases à cocher et un choix parmi une liste).

La possibilité pour l'utilisateur de laisser un commentaire.

Pour les besoins de l'étude nous ne verrons que deux exemples, un simple (une liste de choix qui pourra servir de liste de navigation sur votre site) et un formulaire un peu plus élaboré avec la récupération et l'envoi de données.

La méthode choisie

Maîtrisant mal les langages de script, je suis parti à la recherche de quelque chose qui correspondrait à des critères spécifiques : un exemple simple, fonctionnel de formulaire utilisant, s'il y a lieu, un code tout aussi simple.

De plus, je désirais que ce code fonctionne au moins sur deux grandes catégories de navigateurs : Internet Explorer et ceux de la famille Gecko (Mozilla, Firefox).

J'ai trouvé mon bonheur sur le site quirksmode. L'auteur, Peter-Paul Koch , laisse libre l'utilisation des exemples bien qu'ils ne soient pas sous une licence particulière.

Méthode suivie

Pour pouvoir réaliser nos formulaires, nous allons utiliser trois langages possédant leur spécialité propre.

Pour construire le squelette du formulaire, nous utiliserons le langage HTML qui est amplement suffisant.

Pour construire les tests de vérification des formulaires, nous utiliserons le langage JavaScript qui est le plus adapté .

Enfin pour l'habillage, nous utiliserons le langage des feuilles de styles particulièrement adapté au design Web.

Image 62 Les différents dialogues disponibles pour créer des formulaires Le programme met à notre disposition plusieurs outils graphiques pour réaliser sans trop de difficultés un formulaire complet. On regrettera, seulement, que l'insertion de javascript ne soit pas plus aisée d'un point de vue graphique. La console JavaScript n'est pas des plus pratiques d'un point de vue ergonomique. Définir un formulaire... Vous définissez les caractéristiques générales du formulaire (nom, méthode, type d'action, d'encodage, etc). Champ de formulaire... Vous définissez les champs du formulaire à savoir : champ texte (Text), boutons radio, de validation, d'annulation (Reset), cases à cocher, protection par mot de passe, etc. Image de formulaire... Vous insérez une image comme élément d'un formulaire et vous pouvez donc lui attribuer une action précise. Zone de texte... Vous définissez un champ de texte, par exemple pour laisser l'utilisateur inscrire un message. Liste de sélection... Vous définissez une liste de sélection comme liste de choix. Définir un formulaire (début du cinquième exercice)

Créer un bouton... Vous définissez un bouton de votre choix. Créer une étiquette Une option qui permet de définir le texte auquel se rapporte telle ou telle partie d'une formulaire. Voir l'image ci-dessus (le squelette) ; les termes « nom » et « prénom » sont définis comme étiquettes. Définir les propriétés du champ... Vous définissez un champ ou plusieurs champs dans un formulaires. Dans l'image du squelette, le champ de formulaire est reconnaissable grâce à son titre : « exemple 1 ». Index de recherche Permet de définir un index de recherche. Actuellement déprécié.

Première approche : créer un liste de choix pour simplifier la navigation dans un site Internet.

Si vous avez suivi le tutoriel dans ses grandes lignes, vous devriez disposer de trois pages ayant pour noms respectifs mapage1.htm, mapage2.htm, mapage3.htm. Je vous invite à en créer une quatrième qui nous servira de page d'accueil pour notre pseudo site que vous nommerez index.htm.

Dans cette page nous allons utiliser les propriétés des formulaires afin de créer une liste de navigation à l'intérieur de notre site. Nous allons donc créer une courte liste qui contiendra deux groupes avec plusieurs sélections possibles, le premier groupe se nommera navigation et le second, liens externes par exemple, et un bouton de navigation qui lorsqu'il sera cliqué par l'utilisateur l'amènera à la page sélectionnée.

Définir les mentions générales du formulaire

Image 63 Définir les propriétés générales d'un formulaire

Paramètres

Nom du formulaire

C'est dans ce champ que vous précisez le nom du formulaire. Pourquoi donner un nom à un formulaire ? Le nom est essentiel, si vous vous souhaitez par la suite utiliser javascript par exemple. (Nous verrons cela plus en détail au moment de l'insertion de javascript).

Pour l'exercice, vous insérez : navigation

URL de l'action

Dans ce champ, vous insérez le type d'action que vous souhaitez avec l'adresse correspondante afin que votre formulaire soit adressé correctement.

Pour notre exemple, nous insérons un nom invalide, ici, rapide. puisque nous ne nous servirons pas de du formulaire pour envoyer des données.

Dans la réalité, nous mettrions soit une adresse électronique courante du genre : tito@toti.org (mais attention aux programmes-robots, collecteurs d'adresses. Ils en sont friands. Un bon moyen est soit d'encoder votre adresse ; soit d'utiliser un script plus performant comme « cgi » à titre d'exemple.

Méthode

Deux options à votre choix. « Get » ou « Post ». Combinée à « Action », vous choisissez le type d'envoi. Pour une simple adresse électronique, « Post » est la méthode la plus courante.

Pour notre exemple, nous laissons le champ vide, vous choisissez post.

Bouton Plus de propriétés

Encodage

Options :

-application/x-www-form-urlencoded L'option par défaut qui envoie les saisies du formulaire sous forme de texte encodé.

-Multipart/form-data, une autre option qui vous permet de donner la possibilité à l'utilisateur d'envoyer un fichier externe. Cette option est à associer à l'option Fichier de la Fenêtre Champ de formulaire.

-text/plain, cette option envoie un texte au format brut. Le plus simple et le plus pratique.

Cadre cible

Permet de choisir comme cible une Fenêtre Frame. Une option presque incongrue en l'état actuel des choses puisque Nvu ne gère pas les Frames.

Bouton Supprimer le formulaire

Enlève le formulaire en question.

Comme nous allons utiliser javascript, nous précisons dans la définition générale du formulaire l'insertion d'un identificateur qui permettra à Javascript de savoir comment traiter l'événement. Activez le bouton Propriétés avancées.

Vous remarquerez dans l'onglet «Attibuts HTML», l'insertion des différents paramètres inscrits dans Attribut et Valeur, paramètres que nous venons de définir ci-dessus.

Image 64Attributs et valeurs d'un formulaire

À l'aide, du menu déroulant, en bas de la fenêtre vous ajouterez l'Attribut d'identification id et vous lui donnerez comme Valeur Activation (pour activation du formulaire).

Image 65 Attribut et Valeur

Ce qui donne en langage HTML :

<form name="navigation" action="rapide" method="post" id="activation" >

</form>

Création du bouton de navigation

Ma logique voudrait commencer d'abord par la liste de choix puis continuer avec la création du bouton de navigation or cette logique ne semble pas convenir à Nvu qui écrase systématiquement la liste de choix une fois le bouton créé. L'inverse n'est pas vrai cependant. Donc commençons par créer le bouton de navigation.

Dans le menu Formulaire vu plus haut, activez le dialogue Champ de formulaire...

Image 66 Création du bouton naviguer

Dans Type de champ, sélectionnez Bouton. Dans Paramètres du champ, inscrivez à Nom du champ, naviguer et la même chose à Valeur du champ.

Ensuite ouvrez la fenêtre d'Édition avancée... Nous allons définir un événement JavaScript qui se produira lorsque l'utilisateur cliquera sur ce bouton.

Image 67 Insertion de l'événement JavaScript

Sélectionnez l'onglet Événements JavaScript, Dans Attribut choisissez l'événement onclick (au moment où l'utilisateur cliquera). Puis à Valeur, inscrivez la description en langage java script de l'événement.

location = document.navigation.liens.options[document.navigation.liens.selectedIndex].value;

Validez en appuyant sur ok. Nous verrons la signification de cette phrase lorsque nous aurons créé la liste de choix.

Création de la liste de choix

Dans le menu Formulaire vu plus haut, activez le dialogue Liste de sélection... La fenêtre suivante s'ouvre :

Image 68 fenêtre liste de sélection

Fenêtre Texte, Valeur, Sélectionné

Inscription en arbre de votre liste de choix suivant cet ordre :

|-----Nom de la liste

|-----Nom du groupe 1 (bouton Ajouter un groupe)

| |-----Nom d'option de la liste (bouton Ajouter une option)

| |-----Nom d'option de la liste

| |-----Nom d'option de la liste

|-----Nom du groupe 2

|-----Nom d'option de la liste

|-----Nom d'option de la liste

|-----Nom d'option de la liste

Texte

Correspond au texte qui apparaîtra dans votre liste de choix.

Valeur

sa valeur correspondante pour un traitement interne. Vous remarquerez à ce propos que la valeur est automatiquement mise en minuscules.

Sélectionné

correspond à un choix de pré-sélection.

Le dernier bouton (tout en haut à droite)

Il vous permet de de choisir entre les options : Texte, Valeur et Sélectionné.

Cadre Liste de sélection

Nom de la liste

Le nom général de votre liste.

Hauteur

Pour définir manuellement la taille de votre liste de choix

Sélection multiple

Comme son nom l'indique : une liste à choix multiple

Désactivée

Désactiver les options de choix de la liste

Balise index

Définir le niveau de tabulation d'un champ à un autre pour une navigation clavier.

Bouton Ajouter une option

Ajoute une option à votre liste.

Bouton Ajouter un groupe

Ajoute un groupe qui contiendra plusieurs options

Bouton Supprimer

Comme son nom l'indique, enlever une option ou un groupe

Boutons Monter / Descendre

Descendre ou monter une option, un groupe dans l'organigramme de la liste.

Bouton Édition avancée...

Ouvre le dialogue de l'éditeur de Propriétés avancées

Pour l'exercice, dans le champ Nom de la liste vous inscrivez liens

Revenons un peu en arrière et souvenons-nous de la définition générale du formulaire :

<form name="navigation" action="rapide" method="post" id="activation" > </form>

Maintenant que nous avons donné le nom liens à la liste de choix, faisons le rapprochement avec le code java script que nous avons défini comme événement plus haut :

location=document.navigation.liens.options[document.navigation.liens.selectedIndex].value;

Nous retrouvons dans notre code, deux des noms que nous avons attribués au formulaire : navigation pour le nom général du formulaire et liens pour l'endroit particulier où java script devra chercher l'information, c'est-à-dire la liste de choix.

Nous finirons l'étude de ce code tout à l'heure.

Inscription des groupes et des options

Une fois déterminé le nom général de la liste de choix, cliquez sur le bouton Ajouter un groupe, le cadre à gauche se modifie et inscrivez dans Étiquette : liens internes.

Image 69 formulaire liste, définir un groupe

L'option Désactivé rendra cette partie du groupe de la liste inactive. Ne pas le cocher !

Maintenant cliquez sur Ajouter une option ; à nouveau le cadre de gauche se modifie :

Image 70 Option de liste Insérez dans le champ Texte, mapage1 puis dans le champ Valeur ajoutez l'extension .htm ; le champ Valeur, comme vous l'avez remarqué, se remplit en même temps que le champ Texte.

L'option Sélectionné initialement fera de mapage1 le champ sélectionné par défaut.

L'option Désactivé rendra ce champ de la liste d'option inactif.

Image 71 arbre de la liste de sélection Vous noterez que l'arbre se construit au fur et à mesure de vos entrées et correspond bien à la description que nous en avons faite ci-dessus.

Pour rentrer les autres options de liste il faudra à chaque fois cliquer sur Ajouter une option ; pour le nom de groupe sur Ajouter un groupe.

Voici une image du résultat final :

Image 72 Liste de sélection complète

Explication du code JavaScript

Maintenant que nous avons terminé les préparatifs, passons à l'explication de ce que nous avons fait.

Nous avons créé un bouton de navigation. Ce dernier reçoit un code JavaScript qui s'activera lorsque le visiteur de votre site cliquera dessus.

Nous avons créé une liste de sélection. Celle-ci contient plusieurs options de navigation pour l'utilisateur.

Voyons le résultat de tout cela avec la vue de la source HTML de notre formulaire :

<form id="activation" method="post" action="rapide" name="navigation">

<input onclick="location = document.navigation.liens.options[document.navigation.liens.selectedIndex].value;" name="naviguer" value="naviguer" type="button">
<select name="liens">
<optgroup label="liens interne">
<option value="mapage1.htm">mapage1</option>
<option value="mapage2.htm">mapage2</option>
<option value="mapage3.htm">mapage3</option>
</optgroup>

<optgroup label="liens externe">
<option value="www.framasoft.net">framasoft</option>
<option value="www.wikipedia.org">wikipedia</option>
</optgroup>

</select>

</form>

Nous retrouvons bien tout ce qui a été inséré en mode graphique avec les divers outils de Nvu. D'abord la définition générale du formulaire avec les balises <form></form>, puis la définition d'un bouton avec la balise <input type="button">, enfin notre liste de sélection <select></select>, les entrées de groupe avec <optgroup></optgroup> et, en dernier, les balises <option></option>. Ce qui donne en mode graphique sur la page HTML :

Image 73 Vue du formulaire dans un navigateur graphique

Il y a bien un sélecteur de navigation et un bouton nommé naviguer. Dans la liste de sélection, les groupes apparaissent en gras.

Attention pour les utilisateurs d'Internet Explorer 5. Les noms de groupe n'apparaissent pas.

L'explication du code

En se fondant sur toutes ces présentations passons à l'explication du code inséré dans le bouton et qui va déclencher un événement.

<input onclick="location = document.navigation.liens.options[document.navigation.liens.selectedIndex].value;" name="naviguer" value="naviguer" type="button">

Le déclenchement d'un événement en JavaScript s'effectue soit lorsque l'utilisateur cliquera soit une fois sur le bouton, onclick, soit deux fois, ondblclilk, lorsque la souris passe sur un endroit particulier, onmouseover, etc.

L'événement que nous avons choisi est : lorsque l'utilisateur clique une fois sur le bouton <input type="button" onclick=""> (l'ordre des différents paramètres n'a pas de conséquence ; seul tout ce qui trouve en guillemets influe sur ce qu'il se passe.)

Pour comprendre la suite, nous allons partir d'une représentation hiérarchisée en arbre de la page HTML :

|<html lang="fr">

+------+<head>
+------+<body style="direction: ltr;">
|-+<form id="activation" method="post" action="rapide" name="navigation">
|----<input onclick="location = document.navigation.liens.options [document.navigation.liens.selectedIndex].value;" name="naviguer" value="naviguer" type="button">
|----+<select name="liens">

|---+<optgroup label="liens interne">

|---<option value="mapage1.htm">mapage1</option>

|---<option value="mapage2.htm">mapage2</option>

|---<option value="mapage3.htm">mapage3</option>

|---</optgroup>

|---+<optgroup label="liens externe">

|---<option value="www.framasoft.net">framasoft</option>

|---<option value="www.wikipedia.org">wikipedia</option>

|---</optgroup>

|</select>
|--</form>
|</body>

</html>

En JavaScript une page HTML se nomme document. Pour indiquer à JavaScript où il doit chercher dans le document, nous lui indiquons des noms précis dans la hiérarchie du document, le premier niveau qu'il doit rencontrer est le nom qui définit le formulaire d'une manière générale <form name="navigation">, ensuite nous allons lui dire de regarder encore plus bas dans la hiérarchie avec un nouveau nom qu'il doit rencontrer <select name="liens">.

Qu'est-ce qu'il cherche ? Cela est indiqué au tout début, il cherche une adresse HTML, location =

Donc location = document.navigation.liens, ce qui correspond bien à

<html>

+-----+<head>

+-----+<body>

|----+<form name="navigation">

|------+<select name="liens">

Une fois arrivé aux liens, il est indiqué que le script doit regarder dans les options, location = document.navigation.liens.options ; Ensuite il va être dit au script de retenir une option précise, celle qui sera sélectionnée par l'utilisateur, selectedIndex. Vous avez certainement remarqué la redondance, la première indique où regarder dans le document et à quelle profondeur ou niveau de hiérarchie du document, la seconde re-précise tout cela avec la profondeur choisie : l'index d'option sélectionné.

location =

document.navigation.liens.options .value

[document.navigation.liens.selectedIndex]

Enfin, une fois que le script a repéré quelle option a été sélectionnée par l'utilisateur, pour se terminer il doit transmettre la valeur (value) associée à la sélection. La fin du script est signalée par un point-virgule.

Ce qui correspond bien à

<html>

+-----+<head>

+-----+<body>

|----+<form name="navigation">

|------+<select name="liens"> document.navigation.liens.options

| [document.navigation.liens.selectdIndex].

|------+<option value="mapage1.htm">mapage1</option> value

|------+<option value="mapage2.htm">mapage2</option> value

Ajouter la navigation au clavier à notre script

L'insertion du code exige une intervention dans l'en-tête de la page. Le plus simple est de cliquer sur le bouton Balises HTML et d'insérer le code manuellement entre les balises <head> et </head>

La méthode, que nous venons de voir, utilise un événement qui se déclenche au moment où l'utilisateur clique sur le bouton, onclick. C'est une navigation à la souris. Cependant elle empêche toute navigation avec le clavier. Or il se peut très bien qu'une personne n'utilise pas la navigation avec une souris mais, plutôt, avec le clavier.

Il va falloir modifier quelques données dans le script sans en changer le concept. Nous allons l'adapter à une navigation plus large, à la fois souris et clavier.

Nous nous servons d'un autre événement : onsubmit. C'est au moment où l'utilisateur valide le formulaire que l'événement est déclenché non plus uniquement sur le seul bouton. (les éléments modifiés sont en gras.)

<form id="activation" onsubmit="location = document.navigation.liens.options[document.navigation.liens.selectedIndex].value; return false" action="rapide" name="navigation">

<input name="naviguer" value="naviguer" type="submit">
<select name="liens">
<optgroup label="liens interne">
<option value="mapage1.htm">mapage1</option>
<option value="mapage2.htm">mapage2</option>
<option value="mapage3.htm">mapage3</option>
</optgroup>

<optgroup label="liens externe">
<option value="www.framasoft.net">framasoft</option>
<option value="www.wikipedia.org">wikipedia</option>
</optgroup>

</select>
</form>

Ajoutons de l'élégance à notre script

Cette méthode consiste à séparer le script du formulaire. Par cette manipulation, vous allez pouvoir placer votre script dans l'en-tête de la page. On gagne en clarté et en lecture. Tous les éléments externes à la structure d'une page HTML sont distinctement séparés, JavaScript, feuille de style, etc.

De plus, en opérant de la sorte nous gagnons une souplesse supplémentaire, celle de placer dans un fichier extérieur notre script. (les éléments modifiés apparaissent en gras.)

<head>

<title>de l'élégance de la méthode, partie 2</title>

<script type="text/javascript">

<!--

function rapidement()

{

location = document.navigation.liens.options[document.navigation.liens.selectedIndex].value;

}

-->

</script>

</head>

<body>

<form id="activation" onsubmit="rapidement(); return false" action="rapide" name="navigation">

<input name="naviguer" value="naviguer" type="submit">
<select name="liens">
<optgroup label="liens interne">
<option value="mapage1.htm">mapage1</option>
<option value="mapage2.htm">mapage2</option>
<option value="mapage3.htm">mapage3</option>
</optgroup>

<optgroup label="liens externe">
<option value="www.framasoft.net">framasoft</option>
<option value="www.wikipedia.org">wikipedia</option>
</optgroup>

</select>
</form>

Le top de l'élégance

Il nous reste encore à voir, rapidement, une dernière méthode, la plus élégante selon certains. Celle-ci consiste à lancer directement le script à l'intérieur du script lui-même non plus dans la page HTML avec l'événement <form onsubmit="rapidement(); return false">. Ainsi on obtient une stricte séparation de la structure et du contenu.

Ne maîtrisant pas complètement les arcanes de cette méthode, je n'arrive à la faire fonctionner que sous les navigateurs basés sur Gecko (mozilla, firefox) et Opera (version 7.5). Les navigateurs Internet Explorer 5 et 6 n'acceptent pas cette formulation du script. Ne l'utilisez que si vous êtes sûr de vous, sinon préférez-lui la précédente.

<head>

<title>De l'élégance de la méthode, partie 3</title>

<script type="text/javascript">

<!--

var valider = Function ("location = document.navigation.liens.options[document.navigation.liens.selectedIndex].value; return false")

document.onsubmit = valider

// -->

</script>

</head>

<body>

<form id="activation" action="rapide" name="navigation" >

<input name="naviguer" value="naviguer" type="submit">

<select name="liens">

<optgroup label="liens interne">

<option value="mapage1.htm">mapage1</option>

<option value="mapage2.htm">mapage2</option>

<option value="mapage3.htm">mapage3</option>

</optgroup>

<optgroup label="liens externe">

<option value="www.framasoft.net">framasoft</option>

<option value="www.wikipedia.org">wikipedia</option>

</optgroup>

</select>

</form>

</body></html>

Approfondir : réaliser un formulaire qui réagira en fonction de l'entrée de l'utilisateur.

Revenons à notre premier formulaire (voir image 59 ). Nous avons besoin des champs suivants :

Un champ général qui définit le formulaire.

Deux champs textes pour recueillir le nom et le prénom de la personne.

Deux boutons, un envoyer et un annuler. Ils nous serviront respectivement à envoyer le formulaire et à annuler la saisie de l'utilisateur si ce dernier s'est trompé.

Une aire de texte, qui, ici, nous servira d'écran de sortie. Ainsi nous pourrons voir ce qui est envoyé. (C'est le détour que nous utilisons pour utiliser un formulaire hors-ligne).

Un code JavaScript un peu plus complet qui vérifiera si les champs nom et prénom ont été bien remplis. S'ils ne le sont pas alors le curseur est envoyé dans le champ à remplir s'ils le sont alors le programme recueille les données inscrites par l'utilisateur et les envoie... vers notre écran de sortie.

Définition générale du formulaire

Image 74 définitions générales du second formulaire Le nom du formulaire est exemple2, nous créons une pseudo action que nous nommons essai.

Bouton Plus de propriétés

Encodage

Options :

-application/x-www-form-urlencoded L'option par défaut qui envoie les saisies du formulaire sous forme de texte encodé.

-Multipart/form-data, une autre option qui vous permet de donner la possibilité à l'utilisateur d'envoyer un fichier externe. Cette option est à associer avec l'option fichier de la Fenêtre Champ de formulaire...

-text/plain, cette option envoie un texte au format brut. Le plus simple et le plus pratique.

Pour l'exercice, c'est l'option que nous retenons text/plain

Regardons la fenêtre d'édition avancée et intéressons-nous à l'onglet Attributs HTML

Image 75 Onglet attributs HTML Ce qui donne en langage HTML :

<form action="essai" enctype="text/plain" name="exemple2">

</form>

Définition de l'événement à l'aide de JavaScript

Nous n'avons pas tout à fait terminé la définition générale du formulaire, il nous reste à définir l'événement déclencheur qui activera le code JavaScript.

Cliquez sur le bouton Formulaire afin de réactiver la fenêtre générale, maintenant cliquez sur Édition avancée..., sélectionnez l'onglet Événements JavaScript. Dans le champ Attribut, à l'aide du menu déroulant, choisissez onsubmit et dans le champ valeur, insérez envoi(); return false ; l'explication va venir... un peu plus tard.

Image 76 Utilisation de l'éditeur de propriétés avancées pour insérer un événement javascript

En fait nous précisons directement dans la définition générale du formulaire quel événement JavaScript doit lui être associé. Ceci pour des raisons pratiques et ergonomiques que je n'expliquerai pas ici .

Nous indiquons ceci : lorsque l'utilisateur appuiera sur le bouton de validation du formulaire (onsubmit) envoyer, cet événement déclenchera une fonction JavaScript verifier_envoi();.

Voici le code HTML complet de la définition générale de notre formulaire

<form action="essai" onsubmit="verifier_envoi(); return false" enctype="text/plain" name="exemple2">

</form>

Définir des champs particuliers

Les champs texte nom et prénom

Avant de définir un champ, vous inscrirez manuellement les mots nom, prénom et vous laissez le curseur à côté. Ensuite vous créez votre champ de formulaire texte. C'est la solution la plus simple pour créer des étiquettes avec Nvu. Toute opération contraire risque de vous surprendre beaucoup ! Le rôle des étiquettes sera expliqué plus bas.

Image 77 étiquette + champ

Image 78 Les différentes propriétés d'un formulaire, ici insertion d'un champ "text"

Type de champ

Texte

Définit un champ texte.

Pour l'exercice, nous définirons deux champs texte ; un nom et un prénom.

Mot de passe

Définit un champ protégé par « mot de passe ».

Cases à cocher

Définit une case à cocher

Bouton radio

Définit un bouton radio

Bouton de validation

Définit un bouton de validation.

Pour notre exercice, nous définirons un bouton de validation que nous nommerons envoyer

Bouton reset

Définit un bouton d'annulation.

Pour notre exercice, nous définirons un bouton d'annulation, nommé annuler.

Fichier

Définit un champ parcourir... afin d'inclure un fichier externe avec le formulaire.

Caché

Définit un champ caché à l'utilisateur mais visible pour l'émetteur du formulaire. Par exemple, recueillir des informations sur le navigateur, l'ordinateur, etc.

Image

Définit une image comme champ.

Bouton

Définit un bouton particulier qui subira un événement particulier (onclick par exemple).

Paramètres du champ

Nom du champ

Le nom que vous donnerez au champ défini.

Pour l'exercice, nous avons défini un champ texte que nous appelons nom. Il en faudra un deuxième nommé prénom.

Valeur initiale

Vous pouvez insérer une valeur initiale dans le champ défini comme « Inscrivez votre nom ici » par exemple.

Case à cocher n lecture seule

Cette option vous permet de bloquer l'accès en écriture au champ que vous êtes en train de définir ; par exemple, pour un prix fixe.

Bouton Plus de propriétés

Case à cocher Désactivé

Permet de rendre le champ défini totalement inactif.

Balise index

Lorsque vous avez plusieurs champs à remplir, vous pouvez forcer la navigation du formulaire avec la touche tabulation du clavier. Par exemple, 1 pour nom et 2 pour prénom. Automatiquement la navigation par tabulation sélectionnera la place du curseur dans le champ nom en premier et prénom en second.

Raccourci clavier

Vous définissez une touche de raccourci clavier. Par exemple n pour nom et p pour prénom.

Taille du champ

Vous définissez la taille du champ en question. 30 pour un champ texte est un valeur moyenne.

C'est la valeur moyenne que nous avons retenu pour l'exercice

Longueur maximale

Vous pouvez définir une taille maximale par défaut du champ en question.

Types acceptés

En plus de l'encodage de caractères Européen, vous pouvez ajouter d'autres types d'encodages.

Nous venons de définir deux champs textes, un nommé nom et un autre prénom. Nous leur avons donné une taille identique de 30. Nous avons aussi défini deux boutons, un bouton de validation ayant pour Valeur de champ envoyer ! et un bouton Reset ayant pour Valeur de champ : Annuler.

Image 79 formulaire brut avec champs de texte et boutons

Voici le code HTML complet correspondant :

<form action="essai" onsubmit="verifier_envoi(); return false" enctype="text/plain" name="exemple">

nom<input size="30" name="nom">

pr&eacute;nom<input size="30" name="prénom">

<input value="envoyer !" type="submit">

<input value="annuler" type="reset">

</form>

Il ne nous reste plus qu'à définir un dernier champ : la zone de texte qui nous servira d'écran de sortie.

Le champ Zone de texte

Pour l'activer, sélectionnez dans Formulaire..., Zone de texte...

Image 80 Définition et paramètres d'une zone exte

Paramètres

Nom du champ

Comme son nom l'indique.

Lignes

Le nombre de lignes

Colonnes

Le nombre de colonnes

Bouton Plus de propriétés

Retour à la ligne

Contrôle la manière dont le texte passera à la ligne. Plusieurs options disponibles que je vous laisse découvrir.

Cases à cocher En lecture seule et Désactivé

Identiques à celles expliquées ci-dessus.

Champs Balise index et Raccourci clavier

Identiques à ceux expliqués ci-dessus.

Champ Texte initial

Identique à Valeur de champ, inscrit un texte par défaut.

Pour l'exercice :

-Nom du champ : sortie

-Lignes : 5

-Colonnes : 20

Image 81 formulaire complet

Voici le code HTML complet :

<form action="essai" onsubmit="verifier_envoi(); return false" enctype="text/plain" name="exemple">

nom<input size="30" name="nom">

pr&eacute;nom<input size="30" name="prénom">

<input value="envoyer !" type="submit">

<input value="annuler" type="reset">

<textarea cols="20" rows="5" name="sortie"></textarea>

</form>

Définition d'étiquettes relationnelles pour les champs nom et prénom

Afin de faciliter la logique interne d'un formulaire et donc ses différentes relations avec ses éléments, il a été défini des balises spécifiques nommées label (Étiquette en français) qui, accompagnées de l'instruction for, désignent la relation exacte d'un terme avec un champ du formulaire.

La mention for apparaît dans la version 0.4x de Nvu ; dans les versions précédentes elle n'apparaît pas donc il faudra l'insérer manuellement.

Reportez-vous à l'image 80 pour servir de guide mais, en toute logique, vous n'en avez besoin puisque Nvu est avec vous et vous travaillé avec !

Sélectionnez à l'aide de la souris nom. Maintenez la touche shift (représentée par une flèche sur le clavier) et cliquez sur le champ à côté. Ces deux zones devraient être sélectionnées.

Ensuite, il suffit de se reporter au menu Formulaire..., de descendre jusqu'à Créer une Étiquette, de cliquer dessus et le tour est joué ! Réitérer la même opération pour prénom.

Voici le code HTML complet :

<form action="essai" onsubmit="verifier_envoi(); return false" enctype="text/plain" name="exemple">

<label for="nom"><input size="30" name="nom"></label>

<label for="prénom"><input size="30" name="prénom"></label>

<input value="envoyer !" type="submit">

<input value="annuler" type="reset">

<textarea cols="20" rows="5" name="sortie"></textarea>

</form>

Définir les propriétés de champs des formulaires.

Les propriétés de champs sont utiles lorsque vous avez plusieurs parties

à distinguer dans un même formulaire. Pour éditer rapidement et simplement cette propriété, deux opérations simples : dans la barre des tâches de Nvu cliquez sur <form>, ce qui aura pour conséquence de sélectionner entièrement votre formulaire. Ensuite dans le menu Formulaire..., descendez jusqu'à Définir les propriétés du champ...

Un dialogue apparaît, inscrivez le nom que vous souhaitez, une liste de sélection vous permet de choisir l'emplacement de votre légende, À gauche, Au centre, À droite ou laisser l'option Par défaut.

Image 82 Exemple de différents champs à l'intérieur d'un formulaire

Attention !

Nvu n'est pas des plus pratiques pour définir graphiquement plusieurs champs dans un même formulaire. Une petite intervention manuelle dans le code sera nécessaire.

Styliser votre formulaire avec l'éditeur Cascades

Je ne vous donne pas d'instructions spécifiques. A vous de travailler un peu ! Cela devrait être un jeu d'enfant avec Nvu et la lecture de ce manuel !

Voici quelques conseils tout de même. Définissez le style de votre formulaire suivant sa sémantique : form pour le style général; label pour les champs nom et prénom. Si vous souhaitez distinguer le champ input de l'étiquette label, alors insérer une règle pour input. Faites attention à ceci : votre formulaire est composé de quatre entrées input, il va falloir les distinguer par paires. Donc il faudra créer deux classes particulières. N'oubliez pas d'insérer en conséquence des noms de classe pour chaque champ input. Cela n'est pas strictement nécessaire et cela n'empêchera la suite de l'exercice.

L'astuce pour obtenir la main à la place du curseur.

Comment transformer le curseur flèche en pointeur main lorsque l'utilisateur survolera les boutons envoyer et annuler ?

Voici l'instruction Css à placer, manuellement, pour vos boutons

input

{cursor: pointer;}

Cette instruction Css n'est pas reconnue par le navigateur Internet Explorer, pour ce faire vous utiliserez l'instruction suivante :

{cursor: hand;}

Ce sont les séquelles d'une guerre sans commune mesure entre la domination de Micro$oft et les autres. Pour bien fignoler le tout vous pouvez vous arranger ainsi.

Créez une classe css pour vos boutons que vous nommerez, par exemple, « curseur ». Dans la première, vous définissez le curseur pour les navigateurs de type Internet Explorer.

Puis vous allez créer une pseudo-classe spéciale, qu'Internet Explorer est incapable de reconnaître, mais que les navigateurs basés sur le moteur Gecko (Mozilla, Firefox) savent reconnaître .curseur:hover {cursor:pointer}.

Cette dernière instruction est optionnelle étant donné que les navigateurs basés sur Gecko reconnaissent « hand » ; à vous de voir.

Vérifier les saisies du formulaire à l'aide de javascript

L'insertion de code JavaScript en mode graphique n'est pas des plus pratiques avec Nvu et d'une manière générale avec l'ensemble des éditeurs qui proposent une console. La console JavaScript de Nvu possède le défaut de toutes les consoles. Une seule ligne pour insérer le code, ce qui n'est absolument pas explicite ni pratique pour comprendre quoi que ce soit (en tout cas pour un débutant comme vous et moi).

Il faudra, en conséquence, prévoir une insertion manuelle du code. La méthode la plus simple consiste à insérer le code directement dans la feuille HTML. Si vous avez plusieurs pages différentes qui se réfèrent à JavaScript, veuillez plutôt opter pour une insertion externe.

Pour insérer le code, reportez-vous à l'onglet <HTML>Source, le copier/coller est fortement recommandé. Vous collerez le passage JavaScript entre les balises <head> et </head>. Par habitude qui est devenue une sorte de convention, Le code JavaScript doit être inséré juste avant la balise de fin </head>.

<script language="javascript" type="text/javascript"> function verifier_envoi() { var texte = ' '; for (i=0;i<2;i++) { var verifier = document.exemple2.elements[i];	if (!verifier.value) { alert('Vous n\'avez pas rempli le champ ' + verifier.name + ' !'); verifier.focus()	return; } texte += verifier.name + ': ' + verifier.value + '\n'; } document.exemple2.sortie.value = texte; } </script> Courte présentation du code à insérer

J'ai essentiellement francisé le code. Celui-ci vérifie si l'utilisateur a inséré quelque chose soit dans le champ nom soit dans le champ prénom. Pour cela il a été déclaré une variable qui s'appelle verifier qui va regarder ce qui se passe dans les éléments du document qui se réfèrent au nom exemple2. Vous comprenez l'utilité de bien définir les noms de chaque élément du formulaire ; à l'aide de JavaScript, vous allez pouvoir accéder distinctement à ceux-ci.

Tout ce qui suit se déroulera lorsque l'utilisateur cliquera sur le bouton envoyer d'où, dans notre travail précédent, l'insertion du code : <form action="essai" onsubmit="verifier_envoi(); return false" enctype="text/plain" name="exemple"> Á l'événement onsubmit ou lorsque l'utilisateur clique sur le bouton envoyer, un petit script se met en route qui se nomme verifier_envoi().

Comme il y a plusieurs éléments, ici deux champs input, il a été défini une boucle au préalable à l'aide de l'instruction for qui vérifiera que les champs sont bien remplis. Ceci pour éviter deux fois la même instruction de vérification, voir le schéma graphique explicatif ci-dessous.

Soit

Déclaration de la boucle selon la profondeur des éléments du document :

for (i=0;i<2;i++)

i est une valeur numérique (i=0), i n'est pas plus grand que 2 (i<2) et i doit toujours recommencer dès qu'il a fini (i++).

déclaration de la référence à i (définir i)

var verifier = document.exemple2.elements[i]

On assigne à la variable verifier la valeur suivante : dans le document une partie se nomme exemple2 et c'est dans cette partie que se trouvent les éléments de [i] elements[i] définis par la boucle ci-dessus. (Effectivement, nous avons bien défini en HTML notre formulaire général avec un nom particulier, name="exemple2" et nous avons bien deux champs.)

Une fois que l'on a indiqué où le programme devait regarder, on lui demande de vérifier s'il y a quelque chose ou non à l'aide d'une instruction conditionnelle.

S'il y a quelque chose (une valeur) dans l'un des éléments de [i], à savoir nos champs input alors il se passera tel événement.

Soit :

if (!verifier.value)

{alert('Vous n\'avez pas rempli le champ ' + verifier.name + ' !');

verifier.focus()

return;}

L'instruction conditionnelle est prise à l'envers, ce qui permet de gagner en lisibilité : s'il n'y a rien (aucune valeur) dans verifier alors il faut alerter l'utilisateur et le lui dire. Le point d'exclamation sert pour dire en gros différent de.

Une boîte de dialogue de type alert s'ouvre et inscrit la phrase suivante « Vous n'avez pas rempli le champ untel ». Ceci se fait grâce à l'instruction verifier.name ; il est demandé au programme de regarder encore plus dans la profondeur du document, jusqu'aux noms, name, attribués aux éléments de la partie nommée exemple2 or comme nous avons défini des noms précis au préalable dans notre formulaire, le programme sera en mesure de ressortir le nom correspondant au champ non rempli.

Verifier.focus() est un élément supplémentaire qui a pour but de placer le curseur au bon endroit. Là où le champ n'a pas été rempli. L'instruction return retourne le processus au début tant que tous les champs ne sont pas remplis correctement.

Une fois cette étape passée, il va falloir sortir le résultat pour qu'il puisse être traité.

Pour cela une nouvelle variable a été définie. Celle-ci n'a pas été définie explicitement d'où var texte = ' '; Sa définition viendra un peu plus tard mais rien ne nous empêche de le faire dès le début.

Que se passe-t-il une fois que toutes les vérifications sont terminées ? Une nouvelle variable entre en jeu nommée texte. Celle-ci a pour rôle essentiel de récupérer les valeurs inscrites dans les champs input et de les placer dans un endroit précis.

texte += verifier.name + ': ' + verifier.value + '\n';

La variable texte doit contenir (+=) les valeurs suivantes, d'abord le nom du champ input donc son nom selon la profondeur du document nommé exemple2 d'où « verifier.name » auquel sera rajouté ce qui a été inscrit (les valeurs) dans ces champs d'où l'instruction verifier.value. Enfin pour bien les distinguer, on force un retour à la ligne avec \n

Une fois que ces différentes valeurs ont été récupérées, il est demandé au script des les inscrire dans un endroit précis.

document.exemple2.sortie.value = texte;

Une fois que la variable texte a récupéré ses données, il lui est demandé de les placer dans un endroit précis du document à savoir, dans la partie nommée exemple2, il y a un élément qui se nomme sortie, c'est ici que les valeurs, value, doivent être inscrites.

Ce qui correspond bien à

+<html>

+------+<head>

+------+<body>

+------+<fieldset>

+------+<legend> var verifier = document.exemple2.elements[i];

+------+<form name="exemple2">

|

==========|======================================

= +------+<label> =

= | | =

= | | =

= | +------+<input name="nom"> =

for (i=0;i<2;i++) | if (!verifier.value)+

= | = |

= +------+<label> = |

= | | = +alert()

= | | =

= | +------+<input name="prénom"> =

= | if (!verifier.value)+

==========|====================================== |

[retourner à la boucle tant | verifier.focus() return; |

que la condition n'est pas | |

remplie. Pas de valeur dans +------+<input type="submit"> |

champs nom et/ou prénom.] | +alert()

|

+------+<input type="reset">

|

|

+------+<textarea name="sortie">

var texte = ' ';

texte += verifier.name + ': ' + verifier.value + '\n';

document.exemple2.sortie.value = texte;

Fin du cinquième exercice

Au cours de cet exercice nous avons vu comment réaliser des formulaires. J'ai volontairement été plus succinct pour les descriptions que dans les parties précédentes, étant donné que vous avez dû acquérir un peu d'expérience. En outre j'ai été plus prolixe sur la partie code. Il est vrai que la méthode développée imposait ce choix. J'espère qu'elle ne vous aura pas trop perturbé !

La création de formulaires est relativement simple pour une structure HTML. Ce qui donnera un plein sens à vos formulaires sera sa description stylistique à l'aide d'une feuille de style et le traitement des données à l'aide d'un langage simplifié comme javascript. Mon but était de vous donner un court aperçu de ces trois méthodes et de vous inviter à approfondir le sujet.

Pour aller plus loin

Gérez votre site avec le gestionnaire interne !

Voyons comment nous pouvons tirer parti de cet outil très pratique qu'est le gestionnaire de sites. Pour l'exemple, je supposerai que vous utilisez Nvu sous Windows.

Pour appeler le gestionnaire de sites il suffit d'appuyer sur la touche F9 de votre clavier.

Image 83 Vue générale du gestionnaire de sites

Bouton Édition des sites

Réglage de vos paramètres

Liste déroulante Choisir un site

Choix de vos sites préréglés avec l'éditeur de sites

Liste déroulante Tous les fichiers

Choix du type de vos fichiers, HTML ou images

Paramètres de l'éditeur de sites

Image 84 Paramétrage de l'éditeur de sites

Une fois que vous avez appuyé sur le bouton Édition des sites le dialogue ci-dessus s'ouvre.

Édition des sites

Bouton Nouveau site

Pour donner un nom au nouveau site géré par Nvu

Bouton Éditer par défaut

Fera du site sélectionné le site par défaut pour Nvu.

Bouton Supprimer le site

Comme son nom l'indique

Nom du site

Utilisez de préférence le nom du répertoire à la racine de votre site, pour notre exercice : acrose. (où est-ce que j'ai été cherché ce nom ?)

Informations sur la page d'accueil

Comme nous travaillons hors ligne, il n'est pas nécessaire de remplir ce champ.

Serveur d'édition

Appuyer sur le bouton Parcourir... Une boîte de dialogue s'ouvre, sélectionnez le dossier qui se trouve à la racine de votre site. Puis appuyez sur ok.

Champs Identifiant et Mot de passe

Nous ne les utiliserons pas étant donné que nous travaillons hors ligne.

Une fois ces paramètres réglés. Retournez au gestionnaire. Dans le menu déroulant, sélectionnez le site qui vous intéresse.

Image 85 gestionnaire, sélecteur de sites Image 86 gestionnaire, choix d'une page Lorsque votre site est sélectionné, il vous suffit de double-cliquer sur la page qui vous intéresse et celle-ci s'ouvrira dans l'éditeur.

Vous pouvez vous amuser à publier vos pages en interne avec le bouton Publier. Cela n'est pas très utile en soi pour une publication hors ligne ni très pédagogique.

Outils supplémentaires :

-Gérer un site distant avec Nvu : http://bluegyn.free.fr/moz/vnu/site_manager_distant/

-Gérer un site en local avec Nvu:

http://bluegyn.free.fr/moz/vnu/site_manager_local/
Il semblerait que la gestion avec un serveur distant http ne fonctionne pas !

La gestion des erreurs (ou Bugs) sous Nvu

Vous n'êtes pas un programmeur et vous avez remarqué un dysfonctionnement précis lors de l'utilisation de Nvu ? Et vous ne savez pas comment faire pour avertir l'auteur ? Dirigez-vous vers le menu Help.

Dans le menu Help, glissez jusqu'à Bug reports and suggestions. Ce lien vous connectera à un site de gestion des erreurs de Nvu. Ainsi au lieu de râler dans n'importe quel forum pour dire que Nvu fonctionne mal (ce qui ne sert à rien et c'est là le piège des forums. Beaucoup ont tendance à parler des erreurs dans le forum dédié à la présentation d'un logiciel au lieu de reporter l'erreur vers le site du programme dédié or je ne suis pas certain que l'équipe d'un site comme Framasoft se charge de renvoyer l'ensemble des bugs relevés pour un programme).

Utilisez plutôt cette option pour indiquer directement les dysfonctionnements remarqués du programme ou, encore, suggérer une amélioration que vous désirez pour Nvu. Si malgré cela, vous continuez à râler dans n'importe quel forum, c'est que...

Cette option est bien pratique et est l'un des fondements de la communauté du libre ; donc n'hésitez pas à l'utiliser. Cela servira à tout le monde et n'en voulez pas à l'auteur s'il ne tient pas forcément compte de vos suggestions. Vous n'êtes pas seul au monde... et n'avez pas toujours la bonne idée. Mais vous contribuez à son amélioration en marquant l'intérêt que vous portez au programme ; ce qui est déjà beaucoup.

Pour aller plus loin encore...

Vous souhaitez aller encore plus loin et approfondir votre connaissance du langage HTML ? Sous Windows, utilisez HTML kit, un logiciel non libre, mais gratuit pour une utilisation non commerciale, très très complet. C'est un éditeur en mode texte, il dispose aussi d'un mode graphique ; un must dans le monde du gratuit propriétaire si vous n'avez pas les moyens de vous offrir un logiciel payant. Vous pouvez utiliser aussi Amaya, c'est un programme plutôt pointu qui, lui, à l'avantage d'être libre et de fonctionner en mode graphique donc à réserver aux amateurs avertis . Sous Linux, il y a, au moins, deux très bons éditeurs en mode texte : Bluefish et Quanta+. Pour les valeureux et les braves les éditeurs Vi et Emacs sont à votre disposition !

N'hésitez pas à consulter les liens laissés dans ce tutoriel, ils vous apporteront une aide précieuse.

Conclusion

Avec ce tutoriel, j'ai souhaité présenter Nvu selon une double manière : descriptive et pratique. C'est-à-dire partir de la description pour aller vers un exercice pratique.

Créer des pages Web, ce n'est pas plus difficile que cela ! Les réaliser avec un éditeur HTML en mode graphique qui vous offre autant de possibilités c'est encore plus simple ! Si vous vous en tenez à la méthode que j'ai tenté de vous faire découvrir :

création d'une page simple, uniquement avec le texte et les formats liés au texte,

ensuite, différentes manières de mettre en forme cette page nue soit, d'une manière classique, avec un code inséré automatiquement dans le code HTML (le plus simple), mais au résultat peu pratique. Par exemple, vous êtes obligé pour chaque nouvelle page de refaire toute la mise en forme ; soit en créant une feuille de style interne ; soit en créant une feuille de style externe qui facilitera la mise en place de votre site.

Tel aura été le but de ce tutoriel, de vous démontrer cela par la pratique.

Cette méthode étant ce qu'elle est, je l'espère aussi claire que possible. J'ai voulu éviter « la réinvention de la roue » avec un tutoriel de ce genre ; il a été difficile de trouver un juste milieu pour Nvu, car ce programme peut véritablement toucher un large public, du débutant au plus confirmé. Bien sûr, Nvu rencontre ses propres limites dès que l'on veut approfondir un tantinet la question. Finalement, j'ai choisi la cible où je me situe, et donc là où je me sens le mieux, un amateur qui, à ses heures perdues, consacre quelques heures à l'édition Web afin de créer ou de maintenir un site associatif ou entre amis.

Malgré sa jeunesse et quelques problèmes mineurs, Nvu est totalement opérationnel et fonctionnel. Depuis que j'ai découvert ce programme, je l'ai automatiquement intégré avec d'autres programmes complémentaires et je ne m'en sépare plus dans l'aide à la création de pages Web, tellement il facilite la vie.

Avec Nvu, c'est le système GNU/Linux qui s'ouvre un peu plus vers le grand public. Il existe bien dans les distributions Linux des éditeurs de page Web, essentiellement en mode texte. Le seul éditeur en mode graphique disponible sous Linux, à ma connaissance, c'est Amaya. Le navigateur du célèbre World Wide Web Consortium, mais une mauvaise réputation concernant son utilisation et sa stabilité en ont fait un programme réservé à un public très averti, d'autant plus que le navigateur est présenté comme un outil expérimental. Cependant, la dernière version (8.5) s'est nettement améliorée pour le support HTML et CSS ; son utilisation reste toujours très pointue. Donc, il n'existait pas, à proprement parler, de programmes tournés vers le grand public.

Le grand public, c'est un peu le talon d'achille du système GNU/Linux et il ne se passe pas un mois sans qu'il ne surgisse une polémique concernant l'utilisation en mode texte ou en mode graphique de Linux (entendez par là : est-ce que Linux doit forcément se tourner vers le grand public ? Après tout, il y a assez de logiciels libres tournant sous Windows !). Malgré tout, de gros efforts ont été faits, notamment avec des distributions orientées vers un public qui ne connaît pas forcément les arcanes de la ligne de commande.

C'est sans doute la meilleure récompense que ce système, au départ réservé uniquement à des passionnés, puisse obtenir : l'intérêt du grand public.

Puisse Nvu y contribuer...

Annexes

Familles de polices et tailles des polices

extrait du chapitre 15 du document « Les feuilles de style en cascade, niveau 2, Spécification CSS2 »

a) Familles de polices

Les familles de police de caractères selon la spécification CSS2 du W3C

La famille de polices indique laquelle il faut employer pour rendre un texte. C'est un ensemble de polices prévues pour être combinées, leur dessin présentant des similarités. Un membre de la famille peut avoir un dessin en italique, un autre en gras, un autre condensé ou encore en petites capitales . Quelques noms de famille, « Helvetica », « New Century Schoolbook », « Arial ». Ces noms ne se limitent pas aux caractères latins. On peut regrouper les familles de polices en catégories : celles de type serif ou sans serif, celles dont l'espacement n'est pas proportionnel, celles qui ressemblent à une écriture manuscrite (cursive), celles avec un dessin fantaisie (fantasy), etc.

Les cinq familles génériques selon le w3c

Les familles de polices génériques sont un mécanisme de repli, un moyen de préserver l'essentiel des intentions de l'auteur dans le pire des cas, quand aucune des polices demandées ne peut être sélectionnée. Pour le meilleur contrôle typographique possible, on ne devrait employer que certains noms de police dans les feuilles de style.

Les cinq familles de polices génériques sont censées exister dans toutes les implémentations CSS (celles-ci ne correspondent pas forcément à cinq polices déterminées). Les agents utilisateurs devraient offrir par défaut des choix raisonnables de familles génériques, exprimant autant que possible les genres de chacune d'elles dans les limites de la technique.

Les cinq familles génériques : serif, sans-serif, cursive, fantasy, monospace.

b) Tailles de polices

Dans la spécification css2 concernant la taille des polices, il n'est pas précisé de choix spécifique à privilégier par rapport à un autre.

Il existe plusieurs possibilités :

Taille absolue

[ xx-small | x-small | small | medium | large | x-large | xx-large ]

Taille relative

[ larger | smaller ]

Longueur

C'est sur cette option, la longueur de la police, que se rencontrent le plus de difficultés. Quel choix sera le meilleur, le plus adapté pour l'agent utilisateur, c'est-à-dire : le visiteur de votre site avec son navigateur ?

Toute la difficulté revient à ceci, lorsque vous précisez une longueur, la valeur est absolue et indépendante du type de navigateur qui lira cette police ; ce qui peut créer quelques problèmes de lecture en conséquence.

D'où plusieurs questions possibles sur le grossissement de la taille de la police par exemple.

On distingue généralement deux types de longueur : absolue et relative.

Longueur absolue : (définition du W3C)

Les unités de longueurs absolues ne sont utiles que si les propriétés physiques du média de sortie sont connues. Voici les unités absolues :

in

: pouce (inch) -- un pouce est égal à 2.54 cm.

cm

: centimètre

mm

: millimètre

pt

: point -- le point de CSS2 est égal à 1/72 de pouce.

pc

: pica -- un pica est égal à 12 points.

Longueur relative : (définition du W3C)

Les unités de longueurs relatives se rapportent à une autre propriété de longueur. Les feuilles de style qui en emploient seront plus facilement adaptables d'un média à un autre (par exemple, d'un moniteur vers une imprimante laser).

Voici les unités relatives :

em

: la valeur de 'font-size' pour la police concernée

ex

: la valeur de 'x-height' pour la police concernée

px

: une quantité de pixels, en fonction de l'appareil de visualisation.

Remarque

Une partie du problème peut être résolue avec la définition de la taille des blocs contenant le texte avec une taille relative, en pourcentage, normalement la taille de la police s'ajustera automatiquement et sans aucun problème quel que soit le redimensionnement de la fenêtre.

Auteur, utilisateur, navigateur web

Extrait de la spécification CSS2 du W3C ; ch 3 la conformité :obligations et recommandations.

Je préfère utiliser l'expression « navigateur Web », elle me semble moins propice à confusions que celle « d'agent utilisateur », bien que Web puisse induire une utilisation restreinte à un navigateur d'ordinateur.

Agent utilisateur (ou navigateur Web)

On donne le nom d'agent utilisateur à tout logiciel capable d'interpréter un document dans un langage donné et de mettre en œuvre les feuilles de style qui lui sont associées selon cette spécification. Celui-ci peut afficher un document, le lire en synthèse vocale, l'imprimer, le convertir vers un autre format, etc.

Auteur

C'est une personne qui écrit des documents et les feuilles de style qui lui sont associées. Pour ce faire, elle emploie un outil d'édition [ndt. authoring tool] ; (NVU par exemple, je souligne).

Utilisateur

C'est la personne qui interagit avec un agent utilisateur pour voir, entendre ou utiliser autrement un document en association avec ses feuilles de style. L'utilisateur peut employer sa propre feuille de style qui tient compte de préférences personnelles.

Les médias

Extrait de la spécification CSS2 du W3C, ch 7 les types de médias

Une des fonctions primordiales des feuilles de style repose sur le fait de pouvoir spécifier comment représenter un document pour différents médias : un écran, une feuille de papier, un synthétiseur de parole, un appareil braille, etc.

Un type de média nomme un jeu de propriétés CSS. Un agent utilisateur (ou navigateur Web, je souligne) qui prétend reconnaître un type de média par son nom doit en appliquer toutes les propriétés.

Les noms choisis pour les types de médias CSS rappellent celui des appareils cibles pour lesquels les propriétés sont significatives. Suit la liste des types de médias, les descriptions entre parenthèses ne sont pas normatives. Ces descriptions donnent seulement une indication sur l'appareil auquel le type de média se réfère.

all

convient pour tous les appareils ;

aural

destiné aux synthétiseurs de parole ;

braille

destiné aux appareils braille à retour tactile ;

embossed

destiné aux appareils à impression braille ;

handheld

destiné aux appareils portatifs (typiquement ceux avec petits écrans, monochromes et à bande passante limitée) ;

print

destiné à un support paginé opaque et aux documents vus sur écran en mode aperçu avant impression.

projection

destiné aux présentations en projection, par exemple avec des projecteurs ou des impressions pour des transparents.

screen

destiné principalement aux moniteurs couleurs ;

tty

destiné aux médias utilisant une grille de caractères fixe, tels les télétypes, les terminaux ou les appareils portatifs aux capacités d'affichage réduites. Les auteurs ne devraient pas utiliser de valeurs exprimées en pixel avec ce type de média.

tv

destiné aux appareils du type télévision (avec ces caractéristiques : basse résolution, couleur, défilement des pages limité, sonorisé).

Remerciements

Je remercie l'association APCD (www.perigord.tm.fr/apcd) qui me laisse un libre accès à internet avec beaucoup de patience ; sans ce dernier ce manuel n'existerait pas.

Je remercie Framasoft (www.framasoft.net) et toute son équipe qui a su accueillir mes contributions multiples et mes humeurs.

Correcteurs du présent manuel, qu'ils soient remerciés :

-Christian (Choul), liseur et correcteur attentif de ce tutoriel qui a effectué un travail de grande qualité et peu agréable (relecture + corrections).

-Goofy, autre liseur, qui, lui aussi, a effectué ce travail peu agréable (relecture + corrections) et avec une même qualité.

Liseur ? Le liseur est au livre ce que le hacker est à l'informatique. Le mot « liseur » est définit dans le Littré.

Je remercie également tous ceux qui laissent des messages au sujet de ce tutoriel dans les forums dédiés de framasoft et parfois ailleurs.

Toutes ces rencontres enrichissent le tutoriel et me servent à prendre conscience de cette réalité propre au Libre, le travail collaboratif et le partage des connaissances.

Que cela devienne une réalité pour chacun, chacune.

Patronyme physique en hommage à ce monde résigné en quête de temps et de lois. Un jour, peut-être, tu m'autoriseras à enfermer le son de tes mots dans une église afin que tu prennes conscience de l'inexistence de l'alphabet...

Le World Wide Web Consortium ou w3c est un organisme chargé de définir et d'établir des règles pour une utilisation universelle des langages du web. Ceci étant dit, rien ne vous empêche d'utiliser un code propriétaire particulier.

Il existe des langages pour présenter des textes stylisés et typographiés non automatisés comme LaTeX ou, pour ce qui nous concerne, HTML

Pour ceux qui suivent ou ne suivent pas ou n'ont pas encore lu le tutoriel. L'exemple ne se réfère plus à Openoffice.org. Pourquoi ? D'abord le fichier source abiword est beaucoup plus léger et se rapproche beaucoup plus, dans sa structure, de l'écriture d'une page au format HTML. Les fichiers sxw d'Openoffice.org sont plus complexes dans leur architecture. L'exemple abiword est, par conséquent, plus pertinent pour l'objet de ce tutoriel.

Maintenant l'imposer de fait dans un programme à destination du grand public pour en faire un standard revient à faire ce que fait Microsoft. Ce jugement n'engage que l'auteur du tutoriel.

Extrait tiré de la documentation interne du navigateur Amaya.

Il existe plusieurs spécifications pour les feuilles de style (Cascasding Style Sheet ou CSS). À ce jour, octobre 2004, la spécification CSS3 est en cours de validation.

Voir l'annexe A) Familles de polices et tailles de polices pour de plus amples descriptions. Cependant, vous noterez que ces définitions ne correspondent pas à la définition de la typographie classique. Voir http://histoire.typographie.org/caracteres/ (merci à Christian pour l'indication).

L'indentation correspond au décalage de la première ligne d'un paragraphe par rapport au reste du paragraphe.

RGB se dit en anglais « Red », « Green », « Blue », soit Rouge, Vert, Bleu en français, qui représentent les trois couleurs primaires.

Et encore plus pour notre équipe de relecteurs :-)

Voir l'annexe C pour plus de détails en ce qui concerne les différents médias

L'attribut « id » fonctionne exactement de la même manière, excepté qu'il ne s'applique qu'une seule fois dans la page. On le retrouve très souvent rattaché aux calques sous l'expression <div id="nom de l'identifiant"> (div = calque ; id = attribution de propriétés particulières à ce calque, comme la couleur de fond, la taille du bloc, son emplacement, la couleur de police de caractères, etc.).

si vous lisez ce tutoriel avec OpenOffice.org, activez le styliste en appuyant sur la touche F11 et sélectionnez « styles personnalisés ».

Voir l'annexe A en fin de document pour une explication plus détaillée : familles de polices

Sans-serif est un style de police et non une famille, mais la définition du W3C sur ce sujet laisse à désirer.

Voir l'annexe A en fin de document pour une explication plus détaillée : taille des polices

Voir l'annexe B en fin de document pour une explication plus détaillée des différents termes. utilisés.

Une taille de police relative est toujours plus pratique qu'une taille fixe. La raison est simple. Une taille relative ne dépend pas de la taille de l'écran mais s'y adapte automatiquement en fonction de sa grandeur 800x600 pixels, 1024x768 pixels, 1280x1204 pixels tandis qu'une taille de police fixe restera identique quelle que soit la taille de l'écran. A vous de choisir ce qui vous convient le mieux.

Px = pixels

Voir l'annexe C : les médias pour plus de détails.

Pour approfondir la conjecture sur la taille et la longueur des polices, voyez l'annexe A

Le site de traduction des articles de fond sur HTML et Css www.pompage.net vient de publier ce mois-ci (août 2004) une traduction d'un des nombreux articles de l'auteur. Cependant, je ne conseille pas la lecture de cette article pour un débutant.

L'ajout de javascript est optionnel pour le déroulement de l'exercice. Il est ici survolé car le couple HTML + CSS n'est pas assez complet pour rendre totalement opérationnel un formulaire.

Consultez avec profit l'article de Laurent Jouanneau Bien valider ses formulaires avec JavaScript qui vous explique le pourquoi du comment. Page disponible sur le site www.openweb.eu.org

Une variable est un moyen pratique pour résumer en un seul terme une succession d'opérations répétitives.

Je remercie Doumé? ou tiflip? qui m'a indiqué la marche à suivre dans le forum de Framasoft.

Amaya est très critiqué à cause de son mauvais support css ; ce qui est une réalité et on se demande bien pourquoi un tel navigateur/éditeur qui sort du w3c lequel prétend définir les nouvelles normes html et css fabrique un logiciel aussi peu pratique alors qu'il devrait être le modèle à suivre... Néanmoins, Amaya produit certainement un code quasi parfait pour un navigateur/éditeur en mode WYSIWYG, ce qui est plutôt rare dans ce domaine. Par ailleurs, il dispose aussi de très bons outils de gestion html, xml, svg, mathml et css. Un logiciel complètement contradictoire. Les dernières versions, à partir de la 8 sont nettement plus stables.

Adresse www.w3c.org

Lettres capitales de la taille d'une minuscule.

Les familles décrites ici ne semblent pas rentrer dans le cadre d'une définition typographique classique (indication de Choul). Je ne fais que reproduire les textes du w3c. Pour toute précision concernant l'attribution des familles de polices, contacter le w3c directement.

Tutoriel Framasoft

Http://www.framasoft.net	166/179

Dans la série

Les tutoriels libres

présentés par le site FRAMASOFT

Framasoft

« Partir de Windows pour découvrir le libre... »

http://www.framasoft.net

Manuel N|vu- version 0.4.1

réaliser des pages et un site web avec l'éditeur N|vu

apprendre html site web logiciel libre N|vu Nvu lindows framasoft tutoriel

2004-05-14T20:02:35