Qu'est-ce qu'une page Html ?
Que se passe-t-il lorsque la page arrive sur mon ordinateur ?
L'ordinateur ne retrouve plus les chemins
Les versions récentes des navigateurs
Pourquoi créer ce type de document plutôt qu'une simple page en traitement de texte ?
Quels logiciels ?
Comment procéder ? Astuces et contraintes
Nommer les fichiers
Les images
Les textes
Laissez-vous guider par les barres d'outils du logiciel
Les liens hypertexte

Qu'est-ce qu'une page Html ?

Vous en avez une sous les yeux. Elle est quasiment l'unité de base de l'Internet qui permet grâce à un langage simple (Hyper Text Markup Language) de grouper sur un support virtuel -la "page" qui est à l'écran- des images, du texte, des liens hypertexte qui vous permettront de consulter une autre page du même site ou de vous diriger vers un site extérieur.

Le langage Html est assez simple et consiste essentiellement en un système de balises codées qui marquent le début et la fin d'actions à effectuer. Par exemple les balises <P> et </P> encadrent le début et la fin d'une ligne de texte. Si cette balise est complétée par <P ALIGN=center> cela signifie que la ligne de texte sera centrée dans la page. <P ALIGN=right> signifie que le texte sera aligné à droite, etc.

Il va de soi qu'il n'est guère utile d'apprendre le langage Html pour composer des pages, les logiciels spécialisés font cela très bien, sans que l'auteur ne s'aperçoive de rien ! Toutefois, au moment de choisir un logiciel de création de pages Web, il faudra s'assurer qu'il y a possibilité d'intervenir directement sur le code Html, cela s'avère utile dans certains cas de figure.

 

Que se passe-t-il lorsque la page arrive sur mon ordinateur ?

Chaque élément qui la compose est dirigé vers un seul dossier le Temporary Internet Files. Lorsque vous ouvrez ce dossier depuis le programme de recherches de Windows par exemple, vous vous apercevez qu'il contient une multitude de fichiers avec différentes extensions, *.gif, *.jpg, (ce sont les images) ou *.htm, ce sont les pages web. Pensez à vider régulièrement ce dossier (à l'aide de votre navigateur) car il s'y accumule très rapidement des millions d'octets qui encombrent la mémoire et ralentissent la machine. Vous pouvez aussi choisir de ne conserver les pages consultées dans l'historique que pendant 3 ou 4 jours. Votre dossier se videra ainsi régulièrement.

Hors connexion vous pouvez consulter les pages à partir de la fonction "Historique" par exemple. Les pages conservent leur aspect et les liens entre elles si elles sont issues du même site. Mais lorsque vous voulez conserver ces pages parce qu'elles vous intéressent et que vous les copiez dans un dossier, ô surprise ! quand vous les consultez à nouveau, seul le texte est sauvegardé : plus d'images, plus d'animation, plus de liens. Que s'est-il passé ?

 

L'ordinateur ne retrouve plus les chemins

En effet, dans un site Web, le langage Html balise des "chemins" pour que "la page" aille chercher les images dans le dossier spécifique, chemins du type <IMG SRC="nom du dossier/nom du fichier.gif">. La page étant déplacée, les chemins spécifiés pour les images, les sons, les animations, les liens, deviennent introuvables puisqu'on a quitté le dossier Temporary dans lequel tout avait été stocké.

Conserver une ou plusieurs pages Html suppose soit leur "reconstruction" à l'aide d'un logiciel de création de pages Web, procédé souvent long, fastidieux et incertain; soit leur conservation dans un dossier local, ce que permettent maintenant les versions les plus récentes des navigateurs.

 

Les versions récentes des navigateurs

Netscape a devancé Internet Explorer de Microsoft en intégrant dès sa version 4.51 la possibilité d'archiver les pages dans des dossiers locaux : choisir dans le menu <Fichier> la fonction <Editer la page> ou <Editer le cadre> (s'il s'agit d'une page à cadre multiples). Le module de Composer reconstitue automatiquement la page Web qui sera ensuite sauvegardée dans le dossier de votre choix par le biais de la fonction <Enregistrer sous>. En ouvrant postérieurement ce document avec votre navigateur, vous retrouverez l'essentiel de l'apparence de la page Web. Le module a placé tous les éléments dans le même dossier et reconstitué les chemins. Un inconvénient toutefois, lorsque plusieurs pages sont archivées dans le même dossier général Netscape ne créé pas un dossier "images" pour chaque page. En récupérant sous cette forme un nombre important de pages tous les documents iconiques sont mêlés. Seul le navigateur est susceptible de s'y retrouver, détail important si l'on veut supprimer des pages de ses archives.

Avec Internet Explorer 4 il fallait procéder à quelques manipulations qui consistaient à reconstituer manuellement la page :
Préparer à l'avance un dossier "X" dans lequel on pourra créer un autre dossier "Images". Une fois connecté et la (les) pages du site choisie(s), dans <Edition> sélectionner <Enregistrer sous>. Donnez le nom que vous voulez à la page Web ou conservez celui proposé, et assurez-vous que le format choisi comporte bien l'extension *.html. Cliquez ensuite avec le bouton droit de la souris sur chacune des images de la page et choisissez <Enregistrer sous>, placez-la dans le dossier "Images" et reconstituez le "chemin".

La version 5 d'Explorer permet maintenant de reconstituer automatiquement et très simplement une page, encore plus facilement qu'avec Netscape (concurrence oblige !...). C'est actuellement le système le plus efficace et logique dans son classement des documents. La page Web affichée à l'écran il suffit de choisir dans <Fichier> la fonction <Enregistrer sous> pour que la page et les différents éléments qui la composent soient récupérés par le navigateur. Explorer recréé la page Web et lui associe un dossier du même nom dans lequel sont placés les divers fichiers associés à la page originale. En comparaison avec Netscape IE5 offre divers avantages : une seule opération et des dossiers séparés pour chaque page enregistrée. Si, plus tard, on souhaite supprimer des pages de ses archives, on peut supprimer le dossier associé sans risque d'erreurs.

Le conseil : sur votre disque de sauvegarde, disque dur, disque zip ou encore simple disquette (les pages Webs sont en général légères) préparez un dossier du type <Sauvegarde de pages Web> vers lequel vous dirigerez systématiquement vos pages au moment de les <Enregistrer sous>.

 

Pour sauvegarder plusieurs pages, voire un site dans son entier, La meilleure solution est d'utiliser un logiciel du type "MémoWeb" permettant "d'aspirer" les sites Web. Un logiciel de ce genre permet de conserver l'aspect original des pages et surtout les liens hypertexte qui les unissent. Pour plus d'informations sur le sujet, cliquez sur le lien <Aspirer un site> dans la table des matières à gauche.

 

Pourquoi créer ce type de document plutôt qu'une simple page en traitement de texte ?

La page Html offre bien évidemment des possiblités variées que n'offre pas le simple logiciel de traitement de textes. Il n'est pas nécessaire en effet de créer des pages de ce type dans le seul objectif de les "mettre en ligne" sur un site Web, même si, au bout du compte, l'objectif final est vraisemblablement celui-ci.

Les pages Html peuvent être la solution à la constitution, par le professeur ou les élèves :
-de dossiers attrayants ;
-peu encombrants (une simple disquette de 1,4 Mo peut contenir plusieurs dizaines de pages si les fichiers images ne sont pas trop lourds) ;
-que les élèves peuvent conserver et réutiliser chez eux ;
qui peuvent être facilement consultés au Lycée (mieux encore si l'Établissement dispose d'un Intranet) ;
-qui peuvent être repris, complétés, améliorés quasiment à l'infini, ouvrant ainsi la porte à un véritable travail d'équipe.

Un travail d'élaboration de ce type devrait permettre à chacun de mettre au mieux en valeur ses talents et capacités : conception, maquette, mise en page, recherche, choix des images, organisation des liens hypertexte... Selon ses goûts chaque individu peut rédiger ce qui lui tient le plus à cœur : textes explicatifs, créations personnelles (petites poésies par exemple), légendes des images, élaboration d'un lexique, rédaction de définitions... Cette implication concrète et productive devrait ainsi permettre à l'élève, et au groupe, de mieux apréhender les mécanismes de la construction de son savoir.

Quels logiciels ?

Pour débuter il n'est pas nécessaire de disposer d'un matériel lourd. On peut modestement débuter avec le module Composer qui fait partie de la version 4.5 de Netscape Communicator (en téléchargement gratuit et illimité sur le site de Netscape. Attention, la version complète, plus de 20 Mo, peut être longue à télécharger).

Si l'on souhaite travailler avec un logiciel plus complet et performant, simple d'utilisation, on pourra s'orienter vers Claris Home Page 3 qui, de l'avis général, est le plus simple et convivial. Il faut éviter Frontpage de Microsoft, trop compliqué pour les débutants. Claris, qui fonctionne comme un simple traitement de texte (j'ai réalisé ce site avec Claris), permet en outre d'intervenir directement sur le langage Html et donc de corriger efficacement certaines mises en page délicates. Certains revendeurs le proposent à moins de 1000 Frs, investissement qui n'est pas trop lourd pour un établissement scolaire.

 

Comment procéder ? Astuces et contraintes

Il va de soi qu'il faut au préalable :
-définir le sujet d'un dossier puis son contenu ;
-déterminer le nombre initial de pages mais prévoir des extensions possibles ;
-prévoir les liens hypertextes qui uniront les documents ;
-préparer le dossier multimédia qui pourra comporter des images, des sons, des vidéos (il est préférable de s'en tenir à la première option pour commencer).

Dans tous les cas il est impératif, si l'on ne veut pas s'exposer à des déboires, de suivre une règle simple représentée par le schéma suivant :

1. Créer un dossier local, lui donner un nom. 2. À l'intérieur de ce dossier, créer un dossier "Images" dans lequel on placera tous les fichiers graphiques (photos, dessins, tableaux, etc.) 3. Chaque page créée avec l'extension *.htm sera enregistrée dans le dossier local.

C'est la structure la plus simple, de premier niveau, qui permet d'avoir un ensemble de pages qui fonctionneront bien entre elles, structure dans laquelle les élèves se retrouveront sans difficultés et pourront intervenir soit individuellement soit collectivement sans risque d'erreurs qui rendent le dossier inopérant.

Nommer les fichiers

Les images : évitez des noms de fichier trop longs (pas plus de 10 caractères); évitez les majuscules et les caractères spéciaux. Sinon certains navigateurs ne sauraient pas les identifier.

Les pages : leur enregistrement se fait en général en deux temps. Claris propose en premier lieu de donner un nom à la page, celui qui s'affichera dans la fenêtre du navigateur. Ce peut être un titre assez long, pour cette page par exemple votre navigateur affiche "Créer une page Html". Vous pouvez employer caractères spéciaux et majuscules.
Dans un deuxième temps il faut donner un nom au fichier qui portera l'extension *.htm. Attention aux contraintes : pas de caractères spéciaux, pas d'accents, pas plus de 8 lettres. Dans le cas contraire la page pourrait ne pas être reconnue. Pensez que le langage Html... ne connaît que l'anglais !...

 

Les images

Il faut que leur "poids" en octets soit le plus faible possible, tout en leur conservant une qualité convenable.

On peut soit les récupérer sur des sites existants (et dans ce cas elles sont déjà préparées pour l'Internet) si le dossier constitué n'est pas destiné à être mis en ligne sur le Web (attention, les droits d'auteur existent sur Internet !) ou encore les scanner, toujours à condition de n'en faire qu'un usage privé.

Les formats les plus courants : JPG ou GIF. Ce dernier présente un avantage, celui de rendre des parties transparentes (c'est la cas de l'image ci-dessus, elle n'est pas entourée d'un cadre disgracieux et elle laisse transparaître le fond de page). En plus les images GIF peuvent être animées avec les logiciels adéquats.

Il n'est pas utile d'avoir une image de grande taille. Pensez qu'un écran ne mesure en général qu'une quinzaine de centimètres de hauteur. Une image de 10 x 8 occupe pratiquement la moitié de l'écran ! Sa définition ne doit pas dépasser 72 pixels par pouce, elle correspond à la définition d'un écran d'ordinateur. Pour les images de cette taille, préférez le format JPG qui compresse les images et choisissez un taux de compression moyen. Plus les images sont lourdes, plus elles tardent à s'afficher !

Les textes

On peut faire un travail préparatoire avec un logiciel traditionnel de type Word. Une fois le texte définitif et corrigé il suffit de faire un simple copier/coller pour le placer sur une page Html.

Attention toutefois aux accents et autres signes propres à l'espagnol ! Il faut prendre la précaution d'entrer ces caractères au moyen des codes ASCII ou ANSII, sinon il y a un risque à ce que le navigateur ne les reconnaisse pas et affiche des choses bizarres ! De toutes façons, si vous composez directement les textes avec Composer ou Claris, ni l'un ni l'autre ne reconnaissent les raccourcis de Windows.
Pour vous assurer de la prise en compte des caractères spéciaux, prévisualisez votre page dans les deux navigateurs ou éditez votre page en Html. Par exemple les mots suivants seront transcris ainsi en langage Html :
-España : Espa&ntilde;a
-América : Am&eacute;rica
-façon : fa&ccedil;on

Si ces codes n'apparaissent pas, les caractères spéciaux ne seront pas reconnus par les navigateurs. Voir à ce sujet la page consacrée à l'espagnol et l'Internet.

 

Laissez-vous guider par les barres d'outils du logiciel

Des symboles facilement identifiables apparaissent en partie supérieure des pages ouvertes ainsi que des entrées de menu déroulants. Explorez leur fonctionnalité. Ainsi lorsque vous voudrez insérer une image à un endroit précis vous irez la chercher dans le dossier spécifique de votre dossier local. Le chemin est simple, votre page la retrouvera sans difficulté.

Les liens hypertexte

C'est ce qui rend la page interactive, qui fait qu'une petite main apparaît pour signaler qu'une image ou qu'un mot renvoie "ailleurs".

À l'intérieur d'une même page :
Cibles et Ancres : sans doute avez-vous remarqué que, contrairement à un logiciel de traitement de texte habituel, la page Html ne dispose pas de "saut de page". Sa taille est illimitée, mais plus elle est longue plus elle est malcommode à utiliser. Il faut donc penser à introduire des "cibles" (Netscape) ou des "ancres" (Claris).
Le procédé est toujours le même : il faut créer les cibles ou les ancres AVANT les liens. Ces ancres seront des "butoirs" sur lesquels viendra se caler la page lorsque les liens seront activés.
Exemple : vous créez un lexique classé par ordre alphabétique, insérez une ancre avant le premier mot de la liste qui commence par A, par B, etc. Placez la barre d'insertion là où vous voulez insérer votre cible, cliquez sur le bouton correspondant dans la barre d'outil, donnez un nom à votre ancre dans la boîte de dialogue maintenant ouverte, sans majuscules ni caractères spéciaux (5 lettres suffisent). Votre cible est automatiquement précédée dans la boîte de dialogue du signe #. Répétez pour chaque ancre.
Dans cette page par exemple des ancres ont été insérées avant chaque paragraphe. En activant l'un des liens du sommaire du début de page vous arrivez directement au paragraphe qui vous intéresse. De la même façon, en cliquant sur le logo "Index" vous retournez au sommaire parce qu'une ancre y a été insérée.

Liens : vous avez, en tête de page, prévu de placer un abécédaire qui aidera votre visiteur. Sur chaque lettre de l'abécédaire nous allons placer un lien qui conduira à la cible créée.
Surlignez la lettre (ou le groupe) sur lequel créer un lien ; cliquez sur le bouton "lien" de la barre d'outils et suivez les indications de la boîte de dialogue. Vous devez retrouver facilement dans cette boîte, en faisant dérouler des menus la plupart du temps, le nom de la cible que vous voulez atteindre avec ce lien.

Dans Claris par exemple :
-activez la petite flèche à droite de la fenêtre URL ;
-choisissez "lien vers fichier ouvert". La liste des pages ouvertes s'affiche (d'où l'intérêt d'ouvrir au préalable toutes les pages sur lesquelles on travaille) ;
-choisissez la page vers laquelle vous dirigez le lien ;
-dans cette page choisissez la cible recherchée, validez.

Dans la fenêtre URL le nom de la cible s'affiche. Répétez l'opération autant de fois que nécessaire.

Dans Netscape :
La boîte de dialogue affichée est très claire. Le module affiche par défaut les cibles créées dans le "Document courant" dans une grande fenêtre. Mettre en surbrillance la cible recherchée, cliquez sur "Appliquer/Fermer".
Si le lien conduit vers une autre page, activez le bouton "Choisir un fichier" de la boîte de dialogue et activez non plus "Document courant" mais "Fichier sélectionné".

D'une page à l'autre : le procédé est bien sûr le même. Au lieu de renvoyer à une ancre à l'intérieur de la même page, le lien conduira vers un fichier *.htm de votre dossier local. La boîte de dialogue vous proposera de "parcourir les fichiers" de façon à retouver la page que vous voulez lier. Le cas échéant vous pourrez même renvoyer à une cible à l'intérieur d'une page différente. Si tel est votre souhait, prenez la précaution d'ouvrir toutes les pages sur lesquelles vous allez travailler, sinon le logiciel ne pourrait pas retrouver les cibles des autres pages.

D'une page à un site extérieur : il faudra cette fois, dans la boîte de dialogue, non plus parcourir les fichiers mais entrer une adresse Internet du type http://www.quedivertido.es. Vous pourrez tester l'efficacité de vos liens en choisissant dans le menu de prévisualiser vos pages (Claris) ou de les visualiser directement dans le navigateur de votre choix, et si possible à la fois dans Internet Explorer et Netscape car nul n'est à l'abri de surprises et ce qui marche bien dans l'un... peut très bien ne pas marcher dans l'autre !

 

 

¡Qué fácil! ¿No es cierto?

 

Rubrique rédigée par Patrick Fourneret © La Page du Professeur d'espagnol, avril 1999