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 jpg-fil som heter ”demo.jpg”. Bilden och webbsidan ska ligga i samma katalog för att detta exempel ska fungera. 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, ”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. Den andra, ”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 en alt-tagg 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 en tom alt-tagg; alt=””.
För vårt exempel fall, skulle img-taggen kunna se ut så här:
<img src=”demo.jpg” alt=”En demobild”>
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.jpg” 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.jpg” 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 någon gör så.
Vad har vi nu åstadkommit med vårt img-element? Jo, vi säger att vi vill komma åt en fil som heter ”demo.jpg”. 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.jpg” alt=”En demobild”>
</body>
</html>
Detta är en av de enklaste, och antagligen mest förekommande, typen av länkar.