2 Mit første HTML-dokument
I dette kapitel skal du skrive dit første HTML-dokument og vise det i en browser. Fra og med dette kapitel kommer du selv til at kode en masse, og i den forbindelse vil vi gerne give dig et råd: Skriv koden selv! Selvom det kan være fristende at kopiere kode her fra siden her, eller fra et andet dokument, så kan det let gå ud over forståelsen, hvis man kopierer kode. Når man skriver hele koden selv, lærer man at skrive korrekt, og man bliver tvunget til at forstå hver eneste lille bid af koden.
2.1 Vi installerer Sublime Text
Inden du går i gang skal du bruge en text editor, som du kan skrive og redigere HTML-dokumenter i. I princippet kan du arbejde med HTML-dokumenter i helt simple tekstprogrammer, såsom Notesblok, men det er ikke særligt hensigtsmæssigt i længden. I stedet vil vi bruge et tekstredigeringsprogram, der er lavet specielt til at skrive kode. Vi skal bruge et program, der hedder Sublime Text, og herunder kan du se en video, hvor Nicolai forklarer, hvordan man installerer Sublime Text.
2.2 Lad os komme i gang!
Så er det tid til at lave dit første HTML-dokument. Et HTML-dokument er en fil, der har endelsen .html, akkurat som et Word-dokument har endelsen .doc eller .docx. Forskellen er blot, at det er din browser, der kan åbne HTML-dokumenter. For at komme igang, skal du åbne Sublime Text, skrive noget helt almindeligt tekst, gemme dit arbejde som et HTML-dokument kaldet index.html og til sidst vise dokumentet i browseren. I video 2 herunder viser vi, hvordan man gør.
Okay, så langt så godt: Der hul igennem, og vi ved nu, hvordan vi kan vise tekst i en browser. Det er tid til at begynde at skrive HTML. Koden i et HTML-dokument er delt op i HTML-elementer, som repræsenterer den struktur, vi giver den tekst, vi gerne vil vise i browseren. Et HTML-element begynder med et start-tag og afsluttes med et slut-tag og fortæller browseren, hvad teksten mellem de to tags er.
HTML
<h1>Dette er en Heading 1</h1>
<h2>Dette er en Heading 2</h2>
<p>Dette er en text paragraph</p>
HTML-koden ovenfor består af tre elementer, hvoraf det første er:
<h1>Dette er en Heading 1</h1><h1> angiver elementets begyndelse, mens slut-tagget </h1> angiver elementets afslutning. Både start-tag og slut-tag regnes som en del af elementet. Bemærk, at den eneste forskel på de to tags er, at slut-tagget indeldes med en /.
I video 3 herunder viser vi ovenstående i praksis. Skriv også koden ind i din egen index.html uden at kopiere herfra, så du øver dig i at kode.
Som eksemplet ovenfor antyder, så er der forskellige størrelser af overskrifter. <h1> er den største overskrift, mens <h2> er lidt mindre. Undersøg hvor mange forskellige størrelser af overskrifter HTML har - prøv dig frem.
2.3 Et standard HTML-dokument
Vi er nu lykkedes med at få en browser til at vise både almindelig tekst og overskrifter i browseren. Det næste skridt er at sætte formel struktur på vores HTML-dokument. Alle HTML-dokumenter skal have følgende struktur:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mit første HTML-dokument</title>
</head>
<body>
<h1>Dette er en Heading 1</h1>
<h2>Dette er en Heading 2</h2>
<p>Dette er en tekst paragraf</p>
</body>
</html>
Lad os løbe ovenstående kode igennem fra toppen:
<!DOCTYPE html>er faktisk ikke et HTML-tag. Det er bare en deklaration af filen, så browseren ved, at nu kommer der et HTML-dokument.<html></html>angiver hvor vi har tænkt os at skrive vores HTML. Alle HTML-elementer skal placeres mellem disse tags.<head></head>indeholder metadata om dokumentet. Metadata er data, der ikke skal vises i browseren men beskriver den øvrige data i dokumentet.<meta charset="utf-8">angiver at bogstaver og symboler i dokumentet er fra utf-8 tegnsættet. Det er et tegnsæt, der indeholder næsten alle symboler i verden, og når vi angiver, at vi brugerutf-8, ved browseren at den, for eksempel, skal vise bogstaverne æ, ø og å, når de forekommer i teksten.<title></title>angiver dokumentets titel. Titlen er ikke det samme som en overskrift, og den bliver vist på sidens faneblad i browseren - men ikke på selve siden.
<body></body>indeholder de HTML-elementer, som vi gerne vil have vist i browseren på selve siden. Den tekst og de overskrifter, vi allerede har arbejdet med, skal placeres her.
Læg mærke til, at HTML-elementerne er indlejret i hinanden, for eksempel er elementet <h1></h1> indlejret i elementet <body></body> ovenfor. Vi bruger typisk det engelske ord nested i stedet for det danske indlejret, og for at kunne tale om, hvilket element, der er indlejret hvor, siger vi at <h1></h1> er et child til <body></body>, mens <body></body> er parent til <h1></h1>.
Læg desuden mærke til, at alle øvrige HTML-elementer i dokumentet er efterkommere, eller descendants, til elementet <html></html>.
Opdatér dit HTML-dokument, så det svarer til ovenstående. Gem dokumentet, åbn det i browseren og tjek, at du kan se HTML-dokumentets titel på fanebladet.