HTML

Bilder

För att lägga in en bild på din sida använder du <img>-taggen, med attribut. <img> har av naturliga skäl ingen sluttagg.

Attribut till <img>:

src
Source. Bildkälla, värdet till attributet src är adressen, URL:en till bilden som skall visas. Nödvändig
alt
Alternativtext. Värdet till detta attribut skall vara en beskrivning av bilden. Av olika skäl kan det vara så att själva bilden inte visas, då finns alternativtexten där med information om vad det skall vara för bild. Skall vara med, inte minst för tillgänglighet (t ex för synskadade).
longdesc
Long description, lång beskrivning. Här kan du lägga in URL:en till en sida med en mer ingående beskrivning av motivet eller sidan där bilden förekommer i sitt originalsammanhang. Detta är inte samma sak som en länk i egentlig mening. Inte lika vanlig som src och alt, men i alla fall. Inte nödvändig. longdesc finns inte längre kvar i HTML 5, eftersom det har använts sällan och det inte är helt uppenbart vad det gör för nytta.
width
Detta attribut bestämmer hur stort bilden skall visas. Värdet är ett mått i pixlar. När du ställer in bildbredden, width, kommer bildens höjd anpassa automagiskt. Detta görs bättre med CSS.
height
Fungerar som width, men på andra ledden. Jag rekommenderar att du använder antingen width eller height, inte båda. Om man försöker använda båda är det högst sannolikt att du kommer att ge bilden fel proportioner. Bättre med CSS.

Både width och height kan ersättas med motsvarande egenskaper i CSS, vilket jag rekommenderar.

Du kan pröva koden:

<img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Tim_Berners-Lee.jpg" alt="Tim Berners Lee, killen som uppfann webben" height="200" longdesc="http://www.w3.org/People/Berners-Lee/>

Om man i stället reglerar storlek och utseende med CSS, slipper man en hel del saker att skriva. Longdesc kan man också utelämna. En minimal bildtagg (samma som ovan) skulle då se ut som följer:

<img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Tim_Berners-Lee.jpg" alt="Tim Berners Lee, killen som uppfann webben">

Bilder som länkar

För att använda en bild som en länk behöver du bara sätta en <a>-tagg runt en <img>-tagg på följande sätt:

<a href="http://www.w3.org/People/Berners-Lee/"><img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Tim_Berners-Lee.jpg" alt="Tim Berners Lee, killen som uppfann webben" height="200" longdesc="http://www.w3.org/People/Berners-Lee/">