Start | Spil | Programmer | Guider | Kontakt | FIRE beregner
HTML Guide | CSS Guide | JavaScript Guide | Release Guide |
HTML guide
Af: Gabriel Siegel
Indhold
Introduktion

Når man skal lave en hjemmeside, er der mange måder at gribe det an på. Nogle sites på nettet tilbyder gratis hjemmesider og har samtidig en online editor, som du kan bruge til at designe din hjemmeside. Disse er ekstremt lette at bruge - men det kommer altsammen på bekostning af fleksibilitet! Det kan godt være, du hurtigt kan få lavet noget, der ser godt ud. Til gengæld vil du højst sandsynlig have "hugget" en masse præfabrikerede komponenter og menuer. Det betyder, at folk hurtigt vil genkende din hjemmeside som værende uoriginal og en du ikke selv har lavet fra bunden af. Hvis du virkelig vil lave noget unikt og have 100% kontrol med præcis hvordan din side skal se ud - så er du nødt til at benytte andre metoder til at lave din hjemmeside. En mulighed er, at købe et program, som letter udviklingen af hjemmesider. Det koster naturligvis en pæn sum penge - ofte over 1000 kr. Alternativt kan du lave den helt selv. Og det eneste du behøver er Notepad eller et andet simpelt tekstbehandlingsprogram! Du kan nemlig selv programmere din hjemmeside i det sprog der hedder HTML.

Nu må du ikke lade dig skræmme af ordet programmere. Det er altså ikke så svært, som det måske kunne lyde. Faktisk synes de fleste, der kommer igang, at det er smadder nemt at lave en hjemmeside i HTML. Formålet med denne guide, er at hjælpe dig igang med at programmere HTML. Jeg antager ikke, at du ved særlig meget om computere i forvejen. Hvis der er et skridt, du har problemer med, vil der ofte være et link til en mere uddybende forklaring på, hvordan du skal gøre. God fornøjelse med at lære HTML!
Krav til dig for at følge denne guide

Jeg antager du har lidt kendskab til computere. Ord som "mappe", "fil", "vindue" osv. går jeg ud fra du er bekendt med. Men jeg går ikke ud fra, at du ved en hel masse. Jeg går også ud fra, at du bruger Windows XP og at din browser er Internet Explorer. Er det ikke tilfældet kan du stadig følge guiden. Men nogle af de uddybende trin vil vise skærmbilleder fra Windows - så må du selv prøve at "oversætte" til det styresystem du måtte bruge (fx Mac OS eller lign).
At lave et HTML dokument

Det allerførste du skal gøre for at komme igang, er at oprette et tomt dokument af typen HTML. Det vil sige filefternavnet skal være .html.
Hjælp, det kan jeg ikke finde ud af!
Nu, hvor du har et HTML dokument, er det ved at være tid til at fylde noget HTML kode i det! Først skal du have HTML dokumentet åbnet i et tekstbehandlingsprogram. Du må ikke bruge Word eller et andet avanceret program - det ødelægger HTML koden ved at indsætte en masse formattering. Du skal bruge et simpelt program såsom "Notesblok". Du finder Notesblok ved at gå til "START > Programmer > Tilbehør". Du kan også åbne html filen ved at højreklikke på den og vælge "Åbn med" og dernæst vælge "Notesblok".
Det basale

Ethvert HTML dokument består af noget almindelig tekst og så også af såkaldte "tags". Et tag bliver ikke direkte vist på skærmen, men er et stykke programkode, der styrer, hvordan din hjemmeside kommer til at se ud. Tags kommer i par, bestående af et start tag, og et slut tag. Der er mange forskellige tags i HTML, hver med deres unikke funktionalitet. Et generelt starttag har formen <tag-navn>, hvor tag-navn kan variere. Et generelt slut-tag har formen </tag-navn>. For at et dokument er et gyldigt HTML dokument skal det indeholde følgende tags i den givne rækkefølge:

<HTML>
   <HEAD>
   </HEAD>
   <BODY>
   </BODY>
</HTML>

<HTML> tagget angiver at indholdet af dokumentet er HTML kode. Hele HTML dokumentet skal stå imellem <HTML> og </HTML>. HTML dokumentet er yderligere inddelt i et "hovede" og en "krop". Hovedet indeholder en række avancerede ting, som vi ikke vil komme ind på endnu. Det kommer altsammen senere. En af de simplere ting hovedet kan indeholde er en titel. Titlen angives med <TITLE> tagget. Alt der kommer mellem <TITLE> og </TITLE> bliver vist som titlen på hjemmesiden (oppe i bjælken øverst i Internet Explorer!). Kroppen af HTML dokumentet er, hvor selve indholdet af hjemmesiden kommer. Det er her al tekst på selve siden skal skrives. I princippet kan du skrive indholdet af din side direkte ind mellem <BODY> og </BODY>:. Men det er lidt kedeligt, for så kan man ikke lave overskrifter eller sådan noget. Det hele kommer bare ud i en lang køre uden afsnit, overskrifter eller andre formatteringer. Men snart skal vi lære, hvordan man laver sådan noget. Lad mig først lige demonstrere et meget simpelt HTML dokument:

<HTML>
   <HEAD>
      <TITLE>Simpelt HTML dokument</TITLE>
   </HEAD>
   <BODY>
      Dette er et meget enkelt dokument, som kun viser denne tekst.
   </BODY>
</HTML>
Tryk her for at se resultatet af ovenstående HTML kode!

Prøv at kopiere ovenstående HTML kode ind i dit HTML dokument og gemme det. Nu kan du åbne HTML dokumentet med Internet Explorer (eller hvilket program du nu bruger som din browser).
Lige et par regler om tags

Alle tags skal afsluttes af det tilhørende slut-tag. Man siger at et tag ligger indeni et andet, hvis start- og sluttag ligger imellem start og slut tag på et andet tag. For eksempel ligger <HEAD> tagget altid indeni <HTML> tagget. Når man starter et tag, skal det sluttes igen inden man slutter det tag det ligger indeni. Det betyder at følgende er ulovligt:

<HTML>
   <HEAD>
      <TITLE>Simpelt HTML dokument
   </HEAD>
   </TITLE> <- ulovligt fordi TITLE nu slutter efter HEAD slutter. Men TITLE startede jo indeni HEAD!
   <BODY>
      Dette er et meget enkelt dokument, som kun viser denne tekst.
   </BODY>
</HTML>
Basal formattering

Man kan lave overskrifter med de forskellige såkaldte header-tags. Disse er <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Alt hvad der står imellem fx <H1> og </H1> skrives med overskrifttype 1. De forskellige overskrifter tager sig ud som vist nedenfor:

Overskrift H1

Overskrift H2

Overskrift H3

Overskrift H4

Overskrift H5
Overskrift H6

Når du benytter dig af overskrifter, bliver der automatisk indsat et linieskift og "passende" mængde vertikal blankplads efter overskriften. Man kan derfor ikke have en overskrift inde midt i en linie. Hvis du ønsker at have større tekst midt i en linie, er der andre måder, hvorpå du kan opnå dette. Det vil altsammen blive beskrevet senere. Præcis hvordan overskrifterne tager sig ud, har du ikke så meget kontrol over. Det afhænger fx om man bruger Internet Explorer eller en anden web-browser. Hvis du vil have mere kontrol, så skal du benytte mere avancerede teknikker. Men til at starte på, kan det være et udmærket værktøj for dig, at bruge overskrifterne.

Udover overskrifter kan du også benytte dig af fed skrift, kursiv og understreget tekst.

  • Alt imellem <B> og </B> bliver fed skrift (B for "bold").
  • Alt mellem <I> og </I> bliver kursiv skrift (I for "italics").
  • Alt mellem <U> og </U> bliver understreget tekst.
  • Alt mellem <STRIKE> og </STRIKE> bliver gennemstreget tekst.
  • Alt mellem <CODE> og </CODE> skrives med særlig kode font (brugt til kodeeksempler).

Du kan lave en horisontal linie med <HR>. Dette tag skal ikke afluttes. Resultatet af <HR> ser ud som følger:
Eksempel

Her kommer et lille eksempel HTML dokument, der bruger nogle af de ting, vi har lært indtil nu. Tit er den bedste måde at lære på, ved at se en masse eksempler, på hvordan andre har lavet HTML kode.

<HTML>
   <HEAD>
      <TITLE>Leg med skrifttyper</TITLE>
   </HEAD>
   <BODY>
      <H1>Dette dokument viser lidt leg med skrifttyper</H1>
      Man kan lave mange forskellige skrifttyper i HTML. 
      For eksempel kan man skrive med <B> fed skrift </B>. Eller man kunne også vælge at skrive
      med <I> kursiv skrift</I>. Eller hvad men en kombination der <B><I> både er
      fed og kursiv samtidig?</I></B>.
   </BODY>
</HTML>
Tryk her for at se resultatet af ovenstående HTML kode!
Paragraffer, linieskift og præformattering

Når du skriver HTML kode har du måske allerede lagt mærke til, at Internet Explorer ignorerer linieskift i HTML koden. Den ignorerer også, hvis du har mere end et mellemrum i rap. Det gør ingen forskel om du i koden skriver

"Hej   med dig"

eller

"Hej med dig".

Det kommer i begge tilfælde ud som "Hej med dig". I dette afsnit, skal vi se, på hvordan man laver linieskift og paragraffer, og hvordan man tvinger Internet Explorer til ikke at ignorere flere blanktegn i rap eller linieskift i HTML kode dokumentet.

  • Du starter en paragraf med <P> og slutter den med </P>. En paragraf vises typisk omkranset af blanke linier.
  • Du kan lave et linieskift med <BR>. Dette er et af de få tilfælde, hvor et tag ikke har et sluttag. Du behøver således ikke også skrive </BR>.

Nu har jeg vist, hvordan du selv kan styre, hvornår der skal være linieskift, hvis du har lyst til det. Men jeg mangler at fortælle hvordan du kan bestemme over antal mellemrum du vil have. Fx hvordan du kan få skrevet

"Hej   med dig"

For at gøre sådan noget, skal du benytte dig af det tag der hedder <PRE>. Alt hvad du skriver mellem <PRE> og </PRE> bliver vist præcis sådan som du skriver det. Linieskift, mellemrum osv. bevares præcis som du skriver dem i HTML filen. Pas på med at bruge <PRE>! For hvis du skriver en meget lang linie med <PRE> så vil den ikke længere automatisk blive brudt. Derfor kan det være den fortsætter ud over kanten af vinduet i din browser. Brug det kun, hvis det er strengt nødvendigt.
Links

En af de mest velkendte ting man støder på i HTML sider er links. Links er referencer til andre HTML dokumenter, der kan ligge hvorsomhelst ude i den store verden. Når man trykker på linket bliver man automatisk dirrigeret til den side, der bliver linket til. Links optræder typisk med blå skrift og understreget. Du laver et link med det såkaldte <A> tag. Dette er første gang du ser et tag som udover et navn (A) også har nogle felter inde i tagget som skal udfyldes. Feltet HREF er der, hvor man skriver adressen på den HTML side, der skal linkes til. Forvirret? Frygt ej, her kommer et eksempel:

<A HREF="http://www.google.dk">Gå til google</A>

Bemærk hvordan HREF står inde i tagget for A. Feltet hedder HREF og indholdet af feltet er det, som er angivet mellem citationstegnene. Teksten der står imellem start og sluttagget for A er den tekst, der kommer til at stå på linket. Resultatet af ovenstående kode indsat i et omkransende HTML dokument vil derfor være:

Gå til google

Det er vigtigt at du får skrevet den fulde adresse i HREF feltet. Du er sikkert vant til, at det er godt nok bare at skrive "www.google.dk", men det er det ikke i HTML! Der skal du huske "http://" foran. Ellers virker det ikke! Nogle gange vil du linke til en fil, du selv har lavet. Så vil filen typisk ligge i samme mappe, som det HTML dokument du laver linket fra. Isåfald er det nok bare at skrive filnavnet:

<A HREF="andenfil.html">Gå til en anden fil jeg også har lavet</A>
Lister

Du kan lave lister i HTML på to måder, enten som ordnede lister, hvor punkterne er nummererede 1., 2., 3, ... osv. Eller som unummerede lister, hvor hvert listepunkt blot starter med en sort cirkel.

  • Unummererede lister laves med <UL>. Hvert listepunkt indeni listen skal omkranses af <LI> og </LI>.
  • Nummerede lister laves med <OL>. Hver listepunkt skal angives som ved unummererede lister.

For eksempel:

<OL>
   <LI>Dette er første listepunkt.</LI>
   <LI>Dette er andet listepunkt.</LI>
</OL>

Som producerer følgende liste:

  1. Dette er første listepunkt.
  2. Dette er andet listepunkt.

Man kan indlejre lister indeni lister for at lave hierarkiske lister med underpunkter. For eksempel kan man lave en ny lille liste indeni et <LI> og derved starte en liste af underpunkter. Lad os se, hvordan det kunne se ud:

<UL>
   <LI>Dette er første listepunkt.
      <UL>
      <LI> Dette er et underpunkt.</LI>
      <LI> Dette er et underpunkt.</LI>
      </UL>
   </LI>
   <LI>Dette er andet listepunkt.
      <UL>
      <LI> Dette er et underpunkt.</LI>
      <LI> Dette er et underpunkt.</LI>
      <LI> Dette er et underpunkt.</LI>
      </UL>
   </LI>  
</UL>

Som producerer følgende liste:

  • Dette er første listepunkt.
    • Dette er et underpunkt.
    • Dette er et underpunkt.
  • Dette er andet listepunkt.
    • Dette er et underpunkt.
    • Dette er et underpunkt.
    • Dette er et underpunkt.
Simpel tekstjustering

Det kan være nyttigt at kunne venstrestille, centrere eller højrestille tekst. Nogle gange ønsker man fx, at overskrifter skal centreres. I dette afsnit beskriver jeg, hvordan man kan gøre det i HTML.

  • Tekst kan centreres med <CENTER>. Alt der står mellem <CENTER> og </CENTER> vil blive centreret.
  • Tekst er per automatik venstrestillet, så det bør ikke være nødvendigt at skrive noget specielt for at opnå dette.
  • At højrestille tekst kræver nogle mekanismer, jeg ikke har introduceret endnu, nemlig felter (eller attributter) på nogle tags. Hæng på for at få mere at vide :-)

Eksempler:
Venstrestillet tekst

Centreret tekst
Tags med felter/attributter

Mange tags er ikke altid blot på den simple form <tag-navn>, men indeholder også såkaldte felter eller attributter. Vi har allerede set et eksempel på dette, nemlig tagget <A> der havde en attribut HREF. Et tag med attributter er på formen:
<tag-navn tag1="værdi1" tag2="værdi2" ...>
Man kan bruge attributter til at styre en lang række mere avancerede HTML features. Du vil løbende i denne guide støde på tags med felter, så derfor er det rart at du nu allerede er blevet introduceret til konceptet.
Tabeller

Tabeller er et meget kraftfuldt værktøj i HTML. Oprindelig er det tænkt til at lave opsætninger på tabelform - for eksempel til at fremvise noget data i en tabel. Men det viser sig, at tabeller bliver brugt på næsten alle hjemmesider idag til at lave layout. Tabeller gør det muligt at opdele en hjemmeside i spalter, at have billeder og tekst ved siden af hinanden og meget mere. Overskrifterne i dette dokument er også lavet ved hjælp af tabeller. Hver overskrift er en række i en stor tabel, hvor baggrundsfarven i rækken er sat til mørkegrå! Jeg håber at jeg med dette har vakt din nysgerrighed. Lad os nu dykke ned i, hvordan man laver tabeller i HTML. En tabel defineres med <TABLE> og afsluttes med </TABLE>. Hver række i tabellen skal starte med <TR> og slutte med </TR>. I hver række kan være et antal søjler. Hver række skal have lige mange søjler - ellers får du et mystisk resultat! Hver søjle i en række startes med <TD> og sluttes med </TD>. Når du angiver en tabel angiver du således hver række for sig, og inde i hver række angiver du hver søjle for sig. Man kan se på det, som at tabellen løbes igennem fra øverste venstre hjørne mod nederste højre hjørne. En tabel med 2 rækker og 3 søjler kan således angives som følger:

<TABLE>
   <TR>
      <TD>Række 1 søjle 1</TD>
      <TD>Række 1 søjle 2</TD>
      <TD>Række 1 søjle 3</TD>
   </TR>
   <TR>
      <TD>Række 2 søjle 1</TD>
      <TD>Række 2 søjle 2</TD>
      <TD>Række 2 søjle 3</TD>
   </TR>
</TABLE>

Hvilket producerer følgende resultat:

Række 1 søjle 1 Række 1 søjle 2 Række 1 søjle 3
Række 2 søjle 1 Række 2 søjle 2 Række 2 søjle 3

Det ser måske lidt kedeligt ud? Hvis du gerne vil have linier mellem de enkelte felter i tabellen kan du bruge feltet BORDER i <TABLE> tagget. En BORDER på 0 betyder ingen linier mellem felterne, mens en BORDER på 1 vil give en hårtynd linie osv. Lad os prøve:

<TABLE BORDER="1">
   <TR>
      <TD>Række 1 søjle 1</TD>
      <TD>Række 1 søjle 2</TD>
      <TD>Række 1 søjle 3</TD>
   </TR>
   <TR>
      <TD>Række 2 søjle 1</TD>
      <TD>Række 2 søjle 2</TD>
      <TD>Række 2 søjle 3</TD>
   </TR>
</TABLE>

Hvilket producerer følgende resultat:

Række 1 søjle 1 Række 1 søjle 2 Række 1 søjle 3
Række 2 søjle 1 Række 2 søjle 2 Række 2 søjle 3

Udover BORDER har <TABLE> tagget også en række andre nyttige felter man kan pille ved. Et eksempel er CELLSPACING, der angiver hvor meget plads der er mellem to celler. Hvis man ikke angiver CELLSPACING (som vi jo ikke har gjort ovenfor), så er det det samme som at sætte CELLSPACING til 1. Man siger at 1 er "default" værdien for CELLSPACING. Det betyder blot, at hvis man ikke skriver noget, så er det det samme som at skrive 1. Feltet BORDERCOLOR angiver farven på linierne mellem cellerne. Farver angives som en kode i HTML - så du skal lige lære, hvordan det virker. Det vil blive beskrevet i afsnittet Farver nedenfor. Så fortvivl ikke over, at det lige nu ser kryptisk ud. Her en tabel med røde linier mellem cellerne og CELLSPACING på 0:

<TABLE BORDER="1" CELLSPACING="0" BORDERCOLOR="#FF0000">
   <TR>
      <TD>Række 1 søjle 1</TD>
      <TD>Række 1 søjle 2</TD>
      <TD>Række 1 søjle 3</TD>
   </TR>
   <TR>
      <TD>Række 2 søjle 1</TD>
      <TD>Række 2 søjle 2</TD>
      <TD>Række 2 søjle 3</TD>
   </TR>
</TABLE>

Hvilket producerer følgende resultat:

Række 1 søjle 1 Række 1 søjle 2 Række 1 søjle 3
Række 2 søjle 1 Række 2 søjle 2 Række 2 søjle 3

Som nævnt SKAL der være lige mange søjler i hver række. Ellers går det galt. Men nogle gange har man brug for, at en celle kan strække sig over mere end en søjle. Man kan godt gøre dette i HTML, så skal man bare bruge COLSPAN feltet i <TD> tagget. Hvis man sætter COLSPAN til 2 vil den pågældende celle brede sig over to søjler. Lad os lige se, hvordan det virker:

<TABLE BORDER="1" CELLSPACING="0" BORDERCOLOR="#FF0000">
   <TR>
      <TD>Række 1 søjle 1</TD>
      <TD>Række 1 søjle 2</TD>
      <TD>Række 1 søjle 3</TD>
   </TR>
   <TR>
      <TD COLSPAN="2">Denne celle er bred</TD>
      <TD>Række 2 søjle 3</TD>
   </TR>
</TABLE>

Som producerer følgende resultat:

Række 1 søjle 1 Række 1 søjle 2 Række 1 søjle 3
Denne celle er bred Række 2 søjle 3

Det er okay at vi kun har to <TD> tags i anden række, fordi vi jo netop har sagt, at den ene skal brede sig over to søjler. Derfor har vi implicit 3 søjler i række to også - og alting er som det skal være. Havde vi derimod udeladt COLSPAN="2" ville vi stå med noget ugyldig HTML, fordi første række har 3 søjler og anden række kun ville have 2!

Man kan også ændre baggrundsfarven på en celle eller en hel række, ved at benytte BGCOLOR feltet i enten <TR> eller <TD> taggene. Eksempel:

<TABLE BORDER="1" CELLSPACING="0" BORDERCOLOR="#FF0000">
   <TR BGCOLOR="#222222">
      <TD>Række 1 søjle 1</TD>
      <TD>Række 1 søjle 2</TD>
      <TD>Række 1 søjle 3</TD>
   </TR>
   <TR>
      <TD COLSPAN="2">Denne celle er bred</TD>
      <TD>Række 2 søjle 3</TD>
   </TR>
</TABLE>

Som producerer følgende resultat:

Række 1 søjle 1 Række 1 søjle 2 Række 1 søjle 3
Denne celle er bred Række 2 søjle 3

Du skal ikke bekymre dig om, hvordan jeg kunne vide, at #222222 betød lysegrå. Det vil altsammen blive forklaret lige om lidt! Det er faktisk ved hjælp af BGCOLOR jeg har lavet de forskellige overskrifter i dette dokument! Jeg har så også lavet tekstfarven hvid i mine overskrifter. Jeg har ikke forklaret, hvordan man skifter farve på tekst endnu, men det kommer altsammen. Bare rolig.

Inden vi går videre med at se på, hvordan man angiver farver i HTML så du kan forklaret hvordan #222222 kan betyde lysegrå, vil jeg lige nævne en sidste ting omkring tabeller. Nemlig vedrørende justering af tekst inde i celler. Nogle gange vil man gerne venstrestille, centrere eller højrestille tekst. Andre gange vil man også gerne kunne justere teksten vertikalt. Betragt for eksempel følgende tabel:

Frugt
 Æbler
Pærer
Bananer
Grøntsager Ærter
Gulerødder
Majs

Det kunne godt være, vi gerne ville centere teksten ude i venstre side, så den stod midt i cellen. Dette kan gøres med <CENTER> som vi allerede har set. Men man kan også benytte feltet ALIGN som bliver tilbudt af <TD>. Med feltet VALIGN kan man også styre hvordan teksten skal stå vertikalt - om den skal stå i toppen af cellen, i midten eller i bunden.


<TABLE BORDER="1" CELLSPACING="0">
   <TR>
      <TD ALIGN="CENTER" VALIGN="TOP">Frugt</TD>
      <TD>Æbler<BR>Pærer<BR>Bananer</TD>
   </TR>
   <TR>
      <TD VALIGN="BOTTOM">Grøntsager</TD>
      <TD>Ærter<BR>Gulerødder<BR>Majs</TD>
   </TR>
</TABLE>

Som producerer følgende resultat:

Frugt Æbler
Pærer
Bananer
Grøntsager Ærter
Gulerødder
Majs

Mulige værdier for ALIGN er blandt andet: LEFT, CENTER, RIGHT. Mens VALIGN kan være fx TOP, MIDDLE eller BOTTOM.
Lidt større tabeleksempel

Her er et eksempel, der viser et helt HTML dokument indeholdende en tabel, der bruger nogle af de ting du lige har lært. Det eneste eksemplet nedenfor bruger, som du ikke har lært er feltet WIDTH i <TABLE> tagget. Ved at sætte WIDTH kan du tvinge tabellen til at have en bestemt bredde. WIDTH kan angives som et tal (angivet i pixels eller billedpunkter på skærmen) eller som et tal efterfulgt af %. En tabel med WIDTH="50%" vil være halvt så bred som det browservindue HTML filen bliver vist i.

<HTML>
   <HEAD>
      <TITLE>Leg med tabeller</TITLE>
   </HEAD>
   <BODY>
   <H1>Her er et eksempel på en tabel</H1>
   <TABLE BORDER="1" CELLSPACING="0" BORDERCOLOR="#222222" WIDTH="300">
      <TR BGCOLOR="#DDDDDD">
         <TD ALIGN="CENTER"><B>Land</B></TD>
         <TD ALIGN="CENTER"><B>Hovedstad</B></TD>   
      </TR>
      <TR>
         <TD>Danmark</TD>
	 <TD>København</TD>
      </TR>
      <TR>
         <TD>Sverige</TD>
	 <TD>Stockholm</TD>
      </TR>
      <TR>
         <TD>Norge</TD>
	 <TD>Oslo</TD>
      </TR>
      <TR>
         <TD>Finland</TD>
	 <TD>Helsinki</TD>
      </TR>
   </TABLE>
   </BODY>
</HTML>
Tryk her for at se resultatet af ovenstående HTML kode
Farver

Jeg lovede, at jeg ville forklare, hvordan farver virker i HTML. Du synes sikkert det har set mærkeligt ud de gange jeg har angivet en farve i HTML. Farver angives med foranstillet # efterfulgt af seks "cifre". Men det er ikke almindelige cifre fra 0 til 9. De kan nemlig også have værdierne A, B, C, D, E eller F. Man kan se på hvert ciffer som et tal mellem 0 og 15, hvor A = 10, B = 11, C = 12, D = 13, E = 14 og F = 15. De første to cifre angiver hvor meget rød der skal være i farven. De næste to cifre angiver, hvor meget grøn der skal være i farven, mens de sidste to cifre angiver hvor meget blå der skal hver i farven. Alle farver kan sammensættes som en blanding af disse tre farver. Måske lyder det underligt, men sådan er det også i virkeligheden. Hvid er i virkeligheden "alle farver på en gang", mens sort er "ingen farve overhovedet". Det betyder at hvis du skruer helt op for alle tre farver og skriver #FFFFFF så får du farven hvid. Mens #000000 vil give dig farven sort. Ønsker du en knaldrød farve kan du skrue helt op for den røde og helt ned for de andre; #FF0000. På samme måde giver #00FF00 klar grøn og #0000FF giver klar blå. Hvis du giver lige meget af hver farve vil resultatet blive grå. Jo mere du giver, des lysere bliver den grå farve. Des mindre du giver, des mørkere bliver den grå farve. #DDDDDD vil således være en lysegrå farve, mens #222222 vil være en mørkegrå farve. Hvis man blander rød og grøn får man gul; #FFFF00 vil give en gul farve. Som du jo så kan gøre mørkere ved at tone rød og grøn lidt ned; #CCCCCC00. Det kan godt være, du får brug for at prøve dig en lille smule frem, for at få de farver du gerne vil have. Der er ihvertfald nok af farver at vælge imellem. De seks cifre giver nemlig 15 * 15 * 15 * 15 * 15 * 15 forskellige farver! Det er faktisk flere millioner forskellige.
Avanceret tekst

Det er ved at være tid til at lære nogle flere ting omkring tekst. For eksempel, hvordan man kan skifte farve på tekst og hvordan man kan skifte tekstens skrifttype. Du vil også lære, hvordan man kan bestemme størrelsen på teksten. Tagget <FONT> kan bruges til alle disse ting. <FONT> tagget har nemlig en række forskellige felter, der kan bruges til at kontrollere skrifttype, tekstfarve og tekststørrelse. Her er nogle eksempler:

Kode Resultat
<FONT FACE="Times" COLOR="#FF0000" SIZE="4">Noget tekst</FONT> Noget tekst
<FONT FACE="Verdana" COLOR="#0000FF" SIZE="6">Noget tekst</FONT> Noget tekst
<FONT FACE="Courier" COLOR="#00FFFF" SIZE="3">Noget tekst</FONT> Noget tekst

FACE angiver fonten, COLOR angiver tekstfarven, mens SIZE angiver tekststørrelsen. 1 er meget småt mens 6 er meget stort (som du kan se). Nu forstår du nok bedre, hvordan man kan lave tekst ligesom i mine overskrifter! Nu ved du hvordan du kan lave hvid tekst, og hvordan du kan ændre skrifttypen til "Verdana", som er den skrifttype denne hjemmeside er skrevet med.
Billeder

Her kommer noget du måske har ventet længe på. Nemlig hvordan man indsætter billeder i HTML! Billeder kan gøre en hjemmeside mere spændende. Det kan også være, du gerne vil lægge billeder af familiefrokosten ud på din hjemmeside. For at benytte billeder skal du sikre dig, at billederne enten er i GIF eller i JPG format. Det betyder at billedets efternavn skal være ".gif" eller ".jpg" eller ".jpeg". Hvis din computer ikke viser filefternavne kan du følge første del af guiden om at oprette HTML dokumenter.
Tryk her for at gå til denne guide!
Hvis du ikke har billederne i JPG eller GIF format er du nødt til at lave dem om til enten GIF eller JPG.
Hjælp, det kan jeg ikke finde ud af!

Når du har fundet det GIF eller JPG billede du vil bruge, skal du anbringe det i samme mappe som dit HTML dokument. Følgende tag bruges til at indsætte billeder med: <IMG>. Dette tag har et felt kaldet SRC, hvor du angiver filnavnet på dit billede. Filnavnet skal angives med filtypeefternavn. Hvis du har et billede "mitbillede.jpg" kan du indsætte det på følgende måde:
<IMG SRC="mitbillede.jpg"></IMG>
Hvis du pakker dit billede ind i et <A> tag kan du gøre billedet til et link, man kan trykke på!
Om at skrive specialtegn

Måske har du undret dig over, hvordan jeg kan skrive HTML kode, så det ikke fortolkes som kode, men skrives direkte ud på skærmen. Hvordan kan jeg fx skrive <B>Hej med dig</B> uden at det faktisk bliver til Hej med dig? Svaret er, at der er en måde at skrive specielle tegn som fx < eller > så de ikke fortolkes som en del af et tag. Man kan nemlig i stedet skrive &lt; der producerer symbolet < men uden at det fortolkes som HTML. Så det jeg gjorde før, var at jeg skrev:
<CODE>&lt;B&gt;</CODE>Hej med dig<CODE>&lt;/B&gt;</CODE>
Der producerer resultatet:
<B>Hej med dig</B>
I "gamle" dage kunne man ikke skrive æ, ø eller å direkte i et HTML dokument. Fx skulle man skrive &aring; i stedet for å. Idag må man godt skrive æ, ø eller å direkte i HTML koden. Men de gamle forkortelser virker stadig, så &aring; vil stadig give et å. Hvis du mangler et særligt tegn, som du vil skrive, så er nedenstående et link til en tabel, der viser de forskellige symboler og deres forkortelser.

Symboltabel for HTML

Med google kan du sikkert finde en bedre symboltabel, hvis det skulle være :-). Der er tit mere end en kode der producerer et givet symbol. For eksempel bruger tabellen som linket henviser til udelukkende talkoder til symboler - men mange symboler har også en forkortelse med bogstaver. For eksempel &amp; der giver &, &lt; der giver < og &gt; der giver >.
En menu i venstre side

Mange hjemmesider er opbygget, så de har en menu ude til venstre, hvor man hele tiden har en række muligheder. Man kunne godt lave dette med en tabel, men det ville ikke give det ønskede resultat. Når man så scroller med dokumentet, forsvinder menuen jo op i toppen af skærmen! Hvis menuen skal være på plads samme sted hele tiden, så er man nødt til at bruge såkaldte FRAMESETs eller de lidt nyere såkaldte DIVs. Vi skal i det følgende benytte <DIV> tags til at lave en menu i venstre side, som ikke forsvinder, når man scroller i højre side. For at gøre dette er jeg dog nødt til at introducere noget lidt nyt. Faktisk et helt nyt programmeringssprog som ikke er HTML! Nu bliver du bange? Vent og se - det er ikke så slemt, som det lyder. Vi får brug for at tilføje noget til vores hovede i vores HTML dokument. Nemlig noget der hedder et STYLESHEET. Et stylesheet kan mange af de samme ting som man kan i HTML - bare på en smartere måde. Men tiden er ikke moden til at beskrive det i detaljer. Jeg vil bare lige vise, hvad der skal til, for at lave den føromtalte stationære menu, som ikke scroller med resten af dokumentet. Man indlægger et stylesheet med tagget <STYLE>. Dette tag har en parameter TYPE som skal sættes til "text/css". <STYLE> tagget anbringes indeni <HEAD> tagget. Det vi har brug for, er at sætte nogle egenskaber for vores <DIV> tag. Indtil videre må det godt være sort snak for dig. Du må bare leve med at det ser ud ligesom nedenfor. Der kommer en mere gennemgående forklaring på style-sheets senere.


<STYLE TYPE="text/css">
	DIV
	{
	overflow: scroll
	}
</STYLE>

Teksten DIV angiver, at vi skal til at specificere nogle egenskaber ved tagget <DIV>. Det der kommer mellem { og } er så egenskaberne vi specificerer. I dette tilfælde fortæller vi, at der skal scrolles, hvis mængden af tekst bliver for stor til at kunne vises i <DIV> tagget. Vi fortæller også, hvor højt DIV området skal være. Hvis man ikke angiver dette bliver det "vilkårligt" højt. Derfor får man ikke noget ud af, at man kan scrolle i det - for det vil automatisk strække sig til at blive så stort, at man ikke behøver scrolle (man skal stadig scrolle med HELE vinduet, men ikke med selve DIV området, der har sin egen scrollbar!) Nedenstående skabelon viser, hvordan man kan lave en menu i venstre side og kun lade højresiden scrolle:


<HTML>
   <HEAD>
   <TITLE>Menu i venstre side</TITLE>
      <STYLE TYPE="text/css">
	 DIV
	 {
            height: 500px;
	    overflow: scroll;
	 }
      </STYLE>
   </HEAD>
   <BODY>
      <TABLE>
         <TR>
         <TD><H3>Menu</H3><BR>Her<BR>Kommer<BR>De<BR>Forskellige<BR>Menupunkter</TD>
         <TD VALIGN="TOP"><DIV>Bla bla bla</DIV></TD>
         </TR>
      </TABLE>
   </BODY>
</HTML>

Med koden ovenfor (men hvor jeg har gentaget "bla" mange flere gange, for at generere så meget tekst, at det får vinduet til at scrolle) får man følgende resultat:

Tryk her for at se resultatet af ovenstående HTML kode

Selvfølgelig ser det grimt ud, men hvis man laver en pænere menu, og noget mere spændende indhold end "bla bla", så kan man faktisk få en god hjemmeside ved at anvende denne teknik. Der findes også en anden måde at opnå denne virkning på, kaldet FRAMESET's.
FRAMESET - En ny måde at lave menuen i venstre side

Ideen med et frameset, er at ens HTML dokument kommer til at bestå af en række "vinduer". I hvert vindue vises et separat HTML dokument! Med denne teknik kan man derfor få vist en menu i venstre side, ved at lave to "vinduer". Et i venstre side som viser menuen, og et i højre side, som viser brødteksten på ens hjemmeside. Hvis brødteksten er lang så er det kun højre vindue, der vil komme til at scrolle! På denne måde, kan man altså opnå samme effekt som med DIV tagget. Endda på en lidt mere elegant måde, vil nogle nok mene.

Nu kommer vi til at have tre forskellige HTML dokumenter. Et "hoved" dokument, som er det brugeren skal åbne for at se siden. Dette hoveddokument indeholder kode der laver de to "vinduer" og viser de rigtige HTML sider i dem. Derudover kommer der et HTML dokument der indeholder menuen, samt et HTML dokument der kommer til at indeholde brødteksten på hjemmesiden. Vi vil starte med at kigge på, hvordan hoveddokumentet kan laves. Det er det eneste dokument som kommer til at indeholde tags, vi ikke har set på endnu. De andre to dokumenter er helt almindelige og behøver ingen speciel HTML kode for at virke! Så lad os nu se, hvordan man laver dette hoveddokument og hvordan man kan lave de to føromtalte "vinduer" til andre HTML sider.

Vi skal bruge det tag, der hedder <FRAMESET>. Med dette tag kan man specificere "vinduer" til andre HTML sider. Som felter i dette tag specificerer man, hvordan man gerne vil have at layoutet skal være. Vi vil gerne have to vinduer arrangeret som søjler (dvs. vi har et vindue til venstre og et til højre - alternativt kunne man arrangere dem som rækker, så menuen var øverst og brødteksten nederst). Koden:
<FRAMESET cols="20%, 80%">
Laver opdeler siden i to søjler, som bliver hver sit vindue. Første søjle får 20% af bredden af browservinduet, mens anden søjle får 80%. Det betyder at vores menu bliver meget smallere end området til brødtekst - præcis som vi gerne vil have, at det skal være! Endnu bedre, kunne man angive et præcist antal billedpunkter som man ønsker menuen skal være:
<FRAMESET cols="150, *">
Dette laver første søjle 150 punkter bred. Anden søjle bliver så bred som resten af vinduet (så meget der er plads til). Det er dette "*" betyder.

Inde i <FRAMESET> tagget angiver man de enkelte såkaldte FRAMES (vinduer). Hvert FRAME specificerer en HTML fil, som vinduet skal vise. Denne fil angives i feltet SRC. Nedenstående viser, hvordan vores hovedside kommer til at se ud:

<HTML>
   <HEAD>
      <TITLE>Menu i venstre side med frames</TITLE>
   </HEAD>
   <FRAMESET cols="150, *">
      <FRAME SRC="min_menu.html">
      <FRAME SRC="min_tekst.html">
   </FRAMESET>
</HTML>

Læg mærke til, hvordan <FRAMESET> tagget erstatter <BODY> tagget. Sådan skal det altid være, når man benytter sig af FRAMESETs.

Vores fil "min_menu.html" kunne fx se således ud:

<HTML>
   <HEAD>
   </HEAD>
   <BODY>
      <B>Menu</B><BR>
      Menupunkt1<BR>
      Menupunkt2<BR>
      Menupunkt3<BR>
      Menupunkt4<BR>
  </BODY>
</HTML>

I en rigtig menu, ville menupunkterne selvfølgelig være links. Og menuen ville nok være mere avanceret - måske ville der være knapper (billeder som er lavet til links) eller noget andet smart. Det ovenstående er holdt simpelt, så det er lettere at overskue og forstå.

Endelig kunne vores fil "min_tekst.html" være sådan noget som det her:

<HTML>
   <HEAD>
   </HEAD>
   <BODY>
      Bla bla bla bla
   </BODY>
</HTML>

Læg mærke til, at jeg i ingen af disse to filer har angivet nogen titel på HTML dokumentet. Det giver nemlig ikke nogen mening. Den titel man vil se, er titlen på hoveddokumentet. Ikke titlerne på de HTML sider, der vises i vores to "vinduer". Du er sikkert nysgerrig efter, hvordan det kommer til at se ud, hvis man laver de tre filer ovenfor? Ved at trykke på linket nedenfor, kan du se hvordan det ser ud, når man går ind på hovedsiden. Jeg har tilføjet flere "bla bla" ligesom sidste gang, for at få så mange, at dokumentet vil begynde at scrolle. Så kan man bedre se, hvordan menuen forbliver stationær ude i venstre side.

Tryk her for at se resultatet af ovenstående HTML kode

Som du nok lagde mærke til, så er der en tyk linie mellem de to vinduer. Den kan du godt undgå, hvis du vil. Det kan du gøre ved at benytte feltet FRAMEBORDER i tagget <FRAME>. Hvis vi ændrer hoveddokumentet til:

<HTML>
   <HEAD>
      <TITLE>Menu i venstre side med frames</TITLE>
   </HEAD>
   <FRAMESET cols="150, *">
      <FRAME SRC="min_menu.html" FRAMEBORDER="0">
      <FRAME SRC="min_tekst.html" FRAMEBORDER="0">
   </FRAMESET>
</HTML>

Så får vi følgende resultat:

Tryk her for at se resultatet af ovenstående HTML kode

Hvis du ville have haft menuen oppe i toppen i stedet for, så kunne du have opdelt vinduet i rækker i stedet for i søjler. Det kunne du have gjort ved at skrive:
<FRAMESET rows="150, *">
Som laver et frameset af to rækker. Den første bliver 150 punkter høj, mens den anden bliver så høj som resten af vinduet. Det er også muligt at finopdele i endnu flere vinduer, ved at indlejre FRAMESET's inden i andre FRAMESETs. På den måde kan du opbygge en hel tabel af vinduer! Som fx:


<FRAMESET cols="20%, 80%">
  <FRAMESET rows="100, 200">
      <FRAME src="frame1.html">
      <FRAME src="frame2.gif">
  </FRAMESET>
  <FRAME src="frame3.html">
</FRAMESET>

Her opbygger vi noget der ser ud ca som følger:

 ---------------------------------------
|         |                             |
|         |                             |
| Frame 1 |                             |
|         |                             |
|         |                             |
|---------|                             |
|         |          Frame 3            |
|         |                             |
|         |                             |
|         |                             |
| Frame 2 |                             |
|         |                             |
|         |                             |
|         |                             |
|         |                             |
 ---------------------------------------

Den første søjle i vores <FRAMESET cols="20%, 80%"> er nemlig ikke en FRAME i sig selv, men et helt FRAMESET som er opdelt i to rækker. Anden søjle (Frame 3) er derimod blot en alm. FRAME og yderligere opdeling finder derfor ikke sted.
At lave en indholdsfortegnelse

I dette afsnit kommer du til at lære, hvordan du laver en indholdsfortegnelse ligesom den der er, på denne guide HTML side. En indholdsfortegnelse består i virkeligheden bare af links lavet med <A> tagget. Det første du skal gøre, er at indsætte såkaldte "ankerpunkter" i dit HTML dokument. Et ankerpunkt er et sted i HTML dokumentet, som man kan gå til via indholdsfortegnelsen. Et ankerpunkt har et navn. Når man laver selve indholdsfortegnelsen laver man så links der peger på disse ankerpunkter. I denne fil har hver overskrift et ankerpunkt, som jeg linker til oppe fra indholdsfortegnelsen. Du laver et ankerpunkt med <A> tagget. Ankerpunktet skal have et navn, som du skriver i det særlige NAME felt, som <A> tagget har. Du indsætter dit ankerpunkt der, hvor du gerne vil have man skal kunne gå til på din hjemmeside fra indholdsfortegnelsen. Et eksempel på et ankerpunkt er:
<A NAME="mitanker"></A>
Fra indholdsfortegnelsen skal du nu have lavet et link, der peger på dette anker. Dette gøres på samme måde som et almindeligt link, bortset fra at man skal skrive #mitanker i HREF feltet. Der skal altid være # foran, når linket ikke linker til en anden HTML side, men til et anker inde i samme HTML fil. Så hvis vi skulle linke til vores anker ovenfor ville vi skrive følgende i indholdsfortegnelsen:
<A HREF="#mitanker">Gå til mit anker</A>
Når man så trykker på "Gå til mit anker" vil browseren hoppe ned til det sted, hvor du skrev ankeret med navnet mitanker. Prøv at gå op til indholdsfortegnelsen i dette dokument og trykke på nogle af linksene, hvis du ikke allerede har prøvet at se, hvordan de virker.
Baggrundsbilleder

Du kan lægge et billede ind som baggrund på din hjemmeside. Du kan også lægge et billede ind som baggrund inde i en celle i en tabel! Dette afsnit fortæller dig, hvordan du kan gøre disse ting i HTML. Nogle nybegyndere vælger nogle voldsomme baggrundsbilleder, der får hjemmesiden til at se rodet og tåbelig ud. Baggrundsbilleder skal altid være meget diskrete og blege. Ellers bliver det trættende at læse teksten, der står ovenpå! Hvis du vil give hele siden et baggrundsbillede kan det gøres ved at indsætte feltet BACKGROUND i <BODY> tagget på siden. Hvis billedet er lille, vil det blive gentaget hen over siden en masse gange. Vi vil lave en lille side, hvor følgende billede bliver anvendt som baggrundsbillede:

Vores kode kommer til at se ud som følger: 

<HTML>
   <HEAD>
      <TITLE>Baggrundsbillede</TITLE>
   </HEAD>
   <BODY BACKGROUND="background.gif">
   Denne side indeholder et baggrundsbillede.
   </BODY>
</HTML>
Tryk her for at se resultatet af ovenstående HTML kode

Udover at lave baggrundsbilleder kan du også ændre farven på baggrunden. Det gøres med feltet BGCOLOR. Følgende vil være en hjemmeside med gul baggrund:

<HTML>
   <HEAD>
      <TITLE>Baggrundsbillede</TITLE>
   </HEAD>
   <BODY BGCOLOR="#FFFF00">
   Denne side har gul baggrund.
   </BODY>
</HTML>
Tryk her for at se resultatet af ovenstående HTML kode

Som tidligere nævnt, kan du også benytte dig af baggrundsbilleder i tabelceller. Dette gøres ved at benytte feltet BACKGROUND indeni et <TD> tag. Ellers virker det præcist som beskrevet ovenfor. Ved at benytte baggrundsbilleder i tabelceller kan du få nøje kontrol med, præcis hvilke områder af din hjemmeside baggrundsbilledet dækker. Meget grafik der står bag ved teksten er lavet på denne måde rundt om på internettet. Det er ganske smart! Prøv at lege lidt med det, og se om du kan lave nogle lækre designs. Det kræver selvfølgelig, at du kan finde ud af at bruge et tegneprogram. Kan du ikke det, kan det være en god ide at lære det. Ellers må du klare dig med de billeder du kan finde på google.
Afrunding

På nuværende tidspunkt har du redskaber til at lave en ganske fin lille hjemmeside til dig selv. Du har lært en del om, hvordan du kan lave spændende layouts og sjove skrifttyper. Det er en god idé at tænke over dit design og ikke bare prøve en masse HTML af for at vise, at du kan finde ud af det. Fx er det vigtigt at din hjemmeside er læsevenlig. Bruger du for mange forskellige farver kommer siden også til at fremstå som meget rodet. Det er fint at bruge farver - men prøv at holde dig til de samme nuancer så. Bruger du både rød, blå og grøn i flæng kommer det let til at se kaotisk ud. En hjemmeside, hvor man bruger forskellige nuancer af blå til forskellige ting kan derimod komme til at se lækker ud.

Der er mange ting om hjemmesider du ikke har lært endnu. Du kender en del til HTML nu. Faktisk er HTML ikke så meget mere omfattende, end det du har fået et indblik i. De fleste tags har nogle flere felter eller attributter end dem jeg har gennemgået. Men mange af dem er ikke særlig interessante. Hvis du skal lave mere avancerede hjemmesider er det derfor ikke HTML du skal lære en masse mere af. I stedet skal du lære nogle andre "hjælpesprog" som du kan bruge til at lave mere avancerede hjemmesider. Du er allerede blevet introduceret til de såkaldte stylesheets. Dem brugte vi, da vi skulle lave en menu i venstre side med <DIV> tagget. Stylesheets kan en hel masse seje ting, som kan peppe din hjemmeside yderligere op. Et andet "hjælpesprog" hedder JavaScript. Det kan bruges til at lave fancy effekter som fx knapper, der skifter udseende, når man fører musen hen over dem. Man kan endda lave grafiske drop-down menuer med JavaScript! Men JavaScript er også meget sværere at lære end HTML. Det er langt mere kraftfuldt og derfor også langt mere indviklet at lære.

Som en afsluttende bemærkning til denne guide til HTML, vil jeg fortælle, hvordan du kan se HTML koden for en hjemmeside. Hvis du er inde på en hjemmeside, som du godt kunne tænke dig at se, hvordan var lavet. Så skal du bare højreklikke et sted på siden (ikke lige på et billede, men ude på teksten i siden, eller på et blankt område). I menuen der dukker op er der et punkt der hedder "Vis kilde". Hvis du vælger det, dukker HTML koden for hjemmesiden op! Så kan du aflure, hvordan siden er lavet! Du kan jo prøve at "aflure" denne side, ved at vise kilden for den!

Med disse ord vil jeg sige tak for nu. Jeg håber du har haft gavn og glæde af min guide til HTML, og at du føler du har fået noget ud af den. Hvis der er noget, du ikke forstår eller hvis du finder graverende stave-/slåfejl i guiden er du velkommen til at kontakte mig.

Min e-mail adresse er: gsiegel@gabsoft.dk

HVis du vil lære mere om hjemmeside design, kan du fortsætte ved at trykke linket nedenfor. Det vil føre dig videre til en guide, der fortæller mere om de såkaldte stylesheets, som jeg allerede kort har omtalt i denne guide.
Privatlivspolitik Fortsæt til CSS Guide