Visa källa för Att länka till en bild

Nu när vi förstår hur [[sökväg]]ar 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 ”<code>demo.html</code>” och en bildfil som heter ”<code>demo.png</code>”. 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]].

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

=== <code>src</code> ===
Det första attributet, ”<code>src</code>”, ä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.

<div class="well well-warning">
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 "<code>.jpg</code>", "<code>.png</code>" eller "<code>.gif</code>". 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.
</div>

=== <code>[[alt]]</code> ===
Det andra attributet, ”<code>[[alt]]</code>”, ä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 <code>[[alt]]</code>-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 <code>[[alt]]</code>-attribut; <code>alt=""</code>. Man ska alltså alltid ange attributet, även om det är satt till ingenting.

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

== Användning av <code>&lt;[[img]]></code> ==
För vårt exempelfall, skulle <code>&lt;[[img]]></code>-taggen kunna se ut så här:

<syntaxhighlight lang="html5">
<img src="demo.png" alt="En demobild">
</syntaxhighlight>

Vad har vi nu åstadkommit med vårt <code>[[img]]</code>-element? Jo, vi säger att vi vill komma åt en fil som heter ”<code>demo.png</code>”. 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 "<code>En demobild</code>" (verkligen ett uselt val till <code>alt</code>-text!).

Koden för hela vår sida skulle kunna se ut så här:
<codepen pen="WPaKpd" tab="html,result" height="300">
</codepen>

== Självstängande-taggar ==
<code>[[img]]</code>-taggen är en av de [[tagg]]ar som inte kräver en [[sluttagg]] och det kan det inte uppstå några problem om man utelämnar [[sluttagg]]en. Anledningen till att man kan göra detta är att <code>img</code>-element inte kan innehålla några andra element. Det enda innehåll som kan genereras med en <code>[[img]]</code> är den bild som <code>src</code> refererar till, det går inte att ha några som helst underelement.

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

<syntaxhighlight lang="html5">
<img src=”demo.png” alt=”En demobild” />
</syntaxhighlight>

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

<syntaxhighlight lang="html5">
<img src=”demo.png” alt=”En demobild”></img>
</syntaxhighlight>

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-tagg]]ar.

<div class="well well-danger">
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å.
</div>

== 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 <code>.jpg</code>. Ä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 <code>.png</code> (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.

<div class="well well-danger">
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.
</div>

== Nästa aktivitet ==
[[Hyperlänkar - Att länka till en annan sida]]

[[Category:Webbutveckling]]