Créer une page Web

Créer une page

Actions à mener :

Au départ, un fichier standard dans lequel vous allez
Créer un lien qui ouvrira un document dans le
Cadre de destination
Après, vous pouvez
Mettre en forme , puis
Enregistrer au format HTM avant de
Tester la page web en local.

Les pages Web sont au format HTM (et aussi HTML, PHP, etc..).

Pour les créer, les professionnels utilisent des programmes spécifiques.

Mais vous pouvez aussi réaliser des pages HTM simples avec Word.

Vous pouvez même utiliser Excel, un peu moins souple pour la mise en page,
ou d'autres traitements de texte comme LibreOffice.

L'objectif est d'obtenir des pages simples et fonctionnelles,
enregistrées dans un format HTM simple qui évite toute création
de fichiers annexes supplémentaires inutiles en ligne.

Le concours est ouvert.

Créer une page web avec Word étape par étape

Toutes ces pages ont été créées avec Word 2013,
et enregistrées au format page web filtrée (htm, html).

Si vous utilisez un autre traitement de texte ou une version plus ancienne de Word,
vous devrez sans doute chercher pour adapter la procédure décrite ici.

Au départ, un fichier standard

Partez d'une simple page de texte
qui indique les éléments de la page finale
et leur position approximative.
Vous pourrez ensuite vous concentrer sur la mise en forme.

Organisation : Les fichiers HTM seront enregistrés
dans le dossier de base de mon site
sur l'ordinateur (en local)

Vous pouvez bien sûr ajouter des images.

Suggestion d'organisation :
Allez à la chasse aux images et classez les séparément
selon leur usage et leur taille.

L'image est choisie dans le sous-dossier d'images
où sont regroupées toutes les images utilisées sur les pages.

Suggestion d'organisation :
Classez séparément les (grandes) images dans un dossier /images
et les icônes et petites images dans un dossier /img

Le point important pour les images :
Ne pas les Insérer mais les Lier au fichier

A chaque fois que vous placez une image sur une page avec Word,
pensez à ne pas Insérer (par défaut) mais à dérouler les options
pour bien choisir de Lier au fichier

Avec le format HTM, l'image n'est pas dans le texte,
mais à sa place, un lien qui appellera l'image.

Certains traitements de texte créent automatiquement le lien
quand on enregistre au format HTM ou HTML.
Mais c'est un point à garder à l'esprit pour éviter de créer
des fichiers annexes inutiles et des pages incompatibles.

Vous pouvez utiliser la plupart des options de mise en forme pour les images.

Il faudra simplement tester le résultat dans le navigateur.

Par principe, pour privilégier la clarté,
évitez les effets inutiles
qui peuvent nuire à la clarté de la page.

Créer un lien

Pour créer un lien sur du texte,
sélectionnez le texte qui servira de lien
et ensuite choisissez le fichier qui devra s'afficher
quand le visiteur cliquera sur le lien.

Ici dans le menu qui doit mener à différentes pages,
on a sélectionné le texte annonçant la page 1.

La fonction Insérer un lien hypertexte, permet de choisir la cible.

Si on ne précise rien, la page HTM (ou un autre type de fichier)
s'affichera à la place de la page actuelle, dans le même cadre.

Ici, le lien ouvrira la page HTM (page_1.htm)
dans la fenêtre actuelle.

Continuez à créer tous les liens de la page,
en vous appuyant sur les éléments du texte initial,
que vous avez préparé comme ébauche de la page.

Ici, la deuxième page sera appelée par le deuxième lien du menu,
etc…

Cadre de destination

Mais quand le lien appelle un document qu'on veut afficher,
il est souvent préférable de Définir un cadre de destination
différent de la page actuelle,
et on choisira d'ouvrir dans une Nouvelle fenêtre
pour garder la page actuelle affichée.

Ici, un document PDF s'ouvrira dans un nouvel onglet.
Il suffira de refermer l'onglet pour retrouver notre page.

Après avoir défini les paramètres du lien
comme le Cadre de destination
ou une indication (une Info-bulle),
qui s'affiche au survol du lien,

vous pouvez validez la création du lien.

Définir le Cadre de destination d'un lien dans une Nouvelle fenêtre
se justifie également pour un lien vers un fichier audio ou vidéo.

Une nouvelle page avec son onglet, affichera (ou jouera) le contenu
du fichier audio, vidéo ou PDF avec des contrôles correspondants.
Vous pourrez refermer l'onglet pour retrouver la page actuelle.
Pour une vidéo également, ouvrir dans une nouvelle fenêtre
permet d'avoir les contrôles sous la vidéo et de retrouver
la page appelante en fermant l'onglet.

Mettre en forme

Quand tous les liens sont créés et les images (liées) placées sur la page,
vous pouvez peut passer à la mise en forme
en utilisant les possibilités de Word.

Ne sacrifiez pas l'ergonomie aux effets esthétiques.
Les pages doivent rester simples.

Vous pouvez

■ utiliser les retraits et les alignements de paragraphes.

■ utiliser uniquement des polices courantes
pour que le rendu de la page reste le même chez tous les visiteurs,

■ insérer un tableau pour disposer les éléments sur la page.
que vous pourrez laisser Sans bordures
pour que l'affichage reste léger.

■ utiliser une feuille de style, que vous pouvez personnaliser,
pour que toutes vos pages gardent un style homogène.

■ etc...

Enregistrer au format HTM

Et quand tout est en place,
enregistrez votre fichier HTM dans le dossier de base.

Pour garder absolument un format HTM simple,
vous n'allez pas simplement Enregistrer
dans le format standard de Word.

Vous allez Enregistrer sous le format le mieux adapté
pour donner un type de fichier HTM simple.

Avec Word, au moment d'Enregistrer,
ce format se trouve en déroulant Type
et en choisissant le type de fichier :

Page web, filtrée (*.htm, *.html)

Avec d'autres programmes, vous devrez sans doute
procéder à quelques essais
pour décider du type/format à utiliser.
L'extension du fichier devra rester HTM ou HTML

Quand tout est vérifié,

cliquez sur Enregistrer

Si vous vous êtes trompé et que vous n'avez pas utilisé
le type de fichier Page web, filtrée (*.htm, *.html),
des fichiers spéciaux ont été créés dans un dossier annexe.
Recommencez.
Rechargez le fichier sous Word
et enregistrez-le à nouveau avec le type qui convient.

Tester la page web

Vous pouvez maintenant refermer Word.

Quand vous voudrez faire des modifications,
vous pourrez rouvrir le fichier HTM avec un clic droit.

Dans le menu contextuel, (descendre sur) Ouvrir avec
(pour trouver) Word (dans la liste)
ou (rechercher pour) Choisir une autre application

Votre fichier HTM est maintenant sur votre ordinateur,
dans le dossier de base de votre site en local.

Avec un double clic, vous allez l'ouvrir
dans le navigateur internet.

Le résultat de votre travail :

Une page web qui s'ouvre en local,
où vous pouvez vérifier,
que tout s'affiche bien comme prévu
et que tous les liens fonctionnent.

Le PDF s'ouvre bien dans une nouvelle page
que vous pouvez refermer avec l'onglet
pour retrouver votre page.

A l'affichage d'un document PDF,
dans le haut de la page, à droite,
les icônes permettent de
- basculer en Présentation (la touche [Esc] pour sortir),
- Imprimer le document,
- le télécharger

Le lien sur le fichier audio a également a été créé
pour s'ouvrir dans une nouvelle page.

Cela permettra là aussi, de refermer l'onglet après l'écoute.

A l'affichage d'un document audio,
un clic droit sur la barre de défilement,
ouvre un menu contextuel pour :
- arrêter, modifier la lecture
- enregistrer le fichier audio
- et d'autres fonctions utiles.
Avec Firefox, par exemple, vous pouvez
changer la Vitesse de lecture
ou Lire en boucle (pour répéter).

Comme tous les liens sur des médias,
cliquer sur le lien sur le fichier vidéo ouvre un nouvel onglet.

Là encore, il faudra refermer l'onglet de cette nouvelle page,
pour revenir à la page précédente,
dont l' onglet est resté apparent.

Sous la fenêtre de lecture de la vidéo, une barre permet
- d'avancer ou reculer
- de régler le son
- de passer en plein écran (Touche [Esc] pour sortir)
- et d'autres fonctions selon le navigateur.
Avec Firefox, par exemple, le clic droit permet
de changer la Vitesse de lecture,
pour voir le ralenti.

Bon, maintenant, on peut remonter

Au travail !