HTML (HyperText Markup Language)

Auteur: Mohamed CHINY Durée necessaire pour le cours de HTML (HyperText Markup Language) Niveau recommandé pour le cours de HTML (HyperText Markup Language) Supports vidéo non disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 8: Images et liens hypertextes

Toutes les pages

Les images

Pour afficher une image en HTML on fait appelle à la balise <img>. Toutefois on peut afficher les images en tant qu'arrière plan, mais je préfère laisser cette partie jusqu'à ce que nous arrivions au cours de CSS.

Balise <img>

La balise <img> permet d'afficher une image sur le navigateur. Il s'agit d'une balise orpheline (donc pas de </img>).

La balise <img> peut avoir plusieurs attributs. Les plus importants sont:
  • src: désigne la source de l'image. La valeur associée correspond au chemin vers elle (ou son emplacement). Le chemin peut être absolu ou relatif. Le chemin absolu représente l'URL de l'image (par exemple: http://www.chiny.me/images/Logo_Chiny.png). Le chemin relatif, quant à lui, désigne l'emplacement de l'image à partir de l'emplacement actuel (par exemple: images/Logo_Chiny.png).
  • border: accepte une valeur numérique (1,2...). Cette valeur désigne l'épaisseur de la bordure qui encadre l'image. L'unité utilisée pour la bordure est le pixel (px) mais elle est implicite, seule la valeur numérique est déclarée. Par défaut la bordure est de couleur noire.
  • width et height: signifient, respectivement, la largeur et la hauteur de l'image. L'unité peut être le pixel (qui est implicite) ou le pourcentage (qu'il faut expliciter à l'aide du symbole universel %). Si par exemple on donne à la largeur la valeur 100%, cela veut dire que l'image occupe toute la largeur de la page (ou du conteneur qui accueille la balise <img>).

    Si width ou height ne sont pas spécifiée alors l'image sera affichée en taille réelle.

    Si seule la valeur d'une dimension (width ou height) est déclarée, l'autre dimension sera automatiquement recalculée par le navigateur de telle sorte à conserver les proportions originales de l'image.
  • alt: représente le texte alternatif à l'image. Il accepte comme valeur un mot ou une phrase qui sera affichée à la place de l'image si celle ci n'est pas chargée correctement.
  • title: il s'agit d'un message qui sera affiché dans une infobulle si on survole l'image avec la souris.


Le code suivant affichera le logo de ce site en forçant la largeur à 200 pixels.
<center>
   <img src="images/Logo_Chiny.png" width="200" border="0" alt="Logo" title="Logo officiel">
</center>
Le résultat aura l’allure suivante:
Logo
Vous avez remarqué que je n'ai pas déclaré l'attribut height mais le navigateur l'a automatiquement calculé pour que l'image ne soit pas déformée.
Conseil: évitez de redimensionner les images à l'aide de width ou height. Ce qu'il faut faire, c'est préparer l'image à l'avance (à l'aide d'un logiciel de traitement d'images) avant de la mettre sur le site. En effet:
  • Si l'image est trop grande, même si vous la redimensionnez à l'aide du HTML, elle conservera toujours son poids (sa taille en octets) et par conséquent, elle sera lourde au moment du chargement.
  • Si l'image est plus petite que la taille avec laquelle vous voulez l'afficher sur le navigateur, elle perdra sa qualité et elle ne sera pas agréable à voir.

Les liens hypertextes

Un lien hypertexte ou hyperlien est un objet HTML (texte, image ou autre) sur lequel on peut cliquer pour aller vers une autre page (ou un autre emplacement dans la même page). Il est considéré comme l'un des éléments les plus importants du langage HTML puisqu'il permet de relier les pages les unes aux autres pour constituer ainsi le Web tel que nous le connaissons.

Balise <a>

La balise <a> (pour anchor ou ancre) permet de créer un lien hypertexte pointant vers un autre document ou autre emplacement. Un lien classique est connaissable par sa couleur bleue et un style souligné (ces propriétés peuvent être changées à l'aide du langage CSS).

La balise <a> dispose des attributs suivants:
  • href: désigne le chemin vers la page de destination après avoir cliqué sur le lien. Comme pour l'attribut src de la balise <img>, le chemin peut être absolu ou relatif.

    Si par exemple la valeur de l'attribut href vaut "mailto:adresse@mail" alors, en cliquant sur le lien, le logiciel de messagerie par défaut installé chez le client s'ouvrira en l'invitant à écrire un mail à "adresse@mail".
  • target: désigne où la page de destination sera ouverte. Il peut contenir plusieurs valeurs mais une seule est fréquemment utilisée il s'agit de _blank (n'oubliez pas le souligné avant le mot blank). La valeur _blank signifie que le lien sera ouvert dans une nouvelle fenêtre (ou nouvel onglet). C'est utile pour les liens pointant vers d'autres sites Web. Si l'attribut target n'est pas spécifié, alors la page de destination sera ouverte dans la même fenêtre.
  • title: décrit un message qui sera affiché dans une infobulle si on survole le lien avec la souris.


Exemple:
<a href="http://www.chiny.me" title="Aller vers chiny.me" target="_blank">
   Lien vers le site chiny.me
</a>
Ce qu'on aura sur le navigateur est:

Liens internes

Il arrive des fois qu'en cliquant sur un lien, on se déplace vers un autre emplacement dans la même page déjà ouverte. On l'appelle alors un lien interne.

Le principe est simple. Supposons que vous voulez prévoir un lien qui déplace l'internaute vers une image dans la même page. Ce qu'il faut faire c'est ajouter une ancre près de l'image (de préférence avant la balise <img>). L'ancre aura la forme suivante:

<a name="toto"></a>

(Vous être libre de mettre ce que vous voulez dans l'attribut name). Notez que cet ancre ne sera pas visible car la balise <a> ne contient aucun texte. Ensuite on va créer le lien qui nous mènera vers l'ancre créé comme ceci:

<a href="#toto">Aller vers toto</a>

Notez que le # fait référence à la page courante. Après le # on déclare le nom de l'ancre (la valeur de 'attribut name de tout à l'heure).

En cliquant sur le texte "Aller vers toto" on sera déplacé automatiquement vers l'ancre et par conséquent vers l'image souhaitée.

Pour voir à quoi cela ressemble, cliquez sur ce lien: Aller vers le haut.
Quiz (Pour tester vos connaissances)
  1. Bien que l'on peut redimensionner les images avec les attributs width et height, il est peu recommander de recourir à cette pratique.
Oui
Non
  1. Une page Web peut contenir un nombre illimité d'images
Oui
Non
  1. Tous les objets HTML déclarés dans la balise <a> deviennent des liens hypertextes et par conséquent actifs.
Oui
Non
  1. La balise <img> permet d'intégrer des images JPEG et PNG seulement
Oui
Non
  1. Les attributs alt et title, appliqués à une image, permettent de faire la même chose.
Oui
Non