Färger

1. Ge din sida färg

För att skapa färg åt en sida använder vi ett attribut till body, nämligen bgcolor. Detta betyder bakgrundsfärg och här anger jag sidans färg i hexadecimalkod. Det kan se ut så här <body bgcolor="#0066cc">. Detta med hexadecimal gå jag mer utförligare och djupare in på i avsnitten nedan.

Här är ett exempel på hur HTML-koden kan se ut för en sida med färg:

<html> <head> <title>Sida med Färg</title> </head> <body bgcolor="#7cd2ff"> Här placeras texten... </body> </html>

Skriv in koden i Anteckningarna och spara exempelvis som colors.html i lämplig mapp. Öppna sedan Internet Explorer och öppna filen du nyss sparade.

Testa själv med att exempelvis lägga in färgkoderna "#003399" och "#003366". När jag skrivit 00, innebär det siffrorna noll och inte bokstaven o! Ändra bara färgvalet och inte den övriga koden.

Nu är det inte bara möjligt att infoga bakgrundsfärg, utan också bakgrundsbilder. Se vidare om detta i avsnittet Infoga Bilder.

2. RGB-skalan och hexadecimalkod

RGB betyder Red, Green och Blue (röd, grön och blå). Genom att på olika sätt kombinera dessa tre färger, kan vi få fram alla färger inom färgskalan. Värdena består inte av att benämna färgen med namn, utan med sifferkombinationer (i RGB) samt med siffer- och bokstavskombinationer (i hexadecimalkod).

I HTML-koden behöver vi inte veta RGB-värdena, utan det vi mest behöver är Hexadecimalkoden. Denna skala går för respektive färg röd, grön och blå från 00 (noll, noll) till ff (fullt mått av ex. rött).

Hexadecimal består av en "brädgård" # och tre delar (positioner). De första paret efter #, paret i mitten och det sista paret. Det första paret markerar röd färg, det andra grönt och det sista blått. I en hexadecimalkod typ: "#ff0000", betyder det att vi väljer fullt mått av rött (det första paret), inget alls av grönt (det andra paret) och inte heller något av blått (det sista paret).

Det som ser ut som en brädgård -#- måste alltid vara med innan kombinationen, liksom citattecknen som omsluter alltihop. Kombinationen "#ffffff", betyder att vi väljer fullt mått av både rött, grönt och blått, och vi får färgen vitt. Om vi istället väljer "#000000", har vi inte valt något värde alls av någon färg och vi får fram svart.

I RGB skalan går värdena för respektive färg rött, grönt och blått från 0 (noll) till 255. Fullt värde av rött, inget av grönt och fullt värde av blått ger: 255, 0, 255. Detta behövs inte för HTML-kodningen, men kan vara värdefullt att veta om vi ex. använder ett bildbehandlingsprogram (Photoshop, Corel Draw, Photopaint Pro m.fl.).

3. Webbsäkra färger

Jag har skapat en sida som visar alla dessa färger och om du ställer muspekaren på någon färgruta, kommer du att se koden. Den kommer fram som en liten rektangulär ruta. Klicka här för att komma till sidan med webbsäkra färger!

"Problemet" idag är att det finns en mängd olika operativsystem och webbläsare, som tolkar våra koder olika. En och samma hexadecimalkod kan ge en viss nyans i ett operativsystem, medan den kan se lite annorlunda ut i ett annat operativsystem. Det räcker i många fall bara med att jämföra resultatet från Internet Explorer med det i Netscape.

Skall vi vara på den säkra sidan, bör vi även testa våra sidor mellan olika operativsystem, innan vi lägger ut den på Internet. Ofta frågar mig människor om jag vill kommentera deras sidor. Ett vanligt problem att sidan ser bra ut i Internet Explorer, men inte i Netscape eller tvärt om. Jag har till och med sett sidor som varit helt tomma i Netscape, men varit fyllda med innehåll i Internet Explorer.

Men det finns vissa färger som är gemensamma mellan de olika systemen. Oberoende av operativsystem mottagaren har, kan vi vara säkra på att färgkoden tolkas som vi vill. Dessa färger kallas för webbsäkra och antalet som står till vårat förfogande är 216 stycken.





kontakt	© Stefan Dahlén	Söndag 14:e mars 2010