Bakgrund och färger
I det här avsnittet skall du lära dig hur du bestämmer färg till bakgrunden, hur du styr textfärgen och hur du gör för att använda en bild i stället för färg i bakgrunden.
Allt detta kan göras antingen genom att du lägger koden direkt i hemsidan eller genom att du ändrar på stilmallen. Du kommer att lära dig båda metoderna.
Dessutom lär du dig att ändra mindre textblock så att de får ett annat utseende än resten av texten på sidan.
Det blir ett långt avsnitt, som du kanske bör ta i ett par omgångar.
Katastrofala felGenom att lägga fel färg eller bild i bakgrunden, kan man omvandla sin sida till en katastrof.
Titta på exemplen här, där det första är en murrig bakgrundsfärg, det andra en mycket förvirrande bakgrundsbild och det tredje ett ambitiöst försök att skapa en spännande bakgrund - även om resultatet inte blev så bra. Alla tre är hämtade "direkt ur verkligheten".
Din besökare kan ändra inställningarna i sin webbläsare, och ange att all text skall vara till exempel gul. Om du har angett att bakgrunden till din hemsida skall vara gul, men inte talat om vilken färg texten skall ha, kommer sidan att visas som gul med gul text och bli helt oläslig.
När du bestämmer bakgrundsfärg på sidan, bör du därför samtidigt bestämma vilken färg texten skall ha.
Bestäm färger till bakgrunden och textenÖppna din hemsida i textredigeraren. Ändra den inledande <BODY>-taggen så här:
<BODY text="#000080" class="bakgrund">
Spara hemsidan igen.
Den här ändringen ger sidan en ljust gul bakgrundsfärg (bgcolor). Om du i stilmallen till din hemsida har angett ett färgvärde för texten (<P>-taggen), kommer textfärgen inte att ändras. Annars får du en marinblå text.
Öppna din hemsida i webbläsaren så att du ser hur det blev.
StandardfärgerSom du tidigare har lärt dig, kan färger anges med ett hustecken följt av färgens hexadecimala RGB-värde - som här med #000080 eller #FFFFCC.
Men det finns ett antal så kallade standardfäger som du kan ange direkt, med färgens namn i stället. Öppna sidan med standardfärger här.
Om du vill använda någon av standardfärgerna, till exempel marinblå text, kan du ändra koden ovan till:
<BODY text="navy" class="bakgrund">
Det ger exakt samma resultat. Koden för den ljusgula färgen kan du inte ange med namnet, eftersom den inte hör till standardfärgerna.
Webbsäkra färgerTroligen vill du använda andra eller fler färger än det lilla standardurvalet. Din skärm kan antagligen visa miljontals färger, men det finns bara 216 färger som visas likadant på alla skärmar. Om du använder färger som inte hör till dessa så kallade webbsäkra färger, finns risken att din sida får ett helt annat utseende än du hade tänkt dig.
Öppna sidan med de webbsäkra färgerna - du ser att de trots allt är ganska många och att det finns möjlighet att variera sidans utseende en hel del även om man håller sig bara till dem. På varje färgruta står det hexadecimala RGB-värdet för färgen. Ibland är det svårt att läsa detta värde. Dubbelklicka då i färgrutan, så visas värdet tydligare.
Du kan använda vilken som helst av de här färgerna till bakgrund och text. Ett exempel:
<BODY text="#9900FF" bgcolor="#CCFF99">
Det gör att sidan om Haj i Hjälmaren ser ut så här, men först fick jag ta bort färgvärdet för <P>-taggen i stilmallen.
Ändra i stilmallen i ställetAntagligen vill du ha samma utseende på alla dina hemsidor - de blir fler så småningom. Då behöver du inte göra något tillägg i <BODY>-taggen - du gör ändringarna i stilmallen i stället.
Öppna textredigeraren och din stilmall - hemsida.css. Längst upp lägger du till följande:
/* bakgrundsfärg */
BODY {
background-color:#CCFF99;
}
Gå ned till blocket P - det som anger egenskaperna för texten. Lägg in en ny rad - före font-size och font-family - och skriv följande där:
color:#9900FF;
Spara stilmallen.
Öppna hemsidan (HTML-filen) i stället. Ta bort ändringarna du gjorde i <BODY>-taggen. Spara hemsidan och titta på den i webbläsaren.
teckensnitt - trots stilmallen
Om du vill dra speciell uppmärksamhet till en viss text, kan du göra det genom att ge texten en färg som avviker från färgen på annan text. För att ytterligare markera texten kan du dessutom använda ett annat teckensnitt.
Det som står i stilmallen eller i <BODY>-taggen styr hela sidan. Men eftersom HTML-koden är "hierarkisk" kommer det som står i en tagg mellan de båda <BODY>-taggarna att styra innehållet i just den taggen. Titta på det här exemplet:
Hierarkisk kod
Hierarkisk kod har en beslutsfattarordning.
Exempel: Stilmallen anger hur text inom <B> ... </B> skall se ut.
Om du skriver <FONT SIZE="2"><B>Din text</B></FONT> kommer texten att visas som stilmallen säger.
Om du "flyttar ut"
B-taggen och skriver
<B><FONT SIZE="2">Din
text</FONT></B> kommer
texten att visas som FONT-taggen säger.
<P>Den här texten
visas med "standardsvart" som anges i stilmallen.</P>
<P><FONT COLOR="#FF0000">Den här
texten blir röd</FONT></P>
Här kommer alltså en ny tagg, nämligen <FONT> ... </FONT>. Den påverkar allt som står mellan den inledande och den avslutande taggen, ovasett vad som står i stilmallen eller <BODY>-taggen.
Med <FONT>-taggarna bestämmer du färg, teckensnitt och teckenstorlek. Det gör du genom att lägga till olika attribut i den inledande taggen.
Ovan har jag lagt in egenskapen "röd färg": COLOR="#FF0000" - egenskapen placeras alltså i den inledande <FONT>-taggen, på samma sätt som vi gjorde med <BODY> ovan.
Om jag nu vill att teckensnittet skall vara ett annat än det som är standard för min sida, lägger jag in även den egenskapen:
<P>Den här texten
visas med "standardsvart" som anges i stilmallen.</P>
<P><FONT COLOR="#FF0000"
FACE="Times New
Roman">Den här
texten blir röd och visas med teckensnittet Times New Roman</FONT></P>
Det nya attributet här är FACE, men jag vill ändra textstorleken också.
<P>Den här texten
visas med "standardsvart" som anges i stilmallen.</P>
<P><FONT COLOR="#FF0000"
FACE="Times New
Roman" SIZE="+1">Den här
visas större än standardtexten</FONT></P>
Här är SIZE det nya attributet och du kan använda det på flera sätt. Använt så här ökar det textens relativa storlek.
SIZE="-2"
SIZE="+2"
SIZE="+3"
Använt så här anger det en absolut storlek på texten - du kan använda värdena 1-7.
SIZE="1"
SIZE="2"
SIZE="3"
Dessutom kan du ändra textens utseende genom att göra den kursiv eller halvfet. Koden för detta sätter du utanför <FONT>-taggarna, och om du inte tänker ändra teckensnitt, textstorlek eller textfärg utesluter du <FONT>-taggarna helt.
Runt text som skall vara kursiv sätter du taggarna <I> ... </I> (av engelskans "italic").
Runt text som skall vara halvfet sätter du taggarna <B> ... </B> (av engelskans "bold").
<P><I>Den här texten blir kursiv</I></P>
<P><B>Den här texten blir halvfet</B></P>
<P><B><FONT COLOR="#008000">Den här texten blir grön och halvfet</FONT></B></P>
Den här sidan har en bild i bakgrunden. Det är en liten bild - om den vore lika stor som sidan, skulle det ta enormt lång tid att ladda in bilden. Bilden är i själva verket bara 8 pixlar hög och lika bred som sidan, men den upprepas över hela sidlängden.
Detta är ett sätt att använda en liten bild över en hel sida. Vitsen med detta är att bilden bara behöver laddas en gång, oavsett hur många gånger den sedan används.
Ett annat sätt är att använda så kallade "tiles" - små bilder som upprepas gång på gång på både längden och tvären.
Det här är en sådan tile-bild - just den här tog jag från Cool Archive där det finns massor av bilder och annat som du kan hämta helt gratis och använda på din hemsida:
Och här kan du se hur den täcker en hel sida.
Hur ser koden ut?Om du vill använda bilden ovan medan du lär dig hur man gör, kopierar du den först till din hemsidesmapp. Högerklicka på bilden, välj "Spara bild som..." och bläddra dig fram till hemsidesmappen. Öppna undermappen bilder (om du inte redan har en sådan, gör du den nu) och spara bilden där.
Sökvägen från din hemsida till bilderna som du skall använda på den, kommer nu att bli bilder/bildnamn.jpg (eller med den filändelse som bilden har).
Filnamnet på bilden ovan är backg8.jpg och det är detta namn jag använder nedan. Du kan kalla den något annat, men tänk på att använda små bokstäver.
Viktigt att tänka på när det gäller sökvägarNär du anger byte av mapp i hemsideskoden, gör du detta med ett vanligt snedstreck / - inte med ett bakåtlutat streck \ som annars.
Öppna textredigeraren och din hemsida (index.html). Ändra den inledande BODY-taggen så här - i fortsättningen skriver jag normalt inte ut tagghakarna annat än i de vita kodblocken:
<BODY BACKGROUND="bilder/backg8.jpg">
Spara hemsidan igen och titta på den i webbläsaren.
Det här skrivsättet betyder: Som bakgrund på den här sidan används bilden backg8.jpg som härifrån sett ligger i nästa mapp, bilder.
För att du skall se skillnaden antar vi nu att du har en annan mappstruktur, så att bilden ligger i en mapp på samma nivå som HTML-sidan. Så här:
Då skulle koden i stället se ut så här:
<BODY BACKGROUND="../bilder/backg8.jpg">
Vilket betyder: Gå ett steg bakåt, växla till mappen bilder och hämta i denna mapp filen backg8.jpg.
Det här kommer du att använda mycket, eftersom det är praktiskt att samla olika typer av filer i egna mappar.
Relativ sökväg/absolut sökvägPå det här sättet anger du den relativa sökvägen till bildfilen. Det är när man använder den metoden som det är viktigt att ha exakt samma mappstruktur på hårddisken som på servern. Alternativet är att ange filens absoluta sökväg, alltså hela URL:en (internetadressen) till den. I det här fallet skulle det, om din hemsida ligger på Telenordia som ett exempel, kunna se ut så här:
<BODY BACKGROUND="http://www.tninet.se/~fgedca/bilder/backg8.jgp">
Detta kan man till nöds stå ut med, även om det blir en massa onödig kod. Värre är att om du har den absoluta sökvägen angiven finns det risk för att bakgrunden och andra bilder inte hittas när du försöker öppna sidan i webbläsaren utan att vara uppkopplad. Därför bör du så långt det är möjligt använda dig av relativa sökvägar.
Ange bakgrundsbild i stilmallenOm du tänker använda samma bakgrundsbild på många sidor, är det bättre att ange bilden i stilmallen. När du vill byta bild behöver du då bara ändra på ett enda ställe.
Öppna stilmallen i textredigeraren. Ändra i blocket BODY så att det blir så här:
/* bakgrundsbild */
BODY {
background-image:url(bilder/backg8.jpg);
}
Eftersom du inte använder en bakgrundsfärg kan du ta bort raden med background-color. Med url anger du sökvägen till bilden du skall använda och den skall alltså skrivas med vanliga snedstreck som här.
Spara stilmallen och titta på resultatet genom att öppna hemsidan i webbläsaren.
På sidan om Haj i Hjälmaren har jag lagt en grön variant av bilden ovan som bakgrund. Samtidigt ändrade jag på textfärgen.
I nästa avsnitt kommer du att lära dig mycket mer om hur man hanterar bilder på webbsidan.