Visst kan det vara snyggt med massor av grafik och bilder, men tänk på att ju mer grafik -dess längre tid tar det att ladda sida!

Grafik skall vara genomtänkt och förtydliga sidan - inte göra den rörigare!

En bild säger mer än 1000 ord!

Färgkoden för en specifik färg ges på formen rrggbb, där rr är den röda komponenten i färgens RGB, i hexadecimalt format.gg motsvaras av den gröna komponenten och bb följdaktligen av den blå. Varje komponent kan ha värden mellan 0 och 255 decimalt, alltså mellan 00 och FF hexadecimalt. Färgkoden för vitt blir alltså FFFFFF och för rött FF0000. Några exempel nedan. Du hittar fler ex i hjälpfilen

För att lägga in bilder på websidan används taggen <IMG> som har många tillägg. JPEG och GIF är de vanligaste grafikformaten idag och stöds av alla moderna browsrar. Vilket av formaten som är bäst är väl mycket upp till dig själv, men som huvudregel kan man väl säga att:
JPEG: Till stora "tunga" bilder.
GIF: Till transparenta bilder, där man vill att websidans bakgrund skall ersätta vissa delar på bilden. Även om man vill ha en så kallad interlaced-bild (en förenklad bild laddas först på sidan innan den riktiga bilden laddas = snabbare överblick av sidan) är väl GIF att föredra. Men smaken är som baken......
För att få en bild på sidan. så krävs det att du anger, var bilden skall hämtas i från (SRC), och var den skall vara på sidan. Men för att det skall se någorlunda snyggt ut också, så bör man ange mer enligt nedan:

SRC="URL"
Det viktigaste tillägget, som måste vara med; adressen till bildfilen. De vanligaste bildformaten, som alla moderna webklienter stöder, är JPEG och GIF.
<p><img src="ev sökväg/bildens namn"></p> Ger en bild på sidan
<p><img src="ev sökväg/bildens namn">Bildtext</p> Ger en bil med text till
<p><a href="http://adress"><img src="ev sökväg/bildens namn"></a>Bildtext</p> Ger ovanstående plus att det sker ett hopp då man klickar på bilden.

ALT="text"
Textsträngen du anger med ALT-tillägget visas vid flera tillfällen:
Webklienter utan stöd för bilder (exempelvis Netscape Navigator med Auto Load Images avslagen)
visar denna text istället för bilden.
<p><img src="ev sökväg/bildens namn" alt="text"></p>

HEIGHT=n och WIDTH=n
Dessa tillägg kan antingen användas för att ändra visningsstorleken för en bild, eller för att tala om för webklienten vilka
mått bilden har. Genom att veta hur stor bilden är kan browsern rita upp sidan innan laddningen av bilderna påbörjas.
<p><img src="ev sökväg/bildens namn" width=55 height=99></a>Bildtext</p>

HEIGHT=n% och WIDTH=n%
När bildens höjd och bredd anges med procent är det för att ändra bildens visningsstorlek. Var noga med att bibehålla bildens proportioner annars kan det se helt knasigt ut.

BORDER=n
Det här tillägget använder du för att ange tjockleken på ramen som läggs runt bilden om den är länkad. Det går
alldeles utmärkt att skriva BORDER=0 för att få bort ramen helt och hållet.
<p><img src="ev sökväg/bildens namn" border=0 ></a>Bildtext</p>

ALIGN=[XXXXX]
Används för att placera bilden på rätt ställe. Det finns som du ser ganska många olika alternativ.
<p><img src="ev sökväg/bildens namn" align=bottom ></a>Bildtext</p>

LEFT och RIGHT
För att få bilden att flyta till höger eller vänster om texten. Texten wrappas runt bilden på ett snyggt sätt.

TOP och TEXTTOP
TOP lägger bildens överkant i nivå med toppen på den högsta saken på raden. TEXTTOP lägger bildens
överkant i nivå med toppen på den högsta bokstaven på raden. Det är i de flesta fall ingen skillnad.

MIDDLE och ABSMIDDLE
MIDDLE centrerar bilden (vertikalt) till textens baslinje. ABSMIDDLE centrerar bilden till textens mittlinje.

BASELINE och BOTTOM
Gör samma sak, d.v.s. lägger bildens nederkant i nivå med textens baslinje.

ABSBOTTOM
Lägger bildens nederkant i nivå med den lägsta punkten på textraden. (Bokstäver som t.ex. j, g och q går
nedanför baslinjen.)

Du kan med andra ord bestämma väldit mycket om bilders placering mm, genom att kombinera olika taggar.
<p><img src="ev sökväg/bildens namn" align=bottom border=2 width=55 height=99></a>Bildtext</p>

Du kan ändra bakgrundsfärgen på din websidan, lägga in en egen bild som bakgrund samt att ändra färgen på text och länkar på sidan. Detta gör du med hjälp av tillägg till <BODY>-taggen.

BACKGROUND="URL"

BGCOLOR="#färgkod/färgnamn"

BACKGROUND och BGCOLOR används för att ange en bakgrundsbild och/eller enbakgrundsfärg till sidan. Du kan använda samma bildformat till bakgrundsbildersom till vanliga bilder - GIF och JPEG. Däremot fungerar inte specialfunktionernai GIF89a (transparenta färger och interlacade bilder) på bakgrundsbilder. Du kanfaktiskt ange både en BACKGROUND och en BGCOLOR - detta medför att färgen specifierad med BGCOLOR visas i väntan på att bildfilen specifierad med BACKGROUND laddas.

 gör det!

a) Lägg in en bild på din hemsida. Gör en ny katalog image under C:\hemsida\image och lägg din bild där.Har du följt mina anvisningar hitintills så har du en bild som heter vap.gif i din katalog som heter C:\HTML\help\vap.gif. Kopiera den filen till image -biblioteket.

b)Lägg in bilden under VÄLKOMMEN på din index.htm, dvs den skall vara centrerad också.

(om du inte klarar ovanstående så kan du titta på mitt Exempel 2:9:3a)

c)Testa din sida! Lägg ev in en annan bakgrundsfärg också.

Nu är avsnitt 2 klart!

Du skall nu ha i ditt bibliotek: C:\hemsida filer som heter index.htm, egosida.htm, links.htm och i biblioteket C:\hemsida\image skall du ha en fil som heter vap.gif(ev har du en egen) Du är altså helt klar för att LÄGGA UT EN EGEN HEMSIDA.Det kommer vi att göra i avsnitt 4. Du kanske är ivrig och vill ha ut den snarast, men vänta ett tag för i nästa avsnitt kommer vi att använda verktyg för att hotta upp sidan lite - och jag lovar det är lönt att plöja igenom avsnitt 3 innan du lägger ut sidan. När avsnitt 3 är klart får du ett e-mail om hur du hämtar avsnittet.