XHTML Tutorial - Kapitel 7: Bilder

Om du har läst igenom de tidigare kapitlen i denna tutorial, så bör du kunna skapa alla möjliga sorters text-innehåll vid det här laget, och även länka ihop dina sidor med varandra via ankar-taggar. Artiklar med enbart ren text kan ju dock tyvärr ofta bli lite tråkiga i längden, så det är väl på tiden att vi nu även introducerar lite bilder, eller mer specifikt, taggen <img>.

För att kunna arbeta med img-taggen, behöver du ju förstås också ha någon form av bild-fil. Om du inte har någon själv just nu får du gärna ladda ner bilden som jag lagt här till höger, av en tulpan som jag fotograferat i min trädgård. Högerklicka på bilden, välj "Spara som" och döp bilden till "blomma.jpg".



För att visa bilden på en hemsida behöver du bara inkludera den i attributet src="" i en <img>-tagg. "Src" är en förkortning för "source" (sv. "källa") och används även i flera andra HTML-element för att ange källfiler.

Ett exempel på en bit kod som visar blomman på skärmen:

<html>
  <head>
    <title>Bildkod</title>
  </head>
  <body>
    <h1>Blomma</h1>
    <img src="blomma.jpg" alt="En fin röd blomma" />
  </body>
</html>

Observera även att bildfilen blomma.jpg måste ligga i samma mapp som .html-filen för att exemplet ovan ska fungera.



Enligt vad som börjat bli normen för dessa små exempel, så finns det återigen ett litet oväntat överraskningsmoment i HTML-koden. Två, egentligen. Låt oss titta lite närmare på <img>-taggen igen, utan allt det andra runt omkring.

<img src="blomma.jpg" alt="En fin röd blomma" />

Det första vi lägger märke till är att det nu inte finns någon slut-tagg. Varför? Den behövs helt enkelt inte. En bild är bara ett enda objekt, och den behöver inte applicera sig själv på någon annan del av innehållet. Den har inget behov av att "sträcka sig runt" något annat. Men eftersom detta är XHTML-syntax så behöver den fortfarande (till skillnad från klassisk HTML) "stängas" på nåt sätt. Därför avslutas taggen med ett slash-tecken istället för en extra </img>.

Det andra du nog lagt märke till är att det finns ett till attribut bredvid src="", nämligen alt="", satt till "En fin röd blomma". Detta värde, alt="", är faktiskt helt nödvändigt för en <img>-bild i XHTML (återigen i motsats till vanlig HTML).

Det spelar faktiskt ingen roll om alt="" är helt tom. Den är ändå nödvändig att ha med i alla dina <img>-taggar.



Vad alt="" egentligen gör tekniskt sett är att bifoga ett "alternativt" sätt att få veta vad bilden föreställer. Om bilden av någon anledning inte kan visas så kan vi ändå läsa texten i alt=""-attributet genom att placera muspekaren över bilden. På det viset kan vi få reda på vad bilden skulle ha föreställt.

Dessutom, så använder t.ex många människor med nedsatt syn röststyrda webbläsare som i vissa fall läser upp texten i alt="" högt för dem, så att de också får veta vad bilden föreställer utan att fysiskt kunna se den.

I andra fall, även om bilden är fullt synlig, så kan det ändå vara svårt att se vad den föreställer om den är väldigt liten eller en dåligt ritad ikon, etc. Det kan då vara en välkommen hjälp för besökaren om man ger en förklarande text när han eller hon för pekaren över bilden.



Ett par andra mycket vanligt förekommande attribut på bildtaggar är width="" och height="", som anges för att ställa in vilken bredd och höjd bilden ska visas i. Dessa är inte nödvändiga, men rekommenderas eftersom de direkt när sidan laddas talar om för webläsaren hur mycket plats som ska reserveras för varje bild. Om attributen width="" och height="" utelämnas får browsern reda på dessa först när bilden laddats, vilket kan resultera i diverse ganska fula små "hopp" i sidlayouten innan allt kommit på plats.

En annan funktion med width="" och height="" är att man faktiskt kan ange vilka värden som helst där - det behöver inte nödvändigtvis vara bildens egentliga höjd och bredd. Tulpan-bilden ovan t.ex har en storlek av 115 x 100 punkter, men om vi istället skulle ange dessa värden i bild-taggen:

<img src="blomma.jpg" width="600" height="25" alt="En fin röd blomma" />

Så får vi detta lustiga resultat istället:





Du kan förstås också göra bilder till klickbara länkar på samma sätt som med text, genom att placera taggarna <a href=""> och </a> runt <img>-taggen och skriva in URL'en i href=""-attributet. Svårare än så är det inte :o)





< Tidigare: Länkar

robert@eagleowl.se 026-16 13 61 www.eagleowl.se
©2018 EagleOwl