HTML
Struktur:
Den basale struktur i et HTML dokument er:
<html>
<head>
<title>sidens titel</title>
</head>
<body>
her står teksten på siden
</body>
</html>
Overskrifter:
Man strukturerer selve dokumentet i sektioner:
<h1>overskrift sektion 1</h1>
<h2>overskrift sektion 1.1</h2>
tekst
<h2>overskrift sektion 1.2</h2>
tekst
Man kan bruge 6 niveauer (H1,H2,H3,H4,H5,H6). Det er tilfældigt, at jeg har lavet 2 forekomster på hvert niveau.
Rå tekst:
Rå tekst indskrives almindeligt. Du behøver ikke tænke på linie-skift, da
browseren selv formaterer afsnittene. Af praktiske grunde bør du nok holde
alle under 80 tegn, fordi så er de nemmere at rette i. Du markerer
begyndelsen på et nyt afsnit med <P>.
Opstillinger:
Ikke nummereret punktopstilling:
<ul>
<li>tomater</li>
<li>agurker</li>
</ul>
bliver til:
Nummereret punktopstilling:
<ol>
<li>tomater</li>
<li>agurker</li>
</ol>
bliver til:
- tomater
- agurker
Definitionslister:
<dl>
<dt>tomater</dt>
<dd>Modne tomater er runde og røde. Umodne tomater er dog grønne.</dd>
<dt>agurker</dt>
<dd>Agurker er krumme og grønne.</dd>
</dl>
bliver til:
- tomater
- Modne tomater er runde og røde. Umodne tomater er dog grønne.
- agurker
- Agurker er krumme og grønne.
Fast format:
<pre>
101 102
103 104
</pre>
bliver til:
101 102
103 104
Fast format bevirker, at linieskift i browseren sker de samme steder som i HTML-teksten.
Links:
<a href="URL for HTML dokument">Tekst der kan klikkes på</a>
Indsætter et link til et andet dokument.
Eksempelvis:
<a href="http://www.html.dk/">Mere om HTML</a>
som bliver til:
Mere om HTML
Billeder:
<img src="URL for billedfil" alt="tekst til text-only browsere">
Indsætter et billede.
Eksempelvis:
<img src="/images/computer.gif" alt="Tegning af computer /">
som bliver til:
Kommentarer:
<!--dette er en kommentar-->
kan bruges til at indsætte kommentarer i dokumentet, som ikke vises af en
browser, men som kan hjælpe dig næste gang du redigerer i dokumentet.
Danske bogstaver:
Du kan lave danske bogstaver på to måder:
- Skrive dem i Windows karaktersæt (ikke DOS karaktersæt).
- Bruge Æ,Ø,Å,æø og
å.
Farver i HTML
Standardfarver
Når du fremstiller HTML-sider kan du vælge om standardfarverne er gode nok eller
du vil have andre farver.
De fleste hjemmesider benytter farver som en del af designet. Denne side benytter
også farver som en del af designet, men selve teksten er traditionel sort på hvid
baggrund.
Hvis man ikke definerer farver viser de fleste browsere en HTML side med sort tekst
på grå baggrund (endnu ikke besøgte links er blå og besøgte links er violette).
En side med standardfarver ser i de fleste browsere nogenlunde således ud:
| Dette område har baggrundsfarven hvid (FFFFFF) og tekstfarven sort (000000)
Det er standard i de nyeste browsere, så hvis du ønsker dette, skal du blot undlade at definere
farver. Vær opmærksom på at din side så måske vil have grå baggrund i ældre browsere. |
En side med standardfarver ser i ældre browsere således ud:
|
Dette område har baggrundsfarven silver (C0C0C0) og tekstfarven sort (000000).
Hvis du ønsker disse farver bør du definere dem, da nyere browsere viser hvid baggrund som standard.
|
Vær opmærksom på, at du altid bør angive sidens farve hvis du mener
din side skal ses i en bestemt farve.
Andre farver
Farver har stor betydning for hvordan en side opleves. Nedenfor gives et par eksempler.
Sort baggrund ser måske ud af så meget som en lille prøve, men kan være flot på en hel side:
|
Dette område har baggrundsfarven sort (000000) og tekstfarven hvid (FFFFFF).
Hvis du ønsker disse farver skal du definere dem.
|
Gul tekst er flot på sort baggrund:
|
Dette område har baggrundsfarven sort (000000) og tekstfarven gul (FFFF00).
Hvis du ønsker disse farver skal du definere dem.
|
Gul tekst er flot på sort baggrund:
|
Dette område har baggrundsfarven blå (0000FF) og tekstfarven hvid (FFFFFF).
Hvis du ønsker disse farver skal du definere dem.
|
Hvilke farver kan vælges
Der er i teorien 16.777.216 mulige farver at vælge imellem. De fleste moderne PC-ere
kan vise alle 16,7 millioner farver. Ældre eller transportabelt udstyr kan måske kun
vise 256 eller 65.536 farver.
En slukket PC-skærm viser i princippet farven sort. Det kan illustreres ved at der
i princippet sidder 3 små el-pærer i hvert punkt, nemlig en rød, en grøn og en blå.
Når alle 3 pærer er slukket viser punktet sort.
Pærerne kan styres enkeltvis i 255 trin. Dvs en slukket pære har værdien 0,
det svagest lys den kan vise har værdien 1 og det kraftigste lys har værdien 255.
Alle farver på skærmen blandes af rød, grøn
og blå. Farvesystemet kaldes derfor RGB (Red, Green, Blue).
Sort defineres som 0-0-0 idet alle pærer er slukket. Ren rød defineres som 255-0-0, idet
den røde pære tændes for fuld styrke og den grønne og blå er slukket.
Hvid defineres som 255-255-255, idet fuld styrke på alle 3 farver lys giver hvidt lys.
Når vi skal vælge en farve skal vi sige hvor meget af hver grundfarve der skal
bruges.
Her er nogle eksempler:
| Ønsket farve | Rød | Grøn | Blå | Resultat |
| Sort | 0 | 0 | 0 | |
| Grå (mørk) | 128 | 128 | 128 | |
| Grå (mellem) | 192 | 192 | 192 | |
| Grå (lys) | 215 | 215 | 215 | |
| Hvid | 255 | 255 | 255 | |
| Rød (ren) | 255 | 0 | 0 | |
| Rød (mørk) | 200 | 0 | 0 | |
| Rød (meget mørk) | 150 | 0 | 0 | |
| Rød (lys) | 255 | 150 | 150 | |
| Rød (meget lys) | 255 | 200 | 200 | |
| Grøn (ren) | 0 | 255 | 0 | |
| Grøn (mørk) | 0 | 200 | 0 | |
| Grøn (meget mørk) | 0 | 150 | 0 | |
| Grøn (lys) | 150 | 255 | 150 | |
| Grøn (meget lys) | 200 | 255 | 200 | |
| Blå (ren) | 0 | 0 | 255 | |
| Blå (mørk) | 0 | 0 | 200 | |
| Blå (meget mørk) | 0 | 0 | 150 | |
| Blå (lys) | 150 | 150 | 255 | |
| Blå (meget lys) | 200 | 200 | 255 | |
| Gul | 255 | 255 | 0 | |
| Gul (mørk) | 200 | 200 | 0 | |
| Gul (lys) | 255 | 255 | 150 | |
| Cyan | 0 | 255 | 255 | |
| Magenta | 255 | 0 | 255 | |
Af eksemplerne ses, at lyse farver skabes ved at skrue helt op for selve farven og noget
for de 2 øvrige farver.
Det gælder også for blandingsfarverne gul, cyan og magenta her er
det blot den sidste farve der skrues noget op for. Se eksemplet med lys gul.
Hvis du er i besiddelse af et billedsbehandlingsprogram som for eksempel
Adobe Photoshop eller PaintShop Pro kan du inde i disse programmer vælge mellem
en masse farver og se hvor meget af de 3 grundfarver der er i den pågældende farve.
Hvordan vælges farverne
De 3 tal for hver grundfarve skal omregnes til hexadecimale værdier. I det hexadecimale
talsystem har vi 16 som grundtal og derfor også 16 forskellige symboler. De første 10
kender vi idet det er de samme som vi bruger i det decimale system, og de næste 6 symboler
er de første bogstaver i alfabetet.
I det hexadecimale talsystem findes der symboler for værdier fra 0 til 15. Disse er:
| Talsystem |
| DEC (decimalt) |
HEX (hexadecimalt) |
| 0 |
0 |
| 1 |
1 |
| 2 |
2 |
| 3 |
3 |
| 4 |
4 |
| 5 |
5 |
| 6 |
6 |
| 7 |
7 |
| 8 |
8 |
| 9 |
9 |
| 10 |
A |
| 11 |
B |
| 12 |
C |
| 13 |
D |
| 14 |
E |
| 15 |
F |
Hvis vi skal skrive 14 som hex skrives blot E. Dette er samme princip som
det decimale system vi kender. Hvis vi har et symbol for det tal vi vil
skrive er eet symbol nok.
Hvis vi vil skrive 20 som hex skriver vi 14. Da der er tale om et talsystem
med 16 som grundtal betyder det 1 sekstener og 4 enere. Det er ligesom de
20 (dec) betyder 2 tiere og 0 enere.
Det er generelt for alle talsystemer at den sidste plads før kommaet (dvs den sidste
plads når der ikke er komma) betyder grundtal opløftet i nulte potens, hvilket altid
giver 1. Den anden sidste plads betyder grundtal opløftet i 1 potens, dvs grundtallet.
Den trediesidste plads betyder grundtal opløftet i 2 potens, dvs 100 for decimaltalsystemet
og 256 for det hexadecimale talsystem.
Her er nogle eksempler på tal fra 0 til 255:
| DEC (decimal) | HEX (hexadecimal) |
| 0 | 00 |
| 16 | 10 |
| 20 | 14 |
| 30 | 1E |
| 50 | 32 |
| 70 | 46 |
| 90 | 5A |
| 100 | 64 |
| 120 | 78 |
| 128 | 80 |
| 150 | 96 |
| 176 | B0 |
| 192 | C0 |
| 200 | C8 |
| 208 | D0 |
| 224 | E0 |
| 240 | F0 |
| 248 | F8 |
| 255 | FF |
En del matematiske lommeregnere kan også omsætte mellem decimale og hexadecimale
talsystemer.
Alle hexadecimale farver skal være på 2 cifre så hvis man vælger en farve med en værdi under 16
decimalt skal der sættes et nul foran. Den decimale værdi 15 bliver således til 0F i hexadecimal skrivemåde.
Når man angiver farver skal man bruge 6 tegn hexadecimalt. De første 2 tegn er værdien for rød,
de næste 2 tegn er værdien for grøn og de sidste 2 tegn er værdien for blå. Ren grøn vælges som rød=0,
grøn=255 (255 decimalt svarer til FF hexadecimalt) og blå=0 og skrives derfor som 00FF00.
Den simpleste måde at angive farver på er at skrive det som parametre til koden <body>.
Hvis man eksempelvis ønsker sort baggrund med hvid tekst skriver man
<body bgcolor="#000000" color="#FFFFFF"> i stedet for blot <body>.
Hvis du udvikler en større hjemmeside bør du definere farverne i en CSS-fil (style sheet) i stedet
for direkte efter body koden.
Man kan lave en CSS-fil og så henvise til den fra flere sider. Det gør rettelser til layout meget
nemmere, idet man kun skal rette i CSS-filen og så gælder rettelsen for alle de sider der
henviser til den pågældende CSS-fil.
Farvenavne
En del farver kan også vælges ved hjælp af deres navne, men desværre er der ikke fuldstændig
enighed om farvenavnene. Det anbefales derfor, at benytte de
hexadecimale RGB-koder. Koden white for hvid kan dog benyttes, da der tilsynaladende
er enighed om, at det betyder #FFFFFF.