HTML Referensbok

Elementen OBJECT och IMG används för att infoga bilder i ett HTML-dokument. Elementet IMG är ett s.k. inlineelement då det förekommer i linje med texten - följer texten. Det är just därför säger man inline-bilder då de följer något annat element, mao befinner sig i stycken eller rubriker (logo). Bilder också används i länkar skapade av elementet A (istället för den klickbara texten) och imagemaps.

IMG är även ett ersättningelement, dvs dess innehåll (bild) finns inte i själva dokumentet utan får platsen bibehållet och laddas (ersätts), enligt de hänvisningar som specificeras i elementets attribut, efter det att dokumentet har begärts.

Det finns många ställen på nätet där du kan ladda freeware-bilder. Vill du skapa/bearbeta egna ladda hem ett av shareware-programmen, t ex Paint Shop Pro. Det är inte tillåtet att ta andras bilder utan att fråga.

Att tänka på:

Tänk på följande innan du börjar bädda in bilder i dokumenten:

Bildformat

F.n. ger HTML stöd åt tre bildformat: gif, jpeg/jpg och png:

GIF- Graphics Interchange Format: max 256 färger, används för inline bilder såsom skärmdumpar eller teckningar. Bilden kan sparas med transparant bakgrund (89a), intercaled - laddas i sin helhet men först som om den var i en låg upplösning som förbättras gradvis under laddningen för att vara hög efter det att bilden har laddats, nonintercaled - laddas i hög upplösning men "öppnas" stegvis uppifrån (från övre till nedre delen).
JPEG - Joint Photographic Experts Group: används för fotografier. Varje gång bilden sparas komprimeras den ytterligare. Det förminskar bildens kvalité. Därför, om du ska bearbeta bilden, spara den först i ett icke komprimerat format, jobba i det formatet och spara till jpeg/jpg till sist
PNG - Portable Network Graphics: ett nytt format som som blev en rekommendation den 1 oktober 96. Då formatet är nytt stödjs det inte av alla www-klienter. Formatet skapar en hög bildkompression som lämpar sig bäst på WWW.

Bild/fil storlek i kB

Ju större bilden är desto längre nedladdningstid. Bilder på 50 - 60 kB är inte lämpliga. Försök begränsa storleken till MAX 25 kB för bilder (helst ännu mindre) och 5 - 10 för bakgrundsbilder. Genom att minska på färgantalet kan du reducera storleken. Ange ALLTID bildens storlek när du länkar den till något dokument. Det tillåter besökaren välja om han/hon vill se/ladda den eller inte. Ofta avskräcker stora bilder. Om du har en imagemap på indexsidan glöm inte att även inkludera alternativ text. En imagemap innehåller bara länkar till andra dokument. Och det är inte många som har tillräckligt med tålamod att vänta tills bilden har laddats. Ha alltid i tankarna att varje sekund räknas.

Det är ingen ide att försöka förminska bilden genom att uppge falska mått då filens kB-storlek påverkas inte och nedladdningstid kommer att vara lika lång som om bilden visades i sin naturliga storlek.

En god ide däremot är att visa små bilder (thumbnails) och länka dem till större variant och på så sätt låta besökaren välja.

Miljoner färger

Det är långt ifrån alla som kan se alla de 16 miljonerna. Sådana bilder kan vara väldigt oattraktiva när de ses med "fel" utrustning.

Innan du laddar bilden kontrollera hur den ser ut på 256-färgsskärmar. Ser bilden bra ut kommer den även vara ok i högre upplösningar.

OBS!

Om du använder bilden som länk glöm inte tilldela elementet A attributet TITLE som underlättar, speciell i icke-visuella www-klienter, presentation av länken och på så sätt gör dokumentet mer tillgängligt. Attributet beskrivs i %attrs;
Adobes PageMill lägger till attributet NATURALSIZEFLAG=n som talar om en bild visas i original storlek eller inte. För att kunna validera dokumentet måste du radera tillägget då det inte finns något sådant attribut i HTML.

IMG är ett tomt element, dvs saknar innehåll. En sluttagg är förbjuden i tomma element och får inte användas.

Attribut

HTML 4.0	HTML 4.0 Transitional	HTML 3.2
Alla attribut som beskrivs i %attrs; och SRC, ALT, LONGDESC, HEIGHT, WIDTH, USEMAP, ISMAP	samma som i HTML 4.0 och ALIGN, BORDER, HSPACE, VSPACE	SRC, ALT, ALIGN, HEIGHT, WIDTH, BORDER, HSPACE, VSPACE, USEMAP, ISMAP

SRC

Detta attribut är obligatoriskt, står för källa (source) och specificerar var filen/bilden är lokaliserad, dvs dess värde är en adress (URL) till det ställe där bilden befinner sig. Adressen kan vara relativ eller absolut men den måste skrivas exakt. BILD.gif och bild.gif är inte samma fil. Observera hur ditt grafikprogram sparar bilden då ibland tilläggs filtilläget med stora bokstäver medan du själv använder små bokstäver i värdet (eller tvärtom). Det upptäcks först när bilden inte syns efter att den har laddats till servern. Kontrollera tilläget om din bild "försvinner". OBS! Värdet måste citeras.

ALT

Även detta attribut är obligatoriskt (ej HTML 3.2). ALT står för alternativ text dvs en kort beskrivning om vad bilden föreställer. Denna text kommer användaren att kunna läsa om bilden inte kan visas, t ex i textbaserade www-klienter eller även i grafiska sådana med bildfunktionen avstängd. För att spara tid ca 30% av användare surffar på detta sätt. Om den alternativa texten saknas kommet ett dokument att se ut så här:

Uppge inte icke relevant information i den alternativa texten. Skriv inte ALT="black bullet" om bilden innehåller en punkt (bullet) utan lämna strängen tom ALT="". Använder du bilden enbart i dekorationssyfte skriv ALT="*", om det är en dekorativ avdelare (HR) skriv ALT="------------". Den sistnämnda kan dock ställa till problem i taldatorer då alla bindestreck avläses "bindestreck" x antal gånger. I alla andra fall skriv vad bilden föreställer.

LONGDESC

LONGDESC står för long descrition och används för att förse användaren med en längre beskrivning av bilden eller om bilden är en imagemap, speciell server-side, med information om kartans innehåll. Attributets värde är en adress till filen där beskrivningen finns.

WIDTH och HEIGHT

Med dessa två attribut uppges bildens bredd och höjd så att en www-klient kan layoutmässigt presentera dokumentet innan bilderna har laddats. Är dessa attribut kända reserveras den plats bilder behöver och dokumentet presenteras enligt de tänkta dimensionerna. Saknas attributen presenteras dokumentet som det skulle se ut utan bilder och "struktureras om" då bilderna har laddats.

Attributets värde kan uppges i pixlar eller procent (ej HTML 3.2). Procentvärden relaterar till vertikala och horisontell utrymme som är tillgängligt och inte bildens naturliga storlek. OBS! procentvärden måste citeras.

Du kan ändra bildens storlek genom att uppge falska mått. Resultatet dock är inte bra. Dessutom är filens egentliga storlek (kB) oförändrad och tar lika lång tid att ladda som om bilden visades i sin naturliga storlek samt servern belastas med onödiga kB. Om bilden behöver förminskas eller förstoras - gör det i bildbehandlaren.

ISMAP och USEMAP

Med dessa två attribut talat du om att bilden är en aktiv bild, dvs en imagemap. ISMAP hänvisar till en s.k. server-side imagemap medan USEMAP till en client-side imagemap. Genom att använda båda attributen samtidigt kan du koppla bilden till båda två.

USEMAP:s värde är det namn med vilket elementet MAP namnges. Värdet börjar du med en stege #, t ex #toolbar och på så sätt länkar bilden med map-information. Värdet måste citeras.

ISMAP:s värde är ISMAP och behöver inte uppges. Attributet enart talar om att bilden är en aktiv bild men själva uppkopplingen till map-filen sker via elementet A.

Mer om image maps finner du här

ALIGN - (endast HTML 4.0 Transitional och HTML 3.2)

OBS! - attributet är nedskrivet, dvs dess stöd garanteras ej i framtida verioner av HTML.

ALIGN kontrollerar textflöde runt om bilden och kan ta följande värden: TOP, MIDDLE, BOTTOM (standardvärde), LEFT, RIGHT.

I HTML 4.0 kontrollerar du textflödet via egenskapen FLOAT till vilket ett lämpligt värde deklareras, t ex:

IMG {float: right}

OBS! attributet justerar inte själva bilden i förhållande till skärmen eller andra element. För att justera bilden justerar du det element i vilket bilden befinner sig, t ex P eller H1.

BORDER - (endast HTML 4.0 Transitional och HTML 3.2)

Attributet är nedskrivet.

Om bilden är en länk kommer www-klienten att rita en ram runt om den så att den kan åtskiljas från vanliga bilder. Du kan ta bort ramen genom att tilldela BORDER värdet 0 eller rita tjockare ram genom att tilldela BORDER värdet som är högre än 0. Siffran du skriver motsvarar antal pixlar. Även till vanliga bilder, dvs inte länkar, kan attributet tilldelas och på så sätt rama dem i dekorationssyfte.

HSPACE och VSPACE - (endast HTML 4.0 Transitional och HTML 3.2)

Attributen är nedskrivna.

HSPACE (horizontal space) producerar horisontell marginal mellan bilden och texten runt om eller andra element medan VSPACE (vertical space) producerar vertikal marginal. Texten (eller andra element) flyttas det i pixlar uppgivna värdet till höger och vänster (HSPACE) eller över och under (VSPACE) om bilden.

Värdet uppges i pixlar.