Télécharger le document au format PDF

CRÉATION DE PAGES
WEB SIMPLES
Sommaire
I Créer votre première page web
II Créer une page web simple avec NVU
III Illustrer une page web
IV Quelques applications pédagogiques
VOCABULAIRE DE BASE
HTML : HyperText Markup Language est un langage utilisé pour la création et la mise en forme de pages Web.
LIEN : texte ou image associé(e) à un fichier sur le Web. Le lien peut être externe ou interne à la page.
PAGE : élément de base du site, elle peut contenir : texte, images, liens, tableaux, son, video, cadres ou formulaires.
SERVEUR : un serveur est un ordinateur relié à l'Internet qui assure le transfert des pages Web que vous consultez.
SITE : un site est un ensemble de pages Web liées et stockées sur un serveur Web.
Janvier 2006
1/7
Créer votre première page web
1. Qu'est-ce qu'une page web ?
Les pages Web sont identifiées par une extension indiquant au système d'exploitation de la machine l'outil
adéquat pour les interpréter, en l'occurrence un navigateur ( Netscape, Internet Explorer, Mozilla...)
Les extensions les plus fréquentes sont :

de type .htm(l) (hypertexte marked language) pour des pages non dynamiques

de type .php lorsque les pages font appel à des ressources disponibles dans des bases
de données MySQL

des documents à télécharger (par exemple les fichiers .pdf lus par Acrobat Reader)
On peut mentionner aussi l'extension de scripts .cgi (Common Gateway Interface), l'extension .asp (Actives
Server Pages) ..
Votre page se compose de texte et souvent de contenu multimédia stocké dans un fichier avec une extension
appropriée mais en réalité il s'agit de balises, ie des instructions en langage HTML qui indiquent au
navigateur ce que vous souhaitez voir afficher; elles n'apparaissent pas à l'utilisateur puisqu'elles sont lues
par le navigateur qui les tranforme en texte, images, sons, etc. Elles prennent la forme d'instructions
contenues entre des signes < et >
Exercice : Faites un clic droit sur une page web > afficher la source
2. Outils bureautiques non spécialisés Web
Pour créer des pages WEB , il n'est pas nécessaire de disposer d'outils très sophistiqués et très chers...
➢ Le Bloc-notes de Windows
Exercice: Créer une page « Bonjour »
Lancer le bloc-notes, puis écrire « Bonjour, voici ma première page web ! ». Enregistrer sous le nom
bonjour.htm – Double-cliquez sur la page web obtenu.
➢ Traitements de texte, feuilles de calcul, diapositives ...
Exercice: Enregistrer un document existant sous forme de page web
Ouvrer le document « Créer des pages web simples ». Enregistrer-le en format html – Double-cliquez sur
la page web obtenu.
➢ Les modules de création de site proposés par les FAI
La plupart des fournisseurs d'accès à Internet proposent à leurs clients une possibilité de créer des pages
personnelles à l'aide d'outils spécifiques.
➢ Les systèmes de publication collaborative
Des applications spécialisées proposent une saisie en ligne des informations. On peut signaler SPIP (système
de publication pour l'internet partagé) logiciel gratuit de création de site dynamique.
Janvier 2006
2/7
Créer une page web simple avec NVU
Pour réaliser des pages web plus sophistiqués , il faut un éditeur HTML, c'est-à-dire un programme qui nous
permet d'éditer nos pages Web en HTML. Nvu permet de créer des pages web facilement selon le principe
du WYSIWYG (What You See Is What You Get : ce que vous voyez est ce qui s’affichera). De plus, c'est un
logiciel libre. Nul besoin de connaître parfaitement le langage HTML ; il vous suffit de connaître les bases de
l'édition avec Nvu pour élaborer très facilement un site Web et mettre en ligne vos pages.
Auteur(s):
Version:
Site:
Lindows Inc.
1,0
http://nvu.com
http://frenchmozilla.sourceforge.net/nvu
Préambule
Créer d’abord un dossier-web qui contiendra tous les fichiers et sous dossiers du site.
Vous créer un répertoire au nom évocateur qui contient tout ce qui doit être hébergé sur le
serveur pour que le site fonctionne. A l'intérieur de ce répertoire, vous créez autant de sousrépertoire que nécessaire (ex: Images, videos, Sons, Cartes, etc...). C'est à l'intérieur de ce
répertoire que vous créerez vos pages web.
Exercice : Créer un dossier web sur le bureau
1. Prise en main du logiciel
➢ La barre d'outils principale
La barre d'outils principale est composée de boutons pour les opérations essentielles les plus utilisées.
- Les ancres sont des points de repère, dans une page HTML, qui pourront être utilisées comme références
- Les liens (internes ou externes) renvoient à une page de votre site ou vers un autre site
- « Images » permet d'insérer une imagedans une page
- « tableau » permet d'insérer un tableau dans une page
- Les formulaires vous permettent d’obtenir des informations de la part des visiteurs de votre site Web.
➢ La barre d'outils de mise en forme
Avec cette barre d'outils, vous pouvez appliquer un format sur un paragraphe, choisir une police, changer la
couleur d'avant et d'arrière-plan, augmenter ou diminuer la taille et mettre en évidence un bloc de texte.
➢ La barre des onglets
Nvu vous permet d'éditer simultanément plusieurs documents en utilisant un onglet différent pour chaque
document ouvert.
➢ La barre d'outils d'affichage
La barre d'outils d'affichage indique la vue actuellement utilisée pour le document courant. Les vues
disponibles sont Normal, Balises HTML, Source et Aperçu.
Janvier 2006
3/7
2. Comment structurer une page ?
On peut y insérer :
- du texte
- du contenu multimédia: images, sons, vidéos
- des liens internes ou externes.
Les tableaux sont la véritable architecture de la page.
Exercice : Créer un tableau contenant des liens selon la page web affiché
3. Pour insérer un tableau :
1. Cliquez pour positionner le curseur à l'endroit où vous voulez que le tableau apparaisse.
2. Cliquez sur le bouton Tableau sur la Barre d'outils. La boîte Insérer un tableau apparaît.
3. Tapez le nombre de lignes et de colonnes que vous voulez.
4. Pour insérer une image :
1. Cliquez pour positionner le curseur à l'endroit où vous voulez que l'image apparaisse.
2. Cliquez sur le bouton Image de la barre d'outils, ou ouvrez le menu Insertion puis choisissez
Image.... Vous verrez alors la boîte de dialogue Propriétés de l'image.
3. Tapez l'emplacement et le nom du fichier d'image, ou cliquez sur Parcourir... pour rechercher un
fichier d'image sur votyre disque dur ou sur le réseau.
5. Créer des liens vers la même page
Pour créer des liens vers la même page, vous devez créer une ancre (une cible d'emplacement), puis créer un
lien qui pointe vers cette ancre.
1. Cliquez pour placer le curseur au début d'une ligne où vous voulez créer une ancre, ou sélectionnez
du texte.
2. Cliquez sur le bouton Ancre ou ouvrez le menu Insertion puis choisissez Ancre. Vous verrez alors la
boîte de dialogue Propriétés de l'ancre.
3. Tapez un nom unique pour l'ancre dans le champ Nom de l'ancre (jusqu'à 30 caractères). Si vous
incluez des espaces, elles seront converties en traits de soulignement ( _ ). Si vous avez sélectionné
du texte lors de l'étape 1, cette boîte contiendra déjà un nom.
4. Cliquez sur OK. Une icône d'ancre apparaîtra dans votre document pour marquer l'emplacement de
l'ancre
Pour créer le lien sur lequel les lecteurs pourront cliquer pour rejoindre l'emplacement de l'ancre :
1. Sélectionnez le texte ou l'image que vous voulez lier à l'ancre.
2. Cliquez sur le bouton Lien ou ouvrez le menu Insertion et choisissez Lien. Vous verrez alors la boîte
de dialogue Propriétés du lien.
• Si vous créez un lien vers une page HTML sur votre ordinateur, cliquez sur Parcourir... pour
le situer.
• Si vous créez un lien vers une ancre (une cible), sélectionnez-la dans la liste des ancres
disponibles de la page.
• Si vous créez un lien vers un niveau de titre (par exemple, Titre 1 - Titre 6), sélectionnez-le
dans la liste des titres disponibles de la page.
3. Cliquez sur OK.
Janvier 2006
4/7
6. Créer des liens vers d'autres pages
Vous pouvez créer des liens de votre page vers des pages de votre ordinateur ou de votre réseau d'entreprise,
ou vers des pages sur Internet.
Pour créer des liens vers une autre page :
1. Cliquez pour placer le curseur à l'endroit où vous voulez créer le lien, ou sélectionnez le texte ou
l'image que vous voulez lier à l'ancre.
2. Cliquez sur le bouton Lien. Vous verrez alors la boîte de dialogue Propriétés du lien.
3. Définissez votre lien :
• Lien texte : Si vous avez sélectionné une image ou du texte avant de cliquer sur le bouton
Lien, le texte sélectionné ou le nom du fichier image apparaîtra ici. Sinon, vous devrez entrer
le texte que vous voulez utiliser pour le lien.
• Emplacement du lien : Tapez le chemin d'accès et le nom de fichier ou l'URL distante à lier.
Si vous n'êtes pas sûr du chemin d'accès et du nom de fichier pour un fichier local, cliquez sur
Parcourir... pour le rechercher sur votre disque dur ou le réseau. Pour les URL distantes, vous
pouvez copier l'URL à partir du champ adresse de votre navigateur. Vous pouvez aussi
sélectionner une ancre ou un titre dans la page que vous voulez lier.
• L'URL est relative à l'emplacement de la page : Si cette option est cochée, Nvu convertit
l'URL pour qu'elle soit relative à l'emplacement de la page. Ceci est particulièrement utile si
vous prévoyez de publier vos pages sur un serveur Web pour que d'autres personnes puissent
les voir. Utiliser des URL relatives vous permet de conserver tous vos fichiers liés au même
emplacement relatif les uns par rapport aux autres, sans tenir compte de leur emplacement sur
votre disque dur ou sur un serveur Web.
Janvier 2006
5/7
Illustrer une page
On peut illustrer une page avec :
Images : Elles sont uniquement aux formats gif / jpg / png, et, de préférence en résolution de 72 dpi, avec
un poids de 50 ko maximum et une taille maximum de 600/400 pixels environ.
Vignettes: Images très réduites et légères d'images existantes.
Gifs animés: Remarquer que les fichiers gif sont très légers bien qu'animés !
Sons: Aux formats wav, mp3 ou mid
Vidéos : Attention, ces fichiers sont toujours volumineux. Pensez à les compresser
Autres documents : tous les autres documents ayant des formats spécifiques (fichiers pdf, swf ...)
Vous n'allez pas créer toutes vos images, vos fonds d'écran et vos animations, et donc, vous devrez vous
fournir ailleurs ? Heureusement, sur le marché et surtout sur le Web (gratuit), vous pouvez vous procurer
toutes sortes d'images, aux différents formats, qui agrémenteront vos pages Web pour le plus grand plaisir de
tous. Attention évidemment de prendre le matériel qui est fourni en libre accès car le copyright existe
évidemment sur le Web !
➢ Créer une Gallerie Photos
Le logiciel freeware Webthumb 2005 vous permettra de créer facilement des photos en miniatures sous
forme d'une gallerie.
http://entreprise.01net.com/windows/Internet/editeur_de_site/fiches/27886.html
➢ Trouver des cliparts
http://www.fraternet.com/graphics/free
➢ Images / Fonds d'écran
http://www.page-web.com/outils/index.htm
➢ Animations
Mix-fx est un logiciel pour créer des textes animés en flash www.mix-fx.com/download.htm
➢ Flèches
http://www.action-webmasters.com/graphisme2.php
Janvier 2006
6/7
Applications pédagogiques
Quelques exemples concrets :
✔
✔
✔
✔
✔
✔
✔
Un compte-rendu de sortie scolaire
Présenter les nouveautés au CDI
Publier une liste de sites
Créer un Webquest
Réaliser un menu pour la cantine
Publier des supports de cours, exercices, corrigés
Présenter son cours en classe avec l'aide d'un vidéoprojecteur
Une fois vos pages créées, vous n'avez plus qu'à les publier
sur un serveur intranet ou internet.
Pour aller plus loin
http://www.framasoft.net/article2656.html
http://perso.wanadoo.fr/jmpetit/dossiers/webmaster/cours01.htm#page1
http://www.gratuitest.com
Janvier 2006
7/7