Chapitre 1 : Créer une interface utilisateur avec HTML
Cours 04 : Les images et lien hypertexte
1- Les images
Pour afficher une image en HTML, on utilise la balise <img>.
Les différents attributs les plus utilisés dans la balise
<img>
src le chemin et le nom du fichier image
border Ajouter un cadre à l’image
width la largeur en pixels ou pourcentage (par rapport à la taille de la
page web)
height la longueur en pixels ou pourcentage (par rapport à la taille de la
page web)
align L’alignement de l’image Top, Bottom, Middle, Left, Right
alt Un texte apparait en survolant la souris sur l’image
Vspace correspond à des marges en haut et en bas de l’image
Hspace correspond à des marges à gauche et à droite de l’image
usemap indique au client que l'image en question est cliquable.
Style Cet attribut permet d’écrire du CSS dans La balise elle-même
id Cet attribut permet d’appeler un fichier CSS Soit à partir du même
fichier, soit à partir d’un fichier externe Pour exécuter les
commandes CSS sur la balise
class Cet attribut permet d’appeler un fichier CSS Soit à partir du même
fichier, soit à partir d’un fichier externe Pour exécuter les
commandes CSS sur la balise
1.1- Le chemin d’une image :
Il existe 3 méthodes pour préciser le chemin d’une image
a- Méthode 01 : Avoir l’image et la page web dans le même dossier, dans ce cas voici
comment préciser le chemin de l’image
b- Méthode 02 : L’image se trouve dans un sous dossier du dossier dans lequel se trouve
la page web, dans ce cas on écrit le nom du dossier suivi du symbole "/" puis le nom
de l'image avec l’extension comme suit :
Chapitre 1 : Créer une interface utilisateur avec HTML
c- Méthode 03 : avoir la page web dans un dossier et l’image dans un autre dossier, dans ce
cas on écrit ".." pour diriger le navigateur de sortir d'un dossier vers le dossier images
où se trouve l'image
Exemple 01 : Appliquer l’attribut Height et width
Remarque : On peut préciser les deux attributs Height et width en pourcentage
Exemple 02 : Appliquer l’attribut Vspace et Hspace
Chapitre 1 : Créer une interface utilisateur avec HTML
Exemple 03 : Appliquer l’attribut « border »
Chapitre 1 : Créer une interface utilisateur avec HTML
2- Les liens hypertextes :
Un lien hypertexte est un élément HTML permettant d'envoyer le visiteur vers une nouvelle page.
On peut insérer dans cet élément toute sorte de textes, images et autres balises. Un lien sera
représenté dans le code par la balise <a></a>. Tout ce qui sera dans cette balise fera office de lien.
Les différents attributs les plus utilisés dans la balise
<a></a>.
href Cet attribut permet d’orienté le lien vers une page web dans le
même site ou vers autre site
name Cet attribut permet d’orienté le lien vers la même page
Style Cet attribut permet d’écrire du CSS dans La balise elle-même
id Cet attribut permet d’appeler un fichier CSS Soit à partir du même
fichier, soit à partir d’un fichier externe Pour exécuter les
commandes CSS sur la balise
class Cet attribut permet d’appeler un fichier CSS Soit à partir du même
fichier, soit à partir d’un fichier externe Pour exécuter les
commandes CSS sur la balise
Il existe 4 méthodes pour définir les liens :
Méthode 01 : orienter le lien vers un autre site
Méthode 02 : orienté le lien vers une page précise dans le même site
Chapitre 1 : Créer une interface utilisateur avec HTML
Méthode 03 : Ajouter un lien image pour orienter vers un autre site une page précise du même
site
Méthode 04 : orienter le lien vers une adresse email, ainsi lorsque on clique dessus le programme de
la messagerie électronique apparait
Chapitre 1 : Créer une interface utilisateur avec HTML
3- Créer les cartes d’image : il s’agit d’avoir plusieurs liens dans la même image,
l’image sera divisée comme suit :
Pour un cercle (cercle) : on fournira les coordonnées X/Y du centre, suivies par la
longueur du rayon.
Pour un rectangle (rect) : on fournira les coordonnées X/Y des coins haut/gauche et
bas/droite.
Pour un polygone (poly) : on fournira les coordonnées X/Y de chacun des sommets (et
donc au moins six valeurs).
Les étapes de création des cartes d’image sont :
Étape 01 : on doit ajouter l’image et utilisé l’attribut Usemap
Étape 02 : Spécifier les régions actives
Dans cette étape, on utilise la balise <map>. Avec l’attribut : name dont la valeur doit
correspondre à celle utilisée pour l'attribut usemap de la balise <img>
Les différents attributs les plus utilisés dans la balise
<map></map>.
name Cet attribut nécessite l’utilisation de l’attribut usemap dans la
balise <img>
A l’interieur de la balise <map></map>.on aura besoin d'utiliser les éléments <area>.
Chacun de ces éléments correspondra à une région donnée
Les différents attributs les plus utilisés dans la balise
<area>.
shape Cet attribut prend l'une de ces quatre valeurs : circle (pour un
cercle), rect (pour un rectangle), poly (pour un polygone)
ou default (une zone default occupera l'image entière à laquelle on
aura retiré les autres zones déjà définies).
coords Cet attribut permet d’avoir les coordonnées des formes
précédentes
alt Un texte apparait en survolant la souris sur l’image
Chapitre 1 : Créer une interface utilisateur avec HTML
Exemple :
