édition html avec ms word 97

Accueil > Iza > html > Ms Word
Ou Page précédente

Leçon 1 : Créer un document html

Introduction

Cette première leçon peut perraître assez longue, aussi je vous suggère de l'aborder une rubrique à la fois et de passer à la rubrique suivante que lorsque vous maîtrisez bien les notions de la rubrique

Création du fichier html en utilisant un modèle

Word vous permettra de créer facilement vos pages Web sans trop d'efforts. Il est possible d'enregistrer un document au format html mais ce n'est pas la façon la plus avantageuse de procéder. En effet, vous perdriez certaines de vos mises enformes qui sont habituellement disponibles pour les documents Word mais qui ne le sont plus pour les documents html. Les attributs de police sont les plus touchés comme nous le verrons dans la partie

La meilleure méthode consiste à créer un nouveau document à partir des modèles. Cliquez sur Fichier > Nouveau. La boîte de dialogue Nouveau s'ouvre. Pour choisir un modèle de page Web, cliquez sur l'onglet Pages Web.

Pourquoi se casser la tête ? Sélectionnez l'icône Assistant Pages Web.wiz, assurez vous que l'option Document est sélectionnée et cliquez sur OK.

Suivez les étapes : dans la primière boîte de dialogue Assistant Pages Web, choisissez le type de page et cliquez sur Suivant. Dans la seconde boîte de dialogue, vous choisissez le style. Cliquez sur Terminer. Il ne vous reste plus qu'à éditer votre page.

Mais d'abord, enregistrez votre travail. Cliquez sur le bouton Enregistrer de la barre d'outils (ou sur les menus Fichier > Enregistrer sous). La boîte de dialogue Enregistrer au format html s'ouvre.

Vous avez sans doute remarqué le bouton Ouvrir montré sur l'illustration ci-haut. Pour cet exemple, j'ai créé le dossier ma_page. L'illustration montre que ce dossier est sélectionné. C'est pourquoi la boîte de dialogue présente le bouton Ouvrir plutôt que le bouton Enregistrer. Si c'est aussi votre cas, doublecliquez sur l'icône du dossier où vous enregistrerez votre fichier ou sélectionnez-le puis cliquez sur le bouton Ouvrir pour l'ouvrir. Vous devirez retrouver de nouveau le bouton Enregistrer comme on serait en droit de s'attendre dans cette boîte de dialogue. Tapez le nom du fichier dans la zone Nom de fichier et cliquez sur Enregistrer.

Pour ce qui est des noms de fichiers, il existe quelques convensions qu'il est prérérable de respecter. à ce propos, vous pouvez consulter la section sur les noms de fichiers à la page informations complémentaires.

Jetez un oeil aux barres d'outils Standard et Format. Elles se sont adaptées au nouveau type de document. La barre d'outils Format semble perdre quelques plumes alors que la barre d'outils Standard troque quelques outils pour de nouveau. Vous y trouverez en effet quelques nouveaux outils plus adaptés à la création de page Web. Si vous affichez les barres d'outils Dessin et Tableaux (Affichage > Barres d'outils > Dessin - ou - Tableaux et bordures), vous remarquerez que celles-ci se sont aussi adaptées au nouveau type de document.

   Barre d'outils Standard pour un document Word .doc (dessus)
   et pour un document html (dessous).

Note
Vous préferez bâtir votre page de a à Z, choisissez l'icône Nouvelle Page Web dans la boîte de dialogue Nouveau, onglet Pages Web.

Vous êtes maintenant prêt à composer votre page Web !

|   Haut de la page   |   Sommaire   |

---

Afficher un titre dans la barre de titre du navigateur

Prenez l'habitude de toujours donner un titre significatif à vos pages Web. Il y a plusieurs bonnes raisons pour le faire. Je me contenterai ici de n'en mentionner qu'une. Par exemple, un visiteur place un signet (Netscape) sur votre page (ou dans le dossier Favoris de Internet Explorer). Si vous avez pris soin de donner un titre à votre page, c'est ce titre qui apparaîtra comme signet plutôt que le nom du fichier. Un titre significatif sera un meilleur aide-mémoire pour vos visiteurs qu'un nom de fichier (surtout avec les noms de fichiers 8.3).

Pour ajouter un titre à la barre de titres du navigateur :

• Cliquez sur Fichier > Propriétés.
  La boîte de dialogue Propriétés du document s'ouvre.

 
 
 
• Dans la zone Titre, Tapez un titre décrivant brièvement votre page. Pour l'exemple présent, tapez simplement Bienvenue.
• Pour terminer, cliquez sur le bouton OK.
  Ainsi que l'affichera votre navigateur, Word affiche le titre de votre page dans sa barre de titre.

 
 

|   Haut de la page   |   Sommaire   |

---

Ajouter du texte et des titres

Pour ajouter du texte, il vous suffit de taper directement dans l'environnement Word. Chaque fois que vous appuyez sur la touche Entrée, vous créez un nouveau paragraphe.

Il n'est pas nécessaire de créer des retour de ligne manuellement en tapant sur la touche Entrée car à l'instar des logiciels de traitement de texte, les navigateurs créent d'emblée les retours automatiques de lignes. Cependant, il se peut que vous désiriez forcer de tels retours sans créer à chaque fois un nouveau paragraphe. Word met à votre disposition le même outil qu'en traitement de texte normal pour forcer un retour manuel à la ligne. Il y a la manière laborieuse (par les menus et les boîtes de dialogues) et la manière pratique (soit celle que nous verrons ici) :

• Placez le curseur à l'endroit où vous voulez forcer un retour de ligne,
• appuyez sur la combinaisons de touches MAJ + ENTRÉE.
  C'est tout  ! Si vous visualisez le code (nous verrons plus loin comment faire), vous trouverez à l'endroit où vous avez inséré votre « saut de ligne » le code <br>.

Il arrivera un moment où vous voudrez que deux mots ne soient pas séparés par un retour automatique à la ligne. Par exemple, le nom d'une personne, une adresse ou encore séparer les miliers des centaines d'un nombre sans que celui-ci ne risque de s'afficher sur deux lignes. Vous devrez pour cela recourir à l'espace insecable. Il y a encore une fois deux manières d'y arriver : une laborieuse et une facile. Optons d'emblée pour la facilité !

• Placez le curseur à l'endroit où vous voulez insérer un espace insecable ou sélectionnez l'espace à remplacer,
• appuyez sur la combinaison de touches CTRL + MAJ + ESPACE.
  C'est tout ! Si vous visualisez le code, vous trouverez à la place de cet espacement le code &nbsp;.

Pour ajouter un titre :

• Tapez d'abord le texte du titre et appuyez sur la touche Entrée.
• Placez le curseur quelque part sur la ligne de texte : il n'est pas nécessaire de sélectionner tout le titre.
• Dans la zone Style
  
  de la barre d'outils Mise en forme, sélectionnez le style h1 (ou un autre style H...).

Et pourquoi donc h1 ou h4 ?

Et bien, parce que ces noms de styles correspondent aux balises html <h1> et <h4> soit les titres de niveau 1 et de niveau 4. Le code html prévoit six niveaux de titres pour vos pages Web. Pour que ces titres s'affiche correctement dans les navigateurs, choisissez toujours les titres h1 à H6. Vous aurez par la suite la possibilité d'en modifier l'apparence en leur attribuant une nouvelle mise en forme (boîtes de dialogue Police et Paragraphe du menu Format) ou mieux, en modifiant le style (voir le Supplément de la leçon 1). Cependant, ce type de manipulation remplacera le code <h1> par le code de mise en forme correspondant aux changements apportés. Vous en saurez plus à ce sujet dans la section Supplément de la leçon 1.

Vous pouvez visualiser le code html généré par Word en cliquant sur les options de menu Affichage > Code source html. Faites glisser la barre de défilement verticale jusqu'à ce que vous voyiez votre titre. Remarquez la balise ouvrante <h1> et la balise fermante </h1> de chaque côté du titre.

Examinez un peu la page de code sans y apporter de modifications (autrement, vous risqueriez de mauvaises surprises). il n'y a encore que peu de choses sur cette page et pourtant l'affichage correct de la page dans un navigateur nécessite une quantité de code qu'il serait fastidieux de taper entièment à la mitaine. Rassurez vous, il existe bon nombre de logiciels dits WYSIWYG, comme Word, Netscape Composer ou FrontPage, qui eux se tapent le code à votre place !

Pour quitter le mode code source et revenir dans l'environnement Word, cliquez sur le bouton Quitter le code source html.

Voici un aperçu de ce que vous devriez voir dans l'environnement Word :

Voici un aperçu dans un navigateur de la page obtenue.

Bien qu'il y ait une grande similitude entre les deux, vous pouvez remarquer la différence apparente entre les marges de gauches dans le navigateur et dans Word. Prenez toujours soin de vérifier le résultat dans un ou plusieurs navigateurs (Netscape et Internet Explorer, par exemple).

Pour obtenir un aperçu dans un navigateur, cliquez sur le bouton Aperçu de la page Web. La page s'affichera alors dans le navigateur défini par défaut sur votre système.

|   Haut de la page   |   Sommaire   |

---

Mise en forme du texte

Les attributs de police les plus courants sont aussi disponibles pour vos fichiers html. Et Word vous permet de les appliquer de la même manière que dans vos documents pour impression (.DOC).

Pour appliquer l'attribut Gras, italique ou Souligné à du texte déjà saisi :

1. à l'aide de la souris (ou du clavier : MAJ + Flèche droite ou MAJ + Flèche gauche), sélectionnez le texte à mettre en forme.
2. Suivez l'une des deux méthode suivantes :

• Par la barre d'outils Format :
  pour du caractère gras,
  
  pour du caractère italique,
  
  pour du caractère souligné.
   
• Par les touches de raccourcis :
  CTRL + G, pour du caractère gras;
  CTRL + i, pour du caractère italique;
  CTRL + U, pour du caractère souligné.

Note :
Si vous utilisez la version anglaise du logiciel, l'aspect du bouton Gras sera différent : il sera représenté par la lettre b (pour Bold) plutôt que G. Il en va de même pour le raccourci-clavier : vous devrai faire CTRL + b à la place de CTRL + G. Dans la version anglaise, le raccourci (ou commande) CTRL + G ouvre la boîte de dialogue Go to (Aller à). De même, l'aspect du bouton Souligné sera lui aussi différent : s'illustrant avec un U (pour Underline) plutôt qu'un S. Mais voici que le raccourci clavier sera dans les deux cas CTRL + U indépendamment de la langue du logiciel. Le raccourci CTRL + S est réservée pour la commande Fichier > Enregistrer (File > Save) et est standard pour toutes les applications Windows (et même sous certains autres systèmes d'exploitation).

Pour changer la couleur du texte :

1. Sélectionnez le texte à mettre en forme.
2. Déroulez le menu du bouton Couleur de police.
3. Choisissez parmi les 16 couleurs disponibles.il s'agit ici des 16 couleurs de base html.

Note :
Pour obtenir d'autres couleurs pour le texte, vous devez connaître les codes de ces couleurs, puis passer par l'affichage du code html (Affichage > Code source html) et modifier l'attribut de la balise <font color="#code">, où code est le code à modifier. Cette méthode est plus complexe et s'adresse à des utilisateurs avancés qui, de toutes façons, préfèreront sans doute utiliser un véritable éditeur html pour effectuer cette tâche. Sachez simplement que lors d'une utilisation normale, Word est limité à 16 couleurs pour le texte des pages html.

Pour changer la taille du texte :

1. Sélectionnez le texte à mettre en forme.
2. Cliquez sur le bouton Agrandir la police ou sur le bouton Diminuer la police.
   

Notes :

Chaque clic agrandit ou diminue la taille de la police d'une valeur. Sept (7) tailles sont disponibles en html, aussi, lorsque vous tentez d'obtenir une taille plus petite que la taille 1 ou plus grande que la taille 7, une boîte de message vous avertit que vous avez atteint la limite.

Si vous passez par la boîte de dialogue Police, vous verrez que les sept tailles disponibles sont représentées par leurs valeurs équivalentes en points (9, 10, 12, 14...) Dans les faits, ce sont bien les tailles de polices html 1 à 7 qui sont utilisées dans le code.

Par exemple : <font size="4"> pour du 14 points.

Attention :
Les novices un peu curieux seront peut-être tentés (puisque je l'ai suggéré) de consulter le code html dans la fenêtre Code source html. Ne changez rien au code si vous n'êtes pas surs de vous. Vous risqueriez de faire face à de mauvaises surprises.

La boîte de dialogue Police :

Les attributs que nous venons de voir sont tous des attributs de polices de caractères. Vous pouvez les modifier en affichant la boîte de dialogue Police (Format > Police).

Vous pourrez sélectionner directement dans cette boîte de dialogue les différents attributs de caractères que nous avons déja vus ainsi que trois autres, soit les attributs Barré, Exposant et indice dont voici quelques exemples.

Barré : Texte barré

Exposant : 37,2^oC

indice : H₂O

 

Vous pouvez aussi mettre en forme un ou plusieurs paragraphes entiers avec les attributs de police en sélectionnant le ou les paragraphes dont vous désirez modifier l'aspect. Cependant certaines mises en formes ne sont disponibles que pour les paragraphes. C'est ce que nous verrons dans la rubrique Mise en forme des paragraphes

|   Haut de la page   |   Sommaire   |

---

Mise en forme des paragraphes

Comme nous l'avons vu dans la rubrique Ajouter du texte et des titres, le simple fait d'attribuer un style à un paragraphe par la zone de liste Sytle constitue en soi une mise en forme de paragraphe.

Il existe aussi des outils de mise en forme facilement accessible par la barre d'outils Format. Vous pourrez ainsi créer des liste à puces ou des liste à numéros, modifier l'alignement ou encore mettre vos paragraphes en retrait.

Pour créer une liste numéroté ou une liste à puces :

1. Placez le point d'insertion à l'intérieur du paragraphe à modifier ou sélectionnez les paragraphes si vous voulez modifier l'alignement de plusieurs paragraphes consécutifs.
    
2.  Cliquez sur le bouton Numérotation
   ou
    cliquez sur le bouton Puces.
   

Créer une liste en cours de saisie :

Nous venons de formater des paragraphes existants en liste à puces ou à numéros. Vous pouvez tout aussi bien créer vos liste en cours de saisie. Il vous suffit de suivre les instructions suivantes :

1. Appuyez sur la touche Entrée pour créer un nouveau paragraphe.
2. Cliquez sur le bouton Numérotation ou sur le bouton Puces.
   Chaque nouveau paragraphe (touche Entrée) créera une nouvelle ligne à votre liste.
3. À la fin, appuyez encore une dernière fois sur la touche Entrée pour ajouter une ligne vide à la liste et cliquez à nouveau sur le bouton de liste afin de le désactiver ou encore appuyez sur l'espacement arrière (back space).
   Cette dernière ligne vide se transformera automatiquement en un paragraphe normal dans lequel vous pourrez taper du texte.

Pour modifier l'alignement d'un ou de plusieurs paragraphes :

1. Placez le point d'insertion à l'intérieur du paragraphe à modifier ou sélectionnez les paragraphes si vous voulez modifier l'alignement de plusieurs paragraphes consécutifs.
2. Cliquez sur l'un des boutons suivants :
   
   le bouton Aligner à gauche pour un ou des paragraphe(s)
   aligné(s) à la marge de gauche,
   
   le bouton Centré pour un ou des paragraphe(s)
   centré(s) sur la page
   
   ou le bouton Aligner à droite pour un ou des paragraphe(s)
   aligné(s) à la marge de droite.

Par défaut, le texte des paragraphe est aligné à gauche. C'est donc le bouton Aligner à gauche qui est enfoncé. Si vous cliquez à nouveau sur ce bouton, vous le désactiverez et obtiendrez ainsi un paragraphe justifié, autrement dit : aligné à la fois à gauche et à droite.

Pour mettre un ou plusieurs paragraphes en retrait :

1. Placez le point d'insertion à l'intérieur du paragraphe à modifier ou sélectionnez les paragraphes si vous voulez modifier l'alignement de plusieurs paragraphes consécutifs.
2. Cliquez sur l'un des boutons suivants :
   
   le bouton Augmenter le retrait pour augmenter le retrait de la valeur par
   défaut soit 0,5po.
   
   ou le bouton Diminuer le retrait pour diminuer le retrait de la valeur par
   défaut, soit de 0,5po.

Notez que vous ne pourrez pas créer de retraits négatifs ou même de retraits de première ligne comme dans un document de traitement de texte normal. Sauf si...

Pour créer un alinéa :

Il n'existe pas vraiement de manière pratique de créer un alinéa puisqu'il s'agit en fait d'un retrait positif de première ligne. Et comme nous venons de le voir, les retraits de première ligne, bien que vous puissiez les forcer en utilisant la règle (celle ou vous placez normalement les taquets de tabulation), ne seront pas conservés lors de l'enregistrement du fichier. La seule marche à suivre possible est la suivante :

1. Placez le point d'insertion au début du paragraphe.
2. insérez quelques espaces insecables (CTRL + MAJ + ESPACE).
   Prenez soin de toujours mettre le même nombre d'espaces afin que vos alinéas soient uniformes.

L'illustration qui suit montre les différentes mises en formes que vous avez réalisé en étudiant les rubriques Mise en forme du texte et Mise en forme des paragraphes .

|   Haut de la page   |   Sommaire   |

---

Ajouter un lien hypertexte externe

On entend par lien externe tout lien pointant vers une autre page, peu importe le site. Un tel lien peut donc pointer vers une autre page de votre site ou vers une page de n'importe quel autre site.

Créer un lien vers une de vos pages :

1. Sélectionnez le ou les mot(s) qui serviront de lien.
2. Cliquez sur le bouton insérer un lien hypertexte.
   La boîte de dialogue insérer un lien hypertexte s'ouvre.

3. Cliquez sur le bonton Parcourir.
   La boîte de dialogue Lier au fichier (très semblable à la boîte de dialogue Ouvrir) s'ouvre. Cherchez-y la page à lier, sélectionnez-la et cliquez sur OK.
4. L'adresse de votre page s'affiche dans la zone Fichier ou URL.
   Conseil :La meilleure précaution à prendre est de s'assurer que l'option Utiliser un chemin d'accès relatif (en bas à gauche) soit bien cochée. L'adresse complète d'un fichier sur votre disque dur constitue ce que l'on appelle un chemin ou une adresse absolue alors qu'il est préférable d'utiliser les adresses relatives.
   Pour plus d'information consernant les adresses relatives consultez la rubrique Pourquoi les adresses relatives à la page informations complémentaires.
   Vous pouvez aussi, si vous connaissez le nom du fichier, le taper directement dans cette zone sans passer par le bouton Parcourir à condition que toutes vos pages se trouvent dans le même répertoire (dossier).
5. Cliquez sur OK

Créer un lien vers une page d'un autre site

1. Sélectionnez le ou les mot(s) qui serviront de lien.
2. Cliquez sur le bouton insérer un lien hypertexte.
   La boîte de dialogue insérer un lien hypertexte s'ouvre.
3. Cliquez sur le bonton Parcourir.
   La boîte de dialogue Lier au fichier s'ouvre.
4. Dans cette boîte de dialogue, cliquez sur le bouton Rechercher sur le Web. Vous devez être en ligne (branché sur Internet) pour que cela fonctionne.
   
5. L'application bascule automatiquement vers votre navigateur. Naviquez pour trouver la page à lier. Une fois que vous l'avez trouvé, basculez (par la barre des tâches) vers Word.
   La zone Fichier ou URL affiche l'adresse de la page où vous vous trouviez plus tôt dans votre navigateur.
   
   L'illustration montre l'adresse de la section Jeunesse du site de Radio-Canada. Choisissez cette adresse ou une autre adresse de votre choix.
6. Cliquez sur OK.

|   Haut de la page   |   Sommaire   |

---

Ajouter un signet et un lien pointant sur ce signet

Quoi de mieux qu'un exemple pour expliquer ce que sont que les liens internes. Prenez cette page par exemple. Dans le sommaire vous trouvez différents liens dont ceux se trouvant sous le sous-titre sur cette page. Ces liens pointent vers des signets ou si vous préférez des sortes de marqueurs ou repères qui permettent d'effectuer ce genre le liens. C'est une manière très rapide de se déplacer d'un point à un autre sur une page plutôt longue.

Donc, pour créer un lien interne il faut d'abord créer le signet vers lesquel votre lien pointera. Le signet, c'est le marqueur de destination : le mot ou la phrase précise qui se retrouvera dans le haut de la fehêtre de votre navigateur.

Pour créer un signet :

1. Sélectionnez le mot ou la phrase qui servira d'ancre au signet.
2. Choisissez insertion > Signet dans la barre de menus. La boîte de dialogue Signet s'ouvre.
    
3. Tapez un nom de signet dans la zone de sasie prévue à cet effet.
   Attention : choisissez un mot court et significatif, sans espaces ni accents, ni caractères spéciaux.
4. Cliquez sur Ajouter.

Pour créer un lien vers un signet :

1. Sélectionnez le mot ou la phrase qui servira de lien.
2. Cliquez sur le bouton Ajouter un lien hypertexte.
   La boîte de dialogue Ajouter un lien hypertexte s'ouvre.
   
3. Si vous vous rappelez le nom du signet, tapez le directement dans la zone de saisie Emplacement dans le fichier. Sinon, cliquez sur le bouton Paucourir et choisissez parmi les signets listés dans la boîte de dialogue Signet.
4. Cliquez sur OK pour confirmer votre choix dans la boîte de dialogue Signet, et encore sur OK dans la boîte de dialogue insérer un lien hypertexte.

Voilà ! Vous venez de créer un lien pointant vers un signet. Mais je vous entend déjà vous demander : « Oui, mais est-il possible de créer un lien vers un signet qui se trouve sur une autre page ? » Bien sur que oui. Vous connaissez déjà les boîtes de dialogues alors je vous ferai grâce des illustrations. Suivez les instructions ci-dessous :

Pour créer un lien vers un signet d'une autre page :

1. Sélectionnez le mot ou l'expression qui servira de lien.
2. Cliquez sur le bouton Ajouter un lien hypertexte.
3. Dans la boîte de dialogue Ajouter un lien hypertexte, remplissez les champs Fichier ou Url et Emplacement dans le fichier.
   C'est une bonne idée de s'aider des boutons Parcourir.
4. Cliquez sur OK pour confirmer.

|   Haut de la page   |   Sommaire   |

---

Ajouter une ligne horizontale

Vous pouvez séparer les différentes parties de votre docuement avec une ligne horizontale. C'est une manière un peu simpliste mais très efficace de procéder pour créer une séparation claire entre deux sujets.

Word offre aussi la possibilité d'insérer des lignes horizontales un peu plus fantésistes. Il s'agit en fait d'images de format allongé qui sont insérées à la place de la ligne.

Pour insérer une ligne horizontale :

• Cliquez sur le menu insertion et choisissez Ligne Horizontale.
• La boîte de dialogue Ligne horizontale, choisissez le premier style (qui est probablement déjà sélectionné) et cliquez sur OK.

Pour modifier la ligne :

• Cliquez sur la ligne avec le bouton droit de la souris et choisissez Format de la forme.
• Modifiez différentes options et confirmez en cliquant sur OK.

Visualisez le résultat dans le navigateur. Voyez-vous une différence. ? il y a de fortes chances que non. Sélectionnez à nouveau votre ligne et cherchez dans les différents menus si l'option Format de la forme s'y trouve. Vous ne trouverez probablement rien. La raison en est simple. Bien qu'en apparence, vous pouvez modifier la ligne dans les faits une ligne horizontale en html n'est que très peu modifiable. De plus, seul Internet Explorer peut afficher des lignes horizontales de couleur et Word ne génère pas le code approprié pour y arriver.

Note :
Si vous choisissez un autre style de ligne, c'est une image qui sera insérée. Faites en l'essai. Une fois votre ligne graphique insérée, cliquez dessus pour la sélectionner. Vous pourrez voir la barre d'outils image apparaître.

Ceci termine la leçon. Peut-être saviez-vous déjà utiliser Word pour créer vos documents habituels mais craigniez de l'utiliser pour un document html. Vous êtes peut-être heureux(se) d'apprendre que vous n'avez besoin de rien d'autre pour créer votre page « ouèbe » personnelle. Si je suis pour quelque chose dans ces nouvelles découvertes, j'en suis tout à fait heureuse.

Êtes-vous prêt à passer à la leçon suivante ?
À moins que vous ne préfériez passer au supplément à la leçon 1...

|   Haut de la page   |   Sommaire   |

|   Afficher la leçon suivante   |   Table des matières   |