Nu till det praktiska: infoga bilder på din webbsida.
HTML-märket för bilderna är <IMG> och det har inget slutmärke (</IMG>).
Du har redan bekantat dig med attribut för HTML-märken. <IMG>-märket har ett jätte viktigt attribut som inte kan uteslutas: SRC.
SRC står för ”source”. Där anger man adressen till bilden man vill infoga i sitt dokument.
<IMG src=”bild.gif”> eller <IMG src=”bild.jpg”>
Exemplet ovan fungerar enbart när bilderna och webbsidor ligger i samma katalog. Man brukar skapa en separat katalog för bilderna och då kan koden se ut så här:
<IMG src=”bildkatalog/bild.gif”>
En viktig sak som inte bör glömmas är versaler. En bild som heter Bild.gif är inte samma sak som en bild som heter bild.gif(gäller servrar med Unix/Linux operativsystem, vilket betyder majoriteten av alla webbhotell).
Det är inte allt förstås . Det finns en hel rad attribut du kan använda dig av för att åstadkomma olika saker med dina bilder.
ALT-attribut: möjliggör textvisning för angivna bilden. Du har säkert märkt att på vissa webbsidor får man upp en beskrivning då man pekar på en bild (utan att klicka).
Det är viktigt eftersom en del användare stänger av visning av bilder i sin webbläsare. I det fallet visas texten du angivit i ALT-attributet.
Exempel:
<IMG src=”bild.gif” ALT=”beskrivande namn på bilden”>
ALIGN-attribut: definierar bildens position i närliggande textområdet. Attributet kan anta följande värden:
left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom.
Där var det en del . Det är bara att prova sig fram:
<P><IMG ALIGN=”left” src=”bild.gif”> Den här texten visas på höger sida av bilden, längs hela bildens höjd. Det fina med det är att texten inte placeras under bilden vilket skulle hända om vi inte använt ALIGGN-attributet</P>.
Den här texten visas på höger sida av bilden, längs hela bildens höjd. Det fina med det är att texten inte placeras under bilden vilket skulle hända om vi inte använt ALIGGN-attributet.
Snyggt eller hur?:)
BORDER-attribut: anger tjockleken på ramen runt bilden. Rätt så ofta vill man inte ha någon ram alls. Men ibland är det till en fördel att ha det. Värdet som anges här är utryckt i pixel (1,2,3, …).
<IMG src=”bild.gif” BORDER=”3” ALT=”beskrivande namn på bilden”>
WIDTH- och HEIGHT-attribut: definierar bildens bredd och höjd. Ofta utesluter man detta helt och då visas bilden som den är.