XHTML introduktion
Denne guide vil introducere dig til XHTML. Der forudsættes ingen forudgående viden om programmering. En basal forståelse af Internettet er dog en forudsætning.
Det er ligeledes en forudsætning, at du ved, hvordan du laver tekstfiler på din computer.
Traditionelt vil de fleste guides starte med at introducere læseren til HTML for herefter at introducere XHTML og lære læseren at oversætte HTML til XHTML. Dette er primært af historiske årsager, da HTML er ældre end XHTML. I denne guide vil vi dog gå direkte til XHTML, da det ikke ses som værende nødvendigt at have kendskab til HTML. Det kan dog være at HTML 5 i fremtiden vil ændre på dette.
Doctype
XHTML er skrevet i XML og skal derfor konstrueres som et XML-dokument. Øverst i ethvert XHTML-dokument skal der altid være en Doctype. Dette skal altid være den første linie i dit XHTML-dokument og fortæller brugerens browser, hvordan den skal forstå den kode, der står i dokumentet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Der findes forskellige doctypes (Strict, Transitional og Frameset). Hvilken doctype, du skal vælge, kommer meget an på, hvad du skal lave, og hvem der skal benytte siden. Vi vil i denne guide benytte Strict, da det giver den mest rene kode.
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Benyt denne doctype, hvis du vil have en meget ren kode uden præsentationskoder. Til præsentation benyttes i stedet CSS. Denne doctype anbefales.
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Brug denne doctype, hvis du vil gøre brug af HTML's præsentationskoder. Dette giver dig mulighed for at formatere teksten direkte i din kode uden at bruge CSS. Kan anbefales, hvis du ikke ønsker at bruge CSS.
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Brug denne doctype, hvis du ønsker at benytte rammer til at opbygge din side. Dette er en meget gammeldags måde at lave hjemmesider på og bør undgås.
Dit første XHTML-dokument
Ovennævnte giver måske ikke meget mening for dig. Det vigtigste er, at du husker indsætte en doctype i den første linie af alle dine XHTML dokumenter, da dette fortæller din browser, at dokumentet er et XHTM.dokument.
Lad os lave et XHTML-dokument og åbne det i din browser. Opret en ny fil på din computer og kald den simpelside.html. Indsæt herefter nedenstående kode og gem filen. Åben dernæst filen i din browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Simpelt XHTML dokument</title>
</head>
<body>
<p>et simpelt tekstafsnit</p>
</body>
</html>
Bemærk at ALLE koder pånær din doctype står med små bogstaver. Vend dig til at gøre det på denne måde - og gør det kun på denne måde. At skrive koder med store bogstaver var noget, man gjorde i det forrige århundrede!
Når du åbner simpelside.html i din browser, vil du blive mødt af en side, hvis eneste indhold er teksten “et simpelt tekstafsnit”. Bemærk at titlen i din browser nu er “Simpelt XHTML-dokument”.
Hurra, du har nu lavet et XHTML-dokument, men hvad betyder koden? En ny linie og indryk betyder intet i et XHTML-dokument. Dette er alene for at gøre det mere læseligt. Vi kunne således lige så godt have skrevet hele den ovenstående kode på en lang linie.
Efter vores doctype ser vi på linie 4 koden <html>. Dette er et opening tag og betyder, at alt kode efter dette tag er XHTML-kode. Dette gælder indtil tagget </html> på linie 11, som er et closing tag, der betyder, at dokumentet nu er slut.
Headsektionen består af de tags, som er imellem <head> og </head> på linie 5 til 7. Her fortæller dokumentet informationer til din browser om dokumentet. Eksempelvis dokumentets titel som i ovennævnte eksempel. Alle dokumenter skal have en headsektion med en titel som minimum. Vi vil senere se på flere tags, som kan være i din headsektion.
Bodysektionen består af de tags, der er imellem <body> og </body> på linie 8 til 10. Dette er indholdet, som vil blive præsenteret for brugeren. I ovenstående eksempel vises et tekstafsnit med teksten “et simpelt tekstafsnit”. Der er ikke nogle minimumskrav til, hvad der skal være i bodysektionen, men den skal dog være der.
XHTML-tags og opbygning
Der findes tre typer af tags i XHTML. Opening, closing og self-closing tags. I ovenstående så vi eksempler på opening og closing tags. Et self-closing tag er et tag, som lukker sig selv. Et eksempel er <br />, som betyder “ny linie”.Dette tag skal ikke efterfølges af et andet tag og kan således stå for sig selv.
Det er vigtigt, at alle tags er opbygget rigtigt. Her er et eksempel:
<div><p>Tekst</p></div>
Rigtigt opbygget.
<div><p>Tekst</div></p>
Forket opbygget
I de ovenstående to eksempler skal du bemærke rækkefølgen, koder bliver åbnet og lukket i. Du skal altid lukke koderne i omvendt rækkefølge af, hvad du åbnede dem i. Luk således den sidst åbnede først osv. Hvis du opstiller koden ovenfor som vist nedenfor, kan det være nemmere at se (Husk: linie skift og mellemrum i koden betyder intet):
<div>
<p>Tekst</p>
</div>
Validering
Det er vigtigt, at du som udvikler hele tiden har øje for at følge standarder. Som beskrevet tidligere bestemmer vores doctype i den første linie hvilken type dokument, der er tale om. Dette bestemmer således, hvordan browseren vil forstå den kode, som den bliver præsenteret for, og dermed hvilken standard, du forventes at følge.
Nogle browsere er mere tilgivende overfor fejl end andre, men hvis du vil være sikker på, at alle kan se dine sider uden problemer, bør du kontrollere, at du har lavet dit dokument korrekt. Hertil findes der en online-“stavekontrol”, der kan hjælpe dig. På adressen http://validator.w3.org/ kan du validere din kode. Du kan enten kopiere din kode direkte ind i formen, eller du kan, hvis du arbejder direkte på dit webhotel, give den linket til den side, som du ønsker valideret.
Ved at følge standarder, og dermed ikke benytte programmer som fx Frontpage, der ikke overholder standarderne, er du dermed sikker på, at alle kan tilgå din hjemmeside. Dette inkluderer bl.a. også Googles søgemaskine og vil derfor, hvis standarderne bruges korrekt, kunne give dig en bedre placering på Google, hvilket kan være altafgørende for, hvor mange besøg din hjemmeside får. I et senere afsnit vil vi gå mere i dybden med søgemaskineoptimering, som er en teknik til at maksimere din synlighed på Internettet.
Næste artikel
I den næste artikel ser vi nærmere på de forskellige XHTML-bodytags, der findes. Det er her, at du lærer at lave indholdet til din hjemmeside. Klik her for at fortsætte.