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

Basse-Norma ndie
Parcours guidé :
créer des pages simples au format HTML1
avec Nvu
version nvu-1.0-win32-installer-fr.exe
dans un environnement Windows XP
Dominique Lachiver
décembre 2005
1 HTML : HyperText Mark-up Language
Table des matières
1. AVANT-PROPOS................................................................................................................................................... 4
1.1. PRÉSENTATION DE NVU............................................................................................................................................ 4
1.2. CARACTÉRISTIQUES PRINCIPALES DE NVU.....................................................................................................................4
1.3. OBJECTIF DE CE DOCUMENT....................................................................................................................................... 4
1.4. PRÉ-REQUIS NÉCESSAIRES.......................................................................................................................................... 4
1.5. MODE D'EMPLOI DU DOCUMENT..................................................................................................................................4
1.6. CONDITION DE RÉUTILISATION DE CE DOCUMENT........................................................................................................... 5
2. PRÉPARER SON ENVIRONNEMENT DE TRAVAIL.....................................................................................6
2.1. UTILISER LE DOSSIER SYSTÈME « MES DOCUMENTS »................................................................................................... 6
2.2. RÉCUPÉRER LE PROGRAMME D'INSTALLATION DE NVU.................................................................................................... 6
2.3. RÉCUPÉRER LE FICHIER ARCHIVE « DL_HTML.NVU.ZIP »..................................................................................................7
2.4. RÉCUPÉRER LE DICTIONNAIRE FRANÇAIS D'OPENOFFICE.ORG POUR NVU............................................................................7
2.5. RÉCUPÉRER 7-ZIP (FACULTATIF)................................................................................................................................ 7
2.6. INSTALLER NVU...................................................................................................................................................... 7
2.7. INSTALLER 7-ZIP (FACULTATIF)...................................................................................................................................7
2.8. INSTALLER LE DICTIONNAIRE FRANÇAIS.........................................................................................................................8
2.9. DÉCOMPRESSER LE FICHIER ARCHIVE « DL_HTML_NVU.ZIP »........................................................................................... 8
2.10. AFFICHER LES EXTENSIONS DE FICHIERS......................................................................................................................9
2.11. CRÉER UNE ARBORESCENCE POUR LE SITE.................................................................................................................10
3. DÉCOUVRIR L'INTERFACE DE NVU............................................................................................................11
3.1. LANCER L'EXÉCUTION DE NVU.................................................................................................................................11
3.2. IDENTIFIER LES PRINCIPAUX ÉLÉMENTS DE L'INTERFACE DE NVU..................................................................................... 11
3.3. MASQUER LA FENÊTRE DE GESTION DE SITES...............................................................................................................13
3.4. PARAMÉTRER NVU................................................................................................................................................ 13
3.5. PERSONNALISER LES BARRES D'OUTILS....................................................................................................................... 13
4. CRÉER UNE PREMIÈRE PAGE HTML..........................................................................................................14
4.1. DÉMARRER NVU................................................................................................................................................... 14
4.2. SAISIR DU TEXTE................................................................................................................................................... 14
4.3. ENREGISTRER LA PAGE............................................................................................................................................14
4.4. AFFICHER LA PAGE DANS UN NAVIGATEUR.................................................................................................................. 15
4.5. MODIFIER LE TITRE................................................................................................................................................ 15
4.6. AFFICHER LE CODE SOURCE DE LA PAGE..................................................................................................................... 16
5. MISE EN FORME DU TEXTE........................................................................................................................... 17
5.1. MISE EN FORME DE PARAGRAPHE..............................................................................................................................17
5.2. IDENTIFIER LES BALISES DE TITRE.............................................................................................................................. 18
5.3. MISE EN FORME DE CARACTÈRES.............................................................................................................................. 19
5.4. CHOIX DES COULEURS.............................................................................................................................................19
5.5. MODIFIER LE FOND DE LA PAGE................................................................................................................................ 19
6. INSERTION D'IMAGE........................................................................................................................................20
6.1. UTILISER UNE IMAGE DE FOND..................................................................................................................................20
6.2. INSÉRER DES IMAGES DANS LA PAGE......................................................................................................................... 21
6.2.1. Travail préparatoire..................................................................................................................................21
6.2.2. Insérer une image...................................................................................................................................... 21
6.3. IDENTIFIER LA BALISE « IMG »..................................................................................................................................22
7. GESTION DES TABLEAUX : CRÉATION D'UNE BARRE DE NAVIGATION....................................... 22
7.1. CRÉATION DE LA BARRE .........................................................................................................................................23
7.2. IDENTIFIER LES BALISES HTML DES TABLEAUX..........................................................................................................23
7.3. MODIFIER LES PROPRIÉTÉS DU TABLEAU..................................................................................................................... 24
7.4. MODIFIER LES PROPRIÉTÉS DES CELLULES................................................................................................................... 25
7.5. FUSIONNER LES CELLULES D'UN TABLEAU................................................................................................................... 25
8. CRÉER DES LIENS HYPERTEXTES............................................................................................................. 26
8.1. CRÉER DES LIENS INTERNES VERS D'AUTRES PAGES DU SITE........................................................................................... 26
8.2. IDENTIFIER LA BALISE <A>..................................................................................................................................... 27
8.3. CRÉER DES LIENS EXTERNES VERS DES PAGES D'INTERNET............................................................................................. 28
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.1. TRAVAIL PRÉPARATOIRE.......................................................................................................................................... 30
9.2. CRÉATION DES LIENS............................................................................................................................................. 30
9.3. CRÉER DES « ANCRES » DANS UN DOCUMENT LONG..................................................................................................... 31
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.1. TRAVAIL PRÉPARATOIRE........................................................................................................................................ 33
10.2. CRÉATION D'UNE FEUILLE DE STYLE INTERNE............................................................................................................ 33
10.3. CRÉER UNE FEUILLE DE STYLE EXTERNE...................................................................................................................35
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. CRÉER DE NOUVEAUX STYLES............................................................................................................................... 37
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
11.1. FICHIER HTML ................................................................................................................................................... 39
11.2. MISE EN FORME DES CARACTÈRES...........................................................................................................................39
11.3. MISE EN FORME DE PARAGRAPHES.......................................................................................................................... 39
11.4. LISTES............................................................................................................................................................... 39
11.5. HYPERLIENS........................................................................................................................................................40
11.6. IMAGES.............................................................................................................................................................. 40
11.7. TABLEAU............................................................................................................................................................40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
1. 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
objectifs des activités proposées juste après.
Les paragraphes encadrés doubles avec l'icône
présentent des concepts.
présentent la démarche et les
contiennent des informations générales ou
 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.
2 What 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
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
2. Préparer son environnement de travail
Nous allons installer la dernière version française de Nvu. De plus, nous aurons besoin d'un fichier
archive contenant des documents nécessaires à la réalisation de ce parcours guidé. Enfin, nous
modifierons la configuration de Windows.
2.1. Utiliser le dossier système « Mes Documents »
Le dossier « Mes Documents » est un dossier
système dont l'emplacement réel peut varier suivant la
configuration de votre ordinateur, particulièrement
dans un environnement réseau.
Windows XP propose dans ses boîtes de dialogues
« Fichier  Ouvrir » ou « Fichier  Enregistrer »,
un accès rapide au dossier « Mes Documents »
comme dans la figure ci-contre à droite.
Bouton
« Mes Documents »
 Dans la suite de ce parcours nous utiliserons ce dossier « Mes Documents ».
N-B : Bien entendu, vous pouvez utiliser un autre dossier, il faudra alors adapter la suite de ce parcours en
conséquence.
2.2. Récupérer le programme d'installation de Nvu
Dans un premier temps, nous allons récupérer le programme d'installation du logiciel Nvu.
 Ouvrir votre navigateur web préféré (Firefox, Internet Explorer ou Mozilla par exemple).
 Saisir l'URL « http://tice.caen.iufm.fr/tice/ »
 Le navigateur affiche la page d'accueil du portail « TICE de l'IUFM de Basse-Normandie ».
 A gauche dans la zone de navigation, cliquer sur « Membres », puis sur «D. Lachiver ».
 Le navigateur affiche la page d'accueil de « l'espace de D. Lachiver ».
 Cliquer sur le lien « NVU : Création de pages HTML pour le web ».
N-B : la récupération de fichier diffère un peu selon le navigateur utilisé.
Si vous utilisez « Internet Explorer »
 Cliquer droit sur le lien du fichier « nvu-1.0-win32installer-fr.exe ».
 Le navigateur affiche un menu contextuel.
 Cliquer sur la commande « Enregistrer la cible
sous ».
 Le navigateur ouvre une boîte de dialogue :
« Enregistrer Sous ».
 Sélectionner l'emplacement « Mes documents ».
 Cliquer sur le bouton « Enregistrer ».
Si vous utilisez « Firefox »
« nvu-1.0-win32installer-fr.exe ».
 Le navigateur affiche une boîte de dialogue
« Ouverture ...».
 Sélectionner l'option « Enregistrer sur le disque ».
 Valider
 Cliquer gauche sur le lien
N-B : par défaut, Firefox enregistre sur le bureau.
 Si le navigateur ouvre une boîte de dialogue :
« Enregistrer Sous ».
 Sélectionner l'emplacement « Mes documents ».
 Valider.
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 6 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
N-B : par défaut, le navigateur « Firefox » ne vous demande pas d'emplacement : il télécharge le document sur le
bureau. Vous pouvez modifier le paramétrage du navigateur : sélectionner le menu « Outils  Options 
Téléchargement », sélectionner l'option « Me demander où enregistrer le fichier ».
2.3. Récupérer le fichier archive « dl_html.nvu.zip »
Le fichier archive « dl_html_nvu.zip » contient des ressources : images, fichiers PDF, ... que nous
utiliserons dans la suite de ce parcours guidé.
 Depuis la même page « NVU : Création de pages HTML pour le web », en appliquant la même procédure que
ci-dessus, récupérer dans votre dossier « Mes Documents » le fichier archive « dl_html.nvu.zip ».
2.4. Récupérer le dictionnaire français d'OpenOffice.org pour Nvu
Nvu utilise le dictionnaire d'OpenOffice. La version nvu-1.0-win32-installer-fr.exe n'intègre pas le
dictionnaire français pour des problèmes de licence. Nous allons récupérer ce dictionnaire français.
N-B : ce dictionnaire peut aussi être récupéré depuis le site d'OpenOffice.
 Depuis la même page « NVU : Création de pages HTML pour le web », en appliquant la même procédure que
ci-dessus, récupérer dans votre dossier « Mes Documents » le fichier archive « fr_FR.zip ».
2.5. Récupérer 7-Zip (facultatif)
Un fichier archive est un fichier contenant, sous une forme compressée un ensemble de fichiers
et/ou dossiers. Le format que l'on rencontre le plus souvent sur Internet est le format Zip. Le système
d'exploitation Windows XP prend en charge ce type de fichier archive. Néanmoins 7Zip ajoute des
fonctionnalités, je vous conseille donc de l'installer même sur Windows XP.
Si vous souhaitez installer 7-zip sur votre ordinateur, vous pouvez le télécharger à partir du lien de
la page « NVU : Création de pages HTML pour le web ». Sinon, vous pouvez sauter cette étape.
 Depuis la même page « NVU : Création de pages HTML pour le web », récupérer dans votre dossier « Mes
Documents » le fichier d'installation « 7z432.exe » de 7-zip
2.6. Installer Nvu
Nous allons installer le programme NVU. L'installation de Nvu ne pose aucun problème.
Attention, si vous avez une version antérieure, il faut la désinstaller auparavant (Menu démarrer 
Panneau de configuration  Ajout / suppression de programmes).
 Refermer toutes les fenêtres, pour y voir plus clair.
 Lancer l'installation Nvu en double-cliquant sur le fichier « nvu-1.0-win32-installer-fr.exe » récupéré
précédemment.
 Accepter la licence d'utilisation et suivre les instructions en conservant les options proposées par défaut.
 En fin d'installation, décocher la case « Exécuter NVU ».
Vous avez installé Nvu : un nouveau sous-menu « Nvu » a été ajouté au menu « Démarrer 
Programmes ». Ce sous-menu contient un raccourci qui permettra de lancer l'exécution de Nvu.
2.7. Installer 7-zip (facultatif)
 Lancer l'installation de 7-zip en double-cliquant sur le fichier «7z432.exe » récupéré précédemment.
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 7 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
 Suivre les instructions en conservant les options proposées par défaut.
Vous avez installé 7-zip :
* une nouveau sous-menu « 7-zip » a été ajouter au menu « Démarrer  Programmes ». Ce
sous-menu contient un raccourci qui permettra de lancer l'exécution de « 7-zip file manager ».
* de nouvelles commandes ont été ajoutées au menu contextuel lorsqu'on clique droit sur un
fichier.
Par défaut, 7-zip est installé avec une interface en anglais. Nous allons sélectionner l'interface
française.
 Lancer l'exécution de « 7-Zip File Manager » depuis le menu démarrer.
 Sélectionner la commande « Tools  Options ».
 7-zip ouvre une boîte de dialogue « Options ».
 Sélection l'onglet « Language ».
 Dans la liste déroulante, sélectionner « French (Français) ». Valider.
 Refermer 7-Zip.
2.8. Installer le dictionnaire français
Nous allons décompresser le fichier archive « fr_FR.zip » dans le dossier « C:\Program
Files\Nvu\components\myspell\ ».
 Déplacer (couper-coller) le fichier « fr_FR.zip » récupéré précédemment vers le dossier
Files\Nvu\components\myspell\ ».
Avec Windows XP
 Cliquer droit sur le fichier « fr_FR.zip ».
 Sélectionner la commande « Extraire tout ».
 Windows XP ouvre une fenêtre « Assistant
Extraction ».
C:\Program
Avec 7-Zip
 Cliquer droit sur le fichier archive « fr_FR.zip ».
 Sélectionner la commande « 7-zip  Extraire ici ».
 Suivre les instructions : lorsque Windows vous
propose un emplacement : cliquer sur le bouton
« Parcourir » et sélectionner le dossier
« C:\Program Files\Nvu\components\myspell\ ».
 « Terminer » l'assistant sans afficher les fichiers
extraits.
 Le dossier
C:\Program Files\Nvu\components\myspell\ » doit contenir les deux fichiers « fr_FR.dic » et
« fr_FR.aff ».
 Vous pouvez effacer les fichiers « fr_FR.zip » et « README_fr_FR.txt » de ce dossier.
2.9. Décompresser le fichier archive « dl_html_nvu.zip »
Nous allons décompresser le fichier archive « dl_html_nvu.zip » dans notre dossier « Mes
Documents ».
 Ouvrir le dossier « Mes Documents » de votre ordinateur. (« Menu Démarrer  Mes documents »)
 Déplacer (couper-coller) le fichier « dl_html_nvu.zip » récupéré précédemment dans ce dossier « Mes
Documents » si nécessaire.
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 8 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
Avec Windows XP
 Cliquer droit sur le fichier « dl_html_nvu.zip ».
 Sélectionner la commande « Extraire tout ».
 Windows XP ouvre une fenêtre « Assistant
Extraction ».
Avec 7-Zip
 Cliquer droit sur le fichier archive
« dl_html_nvu.zip ».
 Sélectionner la commande « 7-zip  Extraire ici ».
 Suivre les instructions : lorsque Windows vous
propose un emplacement : cliquer sur le bouton
« Parcourir » et sélectionner le dossier « Mes
documents ».
 « Terminer » l'assistant sans afficher les fichiers
extraits.
 Noter l'apparition d'un dossier « ressources » dans
votre dossier « Mes Documents ».
 Ouvrir ce dossier « ressources ».
 Vérifier la présence de différents fichiers et dossiers
comme sur la figure ci-contre.
2.10. Afficher les extensions de fichiers
Sous Windows XP, le nom des fichiers comporte deux parties :
* la partie principale
* l'extension, séparée de la partie principale par un point.
Par exemple, «favoris.html » est un fichier dont la partie principale du nom est « favoris» et son
extension « html ».
L'extension permet au système d'exploitation Windows XP de reconnaître le type de fichier, par
exemple :
* exe correspond à un fichier exécutable, une application,
* htm ou html correspond à une page au format html,
* ...
Par défaut, Windows masque les extensions de fichiers. Lors de la création de liens, il sera nécessaire
d'identifier le nom complet des fichiers : il faut donc absolument afficher les extensions de fichiers.
Nous allons donc vérifier la configuration de Windows et si nécessaire corriger cette configuration
afin d'afficher les extensions de fichiers.
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 9 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
 Ouvrir le dossier « ressources » dans « Mes Documents ».
 Vérifier que Windows ne masque pas les extensions de fichiers. Vous
devez notamment voir les extensions « jpg » ou « gif » des fichiers images
contenus dans ce dossier.
Si vous ne voyez pas les extensions de fichier :
 Sélectionner la commande : « Outils  Option des dossiers »,
 Cliquer sur l'onglet « Affichage » comme sur la figure ci-dessus.
 Décocher la ligne « Masquer les extensions des fichiers dont le
type est connu ».
 Valider
2.11. Créer une arborescence pour le site
Site web : Ensemble de pages html développés par un particulier, un établissement, généralement
hébergés sur un serveur web.
Il est important que toutes les ressources d'un site web : fichiers html, fichiers images, fichiers son, ...
soient enregistrées dans une même arborescence de dossiers afin de faciliter le transfert sur un serveur
web ou un cédérom.
Dans le dossier « Mes Documents », nous allons créer l'arborescence suivante :
0site
0img
0doc
0media
Nom du dossier
site
img
doc
media
Contenu
Ce dossier contiendra tous les fichiers
au format html.
Ce sous-dossier contiendra tous les
fichiers images.
Ces sous-dossier contiendra tous les
fichiers documents (doc, pdf, sxw, ...)
Ce sous-dossier contiendra tous les
fichiers multimédias : sons, animations,
...
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
Extension des fichiers
html
png, gif, jpg
rtf, pdf
wav, mp3...
page 10 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
 Créer un dossier « site » dans votre dossier « Mes
Documents ».
 Ouvrir ce dossier « site ».
 Créer trois dossiers « img », « doc », « media » dans
ce dossier « site ».
 Refermer toutes les fenêtres ouvertes (bouton ).
Rappel : Vous pouvez choisir un autre emplacement,
l'essentiel est de créer un dossier « site » et ses trois
sous-dossiers...
3. Découvrir l'interface de Nvu
3.1. Lancer l'exécution de Nvu
 Lancer l'exécution « Nvu ».
N-B : lors de son 1er lancement, Nvu ouvre deux boîtes de dialogue :
une boîte dont le titre est « Veuillez-nous tenir au courant... »,
une boîte de dialogue présentant des astuces au démarrage.
Valider pour refermer ces deux fenêtres.
 Agrandir la fenêtre de Nvu si nécessaire.
 Sélectionner la commande « Fichier  Ouvrir un
fichier» ou cliquer sur le bouton « ouvrir »
de la
barre d'outils.
 Nvu ouvre une boîte de dialogue « Ouvrir un fichier
html ».
 Sélectionner le fichier « exemple.html » placé dans le
dossier « ressources ».
 Nvu affiche le document dans la zone d'édition.
3.2. Identifier les principaux éléments de l'interface de Nvu
 A l'aide de la figure de la page suivante, repérer de haut en bas :
la barre de titre,
la barre de menus,
la barre de composition,
la barre de mise en forme,
la fenêtre de gestion de site à gauche (il est possible que cette zone soit masquée),
la barre d'onglets des documents ouverts,
la zone principale d'édition,
la règle entre la zone d'édition et la barre d'onglets des documents ouverts,
la barre d'onglets du choix du mode d'édition : « Normal », « balises HTML », « HTML source », « Aperçu ».
la barre d'état.
 Sélectionner les différents modes d'édition à l'aide de la barre d'onglet du bas.
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 11 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
Barre de titre
22/09/2005
Onglets :multidocuments
Barre de styles
& de calques
Règle
Barre de menus
Barre de
composition
Barre de mise
en forme
Fenêtre de
gestion du site
appuyer sur F9 pour
la visualiser si
nécessaire
Zone d'édition
Barre d'état
Onglets : mode
d'édition
IUFM de Basse-Normandie Dominique Lachiver
page 12 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
Exercice n°1 : Ouvrir dans un nouvel onglet le fichier « exemple2.html » qui se trouve aussi dans le dossier
« ressources ». Afficher successivement les deux pages à l'aide de la barre d'onglets du haut.
3.3. Masquer la fenêtre de gestion de sites
Nous n'utiliserons pas la mise à jour de site distant par ftp. Nous allons masquer la fenêtre de
gestion de sites.
 Appuyer plusieurs fois sur la touche
F9
pour afficher / masquer la fenêtre de gestion de sites.
F9
N-B : La touche
est une touche bascule. Vous pouvez aussi sélectionner la commande « Affichage  Barre
d'outils  Barre latérale ».
 Masquer la fenêtre de site.
3.4. Paramétrer Nvu
Nous allons vérifier certains paramètres de Nvu et les modifier si nécessaire.
 Sélectionner la commande « Outils  Préférences ».
 Nvu ouvre une boîte de dialogue « Options ».
 Dans la section « Général » :
 Choisir l'option « Reformater la source HTML ».
N-B : l'option « Reformater la source HTML » permet de nettoyer les pages créées par des traitements de texte
par exemple.
 Décocher si nécessaire la case « Utiliser les styles CSS au lieu des éléments et attributs HTML ».
N-B : pour démarrer notre parcours, il vaut mieux garder les balises HTML standard.
 Dans la section « Paramètre des pages » :
 Saisir votre nom pour le champ « Auteur ».
 Saisir au clavier « fr-FR » pour la langue.
N-B : comme vous l'aurez sans doute remarqué, « fr-FR » correspond aux noms des fichiers de dictionnaire copiés
précédemment.
 Dans la section « Avancées » :
 Cocher case « Crée automatiquement un nouveau paragraphe ».
 Cocher la case « Souligner les mots mal orthographiés ».
 Valider en cliquant sur le bouton « OK ».
3.5. Personnaliser les barres d'outils
Par défaut, les barres d'outils (composition, mise en forme) ne sont pas complètes. Nous allons
ajouter quelques boutons aux différentes barres.
 Cliquer droit sur la barre de composition (la première barre sous la barre de menus) et sélectionner la commande
« Personnalisation de barre d'outils »
 Nvu affiche une fenêtre sous la barre d'outils.
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 13 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
 Glisser-déposer les boutons « couper »
« coller »
22/09/2005
, « copier »
entre le bouton « navigateur »
,
et le bouton
« ancre ».
 Ajouter par glisser-déposer un séparateur entre le bouton
« navigateur »
et le bouton « couper »
.
 Cliquer sur le bouton « Valider » pour refermer la fenêtre.
 Quitter l'application Nvu sans enregistrer les modifications éventuelles sur les pages ouvertes.
Nous sommes prêts, les choses sérieuses vont démarrer !
4. Créer une première page html
4.1. Démarrer Nvu
 Démarrer Nvu.
 Nvu ouvre une page vierge « Sans titre ».
4.2. Saisir du texte
Nous allons ajouter du contenu à cette page et l'enregistrer sous le nom « index.html » dans notre
dossier site. Cette page constituera la page d'accueil de notre site.
N-B : dans la suite de ce document, remplacer « prénom nom » par votre prénom et votre nom.
 Saisir en début de document : « Site personnel de prénom nom » puis appuyer sur la touche
Entrée
pour passer à
la ligne.
4.3. Enregistrer la page
 Sélectionner la commande « Fichier  Enregistrer Sous » ou cliquer sur le bouton
 Nvu ouvre une boîte de dialogue « Titre de la page».
 Saisir « Accueil ».
 Valider.
 Nvu ouvre une boîte de dialogue « Enregistrer la page sous ».
 Sélectionner le dossier « site » dans votre dossier « Mes Documents ».
.
Bien sélectionner le dossier « site ».
Rappel : ce dossier « site » contiendra tous les fichiers de notre site web.
 Saisir le nom du fichier « index » à la place du nom proposé. Valider.
N-B : Par défaut, Nvu ajoute l'extension « .html »
 Vérifier la présence du fichier « index.html » dans le dossier « site ».
Le nom de fichier « index.html » est souvent utilisé par les serveurs web comme page par défaut : la
consultation du site s'ouvrira par défaut avec cette page.
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 14 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
4.4. Afficher la page dans un navigateur
Nous allons visualiser notre page web dans un navigateur.
Le bouton « navigateur »
de la barre de composition permet d'afficher la page dans la fenêtre
de votre navigateur. Vous pouvez aussi sélectionner la commande « Fichier  Aperçu dans le
navigateur ».
N-B : Dans la suite de ce parcours, il faudra bien différencier :
* l'action « Refermer l'application » en cliquant sur la croix
l'application,
en haut à droite de barre de titre de
* l'action « Réduire la fenêtre » en cliquant sur le bouton
en haut à droite de la barre de titre de
l'application.
Lorsqu'une application est réduite, vous pouvez la restaurer en cliquant sur son bouton dans la barre de tâches.
 Revenir à Nvu.
 Cliquer sur le bouton « navigateur »
de la barre
de composition.
 Nvu ouvre une boîte de dialogue « Requête de
protocole externe ».
 Cocher la case « Se souvenir de mon choix pour
tous les liens de ce type ».
 Cliquer sur le bouton « Lancer l'application ».
 Votre navigateur web par défaut se lance et affiche votre page « index.html ».
N-B : si la fenêtre de votre navigateur ne s'ouvre pas, ouvrir le dossier « site » et double-cliquer sur le fichier
« index.html ».
 Réduire la fenêtre du navigateur, sans la refermer.(bouton
).
L'une des difficultés lorsqu'on débute dans la création de pages html est de bien différencier :
* l'application qui permet de visualiser la page html : le navigateur,
* de l'application qui permet de modifier cette page html : l'éditeur de page html, surtout
lorsque cet éditeur de page html est WYSIWYG comme Nvu.
 Vous devez avoir dans la barre de tâches en bas de l'écran au moins deux boutons :
* un bouton correspondant à l'application Nvu ,
* un bouton correspondant au navigateur (
ou ),
 Cliquer successivement sur ces 2 boutons de la barre de tâches pour bien les identifier.
 Réduire toutes les fenêtres.
 Agrandir la fenêtre de Nvu en cliquant sur son bouton dans la barre de tâches.
4.5. Modifier le titre
Le titre d'une page html apparaîtra dans la barre de titre du navigateur lors de l'affichage de la page.
De plus, il est utilisé prioritairement par les moteurs de recherche pour indexer les documents.
 Revenir à Nvu.
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 15 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
 Sélectionner la commande « Format  Titre et propriétés de la page », modifier le titre et saisir : « Site
personnel de prénom nom : accueil »
 Valider en cliquant sur le bouton « OK ».
 Noter le changement dans la barre de titre de Nvu, dans le nom de l'onglet.
 Noter l'apparition d'une petite disquette rouge indiquant que le fichier a été modifié depuis la dernière sauvegarde.
 Enregistrer votre modification en appuyant sur Ctrl S .
 La petite disquette rouge a disparu.
 Réduire la fenêtre de Nvu.
 Agrandir la fenêtre du navigateur.
 Observer la barre de titre du navigateur.
N-B : ne pas confondre la barre de titre du navigateur avec sa barre d'adresse.
 Appuyer sur la touche pour actualiser l'affichage du navigateur.
 Que constatez-vous ?..................................................................................................................................
F5
En effet, vous avez modifié la page « index.html » en dehors de votre navigateur : ce dernier ne
pouvait pas « savoir » que la page avait été modifiée. Après chaque modification, il faudra donc réactualiser l'affichage de la page dans le navigateur :
 dans « Internet Explorer »
: cliquer sur le bouton
de la barre d'outils ou bien
appuyer sur la touche
F5
 dans « Mozilla »
: cliquer sur le bouton
ou bien appuyer sur la touche
F5
.
De plus, ne pas oublier aussi d'enregistrer vos modifications avant de chercher à les visualiser ...
Vous pouvez aussi utiliser systématiquement le bouton
.
4.6. Afficher le code source de la page
Un peu de technique maintenant...
Fichier texte : c'est un fichier constitué d’une suite de caractères ayant pour seule mise en forme, le
passage à la ligne. Un fichier texte peut être créé à l'aide d’un éditeur de texte3 (comme par exemple,
« notepad » le bloc-note dans l’environnement Windows).
Fichier au format HTML : C'est un fichier texte contenant des balises (tag) de mise en forme,
généralement hébergé sur des serveurs web et que l’on visualise à l’aide d’un navigateur internet
(Mozilla ou Internet Explorer de Microsoft par exemple).
Langage HTML : Ensemble de balises4 et de règles de syntaxe que doivent respecter les pages au
format HTML pour pouvoir être correctement interprétées et affichées par les navigateurs web.
La structure de base d’un fichier au format html est :
<html>
<head>
<title>Bonjour le monde</title>
...
</head>
<body>
Ma première page
...
</body>
</html>
3 Ne pas confondre un éditeur de texte avec un traitement de texte qui lui permet des mises en page sophistiquées. Un document
enregistré avec un traitement de texte contient bien plus que les simples caractères du texte !
4 Voir en annexe le tableau des principales balises.
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 16 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
<html>, <head>, <body>... sont des balises (tag).
La partie comprise entre <head> et </head> constitue l'entête de la page.
La partie comprise entre <body> et </body> constitue le corps de la page.
N-B : vous pouvez donc créer des pages HTML avec le bloc-note de Windows, il suffit de bien connaître le
langage HTML ... Mais nous laisserons ce « plaisir » aux puristes .
Nvu propose plusieurs modes d'affichage :
* le mode « Normal » qui permet de modifier la page en mode WYSIWYG,
* le mode « Balises HTML » : les balises sont mises en évidence,
* le mode « HTML Source » qui permet d'afficher et de modifier directement le code source
de la page au format texte.
* le mode « Aperçu » qui permet visualiser la page sans ouvrir le navigateur.
Vous pouvez basculer d'un mode à un autre à l'aide des onglets placés sous la zone d'édition de Nvu.
 Réduire la fenêtre de votre navigateur.
 Agrandir la fenêtre de Nvu.
 Cliquer sur l'onglet
sous la zone de travail
 Nvu affiche le code source de la page.
 Repérer les différentes balises.
 Noter l'emplacement des balises <TITLE> et </TITLE>. Elles .................5 le texte « Site personnel de prénom
nom ».
Comme la balise TITLE, beaucoup de balises sont couplées : <TITLE> balise
ouvrante,</TITLE> balise fermante. Voir en annexe n°5 le tableau des principales balises HTML.
N-B : la balise <br> provoque un retour à la ligne.
 Revenir en affichage « Mode normal » en cliquant à nouveau sur l'onglet
.
Faut-il apprendre le langage HTML ? Non pas nécessairement pour atteindre les objectifs de ce
parcours. Néanmoins, il est quand même utile d'identifier les principale balises. Plus tard, si vous avez
des projets plus ambitieux, sans doute, vous faudra-il modifier directement le code source des pages
HTML...
5. Mise en forme du texte
Comme un traitement de texte, Nvu propose des commandes de mise en forme de paragraphes, de
caractères et bien entendu des styles de paragraphe.
5.1. Mise en forme de paragraphe
Nvu propose les mises en forme standard du langage HTML : paragraphe, titre 1 à titre 6,
Adresse, Préformaté. La liste déroulante de la barre d'outils de mise en forme permet d'attribuer
rapidement un style à un paragraphe.
 Placer le curseur sur la première ligne.
5 Encadrent. Bravo !
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 17 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
 Cliquer sur la liste déroulante des styles.
 Sélectionner le le style « Titre 1 ».
 Nvu modifie la mise en forme de cette première ligne.
5.2. Identifier les balises de titre
 Cliquer sur l'onglet
 Repérer les balises « <h1> » et « </h1> » qui encadrent « Site personnel ... ».
Les balises <h1>, <h2>, ... permettent d'attribuer le style, respectivement, « Titre 1 », « Titre 2 », ...
au texte qu'elles encadrent.
 Remplacer dans le code source de la page, les balises « <h1> » et « </h1> » par les balises « <h2> », « </h2> ».
 Revenir en affichage « Mode normal » en cliquant à nouveau sur l'onglet
 Que constatez-vous lorsque vous positionnez le curseur sur la première ligne :
dans la barre de mise en forme : ,.........................................................................................................
dans la barre d'état (la zone grise tout en bas de la fenêtre de Nvu) : ............................................
 Cliquer sur la balise « h2 » de la barre d'état.
 Vous avez sélectionné le texte placé entre les balises « h2 ».
A retenir :
* la barre d'état permet de sélectionner rapidement des zones de la page web.
* Vous pouvez modifier le contenu d'une page en modifiant directement son code source.
 Appuyer sur la combinaison de touches Ctrl Z :
 Que constatez-vous ?..................................................................................................................................
A retenir, comme dans un traitement de texte :
Ctrl
Z
annule la dernière action (commande « Édition  Annuler »)
Ctrl
Y
rétablit la dernière action. (commande « Édition  Refaire »)
Exercice n°2:
 Compléter votre page web pour obtenir l'aspect ci-contre.
 Vous appliquerez le style « paragraphe » aux lignes
« Mes favoris », « Rechercher sur Internet »,
« Mes documents ».
 Vous appliquerez le style « Adresse » à la dernière
ligne « contact ... ».
 Enregistrer vos modifications.
 En consultant le code source de la page, identifier la
balise correspondant au style « paragraphe », au style
« adresse ».6
N-B : Plus loin dans le parcours guidé, « Mes Favoris », « Rechercher sur Internet » et « Mes documents »
deviendront des liens hypertextes vers d'autres pages de notre site.
6 Réponse : <p> </p> pour le style paragraphe ; <address> </address> pour le style adresse.
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 18 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
5.3. Mise en forme de caractères
Nvu propose le mises en formes de caractères du langage HTML : polices de caractères, couleur de
polices, caractères gras, soulignés, italiques... Il faut sélectionner la zone de texte avant de lui appliquer
la mise en forme.
 Revenir en mode d'édition normal.
 Mettre en caractères gras votre adresse électronique à l'aide du bouton
.
 Mettre en caractères italiques votre première ligne à l'aide du bouton
.
 En observant la barre d'état :
 Noter la balise correspondant à la mise en forme en caractères gras ................................................ .
 Noter la balise correspondant à la mise en forme en caractères italiques.......................................... .
 Vérifier en consultant le code source de la page.
5.4. Choix des couleurs
Le bouton
de la barre de mise en forme est constitué de 2 carrés : le carré du dessus permet
de choisir la couleur du texte, le carré du dessous la couleur d'arrière-plan. En cliquant sur l'un des 2
carrés, Nvu affiche une palette de couleurs : vous pouvez alors choisir la couleur de votre choix.
Exercice n°3 :
Modifier la couleur de texte de la première ligne de votre page.
Appliquer le style « Titre 2 » aux paragraphes : « Mes favoris », « Rechercher sur Internet »,
« Mes Documents ».
Centrer la première ligne de votre page.
Enregistrer vos modifications. Visualiser la page dans votre navigateur. (Ne pas oublier d'actualiser l'affichage
de votre navigateur.)
5.5. Modifier le fond de la page
La commande « Format  Couleurs et fond de la page » permet de modifier le fond de la page.
 Dans Nvu, modifier la couleur de fond de la page à
l'aide de la commande « Format  Couleurs et fond de
la page ». Il faudra :
- sélectionner l'option « Utiliser des couleurs
personnalisées »,
- cliquer sur bouton « Fond », de couleur blanc par
défaut.
-choisir une nouvelle couleur.
 Enregistrer vos modifications.
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 19 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
6. Insertion d'image
A lire très attentivement :
Avec un traitement de texte, lorsque vous insérez une image dans un document texte, cette image est
par défaut, incorporée au document.
Rappel : une page html est un fichier texte ; elle ne peut donc pas contenir physiquement une
image mais elle peut contenir un lien vers un fichier image : c'est le navigateur qui sera chargé
d'afficher cette image dans la page.
Conclusion : pour « insérer » une image dans une page html, il faut :
1°) un fichier image,
2°) placer ce fichier dans le dossier (ou un sous-dossier) de votre site,
3°) insérer un lien dans la page html vers ce fichier image à l'aide de Nvu.
Très souvent, on regroupe les fichiers images dans un même sous-dossier du site pour en faciliter la
maintenance. Pour notre site, nous utiliserons le sous-dossier « img ».
6.1. Utiliser une image de fond
Nous allons utiliser l'image « structure.jpg » qui se trouve dans le dossier « ressources » comme
image de fond de page. Avant de pouvoir l'utiliser dans notre site web, nous allons la copier dans
notre sous-dossier « img » de notre site.
 Copier le fichier « structure.jpg » du dossier « ressources » vers le sous-dossier « img » de votre site.
 Dans Nvu, sélectionner le fichier «structure.jpg » du dossier « img » comme fond d'image de la page
« index.html » à l'aide de la commande « Format  Couleurs et fond de la page ».
 Enregistrer vos modifications.
 Visualiser votre page dans le navigateur.
 Revenir à Nvu.
Dans l'exercice suivant, nous allons créer deux nouvelles pages, donc deux nouveaux fichiers...
Attention aux noms des fichiers : les différents serveurs web ne gèrent pas tous de la même
manière les caractères accentués, les espaces, les caractères en majuscule... Aussi, pour éviter tout
problème lors de la publication de vos pages web, respecter les règles suivantes pour le nom des
dossiers et des fichiers :
* utiliser uniquement des caractères minuscules, non accentués,
* ne pas utiliser le caractère « espace », lui préférer le caractère « _ » (underscore ou
soulignement, touche 8 du clavier alphanumérique).
Exercice n °4 : Créer 2 autres pages html en respectant les consignes du tableau ci-dessous.
Attention :
* Ne pas confondre dans le tableau ci-dessous le nom des fichiers et le titre des pages.
* Enregistrer ces deux fichiers dans votre dossier site.
* Créer les nouvelles pages dans un nouvel onglet, à l'aide de la commande « Fichier 
Nouveau  Document vide »
* Une fois les fichiers enregistrés :
* Appiquer le style « Titre 1 » aux titres des pages.
* utiliser le fond « structure.jpg »
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 20 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
Contenu de la page
Titre de la page
Nom du fichier
Mes favoris
(style Titre 1)
favoris.html
Mes documents
(style Titre 1)
mes_documents.html
J'insiste, vraiment ... : « Attention aux noms de fichiers et de dossiers sinon vous aurez des
soucis... ». Ouvrir le dossier Site et vérifier le nom des fichiers si nécessaire...
6.2. Insérer des images dans la page
6.2.1. Travail préparatoire
 Copier le fichier « rechercher.html » depuis le dossier « ressources » vers le dossier « site ».
 Copier les fichiers « google.gif » et « yahoo.gif » depuis le dossier « ressources » vers le sous-dossier « img » du
dossier « site ».
6.2.2. Insérer une image
 Revenir à Nvu.
 Ouvrir la page « rechercher.html » dans un nouvel onglet
 A l'aide de la commande « Insertion  Image » ou du bouton
,
insérer l'image « google.gif » du sous-dossier « img » dans la première cellule
du tableau avec comme texte alternatif « Google »
 Enregistrer vos modifications.
Visualiser votre page dans le navigateur.
N-B : Le texte alternatif se substitue à l'image lorsqu'un navigateur est
configuré pour ne pas charger les images.
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 21 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
6.3. Identifier la balise « img »
La balise html « img » permet d'insérer une image. Cette balise possède au moins l'attribut « src »
qui indique le chemin du fichier image appelé par la page html.
 Revenir à Nvu.
 Cliquer une seule fois sur l'image « Google » pour la sélectionner.
 Noter dans la barre d'état, l'apparition de la balise « img », elle est en caractère gras car elle est sélectionnée.
 Basculer en mode d'édition « HTML Source » à l'aide de l'onglet
 Noter la balise complète qui a permis d'insérer l'image :
<img alt="Google" src="img/google.gif" height="104" width="273">
« alt », « src », « height », « width » sont les attributs de la balise img.
alt correspond au texte alternatif,
src correspond au chemin du fichier image
height correspond à la hauteur en pixel de l'mage,
width correspond à la largeur en pixel de l'image.
« img/ » correspond au chemin relatif du fichier « google.gif » : en effet, le fichier « google.gif » se trouve dans le
sous-dossier « img » par rapport à la page « rechercher.html ».
 Revenir en mode d'édition normal (
).
Exercice n°6 :
Insérer l'image « yahoo.gif » dans la première cellule de la 2ème ligne du tableau.
Vous devriez obtenir l'aspect ci-dessous.
Pour les images dans des pages web, il faut utiliser des images au format : « gif », « jpg », « png ».
Les images au format « bmp », « tiff » sont trop lourdes à télécharger sur Internet pour une qualité
non perceptible à l'écran. De même, il faudra adapter la taille de l'image en pixel au format de l'écran.
N-B : En double-cliquant sur une image, vous pouvez afficher rapidement les propriétés de l'images pour modifier
ces propriétés.
Exercice n°7: En modifiant les propriétés de l'image « google.gif », réduire la hauteur de l'image à 50 pixels
(conserver les proportions). Enregistrer vos modifications. Visualiser votre page dans un navigateur. Revenir à
Nvu.
7. Gestion des tableaux : création d'une barre de navigation
Nous allons créer une barre de navigation qui nous permettra d'atteindre rapidement les différentes
pages de notre site, ce qui nous permettra aussi de découvrir les fonctions de gestion des tableaux de
Nvu.
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 22 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
Il existe deux techniques pour régler la mise en page de zone de texte dans un document au format
HTML :
* les tableaux,
* les calques.
Les tableaux sont plus faciles à mettre en oeuvre et mieux pris en charge par les navigateurs. Par
contre, ils sont beaucoup moins souples que les calques.
7.1. Création de la barre
 Afficher la page « Mes favoris » dans Nvu.
 Placer le curseur en tête de document.
 Appuyer sur la touche
pour créer un nouveau paragraphe.
 Remonter le curseur sur la première ligne.
 Sélectionner la commande « Insertion  tableau » ou cliquer sur le bouton
Entrée
« tableau »
de la barre de composition.
Nvu ouvre une boîte de dialogue « Propriétés du tableau ».
 En glissant la souris sur la matrice, créer un tableau de 2 lignes par 4 colonnes.
 Valider.
 Nvu insère le tableau.
 Compléter ce tableau comme ci-dessous :
7.2. Identifier les balises HTML des tableaux
 Cliquer dans la première cellule du tableau.
 Noter l'apparition de la balise « td » dans la barre d'état.
 Cliquer sur cette balise « td ».
 La cellule toute entière est sélectionnée.
 Cliquer sur la balise « tr » de la barre d'état.
 La ligne entière du tableau est sélectionnée.
 Cliquer sur la balise « table » de la barre d'état.
 Le tableau entier est sélectionné.
 Afficher le code source de la page (onglet
 Repérer le code source correspondant au tableau :
)
<table border="1" cellpadding="2" cellspacing="2" width="100 %">
<tbody>
<tr>
<td>Accueil<br> </td>
<td>Favoris<br> </td>
<td>Rechercher<br> </td>
<td>Documents<br> </td>
</tr>
<tr>
<td><br> </td>
<td><br> </td>
<td><br> </td>
<td><br> </td>
</tr>
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 23 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
</tbody>
</table>
A retenir :
Les balises <table> et </table> délimitent le tableau.
Les balises <tr> </tr> délimitent les lignes du tableau.
Les balises <td> </td> délimitent les cellules du tableau.
« border », « cellpading », « cellspacing », « width » sont les attributs qui permettent de modifier la
présentation du tableau :
« border » fixe la largeur des bordures en pixels,
« cellpadding » fixe l'espacement en pixels entre le contenu et la bordure de la cellule,
« cellspacing » fixe l'espacement en pixels entre cellules.
La balise <tbody> est ici superflue : elle est généralement utilisée en association avec la balise
<thead> pour séparer les entêtes du tableau des données de ce tableau.
Pour mieux repérer les balises, vous pouvez passer en mode d'affichage
 Revenir en mode d'édition normal.(onglet
.
)
7.3. Modifier les propriétés du tableau
Dans un traitement de texte, la largeur des tableaux est généralement exprimée en cm. La vocation
d'une page HTML est d'être affichée sur un écran d'ordinateur. L'unité d'affichage sur un écran est le
pixel. Les tailles standard d'un écran sont « 800 x 600 », « 1024 x 780 », « 1280 x 1024 », ... pixels.
Le langage HTML propose d'exprimer les largeurs de tableaux, de largeurs de colonnes, hauteurs de
lignes :
* soit en pixels,
* soit en % de largeur de la fenêtre d'affichage de la page.
On utilise les largeurs de tableau ou de colonnes de tableau en % pour adapter l'affichage du tableau à
la taille de la fenêtre d'affichage du navigateur.
On utilise les largeurs de tableau en pixels pour fixer les dimensions du tableau quelque soit la largeur
de la fenêtre d'affichage du navigateur.
Nous allons :
* fixer la largeur du tableau à 600 pixels,
* centrer le tableau,
* supprimer les bordures.
 Cliquer sur le tableau.
 Cliquer sur la balise « table » de la barre d'état pour sélectionner le tableau.
 Cliquer droit sur le tableau et sélectionner la commande « Propriétés Tableau ».
 Modifier les propriétés du tableau comme indiqué ci-contre :
Largeurs : 600 pixels
Bordure : 0 pixels
Marges : 2 pixels
Remplissage : 2 pixels
Alignement du tableau : centre.
 Cliquer sur bouton « Appliquer ».
 Nvu modifie la présentation du tableau.
 Valider.
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 24 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
7.4. Modifier les propriétés des cellules
Nous allons :
* fixer la largeur des colonnes à 141 pixels7,
* centrer le contenu des colonnes.
 Cliquer sur la 1ère cellule du tableau.
 Cliquer sur la balise « td » de la barre d'état pour la sélectionner.
 Cliquer droit sur la cellule et sélectionner la commande :
« Propriétés cellule ».
 Nvu ouvre une boîte de dialogue « Propriétés du tableau ».
 Sélectionner l'onglet « Cellules » si nécessaire.
 Sélectionner « Colonne » pour la liste déroulante « Sélection» en
haut de la boîte de dialogue.
 Cocher la case « Largeur » et saisir la largeur« 141 » « pixels » pour
la taille.
 Cocher la case « Vertical » et sélectionner « Milieu » pour
l'alignement du contenu,
 Cocher la case « Horizontal » et sélectionner « Centre » pour
l'alignement.
 Cliquer sur le bouton « Suivante ».
 Répéter les opérations pour les autres colonnes du tableau.
 Enregistrer vos modifications.
Nvu permet aussi :
* de modifier la largeur des colonnes en
déplaçant les taquets de la règle horizontale,
Règle horizontale
* de modifier la hauteur des lignes en déplaçant
les taquets de la règle verticale,
* d'insérer une colonne ou une ligne en cliquant Règle verticale
sur les triangles des boutons de cellules,
* de supprimer une colonne ou une ligne en
cliquant sur les croix cerclées des boutons de
cellules.
Taquets
Taquets
Boutons de cellule
7.5. Fusionner les cellules d'un tableau
Nous allons fusionner les cellules du tableau de la 2ème ligne : cette deuxième ligne contiendra le
titre de notre page.
 Sélectionner les 4 cellules de la deuxième ligne du tableau.
 Cliquer droit et sélectionner la commande « Fusionner les cellules sélectionnées ».
 Nvu fusionne les cellules.
 Couper-coller le titre « Mes favoris » dans cette cellule.
N-B : Malheureusement, Nvu a encore quelques bugs... Mais cela va nous donner l'opportunité de modifier
directement le code source de la page, comme les pros...
7 Pourquoi 141 ? 600 /4 = 150. Il faut ensuite retrancher par colonne les marges, les remplisages, la séparation entre colonne, soit
150 – 2 – 2 – 2 – 2 -1 = 141...
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 25 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
 Placer le curseur sur la deuxième ligne du tableau.
 Cliquer sur la balise <td> dans la barre d'état pour sélectionner la cellule.
 Cliquer sur l'onglet
.
 Noter l'attribut « colspan = 4 » qui indique au navigateur de fusionner les 4 colonnes.
 Nvu a gardé la valeur 141 pour la largeur de la cellule...
 Supprimer « width="141" » dans le code source de la page.
 Enregistrer vos modifications. Revenir en mode normal.
8. Créer des liens hypertextes
8.1. Créer des liens internes vers d'autres pages du site
Nous allons créer des liens hypertextes depuis la page d'accueil « index.html » de notre site vers
les différentes pages « favoris.html », « rechercher.html », « mes_documents.html ».
Pour créer un lien hypertexte, il faut :
1°) sélectionner la « zone cliquable » : le texte ou l'image,
2°) sélectionne la commande « Insertion lien » ou bien cliquer sur le bouton « Lien »
de la
barre de composition,
3°) saisir la destination, c'est à dire l'adresse (URL) de la page qui sera appelée par le navigateur
lorsqu'on cliquera sur le lien,
4°) préciser la cible :
* la même fenêtre (_self) : lorsqu'on cliquera sur le lien, la page appelée s'affichera dans la
même fenêtre,
* une nouvelle fenêtre (_blank) du navigateur : lorsqu'on cliquera sur le lien, la page appelée
s'affichera dans une nouvelle fenêtre,
La destination (URL) pourra être une page
 au format html ou dans un format standard reconnu par le navigateur : PDF, RTF, ...
interne ou externe au site web.
 Dans Nvu, sélectionner la page « Site Personnel ... » (fichier « index.html »).
 Basculer en mode d'édition « Normal » si nécessaire.
 Sélectionner le texte « Mes favoris ».
 Sélectionner la commande « Insertion  Lien » ou cliquer sur le bouton de la barre de composition.
 Nvu ouvre une une boîte de dialogue « Propriétés du lien ».
 Cliquer sur le bouton « Parcourir ».
 Sélectionner le fichier « favoris.html ». Valider. Attention ne pas refermer la boîte de dialogue « Propriétés du
lien ».
 Cliquer sur le bouton « Édition avancée ».
 Nvu ouvre une fenêtre « Édition des propriétés avancées »
 Sélectionner dans la liste déroulante « Attribut », la valeur « target ».
 Sélectionner dans la liste déroulante « Valeur », la valeur « _self ».
 Valider.
 Valider une seconde fois pour refermer la fenêtre « Propriétés du lien ».
N-B : si vous ne précisez pas la cible (« target »), la valeur par défaut est
« _self ». Ici nous aurions donc pu sauter cette étape.
 Enregistrer vos modifications.
 Tester votre page à l'aide du navigateur.
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 26 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
8.2. Identifier la balise <a>
 Revenir à Nvu.
 Afficher le code source de la page (
 Repérer le lien hypertexte :
).
<a target="_self" href="favoris.html">Mes favoris</a>
<-------------------------------------------------------------------->
<---->
balise ouvrante
balise fermante
A retenir :
La balise <a> permet d'insérer un lien hypertexte.
La zone cliquable est encadrée par un balise ouvrante <a> et une balise fermante </a>.
La balise <a> possède au moins l'attribut « href » qui contient l'adresse de destination du lien.
L'attribut « target » permet de définir la cible du lien : « _self » même fenêtre du navigateur ou
« _blank » nouvelle fenêtre du navigateur.
Exercice n°8 :  Compléter le texte ci-dessous :
Ici, les ........................ « <a> » et « </a> » encadrent le texte « ......................... » qui est la zone
cliquable. L'attribut « href » définit l'adresse de destination du lien, ici « ......................................... »
qui est le nom du ..................... appelé par le lien hypertexte. L'......................... « target » définit la cible du
lien hypertexte, ici la même ..................
 Revenir au mode d'affichage
.
Exercice n°9 :
Dans la page d'accueil « Site personnel ... » (« index.html »),
a) ajouter un lien vers les pages « mes_documents.html « et « rechercher.html ».
b) Enregistrer vos modifications. Tester votre page dans un navigateur.
Exercice n°10 :
Dans la page « Mes favoris » :
a) dans chaque cellule de la première ligne du tableau, créer les liens respectivement vers les pages
« index.html », « favoris.html », « rechercher.html », « mes_documents.html ».
b) Enregistrer vos modifications. Tester votre page dans un navigateur.
c) Copier cette barre de navigation dans les pages « Mes documents » et « Rechercher ».
e) Modifier les titres en conséquence.
f) Tester vos pages dans un navigateur.
N-B :
Le fait d'avoir choisi « _self » pour cible dans vos liens vous permet de cliquer sur le bouton « précédent » du
navigateur pour revenir à la page d'accueil du site.
N-B :
Pour supprimer rapidement un lien hypertexte :
 Sélectionner le lien,
 Cliquer droit et sélectionner la commande « Supprimer les liens ».
Pour modifier un lien hypertexte, double-cliquer sur le lien, Nvu affiche la fenêtre de propriétés du lien.
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 27 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
Très important :
* Créer toutes vos pages HTML dans le dossier de votre site ou éventuellement dans un sousdossiers de votre site,
* Pour tous les liens vers des pages de votre site, vérifier que la case « L'URL est relative à
l'emplacement de la page » est cochée comme sur la figure ci-dessous.
8.3. Créer des liens externes vers des pages d'internet
Dans la page « rechercher.html », précédemment, nous avons « inséré » des images correspondant
aux logos des sites. Nous allons insérer un lien hypertexte sur ces images vers le site respectif. On
précisera la destination en forçant l'ouverture d'une nouvelle fenêtre du navigateur (target =
« _blank ») dans un deuxième temps.
Lors de l'insertion de liens hypertextes vers des sites extérieurs sur Internet, il est préférable de
travailler par copier-coller pour éviter des erreurs de saisie lors de la création du lien hypertexte.
8.3.1. Récupération de l'adresse
 Ouvrir une nouvelle fenêtre du navigateur. (Menu Fichier  Nouvelle Fenêtre du navigateur)
 Saisir l'adresse « http://www.google.fr/ ». Valider.
 Attendre l'affichage de la page.
 Sélectionner l'adresse dans la zone d'adresse.
 Cliquer droit et sélectionner la commande « Copier ».
 L'ordinateur garde en mémoire l'adresse du site dans une zone mémoire qu'on appelle le presse-papier.
8.3.2. Création du lien
 Revenir à Nvu.
 Sélectionner la page « rechercher.html ».
 Double-cliquer sur l'image « google.gif ».
 Nvu ouvre la fenêtre « propriétés de l'image ».
 Sélectionner l'onglet « lien ».
 Cliquer droit dans la zone de saisie de l'adresse du lien et sélectionner la
commande « Coller » du menu contextuel.
 Nvu colle le lien « http://www.google.fr ».
 Valider.
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 28 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
8.3.3. Préciser la cible du lien
La fenêtre « Propriétés de l'image » ne permet pas de modifier la cible (target) du lien hypertexte.
En effet, « target » est un attribut de la balise <a> et non de la balise <img>. Il faut d'abord
sélectionner le lien hypertexte pour accéder à la fenêtre de « Propriétés du lien ». La barre d'état de
Nvu va nous aider.
 Cliquer sur l'image « google » pour la sélectionner.
 Noter l'apparition de la balise <a> dans la barre d'état
devant la balise <img>.
<img> est en caractère gras car l'image est sélectionnée.
 Cliquer sur la balise <a> de la barre d'état de Nvu
pour sélectionner cette balise.
 Dans la zone d'édition, l'image est grisée, dans la barre
d'état, la balise <a> est en caractère gras. Vous l'avez
sélectionnée.
 Cliquer droit sur la balise <a> de la barre d'état de Nvu
 Sélectionner la commande « Propriétés avancée ».
 Sélectionner l'attribut « target ».
 Sélectionner la valeur « _blank ». Valider.
 Enregistrer vos modifications et tester votre page.
Exercice n°11 :
Créer un lien vers le site de « Yahoo.fr » sur l'image « yahoo.gif » dans la page « rechercher.html ».
Enregistrer vos modifications. Tester la page « rechercher.html ». Vérifier que le navigateur ouvre une
nouvelle fenêtre lorsque vous cliquez sur les images de la page.
N-B : Pour supprimer ou modifier un lien hypertexte sur une image :
1°) Sélectionner la balise <a> à l'aide de la barre d'état.
2°) Cliquer droit sur l'image et sélectionner :
soit la commande « Supprimer les liens » pour supprimer le lien
soit la commande « Propriétés du lien » pour le modifier.
Exercice n °12:
Dans la page « favoris.html » :
a) créer un tableau de 3 lignes et 4 colonnes.
b) proposer 3 favoris vers des pages d'Internet.
Colonne n°1 : nom du site, colonne n°2 : logo du site, colonne n°3 : adresse du site, colonne n°4 : descriptif du
site.
c) Créer un lien vers le site sur le logo et l'adresse du site.
Attention, copier l'image des logos de vos sites favoris dans votre dossier « img » avant de l'insérer dans votre
page html.
d) A l'aide de la commande « Propriétés du tableau », améliorer la présentation du tableau.
Très important :
* Pour tous les liens vers des pages extérieures à votre site, vérifier que la case « L'URL est
relative à l'emplacement de la page » est décochée comme sur la figure ci-dessous.
* L'URL doit débuter avec « http:// ».
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 29 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
9. Créer des liens internes vers des documents
Nous allons créer dans la page « mes_documents.html » des liens vers des documents. Ces
documents seront dans des formats que le navigateur pourra facilement afficher.
9.1. Travail préparatoire
 Copier les fichiers : « qcm.html », « creer_page_web.swf », « competence.html », « balise.pdf » depuis le
dossier « ressources » vers le sous-dossier « doc » de votre site.
« qcm.html » est un QCM réalisé à l'aide du logiciel « HotPotatoes ».
« balise.pdf » est un fichier au format Acrobat obtenu à l'aide de la fonction exporter
d'OpenOffice.
« creer_page_web.swf » est un fichier au format Flash obtenu à l'aide de la fonction exporter
d'Impress OpenOffice.
« competence.html » est un simple document html que nous utiliserons un peu plus tard dans ce
parcours guidé.
9.2. Création des liens
Dans la page « Mes Documents » (fichier « mes_documents.html »), nous allons insérer des
liens hypertextes vers les 4 documents « qcm.html », « creer_page_web.swf »,
« competence.html », « balise.pdf » .
 Insérer dans la page « Mes Documents » le texte ci-dessous :
* QCM HotPotatoes,
* Compétences pour les enseignants
* Balises html (format PDF)
* Préao Pages web (format Flash)
 Créer les liens hypertextes vers les documents : « qcm.html », « competence.html », « balise.pdf »,
« creer_page_web.swf » en prenant pour cible (target) la valeur « _blank ».
N-B : par défaut, lors de la création du lien, la boîte de dialogue
associée au bouton « Parcourir » ne propose que les fichiers
« htm » ou « html ». Il faudra sélectionner « Tous les
fichiers » pour le type de fichiers pour faire apparaître les
fichiers « swf » ou « pdf » comme sur la figure ci-contre.
 Enregistrer vos modifications.
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 30 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
 Tester votre page « mes_documents.html » dans le navigateur.
9.3. Créer des « ancres » dans un document long.
Lorsqu'une page web devient trop longue, il devient nécessaire d'utiliser les ascenseurs du navigateur
pour la consulter. Il peut être intéressant dans ce cas :
1°) de placer dans le document des ancres
2°) de créer des liens hypertextes vers ces ancres pour atteindre rapidement un emplacement précis
du document.
Nous allons ajouter une « barre de navigation » dans le document « competence.html ». Cette
barre de navigation permettra d'atteindre rapidement les différents chapitres du document au sein de
la page.
 Ouvrir le document « competence.html » dans Nvu.
9.3.1. 1ère étape : création des ancres
Le bouton « Ancre »
de la barre de composition (ou la commande « Insertion  Ancre»)
permet d'insérer des ancres dans le document.
Chaque ancre est identifiée par un nom. Il est impératif de respecter les mêmes consignes pour le
nom des ancres que pour les noms des fichiers, à savoir :
* utiliser des caractères minuscules, non accentués,
* éviter le caractère espace et le remplacer par le caractère « _ » (soulignement bas ou
underscore, touche 8 du pavé alphanumérique).
 Sélectionner le titre « 1) les différents champs disciplinaires et niveaux
d'enseignement »
 Cliquer sur le bouton « Ancre » .
 Nvu ouvre une boîte de dialogue « Propriétés de l'ancre ».
 Saisir le texte « champs_disciplinaires » comme ci-contre.
 Valider en cliquant sur OK
 Afficher le code source de la page.
 Repérer la balise permettant de définir une ancre.
<a name="champs_disciplinaires"></a>
C'est donc la même balise « <a> » qui sert pour créer un lien ou définir une ancre. L'attribut
« name » précise le nom de l'ancre.
 Revenir en mode d'édition normal.
 Répéter le processus pour les autres titres du document en respectant le tableau ci-dessous :
Titres
Nom de l'ancre
2) la gestion de la classe
gestion_classe
3) la coopération entre élèves, classes et enseignants
cooperation
4) Les systèmes d'information et de communication
systeme_information
5) la responsabilité éducative de l'enseignant
Responsabilite
Rappel : pas de caractères accentués dans le nom des ancres... sinon vos liens ne fonctionneront pas !
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 31 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
9.3.2. 2nde étape : création des liens hypertextes vers les ancres
La création de liens hypertextes vers des ancres se fait de la même façon que pour des liens
hypertextes classiques, seule l'adresse de destination change.
Les ancres ayant été insérées dans le document, nous pouvons maintenant créer des liens
hypertextes vers ces ancres.
9.3.2.1.Saisie de la barre de navigation
 Placer le curseur après le mot « Communication » du
titre « La formation initiale des enseignants et les
Technologies de l'Information et de la
Communication ».
 Appuyer sur la touche
Entrée
pour créer un paragraphe
vide.
 Sélectionner la commande « Insertion  Tableau »
ou cliquer sur le bouton « tableau » de la barre de
composition.
 Saisir la dimension du tableau : 1 ligne x 5 colonnes.
 Valider.
 Compléter le tableau comme ci-dessous :
Champs disciplinaires
Gestion de la classe
Coopération
Système
d'informations
Responsabilité
9.3.2.2.Création des liens hypertextes
 Sélectionner le texte « Champs disciplinaires » du tableau.
 Sélectionner la commande « Insertion  Lien » ou cliquer sur le
bouton de la barre de composition
 Nvu ouvre la boîte de dialogue « Propriétés du lien ».
 Faire dérouler la liste déroulante « Emplacement du lien ».
 Nvu affiche la liste des ancres de la page.
 Sélectionner l'ancre « Champs_disciplinaire ».
 Valider.
 Afficher le code source de la page.
 Repérer le lien que vous venez de créer :
<a href="#champs_disciplinaires">Champs disciplinaires</a>
Le dièse # permet d'indiquer le nom de l'ancre. Bien entendu, il est possible de créer un lien vers
une autre page en précisant une ancre : il suffit d'ajouter le # suivi du nom de l'ancre au nom du
fichier dans la valeur de l'attribut « href ».
 Répéter le même processus pour les autres cellules du tableau.
 Enregistrer vos modifications.
 Ouvrir votre document dans votre navigateur. Tester les liens hypertextes.
Exercice n°13 :
Dans notre page html « competence.html », nous souhaitons pouvoir remonter rapidement au début du
document, depuis chaque titre. Nous allons insérer après chaque titre, un lien hypertexte vers le haut du
document. Ce lien hypertexte se présentera sous l'aspect d'une image
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 32 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
Pour cela il faudra :
1°) Copier l'image « bluhome.gif » dans votre sous-dossier « img » du site depuis le dossier
« ressources ».
2°) Insérer une ancre « Titre » avant le titre « La formation initiale des enseignants et les
Technologies de l'Information et de la Communication »,
3°) Insérer l'image « bluhome.gif » en fin de ligne « 1) les différents champs disciplinaires et
niveaux d'enseignement ».
6°) Ajouter un lien hypertexte sur cette image vers l'ancre « Titre » créée précédemment.
7°) Copier-coller cette image avec son lien hypertexte en fin de chaque titre.
8°) Enregistrer vos modifications. Tester votre page.
N-B : Le copier-coller supprime la mise en forme des titres... Un bug de Nvu.
10. Utiliser les feuilles de style
Avertissement : si vous découvrez la création de page web avec ce parcours guidé, je vous invite dans un premier
temps à consolider vos compétences en développant un petit projet personnel avant d'attaquer ce chapitre du
parcours guidé...
Extrait du site http://www.commentcamarche.net/ :
« Les feuilles de style permettent :
d'avoir une présentation homogène sur tout un site.
de pouvoir changer l'aspect du site entier en modifiant quelques lignes.
une plus grande lisibilité du HTML.
le positionnement rigoureux des éléments.
des chargements de page plus rapides. »
10.1. Travail préparatoire
Nous allons créer un nouveau site et y recopier les fichiers préparés pour cette partie du parcours.
 Copier le dossier « site-css » et son contenu depuis le dossier « ressources » vers votre dossier « Mes
documents » à côté de votre dossier « site ».
 Ouvrir Nvu. Refermer, si nécessaire tous les fichiers ouverts.
 Ouvrir les pages « index.html », « mes_documents.html », « favoris.html », « rechercher.html » contenues
dans le dossier « site-css ».
 Nous retrouvons les quatre pages de notre site.
N-B : Dans ces pages, nous avons supprimé les mises en forme de page, paragraphe, caractère, ... afin que ces
mises en forme ne viennent pas se superposer aux mises en forme des feuilles de style.
 Afficher la page « Site personnel ... » dans Nvu.
Je souhaite appliquer le même mise en forme aux trois lignes « Mes Favoris », « Rechercher sur
Internet », « Mes documents ». Par exemple : police Arial, caractères en italique, 14pt.
Avec ce que nous avons appris précédemment, il faudrait répéter la procédure 3 fois. Nous allons
apprendre une autre manière de faire à l'aide des styles.
10.2. Création d'une feuille de style interne
Nous allons créer une feuille de style interne. Dans cette feuille de style nous allons définir la mise
en forme de la balise « h2 ».
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 33 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
 Sélectionner la commande « Outils  Éditeur css ».
 Nvu ouvre une boîte de dialogue « Feuille de style
CSS »
 Cliquer sur le bouton « Feuille incorporée ».
 Nvu affiche un nouveau formulaire dans l'onglet
« Général ».
 Saisir « messtyles » pour le champ « Titre ».
N-B : Le champ « Liste médias » est facultatif.
 Cliquer sur le bouton « Créer la feuille de style ».
 Cliquer sur le bouton « Fermer ».
N-B : Nous venons de créer une feuille de style interne à notre page web.
 Afficher le code source de la page.
 Repérer le code source correspondant à notre feuille de style interne.
<style title="messtyles" type="text/css"></style>
N-B : pour le moment cette feuille de style est vide.
Les balises « <style> » et « </style> » vont encadrer les styles que nous allons ajouter. Cela
constituera une feuille de style interne.
 Revenir en mode d'édition « Normal ».
 Sélectionner à nouveau la commande « Outils 
Éditeur css ».
 Sélectionner à gauche « feuille de style interne ».
 Cliquer sur le bouton « Règle ».
 Nvu modifie le formulaire à droite.
 Sélectionner l'option « Style appliqué à tous les
éléments concernant le sélecteur suivant »
 Saisir « h2 ».
 Cliquer sur le bouton « Créer la règle de style »
 Nvu ajoute le sélecteur « h2 » à la feuille de style.
Nous allons maintenant définir la mise en forme à appliquer à la balise « h2 ».
 Sélectionner l'onglet « Texte ».
 Modifier la mise en forme en respectant les consignes
ci-dessous :
Famille de police : « Prédéfinie »
Police : « Arial, Helvetica, sans-serif »
Taille de la police : « 14 »
style : « Italique »
Couleur : une couleur de votre choix
Alignement « centrer ».
 Cliquer sur le bouton « Fermer ».
 Les attributs de mise en forme ont été appliqués à toutes les balises <h2>.
N-B : la couleur choisie ne semble pas être prise en compte. Nos titres <h2> sont aussi des liens. La couleur pour
les liens s'impose sur la couleur du texte.
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 34 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
 Afficher le code source de la page.
 Repérer le code de notre feuille de style interne.
<style title="messtyles" type="text/css">
h2 {
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
color: rgb(51, 204, 0);
font-style: italic;
text-align: center;
}
</style>
Le sélecteur de balise est h2. Les attributs de mise en forme sont placés entre 2 accolades, séparés
par des point-virgules.
 Revenir en mode d'édition normal.
Exercice :
Ajouter un style « h1 » à la feuille de style interne avec les attributs de mise en forme suivants :
onglet texte : famille de police Prédéfinie, Police Arial, Helvetica, sans-serif, taille de la police 18,
gras, casse en majuscule, Couleur : une couleur de votre choix, Alignement centré.
onglet fond : une couleur de votre choix
onglet bordure : haut : en relief
Ajouter un style « body » à la feuille de style interne avec les attributs de mise en forme suivant :
onglet fond : une couleur de votre choix.
10.3. Créer une feuille de style externe
Nous avons créé une feuille de style interne à la page « index.html ». Pour obtenir une charte
graphique commune à toutes les pages de notre site, nous allons :
* exporter la feuille de style interne : ce qui créera une feuille de style externe,
* lier cette feuille de style externe à toutes les pages de notre site.
10.3.1. Création de la feuille de style externe
 Sélectionner à nouveau la commande « Outils  Éditeur css ».
 Sélectionner à gauche « feuille de style interne ».
 Cliquer sur le bouton « Exporter la feuille de style et utiliser la version exportée ».
 Nvu ouvre une boîte de dialogue « Sélectionner un ficher css »
 Saisir le nom complet « mestyles.css ». Valider. (Attention il faut aussi saisir l'extension css ! )
 Cliquer sur le bouton « Fermer ».
 Nvu a créé une feuille de style « messtyles.ccs ».
 Vérifier la présence du fichier « messtyles.css » dans votre dossier « site-css ».
Si vous ouvrez ce fichier « messtyles.css » avec un éditeur de texte, « Notepad » de Windows par
exemple, vous obtiendrez le résultat suivante :
/* Generated by CaScadeS, a stylesheet editor for Mozilla Composer
*/
h2 { font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
color: rgb(51, 204, 0);
font-style: italic;
text-align: center;
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 35 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
}
h1 { border-style: outset;
font-family: Arial,Helvetica,sans-serif;
font-size: 18px;
color: rgb(51, 102, 255);
font-weight: bold;
font-style: normal;
text-transform: uppercase;
text-align: center;
background-color: rgb(204, 255, 255);
}
body { background-color: rgb(255, 255, 153);
}
 Revenir à Nvu
 Afficher le code source de la page web.
 Repérer la ligne :
<link rel="stylesheet" href="file:///D:/documents/site-css/messtyles.css"
type="text/css">
N-B :
1°) Sur votre ordinateur, la valeur de « href » est sans doute différente.
2°)
Il existe un bug dans la version actuelle de NVU : Nvu a donné un chemin absolu pour la liaison avec
notamment le nom du disque dur alors que la page « index.html » et la feuille de style « messtyles.css » sont
dans le même dossier. Lors d'un transfert vers un site web ou un cédérom, la liaison avec la feuille de style ne
fonctionnerait plus.
 Modifier cette ligne comme ci-dessous :
<link rel="stylesheet" href="messtyles.css" type="text/css">
 Enregistrer votre modification.
 Revenir en mode d'édition normal.
10.3.2. Lier une feuille de style à une page web
Nous allons lier notre feuille de style à toutes les pages de notre site.
 Sélectionner la page « Mes favoris » dans Nvu.
 Sélectionner la commande « Outils  Éditeur css ».
 Cliquer sur le bouton « Feuille liée».
 Nvu affiche un nouveau formulaire à droite.
 Cliquer sur le bouton « Parcourir ».
 Nvu ouvre une boîte de dialogue « Sélectionner une
feuille de style ».
 Sélectionner la feuille de style « messtyles ». Valider.
 A droite, comme précédemment, il faut enlever le
chemin absolu de l'URL
 Modifier l'URL pour ne garder que « messtyles.css »
comme sur la figure ci-contre.
 Cliquer sur le bouton « Créer la feuille de style ».
 Cliquer sur bouton « Fermer ».
 Afficher le code source de la page.
 Repérer le code de la liaison à la feuille de style :
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 36 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
<link rel="stylesheet" href="messtyles.css" type="text/css">
N-B : nous retrouvons exactement le même code que nous avions modifié précédemment.
 Revenir en mode d'édition normal.
Exercice :
Lier la feuille de style « messtyles.css » aux autres pages de votre site.
Modifier la couleur de fond du style « body » à l'aide de la commande « Outils  Éditeur css ». Vérifier
dans le navigateur. Conclusion.
NVU est perfectible... En particulier, l'éditeur ne met pas à jour l'affichage du contenu des pages après une
modification de la feuille de style liée à ces pages. Pour visualiser les modifications, il faut fermer puis ré-ouvrir
la page web.
10.4. Créer de nouveaux styles
Jusqu'à présent nous avons mis en forme des balises HTML. Nous pouvons aussi créer nos
propres styles.
Nous allons créer :
* un nouveau style pour la barre de navigation
* appliquer ce nouveau style à nos barres de navigation.
10.4.1. Créer un nouveau style
 Afficher la page « Mes favoris » dans Nvu.
 Sélectionner la commande « Outils  Éditeur css ».
 Sélectionner la feuille de style « messtyles.css ».
 Cliquer sur le bouton « Règle ».
 Sélectionner l'option « Style nommé ».
 Saisir le nom « barrenav » comme sur la figure cicontre.
 Cliquer sur le bouton « Créer la règle de style ».
 Noter l'apparition d'un style « .barrenav ».
10.4.2. Modifier le style « .barrenav »
 A l'aide des onglets modifier le style en appliquant les consignes ci-dessous :
onglet texte : Police Arial, caractère gras, couleur de votre choix,
onglet fond : couleur de votre choix,
onglet bordure : en relief, épaisseur 2 pixels.
 Fermer la boîte de dialogue
10.4.3. Attribuer un style à une balise
 Placer le curseur dans la première cellule de la barre de navigation.
 Cliquer droit sur la balise td de la barre d'état.
 Nvu ouvre un menu contextuel
 Sélectionner la commande « Classe ».
 Sélectionner la classe « barrenav ».
 Répéter la même procédure pour les autres cellules de la barre de navigation.
 Enregistrer vos modifications.
 Tester votre page.
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 37 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
 Revenir à Nvu.
 Afficher le code source de la page.
 Repérer le code source permettant d'attribuer le style « barrenav » aux cellules de la barre de navigation :
<td class="barrenav" align="center" valign="middle"><a target="_self"
href="index.html">Accueil</a><br> </td>
L'attribut « class » permet d'attribuer un style à n'importe quelle balise de la page. La valeur de cet
attribut correspond au nom du style.
 Revenir en mode d'édition normal.
Exercice n°14:
Appliquer le style « barrenav » aux barres de navigation des autres pages du site.
Rappel :
Après une modification de la feuille de style, pour visualiser les modifications, il faut fermer puis réouvrir les pages web liées à cette feuille de style.
Exercice n°15 : Créer un nouveau style « titrefavoris ».
Modifier les attributs de mise en forme de ce style en appliquant les consigne ci-dessous.
Texte : caractère gras en majuscule, couleur de votre choix.
Attribuer ce style aux cellules contenant le titre des sites dans la page « Mes favoris ».
IUFM de Basse-Normandie Dominique Lachiver
version 28/10/04
page 38 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
22/09/2005
11. Les principales balises HTML
11.1. Fichier Html
<HTML>...</HTML>
<HEAD>...</HEAD>
<TITLE>...</TITLE>
<BODY>...</BODY>
<BODY bgcolor="#XXXXXX">
<BODY background="xyz.gif">
Début et fin de fichier Html
Zone d'en-tête d'un fichier Html
Titre affiché par le navigateur
Début et fin du corps du fichier Html
Couleur d'arrière-plan (en hexadécimal)
Image d'arrière-plan
11.2. Mise en forme des caractères
<B>...</B>
<BIG>...</BIG>
<BLINK>...</BLINK>
<EM>...</EM>
<FONT
color="#XXXXXX">...</FONT>
<FONT size=X>...</FONT>
<I>...</I>
<NOBR>...</NOBR>
<PRE>...</PRE>
<SMALL>...</SMALL>
<STRONG>...</STRONG>
<SUB>...</SUB>
<SUP>...</SUP>
<U>...</U>
Texte en gras
Agrandissement de la taille des caractères
Texte clignotant (Mozillla)
Texte en italique
Texte en couleur où XXXXXX est une valeur hexadécimale
Taille des caractères où X est une valeur de 1 à 7
Texte en italique
Empêche les ruptures automatiques de ligne des navigateurs
Texte préformaté, soit avec affichage de tous les espaces et
sauts de ligne
Réduction de la taille des caractères
Mise en gras du texte
Texte en indice
Texte en exposant
Texte souligné
11.3. Mise en forme de paragraphes
<!--...-->
<BR>
<BLOCKQUOTE>...</BLOCKQUOT
E>
<CENTER>...</CENTER>
<DIV align=center> ...</DIV>
<DIV align=left> ...</DIV>
<DIV align=right> ...</DIV>
<Hx>...</Hx>
<Hx align=center>...</Hx>
<Hx align=left>...</Hx>
<Hx align=right>...</Hx>
<P>...</P>
<P align=center>...</P>
<P align=left>...</P>
<P align=right>...</P>
Commentaire ignoré par le navigateur
Passage à la ligne
Citation (introduit un retrait du texte)
Centre tout élément compris dans le tag
Centre l'élément encadré par le tag
Aligne l'élément à gauche
Aligne l'élément à droite
Titre où x a une valeur de 1 à 7
Titre centré
Titre aligné à gauche
Titre aligné à droite
Nouveau paragraphe
Paragraphe centré
Paragraphe aligné à gauche
Paragraphe aligné à droite
11.4. Listes
<UL>
<LI>
</UL>
<OL>
<LI>
</OL>
<DL>
<DT>...</DT>
<DD>...</DD>
</DL>
IUFM de Basse-Normandie Dominique Lachiver
Liste non numérotée (dite à puces)
Elément de liste
Liste numérotée
Elément de liste
Liste de glossaire
Terme de glossaire (sans retrait)
Explication du terme (avec retrait)
Ligne de séparation
version 28/10/04
page 39 / 40
Parcours guidé : créer des pages simples au format html avec Nvu
<HR>
<HR width="x%">
<HR width=x>
<HR size=x>
<HR align=center>
<HR align=left>
<HR align=right>
<HR noshade>
22/09/2005
Trait horizontal (centré par défaut)
Largeur du trait en %
Largeur du trait en pixels
Hauteur du trait en pixels
Trait centré (défaut)
Trait aligné à gauche
Trait aligné à droite
Trait sans effet d'ombrage
11.5. Hyperliens
<A href="http://...">...</A>
<A href="mailto:...">...</A>
<A href="fichier.htm">...</A>
<A name="xyz">...</A>
<A href="xyz">...</A>
<A href="fichier#xyz">...</A>
Lien vers une page Web
Lien vers une adresse Email
Lien vers la page locale fichier.htm située dans le même
dossier
Définition d'une ancre
Lien vers une ancre
11.6. Images
<IMG src="xyz.gif">
<IMG src="xyz.pjg>
<IMG ... width=x height=y>
< IMG ... border=x>
<IMG ... alt="votre texte">
<IMG ... align=bottom>
<IMG ... align=middle>
<IMG ... align=top>
<IMG ... align=left>
<IMG ... align=right>
<IMG ... hspace=x>
<IMG ... vspace=y>
Insertion d'une image au format Gif ou Jpg
(voir liens pour l'adressage)
Mise à l'échelle de l'image en pixels
Définition de la bordure d'une image avec lien
Texte alternatif lorsque l'image n'est pas affichée
Aligne l'image en bas
Aligne l'image au milieu
Aligne l'image en haut
Aligne l'image à gaughe
Aligne l'image à droite
Espacement horizontal entre l'image et le texte
Espacement vertical entre l'image et le texte
11.7. Tableau
<TABLE>...</TABLE>
<TABLE width="x%">
< TABLE width=x>
<TABLE border=x>
<TABLE cellpadding=x>
<TABLE cellspacing=x>
<TR>...</TR>
<TD>...</TD>
<TD bgcolor="#XXXXXX">
<TD width="x%">
<TD width=x>
<TD align=center>
<TD align=left>
<TD align=right>
<TD valign=bottom>
<TD valign=middle>
<TD valign=top>
<TD colspan=x>
<TD rowspan=x>
IUFM de Basse-Normandie Dominique Lachiver
Définition d'un tableau
Largeur du tableau en %
Largeur du tableau en pixels
Largeur de la bordure
Espace entre la bordure et le texte
Epaisseur du trait entre les cellules
Ligne du tableau
Cellule du tableau
Couleur d'une cellule de tableau
Largeur de colonne en %
Largeur de colonne en pixels
Texte dans la cellule centré
Texte dans la cellule aligné à gauche
Texte dans la cellule aligné à droite
Alignement vers le bas du contenu d'une cellule
Centrage vertical du contenu d'une cellule
Alignement vers le haut du contenu d'une cellule
Nombre de cellules à fusionner horizontalement
Nombre de cellules à fusionner verticalement
version 28/10/04
page 40 / 40