“Hoe link je een image via HTML?” (knip en plak onderstaande HTML). Je kunt de vraag op verschillende manieren stellen: “Hoe maak je een plaatje klikbaar?” of “Hoe maak je een afbeelding link in HTML?” of simpelweg “Hoe kan ik een foto link maken?”. 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.

Link image HTML code

Onderstaande link image HTML code is correct om een plaatje op je webpagina een link mee te geven:

<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 *