Linking Image in HTML: How to create links from images

We gaan een beginnersvriendelijke kijk nemen op hoe u image links op uw website maakt.

We zullen bekijken welke HTML-tags u in de code moet gebruiken.

als u dit nog nooit eerder hebt gedaan, maak u geen zorgen! Ik zal je door het hele proces begeleiden.

aan het einde van dit artikel zult u afbeeldingskoppelingen maken op uw webpagina en op het Internet.,

We gaan ook kijken naar wat meer geavanceerde technieken tegen het einde van het artikel als je je dapper voelt.

pak een koffie, laten we erin duiken!

Hoe maakt u een Hyperlink aan?

om links op uw startpagina te krijgen moet u een hyperlink maken. Om dit in HTML te doen moet u een <a> tag gebruiken. Elke <a> tag bestaat uit twee delen: het openen en sluiten van tag.,

Hier is een voorbeeld:

<a href="..."> ...</a>

In het bovenstaande kunt u zien dat de open tag:

<a href="...">

het begin van de hyperlink Maakt. Daarna sluiten we de tag met:

</a>

elke tekst die we schrijven tussen de open en close tag is uw link tekst. Bijvoorbeeld:

<a href="..."> My Great Link</a>

om dit om te zetten in een link moeten we een URL toevoegen. Om dit te doen voegen we de URL toe aan het href attribuut., De URL kan verwijzen naar overal op het internet. In dit voorbeeld gaan we de pagedart homepage gebruiken:

<a href="https://pagedart.com"> My Great Link</a>

zorg ervoor dat de volledige URL met HTTPS aan de voorkant wordt toegevoegd.

dat is alles wat er is om een tekst-only link in HTML te maken. Laten we vervolgens eens kijken hoe we een afbeelding kunnen toevoegen aan een webpagina met behulp van HTML.

Hoe maak je een afbeelding in HTML?

om een afbeelding aan uw webpagina toe te voegen, gebruikt u een img tag.,

deze tag verschilt enigszins van een a tag omdat het geen openings-en sluitingstag heeft.

om een img tag aan te maken, moet u de tag een bronbestand geven. Gebruik het src attribuut om dit te doen:

<img src="https://pagedart.com/favicon-32x32.png">

Dit zal een afbeelding toevoegen aan het scherm als volgt:

nu hebben we een afbeelding die we nodig hebben om er een link van te maken., Om dat te doen moeten we een <img> tag toevoegen in de <a> tags die een linking image in HTML maken.

laten we eerst een voorbeeld bekijken.

Image as a link

om een afbeelding om te zetten in een link moet u de<img> tag toevoegen in de<a> tag., In ons eerdere voorbeeld zou de broncode er als volgt uitzien:

<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"></a>

die deze HTML zou produceren:

door de tag binnen een <a> tag de browser kan zien dat de afbeelding klikbaar moet zijn. Je hebt het beeld veranderd in een link!

Als u WordPress gebruikt, kunt u deze HTML-code aan uw pagina toevoegen met behulp van de tekstweergave in de pagina-editor.

u kunt ook tekst en afbeeldingen toevoegen in de link, laten we hier eens naar kijken.,

afbeelding en tekst als Link

het voorbeeld hierboven liet zien hoe alleen een afbeelding als link kan worden toegevoegd.

Wat als we zowel een afbeelding als tekst aan een link willen toevoegen.

wel, in dit geval moeten we ervoor zorgen dat we de tekst toevoegen voordat we de <a> tag:

<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"> PageDart Home </a>

in het bovenstaande hebben we “PageDart Home” toegevoegd <a> tag samen met de <img> tag., Wanneer het getoond wordt in een webbrowser op de pagina ziet het er als volgt uit:

er is nog een attribuut op de <img> tag die we niet besproken hebben en die u zou moeten gebruiken.

het is het alt attribuut.

Afbeeldingsverkoppelingen en het Alt-attribuut

afbeeldingen op internet moeten een alt attribuut hebben. Dit is een tekstbeschrijving van de afbeelding.

schermlezers gebruiken de alt-tekst om visueel gehandicapte gebruikers te helpen. De schermlezers zullen de tekstbeschrijving voorlezen wanneer het een afbeelding vindt.,

om dit te doen voegen we een alt attribuut toe aan de img tag als volgt:

<a href="https://pagedart.com"> <img alt="PageDart.com" src="https://pagedart.com/favicon-32x32.png"></a>

nu wanneer de schermlezer leest deze afbeelding het zal zeggen “PageDart.com” hardop.

Het is belangrijk om de beste praktijken te volgen bij het schrijven van alt-tekst.

denk na over de persoon die de schermlezer gebruikt. Schrijf uw alt tekst beschrijving voor hen en beschrijf de afbeelding zo goed mogelijk.

Dit is alles wat u nodig hebt om linking images in HTML te maken., Toch zijn er een paar meer geavanceerde technieken die u kunt gebruiken. Als je je dapper voelt, zullen we hierna naar deze Kijken.

geavanceerde techniek: Image as a Link using CSS

een meer geavanceerde techniek is het gebruik van CSS. CSS staat voor Cascading Style Sheet en het stelt u in staat om te veranderen hoe een HTML-pagina eruit ziet.

met CSS kunt u een achtergrondafbeelding instellen op een element zoals onze <a> tag.,

Hier hebben we HTML die er als volgt uitziet:

<style> a { background-image: url("https://pagedart.com/favicon-32x32.png"); display: block; height:32px; width:32px; }</style><a href="https://pagedart.com"></a>

dus deze keer is er niets in de <a> maar de afbeelding is ingesteld met behulp van de CSS-stijl. Dit toont het volgende in de browser:

We kunnen een soortgelijke techniek gebruiken met een <button> tag.

geavanceerde techniek: met behulp van een knop

in dit voorbeeld gebruiken we de <button> tag in plaats van de <a> tag.,

We kunnen dezelfde uitvoer maken als het voorbeeld hierboven met behulp van deze HTML:

die deze uitvoer maakt:

Hier gebruiken we JavaScript om een nieuw tabblad te openen. Het verzenden van de gebruiker naar de pagedart home page.

Ik heb geen idee waarom je dit ooit zou doen! Maar ik wilde je laten zien wat mogelijk is en hoe flexibel HTML, CSS en JavaScript kunnen zijn.

Het Laatste voorbeeld dat ik ga laten zien is een afbeeldingskaart gebruiken.

geavanceerde techniek: Afbeeldingskaart

Afbeeldingskaarten zijn afzonderlijke afbeeldingen met klikbare gebieden., Ze hebben populariteit verloren door de jaren heen, maar ze zijn nog steeds onderdeel van de HTML5-specificatie. Dit betekent dat browsers zoals Internet Explorer, Chrome en Safari hen zullen ondersteunen.

diagrammen zijn goede voorbeelden van Afbeeldingsafbeeldingen zoals organisatiediagrammen, als volgt:

om van elk roze gebied een klikbare link te maken, maken we een map als volgt:

we hebben het attribuut usemap toegevoegd aan de img tag.,

dan hebben we binnen de map tag een area tag. Elk van deze gebieden creëert een klikbaar gebied dat fungeert als een knop.

met behulp van een Linking Image in HTML

we hebben vijf verschillende manieren bekeken om een afbeelding toe te voegen als een link op uw webpagina:

1. een afbeelding als een link
2. afbeelding en tekst als een link
3. gebruikmakend van CSS om een afbeelding als een link in te stellen
4. gebruikmakend van een knop als een link
5. gebruikmakend van afbeeldingskaarten

naar links. Je moet nu het vertrouwen hebben om dit zelf te proberen.,

we hebben ook gekeken naar Toegankelijkheid en hoe Alt-tekst kan worden ingesteld om slechtzienden te helpen.