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 dessa, 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 supportar 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.
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:
<!DOCTYPE html>
<html>
<head>
<title>Demosida</title>
</head>
<body>
<img src=”demo.png” alt=”En demobild”>
</body>
</html>
Detta är en av de enklaste, och antagligen mest förekommande, typen av länkar. Här kan du se hur exemplet blir att se ut.
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. 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 inte speciellt mycket. Det spelade roll i tidigare varianter av HTML (speciellt i XHTML), men i HTML5 saknar detta betydelse.
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 inte i alla andra läsare än.
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 egnaformat, PSD. Då kommer ingen webbläsare att kunna visa upp grafiken inbäddad i din webbsida.