Lektion 3: Din første webside og lidt om Hex farver
Denne lektion hjælper dig igang med din første webside, og forklarer lidt om Hex farver.
Lav en mappe på din computer - f.eks. mappen "/minhjemmeside/". Åbn "Notepad" (Start > Programmer > Tilbehør) og skriv følgende HTML kode:
<html>
<head>
<title>Min første webside</title>
</head>
<body>
Hej Verden!
</body>
</html>
Gem filen i din netop oprettede mappe og navngiv filen "index.html". Åbn "/minhjemmeside/" mappen og dobbeltklik på "index.html" filen.
Hvis alt er gået efter planen ser du nu en webside med ordene "Hej Verden" i din browser. I toppen af browseren, yderst til venstre, skulle der gerne stå "Min første webside". Du har hermed lavet din første webside - tillykke!
Lad os kikke lidt på hvad der sker:
- I toppen og bunden ser du HTML tags'ne <html>...</html>. Dette angiver at her starter og slutter websidens HTML kode. Alle HTML erklæringer, kode osv.. befinder sig imellem disse to tags.
- Efter <html> tag'n kommer HTML erklæringen <head>...</head>. "Head" delen af en webside er den del som ikke kan ses i browserens indholdsområde. Alt hvad der står imellem <head> ..og.. </head> er informationer o.lign. om websiden.
- Inde i vores "head" har vi placeret en erklæring der hedder <title>..</title>. "Title" giver tekst i browserens øverste venstre hjørne og bruges ofte til websidens/hjemmesidens navn.
- Efter "head" delen kommer "body" erklæringen. Alt hvad du skriver imellem <body> ..og.. </body> vil være den visuelle del af websiden. I dette tilfælde vil browseren vise ordene "Hej Verden!".
Det er med vilje vi har valgt at navngive filen "index.html". Når en gæst f.eks. skriver adressen "www.kliakmok.dk" i sin browser vil den første fil der bliver vist automatisk være en fil ved navn "index.html".
Det grundlæggende skelet
HTML koden vist herover bør udvides en lille smule til følgende:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final/EN">
<html>
<head>
<title>Min første webside</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body bgcolor="#ffffff" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
Hej Verden!
</body>
</html>
HTML koden herover ligner vores første webside rigtigt meget og skriver du HTML koden ind i din "index.html" fil vil du også se at filen ser nøjagtigt magen til ud i browseren. Vi kikker lidt på hvad der er tilføjet i forhold til sidst:
- I første linie ("DOCTYPE") fortæller vi browseren at vi koder vores HTML i "HTML 3.2".
- I linie 5 ser vi en ny tag Denne tag er en meget typisk "head" tag - en type som vi kalder en "Meta Tag". Som tidligere nævnt bruger vi pladsen imellem <head> ..og.. </head> til at give informationer - langt de fleste af disse informationer vil være i form af Meta Tags. Meta Tag'n her angiver at vi bruger tegnsættet "ISO-8859-1", hvilket er det "nord eropæiske tegnsæt".
- I <body> tag'n har vi tilføjet en masse HTML koder. Vha. koden "bgcolor" kan vi angive hvilken baggrundsfarve websiden har. De fire "margin" koder gør at vi undgår luft i top og bund, samt i venstre og højre side.
Skelettet herover, eller noget der ligner, bør være skelet for samtlige dine websider.
HTML koder
Mange HTML tags kan modtage "koder". I <body> tag'n så vi f.eks. her fem forskellige koder. Det er forskelligt fra tag til tag hvilke koder der kan bruges. Den bedste måde at lære disse kombinationer på er at forsøge sig frem - at se hvad der virker og hvad der ikke virker. På dette område er HTML meget omfattende og disse lektioner kommer ikke rundt om alle kombinationer.
Eksempler på koder som kan stå i <body> tag'n:
- text="#000000": Giver sort tekstfarve.
- bgcolor="#ffffff": Giver hvid baggrundsfarve.
- link="#ff3333" alink="#33ff33" vlink="#3333ff": Angiver farve til "tekst link" (rød), "aktivt tekst link" (grøn) og "tidligere besøgt tekst link" (blå).
- background="back.gif": Angiver en grafik fil som bruges til baggrund på websiden.
- marginwidth="0" marginheight="0" topmargin="0" leftmargin="0": Fjerner luft i højre-/venstre-side og top/bund på websiden.
Farvekoder
I HTML angives farver vha. seks tegn. Måden at angive farver på betegnes som "Hex farver".
Vi har i forklaringerne herover allerede ser Hex farver brugt flere gange til tekst og baggrund. Princippet er følgende:
- Hvert af de 6 tegn kan have værdien 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e eller f.
- Af disse 15 værdier er 0 den mørkeste og f den lyseste.
- De første 2 af de 6 tegn angiver værdien af den røde farve.
- De miderste 2 af de 6 tegn angiver værdien af den grønne farve.
- De sidste 2 af de 6 tegn angiver værdien af den blå farve.
- Hex farver angives således som en RGB (rød - grøn - blå) kombination, hvor 2 tegn angiver hver farve. Af disse to tegn er det første det primære og det andet det sekundære: "20" er såleds kun meget lidt mørkere end "25", hvorimod "20" er væsentligt mørkere end "50".
For at få en fornemmelse for Hex koder, kan du i "HTML Dokumentationerne", her på klikamok.dk, finde en tabel med det man kalder de "websikre farver".
I næste og de efterfølgende lektioner vil vi gå igang med at kikke på hvad vi kan bruge for nogle tags og koder i "body" området. Ønsker du mere information om hvad der kan stå i "head" delen anbefaler vi at du kikker på "Artikler om HTML".
Skrevet okt. 2001 af Niels Rune Bøggild
| Tilføjet af Simon Glue den 02-12-2003 - Hits: 3987 |
   |
