Créer une page html avec le logiciel libre NVU

Sommaire :

O. UNE TABLE DES MATIÈRES VITE ET BIEN

Cette création est mise à disposition selon le Contrat Paternité-Pas d’Utilisation Commerciale-Partage des Conditions Initiales à l’Identique 2.0 Fr France ce disponible en ligne http://creativecommons.org/licenses/by-nc-sa/2.0/fr/ ou par courrier postal à Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.

NVU – LES BASES

Créer des pages WEB vite et bien quand on n’est pas un pro du HTML. (Attention, je n’ai pas dit qu’il ne fallait pas mettre un peu le nez dans le code source !)

A. Les outils

Télécharger le logiciel NVU sur le site : http://frenchmo mozilla.sourceforge.net/nvu/

Télécharger (facultatif) les extensions pour les CSS (KaZcadeS) http://fabiwan.kenobi.free.fr/KaZcadeS/accueil.php

Télécharger (facultatif) Launchy une extension qui permet de visualiser votre page dans différents navigateurs. http://ersplus.free.fr/spip/article.php ?id_article=35

Un logiciel de FTP pour la publication car l’outil de publication de NVU n’est pas suffisant. http://filezilla.sourceforge.net/

B. Le plan de travail

Vous allez stocker vos futures pages dans un dossier appelé « mo monsite » ou tout autre nom de votre choix et les images dans un sous-dossier de « monsite » que vous appellerez « images ».

Toutes les pages et sous dossiers figureront à la racine de votre futur site : www.monsite.chezmachin.net par exemple En local sur votre disque cela donnera quelque chose comme c :\monsite\images.

C. On se lance

Vous avez installé le logiciel NVU et ses extensions KaZcadeS et Launchy avec « outils, extensions » ?

Si vous ne voyez pas l’icône

dans la barre d’outils après avoir redémarré NVU, allez dans « affichage, barre d’outils, personnalisation des barres d’outils » et faites glisser l’icône dans votre barre d’outils.

D. Une page blanche ?

Pas tout à fait… cliquez sur l’onglet source. Les balises indispensables à la création de la page sont déjà là. La description du langage HTML utilisé conformément aux normes du W3C apparaît en haut du document avant toute balise. C’est dans « outils, préférences » que l’on peut modifier cela

E. Taper du texte ou copier/coller sans mise en forme

Il va falloir taper le texte au kilomètre et comme dans un traitement de texte, nous ferons la mise en forme me après !

Le copier/coller ? ça ma marche aussi à condition de faire un « coller sans mise en forme » pour ne pas reprendre la mise en forme parasite d’origine

F. La mise en forme du texte – méthode simple

Cliquez derrière le paragraphe à mettre en forme et appliquez le format.

Remarquez dans la barre d’état en bas de l’écran la correspondance TITRE1 avec la balise H1, TITRE2 avec la balise H2 etc…

Eh oui, vous faites du HTML sans le savoir !

Simple mais répétitive et pas rapide au bout du compte.

1. Je sélectionne mon texte en faisant un clic dans le texte et je clique sur ma balise dans la barre d’état H2 par exemple si je veux sélectionner tout le paragraphe.

2. Je choisis la couleur, l’alignement, la taille, etc. dans la barre d’outils de NVU :

G. Du style et de la classe : les CSS !

Quand utiliser les styles ? Chaque fois que vous trouvez que la mise en forme du texte devient fastidieuse et répétitive et pour donner une uniformité de présentation à vos pages. Avoir du style et de la classe en somme… Allons dans « outils, éditeur CSS »

Nous allons créer une feuille de style externe (Feuille liée) ce qui nous permettra de la réutiliser dans d’autres pages.

Cliquez sur « Créer la feuille de style ». Maintenant créons nos règles.

Nous allons pouvoir modifier les balises génériques du HTML : (body, p, h1, h2, a, etc…)

Pour créer une « classe », il suffit de préciser le « point » avant le nom de la classe.

Exemple la classe « important ». Nous décidons ici que le texte devra apparaître avec un fond rouge.

H. Appliquer une classe au texte sélectionné

Tous les styles appliqués aux balises génériques prennent effet immédiatement. Seules les classes sont appliquées au cas par cas.

Sélectionnez le texte et choisissez la classe de mise en forme dans la liste déroulante. Le résultat est immédiat.

I. Insertion d’une image

J. Mettre un lien sur une image

Sélectionner l’image insérée et cliquer sur "Lien"

Taper ici l’adresse du lien s’il s’agit d’une page html de votre site.

K. Mettre un lien sur du texte

Même me principe que précédemment mais en sélectionnant du texte et en cliquant sur "Lien".

Taper l’adresse mail et cocher « la valeur est une adresse électronique » si vous souhaitez que le lien ouvre le programme de messagerie dans le navigateur.

L. Les ancres

Les ancres permettent d’établir des liens vers des points ciblés (les ancres) d’une page html Je sélectionne un mot ou une image dans mon document et je clique sur "Ancre".

J’attribue un nom court et sans espace à cette ancre (ex : brownies)

Je me place dans mon texte pour effectuer un lien vers cette ancre ainsi créée et je lui attribue un lien.

Le lien vers l’ancre peut aussi figurer dans un autre document.

Pensez à enregistrer votre document avant de tester ces fonctions dans votre navigateur.

M. Un tableau

N. Création de blocs de texte – la punaise

On peux placer du texte dans des cadres que l’on « punaisera » là où on veut. Sélectionner le texte ou l’image ou le tableau

Cliquer sur l’icone punaise

Déplacez maintenant avec la souris votre cadre en pointant la « rose des vents »

Pour rétablir le texte initial on clique dans le cadre et on clique sur la punaise de nouveau.

O. Une table des matières vite et bien

Utilisez les Titre1 (h1), Titre2 (h2), Titre3 (h3), etc. pour les titres de votre projet.

Placez vous en début de document.

Insérez la table des matières avec « insertion, table des matières » après avoir pris soin d’exclure tous les titres (h3, h4…) qui ne servent à rien.

Et voilà le travail !

Rose de vents