Datorer, Internet och sökning
|
| Decimala talsystemet 0 1 2 3 9 10 11 12 15 16 17 (1x16+1) 188 (11x16+12) 255 (15x16+15) |
Hexadecimala talsystemet 0 1 2 3 9 A B C F 10 11 BC FF |
För att beskriva hur mycket som ingår av varje grundfärg behövs alltså 2 hexadecimala siffror. Ett RGB-värde beskrivs på formen rrggbb där rr, gg och bb är de hexadecimala talen för respektive grundfärg (rött, grönt, blått). Hela RGB-värdet föregås i HTML-koderna av tecknet #. Detta tecken brukar kallas en brädhög eller ett staket.
<BODY BGCOLOR="#FF0000"> = Röd <BODY BGCOLOR="#00FF00"> = Grön <BODY BGCOLOR="#0000FF"> = Blå <BODY BGCOLOR="#FFFF00"> = Gul <BODY BGCOLOR="#000000"> = Svart <BODY BGCOLOR="#FFFFFF"> = Vit <BODY BGCOLOR="#FF8800"> = Orange <BODY BGCOLOR="#FF00FF"> = Lila <BODY BGCOLOR="#C0C0C0"> = Grå <BODY BGCOLOR="#FF00FF"> = Magenta, anilinröd <BODY BGCOLOR="#00FFFF"> = Cyan <BODY BGCOLOR="#A62A2A"> = Brun <BODY BGCOLOR="#8C7853"> = Brons <BODY BGCOLOR="#B87333"> = Koppar <BODY BGCOLOR="#5C4033"> = Mörkbrun <BODY BGCOLOR="#2F4F24"> = Mörkgrön <BODY BGCOLOR="#871F78"> = Mörk purpur <BODY BGCOLOR="#CD7F32"> = Guld <BODY BGCOLOR="#E6E8FA"> = Silver <BODY BGCOLOR="#3299CC"> = Himmelsblå <BODY BGCOLOR="#BC8F8F"> = Skär <BODY BGCOLOR="#FF7F00"> = Alt orange <BODY BGCOLOR="#8E236B"> = Katanjebrun <BODY BGCOLOR="#A8A8A8"> = Ljusgrå <BODY BGCOLOR="#ADEAEA"> = Turkos <BODY BGCOLOR="#4F2F4F"> = Violett <BODY BGCOLOR="#99CC32"> = Gulgrön
Om vi skall tala i HTML-termer så är BODY elementnamnet och BGCOLOR attributets namn. Färgen är attributets värde.
Många har inte maximal inställning eller en gammal utrustning som gör
att bara 16 eller 256 färger kan visas. Ibland finns det också begränsningar som
beror på ditt grafikkort. Det är dock inte alls ovanligt att den som installerar
grundprogrammen i en dator inte gör de maximala inställningarna när det gäller färger
. Det förekommer också att en del personer (ofta barn i familjen)
ändrar inställningen till 256 färger eftersom vissa spel inte kan
användas om man använder fler färger och sedan orkar man inte ändra
inställningen till fler färger när man inte använder dessa
spel.
Om personen som har gjort en webbsida har använt en färg som finns med på en skala
för 16 miljoner färger så är det i sådana fall oftast en lyckträff om rätt färg
visas. Oftast visas då en närliggande färg som din utrustning klarar att visa.
| Grafikkort | Färgpaletten | Skrivbordet |
| 1 Mb | 16-bitar dvs 65536 färger | 800x600 bildpunkter |
| 1 Mb | 24-bitar dvs 16777216 färger | 640x480 bildpunkter |
| 2 Mb | 24-bitar dvs 16777216 färger | 800x600 bildpunkter |
Om du har Windows 95/98 så undersök nu vilken inställning du själv har på din dator.
Om man använder Windows och har inställningen 256 färger så finns
det i Netscape bara 216 färger som visas korrekt. Det kan vara bra att som tillverkare av
webbsidor enbart använda dessa "säkra" färger. På Victor Engels sida om de 216
färgerna får man en noggrannare förklaring av fenomenet. Du kan också besöka sidan
med Netscapes egna
förklaringar eller sidan De
webbsäkra färgerna på svenska i Internetworlds webbskola. En sammanfattning är att
Värdet för varje färg (röd, grön, blå) måste alltid vara en av dessa:
| Decimalt | 0 | 51 | 102 | 153 | 204 | 255 |
| Hexadecimalt | 00 | 33 | 66 | 99 | CC | FF |
Öppna en ny sida som du sedan omedelbart sparar som test.htm i huvudmappen skolan. Ändra i Sidegenskaper testsidans bakgrund till vit och rubrik (title) till IT-skolans testsida. Testa med att lägga in olika gärna webbsäkra bakgrundsfärger och klicka på HTML-fliken längst ned till vänster och kontrollera så att koderna är rätt när det gäller färgen. Du kan också ändra direkt i HTML-koderna för att testa olika färger.
I övning 3 påpekades att när man har en stor bild och vill presentera denna som en liten bild så är det om man vill att bilden skall laddas ned snabbt lämpligt att i ett bildbehandlingsprogram från den stora bilden skapa en liten bild i en egen fil. Det finns många olika program för detta. Ett smidigt litet sharwareprogram är LviewPro som man liksom det större sharewareprogrammet Paint Shop Pro kan hämta på Internet hos Tucows. Man kan också använda bildbehandlingsprogrammet Microsoft Image Composer som medföljer FrontPage 98 eller Photo Draw som hänger ihop med FrontPage 2000.
Nu följer en övning i Microsoft Image Composer. Senare kommer också samma övning att erbjudas med hjälp av programmet Photo Draw. Om du inte har Microsoft Image Composer så hoppa över den här övningen.
Starta programmet Microsoft Image Composer och öppna där bildfilen herrgard.jpg. Spara om filen i samma mapp som smagard.jpg så att du inte förstör den ordinarie bilden. Klicka på Tools och välj Arrange. Se till att det finns en bock framför texten "Keep aspect ratio" och ändra sedan Width till 100. Height ändras nu automatiskt till 66. Välj Apply och bilden blir mindre men bakgrunden är fortfarande vit och för stor. Klicka på Arrange och välj Return to Home position. Spara om filen. Markera bilden och välj File och sedan Composition Setup. Ändra Width till 100 och Height till 66. Klicka på OK och spara sedan om bilden.
Kontrollera nu storleksförändringen genom att från skrivbordet välja Den här datorn. Klicka dig fram till din mapp med bilder. Klicka på Visa och välj sedan Detaljerad lista. Här är bilderna så små att det inte blir så stor skillnad. Filen herrgard.jpg är 8 kb och smagard.jpg 4 kb. Om man arbetar med betydligt större bilder så påverkas tiden för nedladdning av bildfilen genom en sådan här åtgärd. På en särskild sida jämför jag mitt resultat med resultatet vid användning av programmet Lview skillnaden i storlek mellan bilderna.
Transparenta GIF-bilder
En bild har alltid formen av en rektangel. Det som inte ingår i den bild som man vill visa men som ändå behövs som utfyllnad för att åstadkomma en rektangel har ofta givits en enda bakgrundsfärg. Om man vill visa bilden snyggt i en bakgrund så kan man ge bildens bakgrundsfärg samma färg som bakgrunden på webbsidan. En annan möjlighet när det gäller gif-bilder är att göra en av färgerna (just den enda bakgrundsfärgen) transparent eller genomskinlig.
Bilden överst på ingångssidan för konstskatter i Jönköpings kommun gjordes med grå bakgrund på den tiden då alla bakgrunder var grå. Gå till denna ingångssida med URL-adressen http://www.pb.edu.jonkoping.se/konst/Konstskatter.html och klicka på bilden längst upp med höger musknapp. Spara den sedan som konst.gif i undermappen bilder.
Öppna nu IT-skolans testsida och lägg in bilden konst.gif överst på sidan. Centrera bilden.
Markera bilden och klicka sedan på Ställ in transparent färg-knappen dvs knappen med en bild av en pensel på Verktygsfältet Bilder. Klicka därefter på den färg som skall vara genomskinlig dvs färgen som finns i ytterkanterna.
Titta på bilden i din webbläsare. Gå sedan tillbaka och ändra bakgrunden till lite olika bakgrundsfärger. Som du ser när du väljer olika bakgrunder så fanns från början på vissa ställen mitt i bilden samma färg som bakgrunden. Även här har bilden blivit transparent. Detta komplicerar möjligheterna att välja vilken bakgrund som helst. Välj därför till sist den grå som ibland kallas silver och som har samma färg som fönstret Sidegenskaper vanligtvis har. Om man klickar på HTML-fliken så ska man hitta <body bgcolor="#C0C0C0">.
Bilder som laddas ner i etapper
När det gäller en GIF-bild på en webbsida så kan man när man har klickat på bilden med höger musknapp för att sedan välja Bildegenskaper välja att göra bilden sammankopplad dvs bilden laddas ned i etapper. På samma sätt kan man när det gäller JPEG-bilder välja att ge bilden fortgående rendering. Man måste då ange i hur många etapper bilden ska laddas ned. För att kunna se effekten måste bilderna vara ganska stora och ligga på Internet. Ändra herrgårds-jpeg-bilden på ingångssidan så att den får 3 fortgående renderingar. När du sparar om sidan vill FrontPage spara den förändrade bilden i huvudmappen. Acceptera detta.
Lägg på testsidan in herrgard.gif som finns i mappen bilder. Centrera bilden och gör bilden sammankopplad. När du sparar om sidan vill FrontPage spara den förändrade bilden i huvudmappen. Acceptera detta.
På en testsida har jag förutom konstbilden som ligger överst lagt in två bilder som ser likadana ut. Den översta av dessa två är en sammankopplad gif-bild på 207 kb och den understa en jpeg med 6 fortgående renderingar på 27 kb. Titta på sidan för att se att hela bilderna kan ses från början men att de i början är suddiga.
Bildspel
Vanligen använder man enbart elementet TITLE i det som omringas av
HEAD. Det finns emellertid ytterligare koder som man kan använda i HEAD. Efter
<head> ovan finns <meta osv. En intressant kod är
<META HTTP-EQUIV="Refresh" CONTENT="n; URL=URL-adress">
där n är antalet sekunder som sidan skall ligga kvar innan nästa sida i en bildserie
visas. Med URL-adress menas en absolut adress till någon sida på World Wide Web eller en
relativ adress till en närliggande sida.
Gör nu ett bildspel bestående av 3 av de sidor som du har. Gör bildspelet i följande ordning: ingångssidan, institutionen, programmet. Låt bildspelet sluta med programmet dvs du lägger bara in koden nämnd ovan i de två första filerna. Låt varje sida ligga kvar 5 sekunder. Testa sedan att det hela fungerar genom att öppna ingångssidan. Ändra därefter till 10 sekunder för att se skillnaden. Koderna som skall skrivas in mellan <head> och </head> blir för ingang.htm eftersom so.htm ligger i undermappen institut:
<meta HTTP-EQUIV="Refresh" CONTENT="5; URL=institut/so.htm">
För so.htm blir koden eftersom sp.htm liggger i en annan mapp med samma huvudmapp (Man går först uppåt med symbolen för detta dvs. två punkter (..) och sedan ned i mappen program):
<meta HTTP-EQUIV="Refresh" CONTENT="5; URL=../program/sp.htm">
När vi lade in ramar skapades också koden <base target="main"> mellan <head> och </head> i filen ingang.htm. Så länge den koden finns kvar så öppnas det ett nytt fönster när man klickar på länkarna i filen ingang.htm. Om man tar bort koden så öppnas det inget nytt fönster när man klickar på länkarna. Låt koden vara kvar.
Undersök hur alla sidorna ser ut och jämför med facit.
Fortsätt sedan med nästa övning.
Denna sida uppdaterades senast
00-05-17 av
tommy.maltell@pb.edu.jonkoping.se
Länkar:
Kursens ingångssida
Kapitel: 0 1 2 3a 3b 3c 4 5a 5b 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20a 20b 21a 21b 21c 21d 21e 21f 21g 21h 22a 22b 22c 23 26 30 31 32 33 37
Skolornas portal
© 1999, 2000 Tommy Maltell