“Hoe link je een image via HTML?”, oftewel, hoe maak je een klikbare afbeelding voor op een webpagina? Binnen een website kun je een plaatje altijd klikbaar maken. Je hebt deze HTML code nodig als je een download wilt aanbieden via een plaatje of banner, of als je mensen wilt laten klikken op een foto, zoals een boekomslag. Ook als je een “koop nu” knop gebruikt, is dat natuurlijk mooier dan alleen een kale hyperlink.

Een image, in HTML <IMG>, koppelen aan een link, vereist dus een extra HTML attribuut. Op deze pagina vind je het juiste HTML voorbeeld. Deze uitleg is handig als je een download wilt aanbieden in de vorm van een plaatje of als je een foto of afbeelding klikbaar wilt maken op je webpagina. 

Een link leggen onder een afbeelding, vereist dat je in de broncode van je webpagina de code voor je plaatje/foto/image uitbreid. Feitelijk staat er al <img>. Om die code heen, zet je de link. Het eerste deel is <a href=”https…”>. En je sluit de foto code af met </a>. Deze link image HTML code is correct om een klikbare afbeelding te maken op je webpagina. HTML link code:

Link image HTML code:

<p><a href=”doel-webpagina-nl”><img style=”margin: 0px 15px 0px 15px;” src=”plaatje-url-uit-je-media-map.jpg” alt=”trefwoord1-trefwoord2″ width=”100″ align=”left” />Dit is de leesbare tekst rechts ernaast maar deze tekst tussen de haken kun je ook in zijn geheel weghalen of inkorten</a></p>

Uitleg link image HTML code

Met bovenstaande code kun je dus een link toevoegen aan een foto, plaatje, afbeelding, button, icoon, banner of ander image. De code moet wel geplaatst worden in het HTML gedeelte van je website editor, deze editor heet ‘Tekst’ of is herkenbaar aan dit logo ‘<>’. Uitleg van de HTML tags voor plaatje linken:

  • <p> = nieuwe paragraaf
  • <a href=”url waar je naartoe wilt linken”>
  • <img style = de marges boven, links, onder en rechts in pixels uitgdrukt (de witruimten)
  • <src= “url van je fotobestand, kan ook de url zijn van een andere website dat dat plaatje host”
  • <alt = dit is voor Google om in woorden aan te geven wat op het plaatje staat
  • width =  breedte in pixels, deze staat nu op 100 pixels. Maar kan ook 10%, 33% of 100% worden ingesteld (=plaatje responsive maken).
  • align = Je kunt een image links (left), rechts (rechts) of vrij zetten in het midden (center). In dat laatste geval komt er links en rechts geen tekst naast het plaatje

1. HTML voorbeeld plaatje / image linken; de code

Stel je wilt een online een download aanbieden van een Word bestand. Dit kun je visueel zichtbaar maken door een icoon van een Word doc op een webpagina te plaatsen. En dit plaatje vervolgens klikbaar te maken, zodat de webbezoeker het bestand via de link kan downloaden. Als we onderstaande HTML code (zie grijs vlak hieronder) in de website zetten om een plaatje te linken, dan zie je daaronder wat het effect is van deze code. De code toont een plaatje dat klikbaar is, zodat een download kan plaatsvinden, of dat een gebruiker via een link (href) naar de juiste pagina toegaat. HTML code en uitwerking:

Link-image-html-code

 

2. HTML voorbeeld plaatje / image linken; de uitwerking:

link-image-html-plaatje

Meer uitleg over HTML code image link

Raadpleeg video-uitleg HTML link in plaatje plaatsen. Vervang de eerste link in de HTML code voor een bestaande webpagina url, vervang de tweede link met een url vanuit je mediabank. De url van je plaatje wil je linken. Je moet dus eerst een plaatje uploaden in de juiste maat. Hoe foto bijsnijden kan, zie je in dit filmpje. Je kunt HTML code veranderen. Je kunt een image links (left), rechts (rechts) of vrij zetten (centre). De breedte kun je ook wijzigen. Deze staat nu op 100 pixels. Maar kan ook 10%, 33% of 100% worden ingesteld. Hoe groot het plaatje dan precies wordt, hangt af van de breedte van het gebruikte scherm door de bezoeker (desktop, tablet of mobiel scherm).

Hopelijk kom je er zo uit!

Succes met WordPress.

 

 

Gerben G van Dijk.

Nieuwsbrief gerbengvandijk inschrijven blog over WordPress en webredactie

0 antwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *