La création de pages web
La création et les "Hyberlink"
5.1
Un peu d'histoire
Vers l'historique
HTML = Hyper Text Markup Language, c'est-à-dire qu'il s'agit d'un langage de programmation permettant une bonne structuration des pages et l'inclusion de liens.
Le Web pour les nuls
5.2
Lien vers un
E-mail
Il y en a de multiples par exemple ce lien qui permet de demander des informations:
| N'hésitez pas à nous écrire jrg@technews.ch |
| N'hésitez pas à nous écrire <ahref = "mailto:jrg@technews.ch?subject=demande d'information"> jrg@technews.ch |
Si l'utilisateur clique sur ce lien il vera apparaître une fenêtre de création d'un nouveau message électronique. Comportant dans le champ "destinataire" l'adresse jrg@technews.ch et dans le champ "sujet" l'intitulé "demande d'information". Il sera ensuite plus aisé pour le destinataire de trier ses emssages entrants selon le contenu du "sujet".
Remarquez ici que tous les caractères spéciaux de la langue française sont codés. Par exemple:
- le é devient un é
- le à devient un &agrav;
- le è devient un è
Mais il n'est plus nécessaire de s'en soucier car tous les éditeurs de codes html s'en chargent très bien.
5.3
Lien vers un
fichier
| Le sommaire du manuscrit est ici |
| Le sommaire du manuscrit est <a href="creation.html">ici</a> |
Autre exemple un lien vers lahome page du site Technews. Qui s'atteint normalement par http://www.technews.ch
Mais qui en terme relatif suit un autre chemin:
| La homepage de TechNews est ici |
| La homepage de TechNews est <a href="../default.htm">ici</a> |
On constate ici que le code ../ signifie remonter d'un étage dans la hiérarchie, puis choisir le fichier nommé default.htm
5.4
Lien vers un site distant
| Voici un nouvel annuaire de recherche pur suisse |
| Voici un nouvel annuaire de recherche <a href="http://www.yoodle.ch" target="_blank">pur suisse</a> |
Le paramètre target peut prendre plusieurs valeurs
target="_blank"
ouverture dans une nouvelle fenêtre
target="_self"
ouverture dans la même fenêtre que l'endroit ou se trouve le lien
target="_top"
ouverture dans une fenêtre de niveau supérieur
target="_parent"
ouverture dans une fenêtre parente ou voisine
5.5
Un lien lié à une image
| Retour en haut de page |
Voici la signification de ce code |
| Retour en haut de page <a href="manus500.html" target="_self"> <img height="32" width="32" src="../Images/fleche.GIF" border="0" alt="c'est une flèche bleue"> |
Texte: Retour en haut de page ouverture du fichier manus500.html dans la même fenêtre Dimensions de l'image haut. 32 pixels largeur 32 pixels insertion de l'image fleche.GIF se trouvant dans le dossier ../Images Bordure aucune Texte alternatif c'est une flèche bleue |
5.6
Une image pour naviger
Cliquez sur l'un des noms de l'image  |
| Cliquez sur l'un des noms de l'image <img height="102" width="102" src="monsiteweb/IMAGES/menu.gif" border="0" usemap="#menutrois" alt="Hobby/Famille/Travail"> <map name="menutrois"> <area href="monsiteweb/pages/ftravail.htm" target="_blank" coords="9,67,94,94" shape="rect"> <area href="monsiteweb/pages/ffamille.htm" target="_blank" coords="8,37,94,65" shape="rect"> <area href="monsiteweb/pages/fhobby.htm" target="_blank" coords="8 |
C'est pratique car il suffit d'une seule image pour gérer la navigation vers plusieurs destinations. Il faut toutefois prendre garde à ne pas en abuser car le chargement d'images complexes est toujours plus long que du texte.
Autre alternative: Diviser cette image en trois parties elles peuvent ainsi être réutilisées dans chacune des rubriques correspondantes. Cela permet aussi une plus grande souplesse dans la mise en page des boutons de navigation.
   |
|
|
| <a href="monsiteweb/pages/fhobby.htm" target="_blank"> <img height="31" width="83" src="monsiteweb/IMAGES/hobby.gif" border="0" alt="Go to FUN"> |