NVU fonctionne un peu comme un éditeur de texte, si vous avez un minimum de connaissance avec Word vous n'aurez aucune difficulté à vous servir de NVU. Alors, voyons un peu les différentes fonctionnalités de base de NVU.

Onglets du haut

1. Créer un nouveau document web.
2. Ouvrir un document web.
3. Enregistrer le document web.
4. Publier le document web.
5. Ouvrir le document web avec le navigateur.
6. Créer une ancre sur la page.
7. Mettre en gras, en italique ou souligner le texte.
8. Diminuer ou augmenter la taille du texte.
9. Modifier la couleur du fond de texte.
10. Modifier la couleur du texte ou la couleur de l'arrière plan.
11. Modifier le corps du texte.
12. Créer un lien.
13. Insérer une image.
14. Créer un tableau.
15. Créer un formulaire.
16. Vérifier l'orthographe.
17. Imprimer le document web.
18. Créer une liste.
19. Positionnement du paragraphe.
20. Diminuer ou augmenter la marge du paragraphe.

Avec NVU nous nous servirons quasiment tout le temps de la partie droite qui est en faite la partie ou nous éditerons la page (vous pouvez donc fermer la partie gauche).

Quatre vues sont disponible :

- La vue "Normal" (éditer le document comme avec Word).

- La vue "Balises HTML" (visualiser les balises présente dans le code).

- La vue "Source" (visualiser le code source).

- La vue "Aperçus" (visualiser le rendu final).

Bien ! Maintenant que les présentations sont faites nous allons passer à la pratique. Nous allons créer ensemble deux documents Web qui coordonneront par le biais de lien.

Commencer par lancer NVU (évidement). Par défaut, NVU a créé un document vierge sans titre. Dans la vue normal vous allez écrire un titre qui sera le titre de votre premier paragraphe puis sélectionnez-le. Vous allez ensuite centrer ce titre avec l'onglet 19 puis changer le corps en "Titre 1" avec le champ 11. Faite ensuite un saut de ligne et remettez l'alignement du paragraphe à gauche (toujours avec l'onglet 19). Commencez ensuite à composer votre premier paragraphe (peu importe le sujet, il s'agit là d'un teste). Maintenant, créer deux ou trois paragraphes de ce style avec des titres différents. Pour finir nous allons créer un lien en bas de page menant à la page web n°2 (que nous créerons après). Pour cela taper en fin du document "Page n°2" et sélectionnez le puis cliquez sur l'onglet 12 ce qui ouvrira cette fenêtre.

Dans le champ "Emplacement du lien" mettez page2.html (de cette manière le lien pointera vers la page n°2 en question).

Il ne vous reste plus qu'a enregistrer ce document. Pour cela, faite "fichier" puis "enregistrer sous", on vous demandera de donner un nom à votre document (donnez le nom que vous voulez). Pour finir, nommez votre document "index.html". Voila, votre première page est enregistrée.

Pour votre deuxième pages, c'est très simple, faite une page identique à la première avec plusieurs titres et paragraphes mais à l'exception du nom du document que vous nommerez "page2.html" et du lien que vous nommerez "Index" et que vous ferez pointer vers "index.html".

Vous avez donc ainsi créé deux documents qui coordonnent entre eux.
Exemple final ici

Comme vous avez dû le constater il n'y a rien de très difficile. Bien évidement, ces pages de teste sont relativement moches et très simplistes mais les bases sont là, à vous de faire preuve d'imagination pour faire de belle page correctement illustré. Je vous demanderais tout de même de garder ces deux pages Web pour le troisième tutos.

La suite de ce tuto concerne le code source. Il est à connaitre, ne serait-ce que pour vous y retrouver dans le codage html. Pour commencer, une page html même vièrge doit être constituée d'au moins trois balises comme ceci.

La plupart des balises sont des balises que l'on ouvre, puis qu'on y met du texte, puis que l'on ferme, comme ceci <Balise>Texte</Balise>. Voici les plus courantes.

<p> : Ecrire un paragraphe
<h1> : Ecrire un 1er titre
<h2> : Ecrire un 2e titre
<u> : Souligner le texte
<b> : Mettre en gras le texte
<i> : Mettre en italique le texte
<font> : Indiquer la police, couleur, taille etc.. du texte
<ul><li> : Créer une liste
<table><tr><td> : Créer un tableau
<br> : Sauter une ligne
<hr> : Créer un trait séparateur

Il y en a beaucoup d'autres mais ce sont c'elles que vous risquez de voir le plus souvent. Certaines d'entre elles peuvent contenir des attributs comme pour la balise "p" si vous écrivez la balise ouvrante ainsi <p align="(right, left, center ou justify)"> alors le texte sera positionné sois à droite, à gauche, au centre ou justifié suivant ce que vous aurez mis. Lister tous les attribus existants serait très long alors je vous laisse jongler avec les vues Normal et Source pour mieux comprendre l'utilisation du code et ses attributs.

Maintenant que vous êtes capable de créer vos pages Web vous pouvez passer au tuto suivant afin d'envoyer vos documents sur le serveur FTP.

Pour toutes questions vous pouvez me contacter par mail ou même par msn chopin_fred@msn.com.