Infoga bilder

1. Bildformat för Internet

Det finns en mängd bildformat som ger bilden lite olika egenskaper. Vanligtvis väljer vi de format som är lämpligast utifrån det ändamål vi har. Olika format innebär olika bildkvalitet och storlek. Storlek inte i yta, utan i hur mycket plats den tar i datorns minne. En bild kan i ett format kräva en lagringsyta på 1,0 MB, medan samma bild i ett ".jpg" format bara kräver en plats på 300 K. En viss skillnad alltså. Skillnaden består i att bilden är sparad i olika många pixlar. Pixlar är de små, små färrutorna som bygger upp bilden. Större antal pixlar innebär bättre kvalitet, men också att den går långsammare att ladda ner till sidan.

På Internet är formaten .jpg och .gif de mest användbara.

2. Vi infogar bilder

Hur lägger vi in en vanlig bild? Den har ett namn och ett filtillägg på *.jpg eller *.gif. Ett namnexempel kan vara huset.gif. När vi lägger in den på vår sida, använder vi följande kod inom body sektionen: <img src="huset.gif" width="200" height="60" alt="Huset" border="0">.

img betyder image (bild). Detta talar om att vi lägger in en bild på vår sida. src betyder källa och vi talar om vad bilden är döpt till (sparad som). Denna HTML kod behöver inte avslutas. Det är bäst att också ange bildens storlek i pixlar. Detta sker genom width som anger den horisontella storleken och height som anger dess vertikala motsvarighet. Storleken varierar från bild till bild och denna kan vi få exempelvis genom ett bildbehandlingsprogram. Det går att inte nämna storlek alls, även om det inte rekommenderas.

Om inte webbläsaren lyckas ladda ner bilden vilket ibland sker, kan det vara bra att lägga in alt="något namn" i HTML koden. Om bilden inte öppnas kommer det namn/ord vi lägger in här att visas istället. Funktionen fungerar också så att detta namn visas i en liten rektangulär ruta, när vi för muspekaren över den.

Genom att skriva border="1" väljer vi att ha en linje runt bilden. Ju högre värde, desto bredare linje. Kan användas för att skapa vissa effekter. Värdet "0" tar bort ramen helt.

Om bilden heter huset.gif, kan vi inte skriva huset.jpg. Vi kan inte heller skriva Huset.gif. Om bilden heter husEt.gif, måste vi skriva i HTML koden husEt.gif. Om vi inte skriver rätt med gemener och versaler samt använder punkt före gif och cituationstecken runt namnet, kommer vi inte lyckas lägga in den på vår sida!

Om bilden INTE ligger i samma mapp som html-dokumentet, måste vi ange detta. Ligger bilden i mappen "bilder", får vi skriva <img src="bilder/huset.gif">.

En enkel kod där jag infogat 3 stycken bilder:

<html> <head> <title>Sida med Bilder</title> </head> <body bgcolor="#ffffff"> <img src="h_logo.gif" width="105" height="115" border="0" ALT="Logotype"> <img src="Handels.jpg" width="207" height="167" border="0" alt="Handels"> <img src="kameleont_2.jpg" width="166" height="256" border="0" alt="kameleont"> </body> </html>

3. Text och bilder placeras in

Vi kan också styra textens placering i förhållande till bilden. Men nedanstående exempel är ovanligt. I stället blir detta både enklare och bättre om vi istället använder oss av tabeller (se sidan om Tabeller).

Vi placerar in bilden enligt ovan. Men nu anger jag koderna hspace, vspace och align=left resp. right. Med hspace och vspace anger jag hur stort avståndet skall vara i pixlar (horisontellt respektive vertikalt) mellan texten och bilden. Med align=left anger jag att bilden skall vara på vänster sida om texten och med align=right placerar jag bilden på höger sida istället. Men som sagt, denna teknik är ovanlig och lite svårare!

<html> <head> <title>Placera text och bilder</title> </head> <body bgcolor="#ffffff" text="#000000"> <h2>Vi placerar in text och bilder</h2> <img src="hus2.jpg" width="186" height="122" hspace="12" vspace="7" align=left border="0" alt="Huset"> Den löpande texten..... <img src="hus1.jpg" width="186" height="122" hspace="12" vspace="7" align=right border="0" alt="Huset"> Den löpande texten..... <br> <br> <br> </body> </html>

4. Vilka bilder kan vi ha som bakgrund?

I princip kan vi ha alla bilder som finns och som är i *.jpg eller *.gif format. Små bilder kommer att "upprepa sig", tills de täcker bakgrunden. Det ser inte alltid snyggt ut. Tillräckligt stora bilder åstadkommer inte detta fenomen, utan förblir en bild. En sak som är viktig att tänka på är att bilden inte försvårar läsningen.

På Internet finns det en mängd gratis bakgrundsbilder som vi kan använda till våra sidor. Högerklicka med musen och välj "Spara Bakgrund Som"/"Save Background As". Observera att alla bakgrundsbilder inte får användas utan tillåtelse och observera copyright-skyddet.

5. Vi infogar bakgrundsbilder

Istället för att använda bakgrundsfärg kan vi lägga in en bakgrundsbild. Denna kommer att hamna bakom både text och andra bilder vi lägger in på sidan. Men eftersom det tar en liten tid innan bilden laddas ner, kan det vara en fördel att också ange en bakgrundsfärg, då i samma nyans som bakgrundsbilden.

Vi lägger in bilden i body och det kan se ut så här i koden: <body bgcolor="#d3d3d3" background="kameleont_back.jpg" bgproperties="fixed">. Jag väljer en bild med namn kameleont_back.jpg och genom bgproperties="fixed" anger vi att den skall ligga stilla i förstret och inte följa med texten, när vi använder rullningslisten. Denna senare funktion fungerar i Internet Explorer, men inte i Netscape. Naturligtvis behöver vi inte ange bgproperties alls, om vi vill att bilden skall "följa med" texten i våra rörelser med rullningslisten.

Jag har i nedanstående exempel använt mig av kameleont_back.jpg som bakgrundsbild. Vill du ha den att pröva med, öppna resultatet nedan, högerklicka med musen och välj "Spara Bakgrund Som"/Save Background As".

Vi infogar en bakgrundsbild:

<html> <head> <title>Bakgrundsbild</title> </head> <body bgcolor="#d3d3d3" background="kameleont_back.jpg" text="#000000" alink="#0000FF" vlink="#ff0000"> </body> </html>





kontakt	© Stefan Dahlén	Söndag 20:e juli 2008