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.

Quelques points fondamentaux pour réussir à créer des pages HTML avec Word :

· Affichage Web : (Affichage > web)
Vérifiez dès le départ que vous travaillez avec l'affichage Web pour que les dispositions et les mises en page correspondent
à ce que vous obtiendrez avec le fichier HTML tel qu'il s'affichera dans le navigateur.

· Lier les images : (Insertion > Images)
Quand vous ajoutez une image, assurez-vous de ne pas insérer mais Lier au fichier. En effet, au moment de l'affichage du fichier HTM, l'image est appelée depuis son emplacement par son lien.
A la différence d'un fichier Word 'normal', elle ne peut pas y être incluse ou insérée. Déroulez l'onglet marqué Insérer

· Page web filtrée : (Enregistrer sous > Type : Page web filtrée)
A chaque fois que vous enregistrez votre page HTML, vérifiez que vous enregistrez bien votre fichier avec le format du Type : Page web fliltrée.
Sinon, avec chaque fichier dans 'son' format, Word crée un dossier spécial pour chaque page où il conserve les balises propres à OfficeSES propres données/marques.
Vous êtes sûr d'avoir enregistré au bon format (page web filtrée) quand, paradoxalement, Word vous met en garde : "Si vous enregistrez dans ce format...". Répondez OUI.

· Utiliser des tableaux : (Insertion > Tableau)
Pour simplifier et sécuriser la mise en page, la plupart des éléments (texte et images) peuvent être placés dans les cellules d'un tableau.
Suivant les besoins, on pourra afficher ou non les bordures des cellules et utiliser un fond de couleur (Accueil > Bordure> Bordure et trame > Appliquer à > Cellule).
ge web filtrée

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 HTML 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 HTML (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 HTML (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,
on peut rester dans le même cadre (le même onglet),
mais il est souvent préférable de Définir un cadre de destination
différent de la page actuelle (nouvel onglet),
et on choisira d'ouvrir dans une Nouvelle fenêtre
pour garder la page actuelle affichée derrière son onglet.

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 HTML dans le dossier de base.

Pour garder absolument un format HTML 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 HTML 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 HTML 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 HTML 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 !