Att länka till en bild

Nu när vi förstår hur sökvägar fungerar är det dags att prova på hur man kan länka till en resurs. Vi ska prova på att länka till en bild. Låt oss säga att vi har ett webbdokument som heter ”demo.html” och en bildfil som heter ”demo.png”. För det här exemplet måste webbsidan ligga i samma katalog som bildfilen, men om man vill kan man självklart länka till bildfiler som befinner sig var som helst. Vi ska nu se hur vi kan länka samman bilden till webbsidan, så att webbläsaren kan visa båda resurserna. Först behöver vi en ny tagg.

<img>

För att länka till bilder använder man sig av img-taggen, ”img” är förstås en förkortning av image, dvs; bild. img-taggen har en handfull egna attribut, men de som är mest intressanta för oss är ”src” och ”alt”.

src

Det första attributet, ”src”, är en förkortning för ”source” och är en webblänk/URL som pekar ut den källa eller resurs som man vill komma åt. I vårt fall ska vi bara länka till en fil som ligger i samma katalog, men det kunde lika gärna vara en fullständig URL som pekar på en extern bild. Det enda nödvändiga är att det verkligen är en bildfil som man pekar ut.

Webbläsare klarar inte av vilka bildformat som helst. Olika webbläsare stödjer olika bildformat. För att vara säker på att alla webbläsare ska klara av att visa upp dina bilder, kan du begränsa dig till ".jpg", ".png" eller ".gif". Kom ihåg att det även finns webbläsare som inte kan visa upp bilder! Ett exempel på detta kan vara en screenreader som ofta används av synskadade användare.

alt

Det andra attributet, ”alt”, är en förkortning för ”alternative” och anger ett textalternativ som ska visas (eller läsas upp) om webbläsaren inte kan visa bilder. Man ska alltid ange ett alt-attribut som förklarar vad bilden föreställer. Är det en rent dekorativ bild som inte tillför något kan man välja att ange ett tomt alt-attribut; alt="". Man ska alltså alltid ange attributet, även om det är satt till ingenting.

Vissa webbläsare visar även upp innehållet i alt-attributet när man håller muspekaren ovanför bilden.

Användning av <img>

För vårt exempelfall, skulle <img>-taggen kunna se ut så här:

<img src="demo.png" alt="En demobild">

Vad har vi nu åstadkommit med vårt img-element? Jo, vi säger att vi vill komma åt en fil som heter ”demo.png”. Då vi inte angett någon sökväg före filnamnet, förstår webbläsaren att den ska hämta resursen ifrån samma källa som den hämtade HTML-dokumentet ifrån. Vi har satt så att de som inte kan se grafiken kommer att få en liten text som säger att det är "En demobild" (verkligen ett uselt val till alt-text!).

Koden för hela vår sida skulle kunna se ut så här:

See the Pen WPaKpd by Patrik Grip-Jansson (@PGJ) on CodePen.

Självstängande-taggar

img-taggen är en av de taggar som inte kräver en sluttagg och det kan det inte uppstå några problem om man utelämnar sluttaggen. Anledningen till att man kan göra detta är att img-element inte kan innehålla några andra element. Det enda innehåll som kan genereras med en img är den bild som src refererar till, det går inte att ha några som helst underelement.

Vissa skriver taggen på följande sätt för att få till åstadkomma vad som kallas för en självstängande-tagg:

<img src=”demo.png” alt=”En demobild” />

Lägg märke till det avslutande ”/”-tecknet. Att skriva på detta vis är det samma som om man skulle skrivit:

<img src=”demo.png” alt=”En demobild”></img>

Detta är dock inte nödvändigt och tillför egentligen ingenting. Det spelade roll i tidigare varianter av HTML (speciellt i XHTML), men i HTML5 saknar detta betydelse. Det är att föredra att man inte använder sig av självstängande-taggar.

En varning är på sin plats; detta går inte att göra på alla taggar! Det är enbart möjligt att göra med så kallade ”void elements”, alltså de element som inte kan innehålla andra element. Återigen, det är inget du behöver göra, men det kan vara bra att förstå vad det betyder om du ser att någon annan gjort så.

Bildformat

Webbläsare klarar bara av att visa vissa typer av bildformat. Alla webbläsare som kan visa bilder, klarar av att visa JPEG-bilder. Det vill säga de bildfiler som har ändelsen .jpg. Även det gamla GIF-formatet är fullt supportat på alla visuella webbläsare. Alla moderna webbläsare klarar även av PNG-bilder, som slutar med .png (formatet uttalas egentligen "ping"). Många webbläsare klarar även av vektorformatet SVG, det skiljer sig dock lite i hur webbläsarna hanterar detta. Det finns andra format som vissa läsare klarar, t.ex. har Google stöd för något som heter WebP. Men detta stöds ännu inte i alla webbläsare.

När du lägger till bilder till dina webbsidor, måste du alltså se till att du använder dig av bildformat som stöds av webbläsarna. Om du skapat dina bilder i Adobe Photoshop, kan du inte lägga upp bilder som är sparade i Adobes egna format, PSD. Då kommer ingen webbläsare att kunna visa upp grafiken inbäddad i din webbsida.

Nästa aktivitet

Hyperlänkar - Att länka till en annan sida