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:

  • tomater
  • agurker

Nummereret punktopstilling:

<ol>
<li>tomater</li>
<li>agurker</li>
</ol>

bliver til:

  1. tomater
  2. 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:

Tegning af computer

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 &AElig;,&Oslash;,&Aring;,&aelig;&oslash; og &aring;.

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 farveRødGrønBlåResultat
Sort000
Grå (mørk)128128128
Grå (mellem)192192192
Grå (lys)215215215
Hvid255255255
Rød (ren)25500
Rød (mørk)20000
Rød (meget mørk)15000
Rød (lys)255150150
Rød (meget lys)255200200
Grøn (ren)02550
Grøn (mørk)02000
Grøn (meget mørk)01500
Grøn (lys)150255150
Grøn (meget lys)200255200
Blå (ren)00255
Blå (mørk)00200
Blå (meget mørk)00150
Blå (lys)150150255
Blå (meget lys)200200255
Gul2552550
Gul (mørk)2002000
Gul (lys)255255150
Cyan0255255
Magenta2550255

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)
000
1610
2014
301E
5032
7046
905A
10064
12078
12880
15096
176B0
192C0
200C8
208D0
224E0
240F0
248F8
255FF

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.