länka bild i HTML: hur man skapar länkar från bilder

Vi kommer att ta en nybörjare vänlig titt på hur man skapar bildlänkar på din webbplats.

Vi kommer att titta på vilka HTML-taggar du behöver använda i koden.

om du aldrig har gjort det här tidigare, oroa dig inte! Jag kommer att vägleda dig genom hela processen.

i slutet av den här artikeln kommer du att skapa bildlänkar över hela din webbsida och Internet.,

Vi kommer också att titta på några mer avancerade tekniker mot slutet av artikeln om du känner dig modig.

ta en kaffe, låt ” s dyka in!

Hur skapar du en hyperlänk?

för att få länkar på din hemsida måste du skapa en hyperlänk. För att göra detta i HTML måste du använda en <a> – tagg. Varje<a> – tagg har två delar öppnings-och stängningstaggen.,

här är ett exempel:

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

i ovanstående kan du se att den öppna taggen:

<a href="...">

skapar början på hyperlänken. Sedan stänger vi taggen med:

</a>

all text som vi skriver mellan den öppna och stäng taggen är din länktext. Till exempel:

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

för att göra detta till en länk måste vi lägga till en URL. För att göra detta lägger vi till webbadressen till href-attributet., Webbadressen kan peka på var som helst på internet. I det här exemplet kommer vi att använda pagedart-hemsidan:

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

se till att inkludera hela webbadressen med HTTPS på framsidan.

det är allt som finns för att skapa en text-only-länk i HTML. Låt oss sedan titta på hur vi kan lägga till en bild på en webbsida med HTML.

Hur skapar du en bild i HTML?

för att lägga till en bild på din webbsida använd enimg – tagg.,

den här taggen skiljer sig lite från ena – tagg eftersom den inte har någon öppnings-och stängningstagg.

för att skapa enimg – tagg måste du ge taggen en källfil. Använd attributet src för att göra detta:

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

detta kommer att lägga till en bild på skärmen så här:

nu har vi en bild som vi behöver för att vända den in i en länk., För att göra det måste vi lägga till en<img> – tagg i<a> – taggar som skapar en länkningsbild i HTML.

Låt oss titta på ett exempel nästa.

bild som en länk

för att göra en bild till en länk måste du lägga till<img> – taggen inuti<a> – taggen., Så med vårt tidigare exempel skulle källkoden se ut så här:

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

vilket skulle producera denna HTML:

genom att lägga till <img> – taggen i en

div id = ”70f3bd8570” > tagga webbläsaren kan se att bilden ska vara klickbar. Du har gjort bilden till en länk!

Om du använder WordPress kan du lägga till HTML-koden på din sida med hjälp av textvyn i sidredigeraren.

Du kan också lägga till text och bilder i länken, låt oss titta på detta.,

bild och Text som en länk

exemplet ovan visade hur man bara lägger till en bild som länk.

Tänk om vi ville lägga till både en bild och text till en länk.

Tja, i det här fallet måste vi se till att vi lägger till texten innan vi stänger<a> taggen:

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

i ovanstående har vi lagt till ”PageDart Home” inuti<a> taggen tillsammans med<img> taggen., När det visas i en webbläsare på sidan kommer det att se ut så här:

det finns ytterligare ett attribut på <img> – taggen som vi inte har diskuterat och du bör använda.

det är attributet alt.

bildlänkar och Alt-attributet

bilder på internet ska ha ETTalt – attribut. Detta är en textbeskrivning av bilden.

skärmläsare använder alt-texten för att hjälpa synskadade användare. Skärmläsarna läser ut textbeskrivningen när den hittar en bild.,

för att göra detta lägger vi till enalt attribut tillimg tagg så här:

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

Nu när Skärmläsaren läser den här bilden kommer den att säga ”PageDart.com” högt.

det är viktigt att följa bästa praxis när du skriver bild alt text.

se till att du tänker på den person som använder Skärmläsaren. Skriv din alt-textbeskrivning för dem och beskriv bilden så gott du kan.

det här är allt du behöver för att skapa länkande bilder i HTML., Ändå finns det några mer avancerade tekniker som du kan använda. Om du känner dig modig kommer vi att titta på dessa nästa.

avancerad teknik: bild som en länk med CSS

en mer avancerad teknik är att använda CSS. CSS står för Cascading Style Sheet och det låter dig ändra hur en HTML-sida ser ut.

med CSS kan du ställa in en bakgrundsbild på ett element som vår<a> – tagg.,

här skulle vi ha HTML som ser ut så här:

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

så den här gången finns det inget inuti<a> men bilden är inställd med CSS-stilen. Detta skulle visa följande i webbläsaren:

Vi kan använda en liknande teknik med en <button> – tagg.

avancerad teknik: med en knapp

i det här exemplet kommer vi att använda<button> – taggen istället för<a> – taggen.,

vi kan skapa samma utdata som exemplet ovan med hjälp av denna HTML:

som skapar denna utdata:

här använder vi JavaScript för att öppna en ny webbläsarflik. Skicka användaren till Sidadart hemsida.

Jag har ingen aning om varför du någonsin skulle göra det här! Men jag ville visa dig vad som är möjligt och hur flexibel HTML, CSS och JavaScript kan vara.

det sista exemplet Jag ska visa använder en bildkarta.

avancerad teknik: bildkarta

bildkartor är enstaka bilder med klickbara områden., De har förlorat popularitet under åren men de är fortfarande en del av HTML5-specifikationen. Detta innebär att webbläsare som Internet Explorer, Chrome och Safari kommer att stödja dem.

diagram är bra exempel på bildkartor som organisationsscheman, så här:

För att göra varje rosa område till en klickbar länk skulle vi skapa en map så här:

Vi har lagt till attributet usemap till img – taggen.,

sedan imap – taggen har vi enarea – tagg. Var och en av dessa områden skapar ett klickbart område som fungerar som en knapp.

använda en länkande bild i HTML

Vi har tittat på fem olika sätt att lägga till en bild som en länk på din webbsida:

1. en bild som en länk
2. bild och text som en länk
3. använda CSS för att ställa in en bild som en länk
4. använda en knapp som en länk
5. använda bildkartor

alla dessa kan förvandla bilder till länkar till. – herr talman! Du bör nu ha förtroende för att prova detta själv.,

Vi har också tittat på tillgänglighet och hur du ställer in Alt-text för att hjälpa synskadade.