J’avais commencé à enrichir la catégorie Html/Css de ce site avec l’article « apprendre le langage Html (Les bases) ». Nous avons vu comment créer et structurer une page Html de base. Certes, vous n’irez pas bien loin avec cet unique article car les pages que vous pourrez créer seront pauvres en contenu. Je vais donc m’atteler à vous apprendre à insérer des images, à améliorer la mise en page, à créer des liens Internet …
Aujourd’hui, nous allons donc voir comment facilement créer un lien web sur votre page Html. Le lien peut être inséré sur du texte ou sur une image. Les deux supports seront abordés.
Quelle balise Html pour créer un lien ?
Pour créer un lien Html, il faut utiliser la balise <a>. Mais cette balise Html nécessite l’utilisation de plusieurs attributs. L’attribut principal est l’attribut « href ». Voici donc la structure de base d’un lien Internet :
<a href= »http://www.lesiteinternetcible.fr »>Mon ancre texte ou image</a>
Parmi les autres attributs possibles :
- Target : prend les valeurs « _blank », « _parent », « _self », « _top », cet attribut permet d’ouvrir le lien dans une nouvelle fenêtre, dans la même fenêtre …
- Title : pour indiquer le titre du lien cible
- Rel : peut prendre des valeurs comme follow ou nofollow qui indiquent aux moteurs de recherche de suivre le lien ou pas.
- Style : pour insérer du code CSS (par exemple, pour modifier la couleur du lien, ou le souligner …)
- …
Dans l’exemple suivant, j’ouvre le site web cible dans une nouvelle fenêtre et j’indique à Google de ne pas suivre le lien (en d’autre terme, que ne je sais pas si c’est un site de confiance) :
<a href= »lesiteinternetcible » target= »_blank » rel= »nofollow »>Mon ancre texte ou image</a>
Créer un lien texte
Si je veux créer un lien vers la page d’accueil de Wikipédia avec l’ancre texte « Encyclopédie libre », j’utiliserais le code suivant :
<a href= »http://fr.wikipedia.org » title= »Wikipedia » target= »_blank »> Encyclopédie libre </a>, Ce qui donne : Encyclopédie libre
Le lien texte est le plus simple à créer. Après quelques minutes d’exercice cela devient complètement naturel.
Créer un lien image
Créer un lien sur une image j’ai besoin de deux balises Html (contrairement au lien texte). D’abord la balise <a> pour le lien, et ensuite la balise <img> pour l’image. Cette dernière a besoin de l’attribut src pour indiquer l’adresse de notre image et de l’attribut width pour indiquer la largeur de l’image (en pixel).
Pour parler plus concrètement, voici un simple code Html pour afficher une image :
<img src= »http://www.tutotek.com/wp-content/uploads/2014/01/DSC_4518-695×460.jpg » width= »400″>
Voici mon image qui s’affiche :
Je vais ensuite « envelopper » ma balise <img> d’une balise <a> pour insérer un lien sur l’image :
<a href= »http://www.tutotek.com/gerer-la-temperature-de-couleur-sur-lightroom-4-1/ » target= »_blank »>
<img src= »http://www.tutotek.com/wp-content/uploads/2014/01/DSC_4518-695×460.jpg » width= »400″>
</a>
Et voici le résultat, on peut désormais cliquer sur l’image pour ouvrir le lien :
Vous savez désormais comment créer un lien vers un site Internet, il ne vous reste plus qu’à vous exercer et à tester les différentes possibilités. Avec le temps et l’habitude, cette action deviendra aussi simple que de taper un texte en français 😉
Si vous avez apprécié cet article, s’il vous a été utile, n’hésitez pas à le partager. Grâce à vous l’information circulera et d’autres personnes pourront bénéficier de ce tuto liens web.