Html avec Word 97

Création de documents interactifs au format Html sous Word 97
Microsoft Word ainsi que certains autres programmes Microsoft Office fournissent des
outils de création de pages Web afin d’en faciliter la création pour les intranets et le
World Wide Web. Si ces outils ne figurent pas sur votre ordinateur, il convient
d’exécuter à nouveau le programme d'installation d’Office 97 afin de les installer en
même temps que les rubriques d'aide traitant de leur utilisation1.
La création de pages Web dans Word permet d'utiliser de nombreuses fonctionnalités
Word courantes, notamment la vérification de l'orthographe et de la grammaire,
l'insertion automatique ainsi que les tableaux. Certaines fonctionnalités, comme les
puces et les lignes graphiques, sont personnalisées afin de faciliter la création de Web.
Les fonctionnalités non prises en charge par le langage HTML ne sont pas disponibles
lors de la création de pages Web.
1
Qu’est-ce qu’une page HTML ?
C’est une page qui ne contient que du texte. Ce texte comprend des « balises » ce sont des codes qui
sont interprétés par les navigateurs pour présenter la page, afficher les textes en gras, positionner
correctement les illustrations. Bien qu’il soit possible (connaissant le langage Html), de créer de toutes
pièces une page Html depuis un éditeur de texte de type bloc-notes, le rôle d’un éditeur html est de
générer ces « balises » d’une manière transparente pour le créateur.
Les pages Html contiennent des « hyperliens ». Ce sont des zones sensibles qui permettent par un
simple clic d’atteindre un autre endroit d’une même page, une autre page, voire de provoquer le
téléchargement d’un fichier ou encore d’activer le logiciel de messagerie électronique pour envoyer un
message à un destinataire (voir infra).
2
En quoi se différencie-t-elle d’une page d’un document Word ?
Largeur : Une page Html doit être visualisée par un navigateur, elle doit donc permettre l’affichage
des informations sur une largeur voisine de celle de l’écran. Ainsi, si l’on est l’heureux possesseur
d’un écran de 21 pouces, on prendra garde de ne pas utiliser toute la largeur de son écran au moment
de la composition, car l’utilisateur final ne possède peut-être qu’un écran de 14 pouces. Alors que le
texte d’une page est recomposé en fonction de la taille de la fenêtre d’affichage du navigateur, les
images souvent déposées dans une cellule de tableau pour faciliter leur positionnement, risquent de
nécessiter l’utilisation de la barre de défilement horizontale pour être visualisées.
Longueur : Il n’y a pas de longueur imposée par un format de page, ainsi un document word de 13
pages donnera lieu à la création d’une seule page Html, ce qui n’est pas toujours souhaitable. Il faut
en effet penser à la durée de chargement d’une page et aux facilités de déplacement et repérages sur
cette page.
Que se passe-t-il au moment de l’enregistrement d’une page comportant des images ?
Cas d’un document Word : Sauf stipulation contraire, les images sont enregistrées dans le
document), le document Word est enregistré sous Ma_page.doc, donc un seul fichier (au sens du
système d’exploitation), contient le texte et les images.
1
Pour installer les fonctionnalités de création de pages Web, utiliser le cédérom d’installation d’Office 97. Office 97 vérifie les
éléments installés sur la machine puis propose d’ajouter/supprimer des composants, activez alors la case à cocher Création de
pages Web (HTML).
Word 97 et le Html – IUFM de Reims – Jacques Bresson
page 1/9
Cas de l’enregistrement au format Html : Une page Html ne contenant que du texte, ce dernier
contient des « appel » à des images dont les fichiers sont distincts de la page, les balises Html
assurant leur positionnement au moment de l’affichage dans un navigateur. Les images ont donc une
existence propre (elles sont renommées automatiquement par Word et sont alors au format Gif ou
JPEG pour diminuer leur taille donc les temps de chargement)
Ma_page.html
Img1.gi
f
Img2.gif
Page Html ne
contenant que
du texte et un
lien vers les
images qui sont
stockées
séparément.
Ma_page.doc
Il convient de veiller à copier tous les fichiers indispensables lors d’un éventuel déplacement des
pages Html ainsi générées.
3
3.1
Création d’une page Html depuis Word
Création d’un nouveau document « page Web »
Fichier
ÄNouveau
ÄOnglet « pages Web »
ÄNouvelle page Web (vierge)
ou Assistant pages Web
(qui permet de créer des pages pré-renseignées en fonction de modèles préétablis)
3.2 Saisie du contenu informationnel de la page
Ø Ne pas choisir une police « exotique », en effet au moment de la visualisation de la page sur le
poste de l’utilisateur final, la police devra être disponible sur la machine de ce dernier (on restera
donc dans les polices « classiques de Windows », pour éviter tout désagrément, lorsque le
navigateur de l’utilisateur final, à défaut de trouver la police demandée affiche la page dans sa
police par défaut (généralement Arial ou Times New Roman).
Ø A la fin d’un paragraphe, lorsque l’on frappe de la touche «<Entrée>, on génère un « interligne »
important avant le paragraphe suivant. ceci est du à une particularité du langage Html ; Si l’on ne
souhaite pas faire apparaître un tel espacement des paragraphes, il est judicieux de provoquer un
retour à la ligne (<maj>+<Entrée>) plutôt qu’une fin de paragraphe.
Si l’on souhaite modifier des espacements non désirés entre des paragraphes déjà saisis, il
convient d’afficher (si ce n’est déjà le cas) les caractères de gestion du texte en cliquant sur le
bouton
de la barre d’outils. Une marque de fin de paragraphe est symbolisée par le
caractère ¶ un retour à la ligne par ↵
Les marques de paragraphes sont alors facilement identifiables et peuvent être supprimées et
remplacées par des sauts de lignes à l’aide du raccourci clavier <maj>+<Entrée>.
Word 97 et le Html – IUFM de Reims – Jacques Bresson
page 2/9
3.3
Choix d’un arrière plan (couleur, trame ou texture) pour la page
Activer la commande :
Format
Ä Arrière-plan
Attention : Le mode d’affichage « lecture à l’écran » ne rend
pas tout à fait compte de ce qui sera vu par un navigateur !
Il conviendra de visualiser la page sous un navigateur pour
en apprécier le rendu.
3.4 Donner un titre à la page
Une « page » Html (qui peut correspondre à plusieurs pages « imprimées » au sens de Word) peut
être identifiée par un titre et recherchée dans les moteurs de recherches par des mots clés. Il est donc
très important de distinguer le nom du fichier (.html) et le titre de la page (ce titre est affiché dans la
barre de titre du navigateur lorsqu’elle est consultée par l’utilisateur final).
un moteur de recherche sur le Web de type Altavista, permet une recherche en plein texte d’un
document (si le robot l’a indexée), mais également une recherche sur le titre seul (saisir dans la
fenêtre de recherche « title :nom du titre de la page »). Par ailleurs dans de nombreux moteurs de
recherche, l’ordre dans lequel sont présentés les résultats d’une recherche dépendent bien souvent
de la présence des mots recherchés dans le titre ou dans les mots-clés de la page ; ainsi une page
contenant un mot recherché dans son titre ou dans ses mots-clés apparaîtra avant une autre page
contenant le même mot recherché seulement à la 25ème ligne du corps du texte.
Il convient donc de renseigner les rubriques titre et mots-clés des propriétés de la page :
Fichier
ÄPropriétés
ÄCliquer en bas de la boîte
dialogue sur
ÄActiver l’onglet « Résumé »
de
Le nom de la page peut ne comporter aucun espace,
aucun accent (ce qui est souhaitable dans la mesure
ou certains serveurs les ignorent), le titre lui peut être
constitué d’un groupe de mots.
3.5
Enregistrer la page (.html)
Word 97 et le Html – IUFM de Reims – Jacques Bresson
page 3/9
3.6 Visualiser la page sous un navigateur
Bien que l’apparence de la page sous Word soit assez conforme à celle qui sera observée depuis un
navigateur, pour constater ce qui sera vu par « l’utilisateur final », il est souhaitable de la visualiser
depuis un navigateur (il serait même prudent de la visualiser depuis des navigateurs de diverses
versions pour voir si les différences d’affichage sont acceptables, rappelons-nous que le but est d’être
vu et lu par le plus grand nombre d’internautes).
Le bouton
dans la barre d’outils « standard » permet de provoquer l’affichage de la page Html
générée dans le navigateur par défaut.
4
Transformation d’un document Word traditionnel en document Html
4.1
Ouvrir sous Word le document (.doc) à transformer en Html
4.2 Choisir la police et le corps des caractères
(Attention aux polices utilisées, voir à ce sujet le paragraphe 3.2)
4.3
§
§
Enregistrer la page au format Html
au format Word (extension de fichier doc) pour pouvoir plus
facilement la retravailler en cas de modifications et d’ajouts
puis au format Html (extension de fichier H tml) pour pouvoir la
visualiser à l’aide d’un navigateur.
4.4 Visualisation de la page sous un navigateur
Après enregistrement au format Html, Word ouvre le document Html généré
et propose un nouveau bouton dans la barre d’outils « standard »
Cette icône permet de provoquer l’affichage de la page Html générée dans le navigateur par défaut.
On peut constater que les marges du document Word ont disparu, ce qui est une bonne chose
compte tenu de la taille des écrans de visualisation. Cependant l’interlignage des paragraphes n’est
pas conforme à l’original. C’est qu’en fait le langage Html insère l’équivalent des « espaces après »
que l’on gère habituellement grâce à la commande Format de paragraphe dans Word (pour y
remédier, voir supra le chapitre « modification des espacements entre les paragraphes »).
4.5 Modification des espacements entre les paragraphes
Il est possible de remanier manuellement (et donc ponctuellement) le document pour éviter les
interlignes trop grands entre deux paragraphes. Il convient d’afficher (si ce n’est déjà le cas) les
caractères de gestion du texte en cliquant sur le bouton
de la barre d’outils.
Les marques de paragraphes sont alors facilement identifiables et peuvent être supprimées et
remplacées par des sauts de lignes par un raccourci clavier (<maj>+<Entrée>). Une marque de fin de
paragraphe est symbolisée par le caractère ¶ un retour à la ligne par ↵
Word 97 et le Html – IUFM de Reims – Jacques Bresson
page 4/9
Une procédure de « recherche
/ remplacement » permet de
remplacer, (à l’aide de la
commande « Edition
Remplacer » de Word), les
marques de fin de
paragraphes par des marques
de saut de ligne.
4.6
5
Enregistrer le document .Html modifié
Le positionnement précis des images dans une page Html
Il est possible, (commande Image du menu Insertion), d’insérer une image présente sur le disque dur,
un clipart depuis le cédérom d’Office 97 etc. Mais le positionnement précis des images en Html
impose certaines contraintes. D’où la nécessité de préciser d’abord les deux modes de
positionnement des images sous Word avant d’aborder leur placement dans une page Html.
5.1 Le positionnement des images dans Word : Image caractère ou image flottante ?
Dans un document Word l’image peut être insérée de deux manières différentes :
•
Soit en tant que caractère (l’image est alors
placée comme un caractère sur la ligne de
base où sont disposés les autres caractères,
elle est dite « en place »).
•
Soit sur la couche dessin du document, elle peut alors être déplacée à volonté
elle est dite « flottante ». C’est l’option « Dissocier du texte » qui permet
d’obtenir cette deuxième solution. Cette option peut être activée (par défaut) ou
désactivée depuis la boîte de dialogue « Insertion Image » « A partir d’un
fichier ».
Par défaut, Word insère les images importées
sous la forme d'images flottantes, c'est-à-dire
d'images placées sur une couche de dessin, ce
qui permet de les positionner avec précision sur
la page ou de les placer au-dessus ou en
dessous du texte ou des autres dessins.
5.2
Le positionnement des images dans les pages Html
Hormis les cas où l’image est « mise en vedette » (pas de texte à gauche et à droite de l’image), une
image ne pourra être positionnée avec précision par rapport à du texte, que si elle est insérée dans
une cellule d’un tableau. Pour ce faire elle doit être considérée comme un caractère, c’est à dire
qu’elle doit être une image « en place » (voir supra). Au moment de l’insertion, il faudra donc décocher
l’option « dissocier du texte » pour pouvoir la positionner dans une cellule de tableau.
Remarque : Si une image est déjà dans le document, pour remplacer une image flottante par une
image « en place », à savoir une image placée directement dans le texte à l'emplacement du point
d'insertion, sélectionnez l'image, puis cliquez dans le menu Format sur Objet. Sous l'onglet Position,
désactivez la case à cocher Dissocier du texte.
Word 97 et le Html – IUFM de Reims – Jacques Bresson
page 5/9
5.3 Modification de l’aspect des images
Dès lors qu’elle est sélectionnée, une image peut toujours être redimensionnée en déplaçant ses
poignées ou par l’intermédiaire de la commande Format Image -> taille( ou menu contextuel par clicdroit)
Si une partie de l’image doit être supprimée, l’outil
permet de “découper” l’image. En fait l’image
n’est pas découpée (et continue à peser autant en terme d’encombrement sur le disque), c’est
simplement la fenêtre de visualisation de l’image qui est réduite.
La barre d’outils Image, visible dès lors qu’une image est sélectionnée (on peut en demander
l’affichage par la commande « Barre d’outils Image » du menu « Affichage ») permet également de
modifier la luminosité, le contraste, de rendre une couleur transparente etc.
On pourra visualiser les différents outils disponibles en « stationnant » quelques instants sur un outil
avec le pointeur de la souris pour voir s’afficher les bulles d’aide.
Remarque : l’habillage d’image est inopérant en Html.
6
La mise en place des hyperliens
6.1 Liens entre différentes pages Html
Un hyperlien est constitué par une zone sensible créée à partir d’une sélection de texte (le texte
apparaît en bleu et souligné) ou d’une image qui permet par un simple clic (le pointeur de la souris
prend l’apparence d’une main) d’atteindre une autre page html stockée localement ou une page
présente sur Internet (dès lors que l’ordinateur y est connecté)
Création d’un lien
1. Sélectionner le texte
support du lien
2. Activer la commande « Lien
hypertexte » du menu
insertion ou
barre d’outils.
Saisir le nom de la page de
destination pour le lien ou la
rechercher avec le bouton parcourir
de la
Cette option permet de ne retenir que
la partie indispensable du chemin qui
mène à la page de destination depuis
la page qui contient le lien (si les deux
pages sont dans le m ême répertoire,
le chemin sera omis, ce qui permet
aux liens de trouver leur «cible »
m ême
après
déplacement
de
l’ensemble des pages dans un autre
répertoire).
Comment supprimer un lien ?
1. Sélectionner le texte du lien avec le pointeur texte
2. Activer l’outil de liaison
pour ouvrir la boîte de dialogue “modifier le lien hypertexte”.
(les opérations 1 et 2 peuvent être réalisées également par un clic
droit donnant accès à la commande “modifier le lien hypertexte” du
menu contextuel)
3. Cliquer sur le bouton “Supprimer le lien” figurant en bas de la
boîte de dialogue.
Word 97 et le Html – IUFM de Reims – Jacques Bresson
page 6/9
6.2
Liens vers un endroit précis d’une page
A l’instar d’un document Word, une page Html peut contenir des signets.
Les signets sont des repères électroniques qui sont associés à une partie de texte ou une image (on
peut visualiser l’information associée au signet par la commande « Atteindre » du menu « Edition » ou
grâce à un lien hypertexte.
La mise en place de signets sera utilisée dans
une même page notamment pour permettre un
va et vient entre le sommaire de la page et les
différentes parties de celle-ci. Les signets
seront également utilisés pour atteindre depuis
le texte d’une page donnée, tel ou tel élément
d’un glossaire situé sur une autre page.
6.2.1 Mise en place d’un signet
1. Sélectionner l’information devant
constituer la cible (texte ou image)
2. Activer la commande « Signet » du
menu « Insérer »
3. Renseigner la boîte de dialogue en
donnant un nom évocateur pour ce
signet.
Attention, un nom de signet ne peut contenir
d’espace sous Word.
6.2.2
Créer le lien qui mène vers le signet
Activer la commande « Lien hypertexte » du menu insertion ou
de la barre d’outils.
Nom de la page html à atteindre,
si différente de la page en cours
Utiliser «Parcourir » pour voir
s’afficher la liste des signets
associés à la page html
précédemment choisie, puis
choisir le signet souhaité
On prendra
mettre en
signets plus
choisis à
exemple !
soin bien entendu de
place des noms de
évocateurs que ceux-ci
titre de (mauvais)
Il est préférable de tester les liens vers des signets sous un navigateur, pour constater le
positionnement exact de la zone de la page demandée dans la fenêtre du navigateur.
Word 97 et le Html – IUFM de Reims – Jacques Bresson
page 7/9
6.3
Liens vers une page située sur Internet
Activer la commande « Lien hypertexte » du menu insertion ou
de la barre d’outils.
Il suffit de saisir l’URL (Uniform Ressource Locator, adresse de la page sur Internet.
6.4
Liens vers des adresses électroniques
Activer la commande « Lien hypertexte » du menu insertion ou
Faire précéder l’adresse électronique de la mention “mailto:”
de la barre d’outils.
Remarque : Il ne s’agit pas à proprement parler d’un lien vers une adresse électronique, mais d’un
lien qui, lorsqu’il est activé par un clic de souris, déclenche l’ouverture du logiciel de messagerie avec
création d’un nouveau message comportant l’adresse du destinataire telle qu’elle figure dans le lien
(sans mailto :). Ceci évite les erreurs de saisie dans les logiciels de messagerie qui conduiraient à une
erreur d’acheminement du message.
7
Assistant HTML pour Word (versions 2 à 7)
Cet outil est distribué par Microsoft sur le Cédérom Solutions pour Internet ou téléchargeable depuis
le site Microsoft. Une fois l'installation automatique réalisée, le menu insertion de Word offre la
possibilité d'insérer un lien hypertexte, et il est possible de tester les liaisons en naviguant sur les
documents. L'icône
de la barre d'outils permet d'accéder au mode navigation, sans quitter Word.
Une nouvelle barre d'outils est affichée, elle permet alors la navigation ou le retour en mode édition :
L'icône
permet de revenir en mode édition (le mode habituel de travail sous Word).
Word 97 et le Html – IUFM de Reims – Jacques Bresson
page 8/9
Table des matières
1
Qu’est-ce qu’une page HTML ? ................................................................................................ 1
2
En quoi se différencie-t-elle d’une page d’un document Word ?............................................ 1
3
Création d’une page Html depuis Word ................................................................................... 2
4
5
6
3.1
Création d’un nouveau document « page Web » .................................................................. 2
3.2
Saisie du contenu informationnel de la page......................................................................... 2
3.3
Choix d’un arrière plan (couleur, trame ou texture) pour la page ........................................... 3
3.4
Donner un titre à la page ...................................................................................................... 3
3.5
Enregistrer la page (.html) .................................................................................................... 3
3.6
Visualiser la page sous un navigateur................................................................................... 4
Transformation d’un document Word traditionnel en document Html ................................... 4
4.1
Ouvrir sous Word le document (.doc) à transformer en Html ................................................. 4
4.2
Choisir la police et le corps des caractères ........................................................................... 4
4.3
Enregistrer la page au format Html ....................................................................................... 4
4.4
Visualisation de la page sous un navigateur ......................................................................... 4
4.5
Modification des espacements entre les paragraphes ........................................................... 4
4.6
Enregistrer le document .Html modifié .................................................................................. 5
Le positionnement précis des images dans une page Html ................................................... 5
5.1
Le positionnement des images dans Word : Image caractère ou image flottante ?................ 5
5.2
Le positionnement des images dans les pages Html............................................................. 5
5.3
Modification de l’aspect des images...................................................................................... 6
La mise en place des hyperliens .............................................................................................. 6
6.1
Liens entre différentes pages Html ....................................................................................... 6
6.2
Liens vers un endroit précis d’une page................................................................................ 7
6.2.1
Mise en place d’un signet ........................................................................................... 7
6.2.2
Créer le lien qui mène vers le signet .......................................................................... 7
6.3
Liens vers une page située sur Internet ................................................................................ 8
6.4
7
Liens vers des adresses électroniques ................................................................................. 8
Assistant HTML pour Word (versions 2 à 7) ............................................................................ 8
Word 97 et le Html – IUFM de Reims – Jacques Bresson
page 9/9