Comment rendre une image cliquable en HTML & CSS ?

Non classé, Web DevelopmentNo Comments

You Are Here:, Web DevelopmentComment rendre une image cliquable en HTML & CSS ?

Lorsque l’on code en HTML & CSS et qu’on n’est plus en apprentissage, c’est-à-dire que l’on ne suit plus une formation la plupart du temps les gens font des sites. Et ce qui est évidemment primordial sur site c’est la barre de navigation (Comment crée un Menu simple et épurée en HTML & CSS ?),  un menu quoi. Et si tu es un peu près au courant du Web design de la plupart des sites d’aujourd’hui  tu dois savoir que la majorité  des sites ont le menu à droite,  avec à gauche le logo de leur site, entreprise etc… qui est cliquable dirigeant sur la page d’accueil du site, Et justement une question qui revient souvent est comment rendre le logo cliquable,  c’est pourtant très simple cependant peu d’instructeurs l’explique. C’est justement pour cela que je réalise cet article.

 

 

Ce tuto est simple du niveau débutant, je l’ai donc écrit en partant du principe que tu es un débutant. J’espère juste que tu n’es pas venu sur cet article uniquement pour te donner bonne conscience sans réaliser le tuto :D. D’ailleurs je t’explique le rôle de chaque balise et propriété, afin que tu ne fasse pas un vulgaire copier-coller sans rien comprendre. Aller commençons !

-y

y

y

Comment rendre une image cliquable ?

 

On va directement rentrer dans le vif du sujet, tu vas voir que sa vas vraiment être rapide. Commence donc par trouver une image de ton choix, j’ai personnellement choisis “Nils” que vous mettrez au même emplacement que votre page HTML.

 

Tu vas ensuite crée la structure minimal d’une page HTML (Si tu ne sais pas comment sa fonctionne je t’invite à lire mon article : “C’est quoi la Structure Minimal d’une page HTML ?“.

 

Ensuite tu vas ajouter une image avec la balise “img” et les propriété “src” et “alt” et “class” (qui nous seras inutile étant donné qu’on utilisera pas de CSS) :

La balise “img” te permet tout simplement d’ajouter une image sur ton site, ici on lui attribut trois propriété :

  • “class” vas vous permettrez de lui mettre un nom pour crée une référence à cette image en CSS.
  • “src” permet simplement de choisir qu’elle image tu veux, il suffit de rentrer le nom de l’image, la où elle se trouve et surtout son extension (jpg, png, etc…).
  • “alt” est facultatif mais permet d’afficher un texte à la place de l’image si le visiteur ne peux pas afficher l’image pour X ou Y raison.

 

Voilà, ce que ça donne pour le moment :

 

 

Désormais, on vas rajouter notre fameux liens en entourant notre balise “img”, de la balise “a” en y ajoutant les propriétés “href” et “target” :

La balise “a” te permet tout simplement de crée un lien pour ta page HTML sur l’image que tu as choisis.

  • “href” est une propriété dans laquelle tu dois renseigner le lien que tu souhaite ouvrir en cliquant sur l’image.
  • “target” est facultatif mais permet d’ouvrir le liens dans un nouvel onglet à l’aide de la valeur “_blank”.

 

Et voilà le résultat, teste tu verras =)

 

 

Dorénavant, tu sauras faire un logo cliquable, du moins une image. Même si c’est relativement simple il est important de le savoir, comme j’ai pu le dire pour créer un site traditionnel si je puis dire. Bref,  il est important que tu sois bien tout assimilé car :

Apprendre sans réfléchir es vain. Réfléchir sans apprendre est dangereux.” –Confucius

Oui, j’ai décidé de terminer mes articles avec une citation innovante. Dans tous les cas j’arrête cet article ici ! Mais je voudrais savoir si cet article ta été utile ou du moins ta plus, n’hésite pas à me donner ton avis en commentaire ou sur mes réseaux sociaux ! Aller bonne apprentissage jeune outsider !

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Top