Parcours guidé : créer des pages simples au format html avec Nvu

Basse-Normandie
Parcours guidé :
Parcours guidé :
créer des pages simples au format HTML
créer des pages simples au format HTML1
1
avec Nvu
avec Nvu
version
version nvu-1.0-win32-installer-fr.exe nvu-1.0-win32-installer-fr.exe
dans un environnement Windows XP
dans un environnement Windows XP
1 HTML : HyperText Mark-up Language
Dominique Lachiver
décembre 2005

Table des matières
Table des matières
1. AVANT-PROPOS................................................................................................................................................... 4
2. PRÉPARER SON ENVIRONNEMENT DE TRAVAIL.....................................................................................6
 !  " 
#  
$$! %$& "'
(# '
'&)*  '
  '
''&)* '
+( +
,$$! %$%& " +
-$.$ ,
 -
3. DÉCOUVRIR L'INTERFACE DE NVU............................................................................................................11
. 
.  
/# 
4. CRÉER UNE PREMIÈRE PAGE HTML..........................................................................................................14
.  
## 
$##  
$# 
5. MISE EN FORME DU TEXTE........................................................................................................................... 17
#$ '
 +
  ,
$. ,
# ,
6. INSERTION D'IMAGE........................................................................................................................................20
# -
##  
6.2.1. Travail préparatoire..................................................................................................................................21
6.2.2. Insérer une image...................................................................................................................................... 21
! # "
7. GESTION DES TABLEAUX : CRÉATION D'UNE BARRE DE NAVIGATION....................................... 22
' 
'$. 
' 
'  
'  

8. CRÉER DES LIENS HYPERTEXTES............................................................................................................. 26
+#  
+01  '
+.#  +
8.3.1. Récupération de l'adresse..........................................................................................................................28
8.3.2. Création du lien......................................................................................................................................... 28
8.3.3. Préciser la cible du lien.............................................................................................................................29
9. CRÉER DES LIENS INTERNES VERS DES DOCUMENTS........................................................................ 30
, -
,  -
,!  "#  
9.3.1. 1ère étape : création des ancres................................................................................................................31
9.3.2. 2nde étape : création des liens hypertextes vers les ancres......................................................................32
10. UTILISER LES FEUILLES DE STYLE..........................................................................................................33
- 
-  
-. 
10.3.1. Création de la feuille de style externe....................................................................................................35
10.3.2. Lier une feuille de style à une page web................................................................................................. 36
-.  '
10.4.1. Créer un nouveau style............................................................................................................................37
10.4.2. Modifier le style « .barrenav » ................................................................................................................ 37
10.4.3. Attribuer un style à une balise.................................................................................................................37
11. LES PRINCIPALES BALISES HTML............................................................................................................ 39
$$  ,
  ,
#$  ,
 ,
$ -
# -
' -

Parcours guidé : créer des pages simples au format html avec Nvu 22/09/2005
1.
1. Avant-propos Avant-propos
1.1. Présentation de Nvu
Nvu (se prononce n-view en anglais) est un logiciel libre de création de site web pour Linux et Windows qui se
donne pour objectif de rivaliser avec Frontpage de Microsoft ou Dreamweaver de Macromedia.
Adresse du site officiel : « http://www.nvu.com/index.html »
Adresse du site français : « http://frenchmozilla.sourceforge.net/nvu/ »
Nvu est encore perfectible mais il permet déjà de créer facilement un petit site web.
N-B : ce parcours guidé utilise la version nvu-1.0-win32-installer-fr.exe.
1.2. Caractéristiques principales de Nvu
•Éditeur de page web WYSIWYG2 aussi facile à utiliser qu'un traitement de texte.
•Mise à jour de site web distant par FTP.
•Production de code HTML compatible avec tous les navigateurs courants.
•Bascule d'affichage WYSIWYG / code source HTML / Aperçu.
•Éditeur multi-documents à l'aide d'onglets.
•Prise en charge avancée des formulaires et des tableaux.
•Gestion des feuilles de style.
1.3. Objectif de ce document
Proposer un parcours guidé permettant à un enseignant de créer un petit site web, c'est à dire un ensemble de
pages simples au format html pouvant « contenir» des images, des tableaux, des liens hypertextes internes ou
externes, vers d'autres pages au format html ou vers des documents dans des formats standard : Acrobat « PDF »,
Flash « SWF», Rich Text Format « RTF », « ZIP », .... par exemple pour publier sur un intranet d'établissement.
N-B : la publication sur un site web, un cédérom, un intranet n'est pas abordé dans ce document.
1.4. Pré-requis nécessaires
•Savoir gérer (créer, supprimer, copier, renommer) des dossiers et des fichiers sur son ordinateur.
•Avoir navigué sur Internet, et en particulier :
* savoir saisir une adresse web (URL) dans la barre d'adresse du navigateur,
* utiliser les boutons « Page précédente », « Page suivante », « Actualiser »,...
* savoir récupérer un fichier depuis un site web vers son ordinateur.
•Savoir utiliser les fonctions de base du traitement de texte.
•Savoir décompresser un fichier archive zip.
1.5. Mode d'emploi du document
Ce document vous propose un parcours guidé :
Les paragraphes encadrés d'un trait simple ombré avec l'icône présentent la démarche et les
objectifs des activités proposées juste après.
Les paragraphes encadrés doubles avec l'icône contiennent des informations générales ou
présentent des concepts.
 Les paragraphes avec un trait vertical double à gauche décrivent les tâches à réaliser. L'icône en début de ligne
précise la nature des activités demandées :
 il faut utiliser la souris,
 il faut utiliser le clavier,
 l'ordinateur réalise l'action,
 il faut observer,
 il faut répondre par écrit sur le document.
2What You See Is What You Get.
IUFM de Basse-Normandie Dominique Lachiver version 28/10/04 page 4 / 40

Parcours guidé : créer des pages simples au format html avec Nvu 22/09/2005
1.6. Condition de réutilisation de ce document
Le contenu de ce document est soumis à la licence « Public Documentation licence » dont le contenu peut être
consulté à l'adresse : « http://www.OpenOffice.org/licenses/PDL.html ». Cela signifie que vous êtes libre de
le reproduire, le recopier, le réutiliser, le modifier et le distribuer à condition de lui attribuer les mêmes libertés
de copie, d'utilisation etc.
Vous pouvez télécharger la dernière version de ce document sur mon espace personnel :
« http://tice.caen.iufm.fr/tice/Members/dlachiver ».
IUFM de Basse-Normandie Dominique Lachiver version 28/10/04 page 5 / 40