Syllabus : Comment rédiger des textes en format de pages Web

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"></o:p>Comment rédiger des textes en format de pages Web

<o:p></o:p>Par Charles de Mestral et Martin Godon, Cégep du Vieux-Montréal. <o:p></o:p>

<o:p></o:p>Les pages Web - Créer une page Web - Traiter une image - Insérer une image - Insérer un lien vers un signet - Relier ensemble des pages Web - Modifier le style des liens hypertextes - Arrière-plan et caractères – Vérifier la présentation du texte - Transformer vos pages en site Web dans l'Internet<o:p></o:p>

Les pages Web

À l'origine, le code HTML été développé comme un code universel garantissant l'accessibilité générale de l'Internet. Les pages Web permettent l'insertion de documents en divers formats (ex: graphiques, sonores, audiovisuels…) et constituent ainsi un mode de montage multimédia élémentaire. Il faut noter que l'ouverture des documents en d'autres formats est impossible si l'usager ne dispose pas des logiciels requis. De plus, il ne faut pas placer des documents en qualité trop élevée si on veut assurer un téléchargement rapide. Bien sûr, la diversité des formats et la vitesse de transmission sont en évolution constante.

<o:p></o:p>Les opérations pour créer une page Web<o:p></o:p>

Ouvrez le logiciel Microsoft Word.<o:p></o:p> Si une colonne de menu apparaît à la droite de votre écran sous la rubrique Créer, sélectionnez le menu Page Web vide. Il faut retenir que beaucoup d'autres logiciels de création de pages Web existent, mais Word a l'avantage d'être très généralement disponible pour le débutant.

Lors de l’enregistrement, le document va automatiquement s’enregistrer sous le format de page Web (en code HTML).<o:p></o:p> Si aucune colonne de menu n’apparaît à la droite de l’écran lorsque vous ouvrez Word, vous devez aller sous la rubrique Fichier, en haut à gauche de l’écran, puis sous le menu Enregistrer en tant que page Web ou encore sous le menu Enregistrer sous.<o:p></o:p>

Au bas de la fenêtre qui apparaît alors, vous voyez deux rubriques: la rubrique Nom de fichier et la rubrique Type de fichier. Il faut vous assurer que dans la case Type de fichier est écrit Page Web ou encore .htm (ou .html).

Attention: Il est fortement conseillé, au début de l'enregistrement, de créer et de nommer un nouveau dossier et ensuite d'y enregistrer tous les éléments de votre travail: pages, images, etc. Au moment de faire Enregistrer sous, on peut créer un nouveau dossier en cliquant sur l'icône Créer un dossier apparaissant en haut de la fenêtre Enregistrer sous.

<o:p></o:p>Une fois que vous avez enregistré votre document dans le nouveau dossier, vous pouvez vous assurer qu’il est dans le bon format ou type de fichier en regardant le titre qui apparaît sur la bande bleue, tout en haut de l’écran, à gauche. Si les lettres qui apparaissent après le point sont htm ou html, vous avez réussi l’opération. Vous avez une autre option : en allant dans le dossier où vous avez enregistré votre document, vous pouvez voir le titre qui apparaît. Si le titre que vous avez donné à votre document est suivi du suffixe .htm ou .html vous avez réussi. <o:p></o:p>Veuillez noter que lorsque vous avez enregistré un document de type .htm (ou .html) une première fois, lors des enregistrements subséquents votre document s’enregistrera automatiquement comme Page Web à moins que vous ne donniez à l’ordinateur une consigne différente. Vous n’avez donc plus à vous inquiéter à ce sujet lorsque vous avez réussi une première fois.

Note: Quand vous aurez maîtrisé les principes élémentaires de création de pages Web, il sera possible d'employer des formats de pages plus complexes (ex: avec colonnes, barres de menus, etc.) Divers formats sont disponibles dans Word ou d'autres logiciels.

<o:p></o:p>Retour en haut de la page <o:p></o:p>

<o:p></o:p>Les opérations pour traiter une image<o:p></o:p>

Avec Adobe Photoshop,<o:p></o:p> une fois que le logiciel est lancé, vous sélectionnez l’opération Ouvrir dans le menu Fichier. Dans la boîte de dialogue, vous choisissez l’image appropriée. Lorsque l’image est ouverte, il faut s’assurer qu’elle est enregistrée en format .jpg (ou .jpeg ou encore .jpe). Si l’image sélectionnée est dans un autre format, vous devez alors aller dans le menu Fichier et sélectionner Enregistrer pour le Web. À ce moment, une série de menus apparaît à votre droite. L’une des deux petites flèches vous permet de sélectionner le format .jpg et, juste au-dessous, la seconde vous permet de sélectionner la qualité de l’image. Alternativement, on peut choisir Enregistrer sous en choisissant .jpg comme Type de fichier. En acceptant d'enregistrer, une fenêtre s'ouvre qui vous permet de réduire la qualité de l'image au minimum ou le niveau dit compact.

C'est dans le but de s'assurer que l’image n'occupe pas trop d’espace mémoire et qu’elle s’ouvre rapidement que l'on vous suggère de sélectionner la moins bonne qualité (bas ou compact). Si vous le jugez nécessaire, vous pouvez transformer votre image à l’aide des nombreux filtres qui s’offrent à vous. Une fois que vous avez terminé de traiter votre image, vous pouvez fermer le logiciel Photoshop pour passer à une autre opération.

Attention: Il faut enregistrer les images dans le dossier de travail du site Web avant de les insérer sur une page Web.

<o:p></o:p>Retour en haut de la page<o:p></o:p>

<o:p></o:p>Les opérations pour insérer une image dans votre page Web<o:p></o:p>

Lorsque votre texte est terminé, vous placez le curseur à l’endroit qui vous semble le plus approprié pour insérer votre image. Vous allez ensuite dans le menu Insertion, vous glissez la souris sur la rubrique Image, puis sur la commande À partir du fichier. Une boîte de dialogue apparaît.

Vous sélectionnez votre image, puis vous cliquez sur le bouton Insérer. L’image devrait apparaître sur votre page Web.

Attention: avant d'être insérées à la page, les images doivent être (1) traitées au goût avec un logiciel graphique et (2) enregistrées dans le même dossier que la page Web-destination en qualité Internet (c'est-à-dire en format, ex: .jpg, et qualité légers afin de faciliter la transmission rapide par le Web).

Alternativement, les fichiers graphiques ou autres insérés sur une page, ex: nomdepage.htm, peuvent être situés dans un dossier intitulé nomdepage_fichiers qui est enregistré dans le dossier de travail général. Par exemple, quand on enregistre une page Web dans l'Internet avec Internet Explorer, les images peuvent se trouver automatiquement dans un tel dossier.

Vous pouvez modifier la taille de l’image en cliquant là-dessus une fois et en déplaçant les petits carrés noirs qui apparaissent. Bien entendu, vous pouvez également déplacer votre image en cliquant soit sur Aligné à gauche, soit sur Aligné à droite, ou encore sur Au centre.

<o:p></o:p>L'insertion de documents sonores ou audiovisuels

Il est possible d'insérer des éléments sonores et audiovisuels sur une page Web. Ces insertions nécessitent diverses précisions selon les formats utilisés que l'on ne peut pas fournir ici.

<o:p></o:p><o:p></o:p>Retour en haut de la page<o:p></o:p>

Pour insérer un lien vers un signet<o:p></o:p>

Lorsque votre texte est terminé, vous pouvez insérer dans votre page Web des liens vers des signets qui permettent au lecteur de se déplacer plus facilement à l’intérieur de votre page.

Pour commencer, vous sélectionnez l’endroit où votre lien doit se rendre, donc le point d’arrivée. Dans le menu Insertion, vous cliquez sur la rubrique Signet… Vous donnez à votre signet un nom approprié, puis vous cliquez sur le bouton Ajouter.

L’opération suivante consiste à choisir le point de départ du lien, c’est-à-dire là où apparaît le mot ou l'image qui va nous conduire au point d’arrivée. Lorsque votre curseur est à votre point de départ, vous sélectionnez le menu Insertion et vous allez sous la rubrique Lien hypertexte. Dans la boîte de dialogue qui apparaît, vous cliquez sur le bouton Signet (ou bien vous cliquez sur Parcourir). Vous sélectionnez le signet approprié, puis vous cliquez sur le bouton OK. Cette opération nous ramène à la première boîte de dialogue. Vous cliquez à nouveau sur OK et le tour est joué.

<o:p></o:p>Prenez note que lorsqu’un lien vers un signet est créé, il peut être inséré à plusieurs endroits différents. Par exemple, pour la présente page, on n’a créé qu’un seul signet pour la fonction Retour en haut de la page, mais on l’a inséré à plusieurs endroits différents. Ainsi, un même signet peut servir plus d’une fois.

<o:p></o:p>Retour en haut de la page<o:p></o:p>

<o:p></o:p>Pour relier plusieurs pages Web<o:p></o:p>

À cette fin, <o:p></o:p>les opérations sont relativement simples. Premièrement, vous ouvrez WORD. Ensuite, créez une nouvelle page Web vide que vous enregistrez dans le même dossier que la page principale sur votre disquette (ou bien dans votre dossier sur votre espace disque). Il suffit ensuite de recommencer la même opération pour avoir le nombre de pages dont vous avez besoin.

Au moment de l'enregistrement d'une nouvelle page, nommez-la avec selon son contenu éventuel. Important: Il est recommandé de donner des noms simples aux pages Web (sans majuscules, sans accents français, sans espaces, sans ponctuation…).

<o:p></o:p><o:p></o:p><o:p></o:p>Pour insérer des liens qui permettent d'aller d'une page à l'autre, vous allez dans Insertion, vous choisissez Liens hypertextes et vous sélectionnez le nom du Fichier identifiant la page vers laquelle votre lien doit nous conduire.

On peut aussi écrire soi-même le nom de fichier exact de la page vers laquelle on désire créer un lien. Attention: à la fin du nom, il faut bien prendre soin d'ajouter le suffixe (que l'on nomme l'extension) qui identifie le type de document (ex: .htm, .doc) puisqu'il est possible de créer des liens vers des documents autres que des pages Web. Il faut cependant que le lecteur éventuel dispose des logiciels nécessaires pour les ouvrir.

<o:p></o:p>Retour en haut de la page</o:p>

Pour modifier le style des liens hypertextes<o:p></o:p>

Pour modifier le style des liens hypertextes (autrement dit, pour changer la couleur ou la forme des liens vers des signets ou d’autres pages Web), il suffit de cliquer sur le menu Format et de choisir la rubrique Style et mise en forme. Une colonne de menu apparaît alors à la droite de l’écran. Il ne reste qu’à choisir Lien hypertexte ou Lien hypertexte suivi en cliquant sur la petite flèche noire qui s’affiche à l’écran. En cliquant sur la flèche, un nouveau menu apparaît. On choisit Modifier. Une boîte de dialogue s’affiche alors et il ne reste qu’à choisir les commandes appropriées. En résumé, il est possible de désigner pour toute la page la couleur des textes réguliers ainsi que la couleur des liens. Certains logiciels permettent en plus de désigner par défaut la couleur d'un lien qui a déjà été consulté.

<o:p></o:p>Retour en haut de la page<o:p></o:p>

<o:p></o:p>Conseils pour l’arrière-plan et pour les caractères

<o:p></o:p>Pour modifier l’arrière-plan de votre page Web, il suffit d’aller au menu Format et de cliquer sur la rubrique Arrière-Plan. Un choix de couleurs apparaît alors à l’écran. Il suffit de cliquer sur la couleur de votre choix pour modifier l’arrière-plan de votre page Web.

Cependant, vous préférerez peut-être aller au menu Format pour placer votre curseur sur la rubrique Arrière-Plan et cliquer sur la rubrique Motifs et Textures. De nombreuses possibilités s’offrent alors à vous (de textures ou même d'images (1000 pixels de large) insérées comme arrière-plans.

Attention: il ne faut pas que l'arrière-plan rende le texte illisible et il ne faut pas qu'il soit d'une qualité graphique trop élevée, ce qui ralentirait l'affichage de la page.

<o:p></o:p>Il est également possible de jouer avec la forme et la couleur des caractères. Deux possibilités s’offrent à votre créativité : soit vous déplacez votre curseur sur le menu Format et vous cliquez ensuite sur la rubrique Police, soit vous cliquez sur les boutons de votre choix sur la barre de mise en forme. Si la barre de mise en forme n’apparaît pas à votre écran, vous déplacez votre souris sur le menu Affichage, puis sur la rubrique Barres d’outils et vous cliquez enfin sur le bouton Mise en forme.

Ajout de fonds sonores sur une page Web

Il est possible d'ajouter un fond sonore qui joue à l'ouverture de la page, soit à répétition, soit le nombre de fois précisé. On enregistre le document sonore, de format léger approprié à l'Internet, dans le dossier de travail général et on fait Insertion, Fond sonore. Il n'est pas possible de préciser ici les détails relatifs à la préparation de documents sonores.

<o:p></o:p>Retour en haut de la page<o:p></o:p>

<o:p></o:p>Conseils pour la vérification de la présentation du texte<o:p></o:p>

<![if !supportLists]><![endif]>Assurez-vous que votre page est facilement lisible. <o:p></o:p><![if !supportLists]><![endif]>Rappelez-vous que certaines couleurs plus exotiques peuvent prendre une curieuse apparence sur l’écran de votre lecteur. <o:p></o:p><![if !supportLists]><![endif]>N’oubliez pas de diminuer la qualité de votre image ( .jpg, qualité "compact" au moment de l'enregistrement dans Photoshop).

<o:p></o:p><![if !supportLists]><![endif]>Utilisez les liens vers des signets et des pages pour faire une table des matières et pour faire des liens entre la table des matières et les sous-titres.<o:p></o:p>

Retour en haut de la page<o:p></o:p><o:p></o:p>

Pour situer le texte dans l'Internet comme site Web

Vous venez de voir comment on produit des pages Web. Il ne manque que quelques étapes afin de les situer comme site Web. Pour cela, il faut qu'un fournisseur d'espace disque Web vous assigne un espace sur un serveur avec son adresse Web (son URL), du genre : http://www.cvm.qc.ca/mgodon.

Important: En transférant vos pages, images, dossiers d'images, etc., dans cet espace, il suffit d'avoir donné le nom index.htm à la page principale. Cette page devient la page d'accueil et elle est la première page qui s'ouvre quand on se rend à l'adresse (URL) de votre site.

Le transfert sur l'espace disque du site se fait généralement avec un logiciel de transfert de données appelé FTP (File Transfer Protocol) ou par d'autres procédures indiquées par le fournisseur du site.