Atelier - HTML 2

1. Les hyperliens

Rappel : Lors de l'atelier HTML 1, vous avez appris comment créer un hyperlien avec une adresse absolue.

Ce type d'adresse fait référence à un site Internet externe au serveur utilisé pour loger le texte actuellement ouvert. C'est l'adresse complète écrite dans le rectangle Adresse de Netscape.
Exemple : <A HREF="http://www.altavista.com">AltaVista</A>
Voici le résultat : AltaVista

Adresse relative externe

Le lien externe avec adresse relative sert à établir un lien hypertexte entre deux documents HTML différents. Ce type d'adresse fait référence à un fichier HTML situé sur le même serveur que le fichier actuellement ouvert.

Exemple : <A HREF="chimie.html">Réactions chimiques</A>
Dans cet exemple, le fichier se trouve au même niveau hiérarchique que le fichier actuellement ouvert sur le serveur.

Autre exemple :

Supposons que nous créons un document comprenant un menu qui fait référence aux sites suivants : Moteurs de recherche, Pages personnelles et Ressources. On retrouvera donc un document HTML unique pour Moteurs de recherche, un pour Pages personnelles et un autre pour Ressources. Nous aurons également besoin d'un quatrième document HTML pour le menu dont le code HTML ressemble à ceci:

<HTML> <HEAD> <TITLE>Menu</TITLE> </HEAD> <BODY> <A HREF="moteurs.html">1. Moteurs de recherche</A> <A HREF="personnelles.html">2. Pages personnelles</A> <A HREF="ressources.html">3. Ressources</A> </BODY> </HTML>

Ainsi, lorsqu'un clique est effectué sur un item du menu, le navigateur chargera le document HTML correspondant et l'affichera dans la fenêtre courante.

Ici, nous avons supposé que tous les documents HTML se trouvaient sauvegardés dans le même répertoire. Cependant, il se peut qu'un ou plusieurs de ceux-ci se situent dans des répertoires différents. À ce moment, il faudrait spécifier le chemin d'accès. Par exemple, on pourrait décider de sauvegarder les documents HTML de notre liste de sites dans un dossier intitulé tout simplement Repertoire par rapport au répertoire courant; l'exemple ci-haut deviendrait alors:

<HTML> <HEAD> <TITLE>Menu</TITLE> </HEAD> <BODY> <A HREF="Repertoire/moteurs.html">1. Moteurs de recherche</A> <A HREF="Repertoire/personnelles.html">2. Pages personnelles</A> <A HREF="Repertoire/ressources.html">3. Ressources</A> </BODY> </HTML>

Adresse relative interne

Le lien interne permet d'effectuer un saut hypertexte où le point de départ et le point d'arrivée se situent à l'intérieur d'un même document HTML. Par exemple, ce type de lien s'avère utile dans le cas où un document HTML contient une importante quantité d'informations. À ce moment, il convient de faire un menu. Nous plaçons donc le menu au haut du document, pendant que les informations sont affichées juste au-dessous. Lorsque l'on clique sur un item du menu, un saut hypertexte est effectué pour ainsi afficher l'information correspondante. Chaque item du menu constitue en fait un lien interne.

Un lien interne sert à établir un lien hypertexte entre un point de départ et un point de destination à l'intérieur du même document HTML.

Syntaxe HTML du lien interne

Le point de départ, c'est-à-dire le terme souligné constituant le lien proprement dit, s'exprime en HTML de la façon suivante:

<A HREF="#nom du lien interne">terme souligné</A>

Le point de destination comporte également un marqueur HTML le reliant au point de départ:

<A NAME="nom du lien interne">informations</A>

Notez que vous pouvez donner n'importe quel nom de lien interne. Il faut toutefois s'assurer que les noms soient identiques dans les deux cas pour qu'il y ait relation. Voyons un exemple afin de bien comprendre la syntaxe HTML du lien interne.

Exemple:

Supposons un répertoire de sites classés selon différentes catégories. Les catégories sont affichées sous forme de menu dans le haut du document. En cliquant sur une catégorie du menu, on obtient alors la liste des sites correspondants qui se trouvent plus bas dans le même document.

Répertoire de sites:

1. Moteurs de recherche
2. Pages personnelles
3. Ressources

1. Moteurs de recherche

Francité
La Toile du Québec
AltaVista
Excite

2. Pages personnelles

La Page de Marc

La Page de Marie-France

3. Ressources

La Page du Développeur

Mephisto

Winternet Québec

Le code HTML des items du menu, soit les points de départ, correspond à ceci: <A HREF="#moteurs">1. Moteurs de recherche</A> <A HREF="#personnelles">2. Pages personnelles</A> <A HREF="#ressources">3. Ressources</A>

Pour qu'il y ait corrélation entre les items du menu et les catégories où l'on retrouve effectivement la liste des sites, on doit ajouter le code HTML pour les points de destination.

<A NAME="moteurs">1. Moteurs de recherche</A> <UL> <LI>Francité <LI>La Toile du Québec <LI>AltaVista <LI>Excite </UL> <A NAME="personnelles">2. Pages personnelles</A> <UL> <LI>La page de Marc <LI>La page de Marie-France </UL> <A NAME="ressources">3. Ressources</A> <UL> <LI>La Page du Développeur <LI>Mephisto <LI>Winternet </UL>

Ainsi, lorsqu'on clique sur un item du menu, supposons Ressources, le navigateur fera défiler le document, de façon à ce que la rangée du marqueur

<A NAME="ressources"> correspondant soit affichée dans le haut de la page.

Notez qu'un lien interne fonctionne également dans la direction inverse, c'est-à-dire qu'il est possible que le point de départ se situe dans le bas du document et que le point d'arrivée se trouve dans le haut du document.

2. Les images en coordonnées

L'image en coordonnées sert à définir de multiples liens URL à partir d'une image.

Pour insérer une image en coordonnées dans votre document:

Dans la barre d'outils «Spécialisés», cliquez sur le bouton IMAGE EN COORDONNÉES .
Dans la boîte texte «Nom identificateur de l'image», donnez un nom à l'image en coordonnées. Vous pouvez lui donner n'importe quel nom.)
En appuyant sur le bouton IMAGE (à gauche de l'esquisse) , vous pouvez aller chercher votre image qui servira d'image en coordonnées. Ce bouton fera apparaître le menu d'insertion d'images.
Une fois que vous avez sélectionné votre image, vous pourrez la visualiser dans l'esquisse.
Dans la fenêtre «Esquisse», ajustez votre première région référence en déplaçant le rectangle rouge. Vous pouvez également ajuster votre région référence avec la souris. En mettant la souris au-dessus des limites du rectangle, des flèches de direction apparaîtront.
Une fois que vous avez bien défini votre première région, appuyez sur le bouton AJOUTER ZONE pour déterminer la référence de la région. Vous pouvez choisir comme référence un lien externe, un lien interne ou aucun lien. Cette dernière option est utile si vous désirez définir un point mort dans une région de l'image.
Une fois que vous avez déterminé la référence de la région, les coordonnées de cette dernière apparaîtront dans la fenêtre en haut de l'esquisse.
Vous verrez apparaître un deuxième rectangle et la première région que vous avez défini sera hachurée en rouge. Procédez de la même façon pour définir les régions références suivantes.
Si vous voulez effacer les coordonnées d'une région, vous devez les sélectionner et appuyer sur le bouton droit de la souris, un menu contextuel apparaîtra dans lequel vous pourrez sélectionner l'option «effacer la zone».
Une fois que vous avez défini toutes les régions de votre image, appuyez sur le bouton OK.

Le programme va insérer ces lignes de codes dans votre document:

Ce bouton vous permet de recommencer à zéro. Il initialise tous les champs à leur valeur par défaut.

HTML 2 - Exercice

4. Vos apprentissages

À la fin de cet atelier, vous devriez être en mesure de:

Insérer des hyperliens qui font référence à des documents situés sur le même serveur;
Insérer des hyperliens qui font référence à des termes situés dans le même document;
Créer des images en coordonnées.

5. Atelier - HTML 3

Tableaux;
Fichiers son;
Consignes à respecter dans la conception d'un site Web.