Liens et images en HTML

Et voilà un petit article pour étoffer ma rubrique informatique.

1. IMAGES

Première chose indispensable pour un site web : mettre des images !

Pour cela c'est tout simple, il faut utiliser la balise <img>  Pour indiquer quelle image vous voulez insérer il faut utiliser l'attribut src (source) avec le chemin d'accès à votre image (elle doit être sur un serveur web et pas sur votre machine à vous).

Par exemple  :

<img src="http://pg92.free.fr/Images/banniere_photos_voyages.jpg" />

Ce code va afficher dans un navigateur web :

Vous pouvez rajouter l'attribut alt qui permet de mettre un texte alternatif qui s'affichera à la place de l'image s'il y a un problème pour afficher celle-ci et qui apparaîtra en message bulle quand vous placer votre souris quelques secondes sur l'image.

Pour le code cela donne :

<img src="http://pg92.free.fr/Images/banniere_photos_voyages.jpg" alt="Photos de voyages" />

Et pour l'affichage dans le navigateur :

Placer votre souris quelques secondes sur la première image... rien de se passe. Faites la même chose sur la deuxième et vous verrez le texte apparaître en info bulle.

Même si ces infos suffisent, on peut préciser les dimensions de l'image par sa longeur (width) et sa largeur (height). Le code complet est donc :

<img src="http://pg92.free.fr/Images/banniere_photos_voyages.jpg" alt="Photos de voyages" width="468" height="60" />

2. LIENS

 Autre tag à connaître absolument, le tag <a></a> qui permet de mettre des liens vers une page d'un même site ou vers une page d'un autre site. L'adresse du lien doit être mis dans l'attribut href. On peut faire le lien sur un texte, c'est donc ce texte qui doit être mis entre la balise d'ouverture <a> et la balis de fermeture </a>

Exemple :

<a href="http://pg92.free.fr">Lien vers le site 'Photos de voyages'</a>

Cela donnera à l'affichage :

Lien vers le site 'Photos de voyages'

Comme vous pouvez le remarquer, la nouvelle page s'affiche dans le même navigateur internet, vous perdez donc l'endroit d'où vous venez. Ca peut être utile quand on passe d'une page à l'autre sur un même site (on ne va pas ouvrir un nouveau navigateur à chaque fois qu'on passe d'une page à une autre !) Par contre si on fait un lien vers un autre site on préfère en général garder la page actuel. On lui précise alors la cible (target en anglais) avec target="_blank" ce qui pourrait se traduire par 'la cible est une nouvelle page blanche'.

Pour le code cela donne :

<a href="http://pg92.free.fr" target ="_blank">Lien vers le site 'Photos de voyages'</a>

Et à l'affichage :

Lien vers le site 'Photos de voyages'

3. IMAGE-LIEN

Et maintenant, le top du top, faire un lien avec une image !

C'est tout simple une fois que l'on a compris les deux points précédents, il suffit de remplacer le texte entre les balises lien par le code de l'image. Pour éviter d'avoir un cadre autour de l'image lie on peut rajouter border="0" dans le tag de l'image. Cela donne :

<a href="http://pg92.free.fr" target ="_blank">
<img src="http://pg92.free.fr/Images/banniere_photos_voyages.jpg" alt="Photos de voyages" width="468" height="60" border="0" />
</a>

Et à l'affichage on retrouve la bannière standard faisant un lien vers un site web :