SELECTIONNEZ ce passage en rouge - COPIEZ - et IMPRIMEZ

Et un deuxième texte :

SELECTIONNEZ ce passage en rouge - COPIEZ - et IMPRIMEZ

Pour voir comment cet exemple est reproduit par le navigateur, cliquez I.C.I.

<IMG SRC="maison.gif">

Dans l'exemple 2, remarquez encore l'utilisation de l'attribut ALT="..." avec le terme descriptif (complément) de l'image: "Maison" et plus bas "Flèche".

Cet attribut décrivant l'image est une présentation "alternative" qui permet de faire connaître le contenu de l'image

- à un visiteur qui ne dispose pas d'un navigateur reproduisant les images ( situation de plus en plus rare)

- à un visiteur doté d'une liaison Internet lente, qui ne télécharge pas automatiquement toutes les images avec son navigateur. Il peut ainsi juger s'il est utile de faire apparaître l'image parce qu'elle lui apporte une information supplémentaire, comme un lien par exemple.
Si l'image ne fait que "décorer" la page, il peut se passer de la télécharger.

L'attribut ALT devrait donc être ajouté chaque fois que l'image n'est pas uniquement "décorative".
Ne téléchargeant pas systématiquement toutes les images quand on a une liaison lente, il est frustrant et irritant de découvrir une page couverte d'icônes, sans que l'on sache ce que chacune représente et s'il y a un intérêt quelconque à les télécharger.

Le terme descriptif accompagnant l'image, se trouvant sous ALT, disparait automatiquement dès que l'image est téléchargée et apparaît.

Les images GIF (Graphics Interchange Format) qui portent un suffixe .gif sont le mieux adaptées pour des objets contenant peu de couleurs et des dessins simple.

Le JPEG ( Joint Photographic Expert Group)(extension) .jpeg ou .jpg est le mieux approprié pour les photos.

Les deux formats sont comprimés.

Comment l'image apparaît elle ?

Le navigateur lit d'abord le document HTML et recherche la balise IMG.
S'il le trouve, il effectue une recherche complémentaire sur l'attribut SRC pour obtenir le fichier.
S'il y a 10 images sur une page, il faudra 11 connexions. Ceci peut ralentir considérablement l'affichage d'une page.

La plupart des navigateurs permettent d'éviter le téléchargement d'images, ce qui accélère l'affichage.
Certains évitent le téléchargement automatique des images et on peut regretter l'IMAGO-MANIA (la manie actuelle de bourrer les pages par des images) chère aux designers. Une page doit être entièrement lisible, sans image.
Une image peut agrémenter une page et lui apporter une information complémentaire, mais ne peut pas être un sine qua non pour atteindre un lien.

Le troisième paragraphe de cet exemple comprend un lien hypertexte

A (la balise A comme ancre) suivi de l'attribut HREF .
L'ensemble s'écrit :
<A HREF="exemple3.htm">

Un lien hypertexte commence par <A ( la balise "ancre")
La partie entre <A......> et </A> est la partie "chaude" du texte.
Elle apparaît en surbrillance ou en couleur bleue, souvent soulignée.
En cliquant sur cette partie de texte, un lien s'établit avec le complément de l'attribut HREF : soit une URL complète, soit une URL partielle.

L'URL dans cet exemple est partielle: ceci est autorisé, si le fichier auquel il est fait appel se trouve sur le même serveur et dans le même répertoire.
Ceci permet ainsi d'établir divers liens entre des fichiers du même répertoire.

Si, sur un même serveur, des liens doivent être établi avec des documents d'un autre répertoire, celui-ci doit être indiqué :
on écrirait <A HREF="luc/exemple3.htm">, si le fichier "exemple3.htm" se trouvait dans le répertoire "luc" du même serveur.

Si le document existe sur un autre serveur, il faut écrire l'URL complet.

Comme toujours l'attribut est suivi par le signe = et " ...."

Lorsque un lien a été utilisé, il change de couleur, pour indiquer que ce lien a déjà été utilisé et que vous avez déjà visité ce lieu. Ce lien reprend sa couleur initiale après un délai que l'on peut modifier dans les préférences du navigateur (p.ex.30 jours)

Comme on peut le voir dans l'exemple, la partie "chaude" peut être une image. Cette image est alors le plus souvent "mise en boîte" entourée d'un carré bleu par le navigateur.
Ceci peut s'employer en utilisant de petites images comme des icônes (ici : "flech.gif) pour atteindre un autre fichier, ici c'est le fichier "exemple3.htm"

<A HREF="exemple3.htm"><IMG SRC="flech.gif" ALIGN="middle"></A>

Cette technique est aussi particulièrement intéressante lorsqu' on veut présenter une image très volumineuse en n'incluant dans le texte qu'une mini-image, une vignette , sorte de réduction de la véritable image à une dimension d'un timbre-poste, pour ne pas ralentir l'arrivée du document.

On aurait alors :

<A HREF="grandflech.html"><IMG SRC="flech.gif" ALIGN="middle"></A>
et un court fichier intermédiaire "grandflech.html" qui contient le titre de la grande image.

<HTML>
<HEAD>
<TITLE> CECI EST UNE GRANDE FLECHE</TITLE>
</HEAD>
<IMG SRC="grandflech.gif">
</BODY>
</HTML>

De la bonne pratique des liens :

- Il est préférable de mettre un mot en hypertexte, plutôt que d'écrire : cliquez "ICI"

- Ne mettre que peu de mots dans le lien hypertexte, ne pas mettre toute une phrase

En Résumé :.

A ce stade, nous pouvons déjà tirer quelques règles générales

• Nous parlons de balises, d'attributs et de compléments d'attribut.
  
  
• Le <   > entoure une balise.
  
  
• Le </   > indiquent la balise terminale quand il y a logiquement lieu c-à-d p.ex. quand il y a un mot à encadrer
  
  
• Certaines balises peuvent être suivies par un attribut nécessairement suivi d'un complément d'attribut et parfois un deuxième attribut avec un deuxième complément.
  
  
• La commande HTML s'écrit : <Balise Attribut="complément">
  
  p.ex. <A HREF="netlinks.htm">
  
  
• Le complément d'attribut est une URL (complète ou partielle)
  ou une indication de mise en page comme : top - middle - bottom -
  ou encore : left - center - right, comme nous le verrons plus loin.
  ou encore une taille exprimées en pixels ou en % (voir aussi plus loin)
  

Jusqu'ici nous avons vu comment on pouvait établir un lien avec un autre texte ou une image.

Parfois, quand un texte est long, on aimerait pouvoir sauter immédiatement vers un autre endroit du texte, ou bien, on aimerait se rendre à un endroit particulier dans un autre document.

Ceci est rendu possible par l'attribut NAME attaché à la balise A (ancre)

C'est l'identificateur (fragment identifier) de l'endroit du texte vers lequel on veut se rendre.

Pour établir le lien, le mot pointeur dans le texte est entouré de la façon suivante :

<A HREF="#......"> - mot pointeur - </A>

On utilise le signe spécial # pour faire la différence avec une URL normale, indiquant ainsi qu'il s'agit de trouver le repère NAME.

Exemple d'écriture :

<A HREF="#Histoire">Histoire de l'UCL </A>

"Histoire de l'UCL " sera en surbrillance et en cliquant sur ce mot, on se rend à l'endroit du texte qui comporte <A NAME="Histoire">
Il n'y a évidemment pas de </A> après cette balise qui n'est qu'un marqueur.

De la même manière, par <A HREF= " XYZ/intro.htm#histoire"> , on peut évidemment établir un lien avec un autre document qui contiendrait <A NAME="histoire">

Les attributs HREF et NAME peuvent être utilisés ensemble dans le même texte.

N.B. : Après # , on peut mettre des lettres et des chiffres, mais il faut toujours une lettre pour commencer et non un chiffre.

Ce double adressage est particulièrement intéressant dans un article - ou un cours - où on indiquerait les références par des chiffres, puis, à partir des références, un retour à l'endroit d'origine.

Ceci est très simple à réaliser, après avoir créer la balise, par un copier/coller en changeant les chiffres.

Allons voir un exemple et cliquons sur les chiffres en hypertexte en fin de chaque paragraphe dans cet exemple.

Nous vous proposons de télécharger ce fichier par "Save as" et en Format "Source" pour voir comment il est écrit.

Remarquons:

Retour au sommaire