Der findes mange tags til XHTML, og nogle er mere brugbare end andre. Vi vil her gennemgå de tags, som du oftest vil få brug for. Hvis du kender HTML, vil du genkende de fleste. Hvordan de bruges er dog lidt anderledes, så du bør ikke ignorere dette afsnit.

Endvidere er der tags, som bør undgåes. Disse er tags, som fortæller noget om, hvordan dit indhold skal præsenteres. Vi har ikke indholdt disse i denne oversigt. Vi vil som tidligere nævnt gerne have adskilt vores præsentation fra vores indhold og ønsker således alene at benytte kode, som beskriver indholdet af vores side, og ikke hvordan det skal formateres. Vi vil herefter lave en CSS-fil, som bestemmer, hvordan vi præsenterer vores indhold.

Jeg vil nu gennemgå nedenstående tags, der alle understøtter den ovenfor beskrevne tilgang:

Husk at alle disse tags skal placeres i body-sektionen som vist i det forrige afsnit. Der findes flere tags, som er meget brugbare. For ikke at tage pusten helt fra dig, vil vi dog i første omgang begrænse os til ovenstående.

Vi vil nu gennemgå de forskellige tags. Forsøg at afprøve koderne efterhånden som de bliver præsenteret for dig. Du skal ikke bekymre dig, hvis det hele ikke giver meget mening endnu. Før vi kan bevæge os til et mere overordnet niveau, hvor dine koder resulterer i brugbare hjemmesider, bliver vi nødt til, at få nogle detaljer på plads.

Inden vi går igang, skal du lave en ny fil, som vi kalder “xhtml-eksperimenter.html”. Indsæt følgende kode i filen og gem den:

Erstat herefter “...” med koderne fra eksemplerne nedenfor. Du vil på den måde kunne se, hvad resultatet af koderne er. 

<p>

Dette tag bruges til tekstafsnit. Dette tag skal både åbnes og lukkes, som beskrevet før. Et eksempel på et tekstafsnit ses her:

Dette er muligvis et af de mest brugte tags. Bemærk at der opstår et linieskift efter hvert afsnit. Nedenstående kode giver således to linier tekst.

Som med alle øvrige tags kan det være nemmere at huske tagget, hvis man tænker på dets engelske betydning. “p” står således for paragraph, hvilket på dansk bedst oversættes til tekstafsnit.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Til en tekst hører der som regel en overskrift. I XHTML er der 6 niveauer af overskrifter. <h1> er en overskrift på niveau 1. <h2> er en overskrift på niveau 2 og er således en underoverskrift til <h1>.

Som standard er skriftstørrelsen på <h1> større end <h2>. Nogle udviklere vælger derfor at starte med <h2>, fordi de synes skriftstørrelsen på <h1> er for stor. Dette er en meget forkert fremgangsmåde. Husk på: Det er ikke vores XHTML, der skal bestemme designet på vores side, men alene indholdet. Vi vil senere i afsnittet om CSS se, hvordan vi ændrer skriftstørrelsen på de forskellige overskrifter.

Her er et eksempel på et dokument med en overskrift med to underoverskrifter:

<br />

Dette tag betyder “ny linie” og er en måde at lave en ny linie på uden at starte et nyt tekstafsnit. På engelsk “break-line”.

Dette er et selv-lukkende tag og kan således stå alene. Her er et eksempel:

Hvis du bruger Microsoft Word, så svarer det til at trykke “shift+enter” i stedet for blot “enter”. Dette giver en ny linie, men stadig i det samme tekstafsnit.

<hr />

Dette tag giver en vandret linie og er således en god måde at opbryde tekst på. På engelsk: “hard return”.

Her er et eksempel hvor <hr /> er brugt til at adskille to artikler på en hjemmeside:

<img />

Dette tag bruges til at indsætte billeder med. På engelsk: “image”.

Tagget er ligesom <hr /> og <br /> selvlukkende og udfyldes med 4 parametre. Et parameter sættes inde i selve tagget. Her er et eksempel:

Den første parameter “src” angiver, hvor billedet befinder sig. Du kan her enten angive den fulde sti (ex. http://www.e-studio.dk/images/billede.png”), eller du kan angive en relativ adresse som i eksemplet ovenfor. En relativ adresse betyder, at hvis du blot skriver “billede.png”, så vil din browser hente billedet “billede.png” i den mappe, som din .html fil ligger i. Hvis billedet ligger i en mappe kaldet images, som er en mappe, i den mappe hvor din .html fil ligger, kan du angive adressen som “images/billede.png”.

De næste to, “width” og “height”, angiver højden og bredden på billedet i pixels. Billedet kan godt vises uden disse to parametre, men du bør altid inkludere dem. Angiv altid den faktiske størrelse på billede. Hvis dit billede er større, så brug et billedebehandlingsprogram til at gøre det mindre i stedet. Der er ingen grund til, at dine besøgende skal hente store billeder, for bagefter at få deres browser til at gøre dem mindre.

Den sidste parameter “alt” er en alternativ tekst. Denne tekst har primært to funktioner. For det første så hjælper den dårligt seende og blinde med at få beskrevet, hvad der er på billedet. For det andet fortæller den søgemaskiner og lignende, hvad der er på billedet.

Husk altid, når du arbejder med billeder, at benytte et Internet-venligt format (.jpg, .gif eller .png). Husk samtidig, at det anbefales ikke at benytte store bogstaver, mellemrum, æ, ø eller å, når du navngiver dine billeder. 

<strong>

Dette tag bruges til at markere tekst, som skal skille sig ud fra den øvrige tekst. Oftest vil dette betyde, at et enkelt ord, eller en sætning er markeret med fed.

Hvis du tidligere har arbejdet med HTML, kender du måske <b> tagget. Dette tag skal du ikke benytte, da det fortæller noget om præsentationen af dit dokument, hvilket skal undgås.

Ved at bruge <strong> i stedet for <b> kan vi senere ved hjælp af CSS specificere, hvordan vi ønsker, at den fremhævede tekst skal være. Det kan eksempelvis være, at vi vil have den fremhævet med en anden farve, med fed, understreget eller måske med en helt anden skrifttype.

Som standard gør <strong> teksten fed, hvilket du også vil se, hvis du afprøver ovennævnte kode.

<em>

Dette tag bruges til tekst, som ønskes fremhævet, oftest ved kursiv i forbindelse med citater eller lignende. Tagget fungerer på samme måde som <strong> og bør bruges i stedet for det gamle <i> tag, som gør teksten kursiv.

<a>

Dette tag bruges til både at lave links og bogmærker i et dokument. Ligesom <img> tagget har det nogle krævede parametre.

Eksempel:

I ovennævnte eksempel er der lavet et link til siden www.e-studio.dk ved at sætte “href” parametre til den ønskede adresse.

Man kan dog også bruge “a” tagget til at lave bogmærker på en side, som i eksemplet nedenfor:

Ovennævnte kode laver et bogmærke kaldet HTML, der hvor overskriften “HTML koder” er. Dette er smart, hvis du har et langt dokument, og giver brugeren mulighed for at klikke på et link, hvorefter browsere går til det valgte afsnit.

Eksempel:

Ovenstående koder laver et link til bogmærket “HTML”, som antages at være på den samme side. Hvis bogmærket ligger på en anden side, indsættes denne sides navn inden #HTML. Altså eksempelvis “index.html#HTML”.

<div>

Dette tag definerer en sektion af side. Det bruges ofte i forbindelse med CSS til at definere, hvor forskellige ting på siden skal være. Vi vil arbejde mere med <div> koder senere, da de i sig selv ikke er specielt brugbare.

<span>

Dette tag bruges til at markere dele af en tekst, som ønskes præsenteret på en anden måde en den øvrige tekst. Tagget fungerer altså lidt ligesom <strong> og <em>. Vi vil ligesom med <div> tagget arbejde med dette tag senere i forbindelse med CSS.

<table>

Dette tag bruges til at konstruere en tabel, som vi kender det fra excel eller andre regneark. Et eksempel er vist nedenfor:

Ovenstående eksempel er nok det mest komplicerede eksempel, vi har haft indtil nu. Koden <table> og </table> fortæller, hvor tabellen starter og slutter. <tr> og </tr> fortæller, hvor rækkerne i tabellen starter og slutter. I hver række er der en række celler. Der findes to typer af celler, <th> og <td>, hvor førstnævnte er en celleoverskrift og sidstnævnte er en almindelig celle.

Nogle udviklere benytter også en tabel til at lave selvopbygningen af siden. Dette foregår ofte ved, at en tabel med en række har to celler, hvor den venstre celle er menuen og den højre er indholdet på siden. Dette giver en nem måde at lave et webdesign med to kolonner.

Eksempel:

Personligt synes jeg ikke, at dette er en smart tilgang til at definere opbygningen af en hjemmeside, i det indholdet ikke repræsenterer en reel tabel, og du mister meget af den fleksibilitet, som vi netop ønsker at opnå ved at benytte CSS til præsentationen af hjemmesiden. Jeg vil derfor anbefale, at du opbygger din hjemmeside ved hjælp af <div> tags i stedet, og kun bruger tabeller, der hvor du rent faktisk ønsker at præsentere brugeren for tabeller. <div> tags og opbygningen af en hjemmeside vil blive beskrevet senere.

<form>

En form bruges når du ønsker, at brugeren skal have mulighed for at sende data til dig. Dette kan eksempelvis være til bruge ved en gæstebog, hvilket vi vil lave senere.

Eksempel:

<form> tagget har to parametre. Den første “method” definerer, hvordan formen skal sende de data, som brugeren indtaster. Der findes to metoder, “post” og “get”, og begge har forskellige fordele / ulemper. Vi vil gennemgå hvordan disse bruges i praksis i et senere afsnit.

Den næste parameter “action” beskriver hvortil de data, som brugeren har indtastet, skal sendes til. Hvis du lader denne være blank, sendes de til den samme side, som formen er på.

I mellem <form> tagsne indsættes de input felter, som du ønsker at gøre tilgængelig. Disse beskrives i de næste afsnit.

<input />

Der findes mange typer af inputfelter. Disse placeres mellem dine <form> tags, som beskrevet ovenfor. Her er et eksempel på en login form:

Som du kan se, så er <input /> tagget selvlukkende og skal derfor ende med “/>”, ligesom vi kender det fra <br /> og <hr />.

Det første input tag har parameteret “type” sat til “text”, hvilket betyder, at dette er et tekstfelt, hvor almindelig tekst kan indtastes. Den næste parameter “name”, som er sat til “username” fortæller hvad feltet hedder. Dette bruges af serveren, når den modtager de data, som brugeren indtaster.

Det næste input felt minder meget om det forrige, med den undtagelse at “type” er sat til password. Dette betyder, at når brugeren indtaster sin kode, kan brugeren ikke se hvilke bogstaver, der står i feltet. Dette er en god måde at lave adgangskode felter på, da det forhindre nysgerrige øjne i at opsnappe koden.

Det sidste input felt, er af typen “submit”. Dette betyder, at det er en knap, som sender de data, der er indtastet i formularen, når brugeren klikker på den. Den har endvidere en parameter ved navn “value” som angiver den tekst, der står på knappen.

Vi vil lave en fungerende form i et af de senere eksempler.

<ol>

Dette tag bruges til at lave en sorteret liste (Engelsk: Ordered List). Her er et eksempel:

<li> tagget bliver således brugt for hver linie, der er i listen.

<ul>

Dette tag minder meget om <ol> tagget og betyder en ikke sorteret liste. (Engelsk: Unordered List).

Eksempel:

ligesom ved <ol> tagget bruges <li> tagget også her til at definere de enkelte linier.

<pre>

Det sidste tag, jeg i denne omgang vil introducere dig til, er <pre> tagget, som dækker over prædefineret tekst. Dette kan eksempelvis være kode, som du ikke ønsker skal opbrydes af linieskift eller lignenden.

Som du måske har bemærket, så ignorerer HTML linie skift. Således giver de to nedenstående eksempler det samme resultat:

Ved at bruge <pre> vil de linieskift og indrykninger, du laver i din tekst, forblive der.

Eksempel:

Vær forsigtig med <pre> tags. En lang linie bliver ikke automatisk delt, hvilket medfører, at det potentielt kan ødelægge dit design.

Jeg vil i de næste afsnit arbejde videre på eksemplet fra det forrige afsnit og tilføje de nye tags et af gangen, som de fremkommer. Jeg vil på den måde beskrive tagget og bagefter vise dig, hvordan det bruges i praksis.

Test dine færdigheder

Du har nu lært 16 forskellige XHTML tags, hvilket er nok til at lave en hjemmeside, som e-studio.dk. Lige nu ser det meget primitivt ud, men ved hjælp af CSS vil jeg senere vise dig, hvordan du får din hjemmeside til at så flot ud.

Prøv at lave et XHTML dokument, som indeholder alle de tags, du blev introduceret til i dette afsnit. Start med et tag af gangen og valider løbende dit dokument via http://validator.w3.org

Ved kun at lave små ændringer af gangen, gør du det nemmere for dig selv at finde ud af, hvor du har lavet eventuelle fejl. Hvis siden var valid inden du skrev den sidste kode, så ligger fejlen med høj sandsynlighed i den kode, som du netop har tilføjet.

Du kan også nu udforske koden bag forskellige hjemmesider ved at højreklikke og vælge "Vis kildekode" i din browser. Du burde nu kunne forstå essensen af koden, men fortvivl ikke hvis der er elementer, som du endnu ikke forstår.