Créer une page Web

Une page HTML
Un langage balisé

Actions à mener :

Du code avec des balises et des liens

écrit directement avec le Bloc-note
ou plus simplement avec Word
dans un fichier texte avec l'extension HTML
qui s'ouvre avec le navigateur
en local ou en ligne

Les pages Web sont au format HTML,
(Hypertext Markup Language = Langage de balises Hypertexte).

Elles peuvent être faites avec de gros programmes professionnels,
mais aussi avec un simple éditeur ou même avec Word.

Un simple fichier texte avec des balises

qu'un navigateur sait ouvrir.

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.

Du code avec des balises et des liens

Un fichier HTML ne contient que
le texte du code formé de balises doubles
qui, une au début et l'autre en fermeture,
délimitent les éléments de la page :

<title> le titre de la page </title>
<body> le corps de la page </body>
<h1> un titre de niveau 1 </h1>
<p> un paragraphe </p>

Le code HTML ne contient pas d'images,
mais seulement les liens vers des images :

<img src= "images/chateau.jpg" >

Un mot, une image ou un élément HTML,
délimité par la balises <a> et </a>,
devient un lien :

Et là, <a href= "http://google.com"> un lien. </a>

Le paramètre href indiquant l'adresse
du fichier (ou de l'élément) à atteindre et à ouvrir.

Quand on clique sur le lien, la page actuelle
est remplacée par la page cible du lien.

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.

Ecrit directement avec le Bloc-note

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…

ou plus simplement avec Word

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.

dans un fichier texte avec l'extension HTML

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...

qui s'ouvre avec le navigateur

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.

en local ou en ligne

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 !