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”.
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 URL som pekar på en extern bild. Det enda nödvändiga är att det verkligen är en bildfil som man pekar ut.
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 exempel fall, 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”.
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 inte går 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å.
Nästa aktivitet: Hyperlänkar - Att länka till en annan sida