Bilder
Så här lägger du in bilder på din webbsida
Taggen <img> står för image, och är den tagg som håller bilderna på din hemsida.
Img-taggen börjar med <img och avslutas med /> i en typ av kombinerad öppnings- och avslutningstagg. Mer förståelse för detta får du då du kollar in kodexemplet nedan.
<img src="images/testbild.jpg" width="143" height="107" alt="text" title="När du för musen över bilden så kan du läsa den här texten om du använder Firefox webbläsare!" />
Bild-taggen img avslutas alltså med /> och inte med </img>.
I det här kodexemplet ingår de typiska komponenterna:
src="SökvägTillBilden.gif" | Talar om var bilden ligger på din server eller ditt webbhotell.
width="bredd" | Bredden i pixlar. Ange bara ett värde (utan "px"), ingenting annat.
height="höjd" | Höjden i pixlar. Ange bara ett värde (utan px), ingenting annat.
Kommentar: Egentligen ska width och height inte anges i själva XHTML-koden om man vill följa strict CSS-standard. Du kommer att lära dig det korrekta sättet i CSS-guiden.
När du använder dig av DreamWeaver så kommer src, width och height att läggas in automatiskt då du väljer en bild.
alt="text" | Här skriver du in den text som ska ersätta bilden om bilden av någon anledning inte skulle laddas korrekt. Ej nödvändig.
title ="text" | Här skriver du in den text som ska visas när musmarkören förs över bilden. Observera att Internet Explorer, som följer webbstandarden sämre än exempelvis Mozilla Firefox, inte stöder denna titel utan istället visar alt-texten när du för muspekaren över bilden. Internet Explorer är för övrigt dåligt på att följa W3C webbstandard vilket skapar problem för oss webbdesigners då vi måste lägga tid på att hitta lösningar som fungerar på olika webbläsare istället för att lägga upp nytt läsvärt material. Ej nödvändig.
Så här ser koden som jag skrev in tidigare ut när vi kör den i en webbläsare, förutsatt att du har bilden vill säga...
Så här ser koden för Webbdesigna.se:s logo ut (för tillfället - det kommer garanterat att ändras)
<img src="../images/logo.gif" alt="Webbdesigna.se Logo" title="L&är dig Webbdesign på Webbdesigna.se!" width="200" height="192" />
Koden för Webbdesigna.se:s logo i sitt sammanhang med huvudtaggarna html, head, och body (tom webbsida med bild):
<html>
<head></head>
<body>
<img src="../images/logo.gif" alt="Webbdesigna.se Logo" title="L&är dig Webbdesign på Webbdesigna.se!" width="200" height="192" />
</body>
</html>
