HTML5 tutorial 1 – Introduktion

Lær HTML helt fra bunden, så du selv kan bygge din egen hjemmeside, helt fra bunden. Her får du en gratis HTML tutorial på dansk.
I dag er det under halvdelen af alle hjemmesider, der bliver lavet fra bunden. De fleste hjemmesider bygges udfra et Content Management System (CMS), som f.eks. WordPress eller Joomla. Disse CMS er selv programmeret fra bunden, og leveres så i standardpakker, som du selv kan bygge videre på. Det er selvfølgelig nemt, men skal du ændre noget i et CMS eller forstå hvordan det er bygget op, er du nødt til at lære det programmeringssprog det er bygget af.
Det første programmeringssprog du skal starte med at lære, for at kunne lave hjemmesider fra bunden, er HTML. Det er grundsproget alle hjemmesider er lavet af, og uden HTML fandtes der ingen hjemmesider. I denne tutorial kan du lære HTML helt fra bunden, ved at gennemgå hvert afsnit og øve dig i at bruge de forskellige ting. Der er følgende afsnit i denne HTML5 tutorial:

• HTML5 tutorial 1 – Introduktion (den læser du nu)
• HTML5 tutorial 2 – Din første HTML side
• HTML5 tutorial 3 – De mest anvendte tags og attributter
• HTML5 tutorial 4 – Links og billeder
• HTML5 tutorial 5 – Tabeller
• HTML5 tutorial 6 – Formularer
• HTML5 tutorial 7 – Knyt CSS til HTML
• HTML5 tutorial 8 – Nye HTML5 tags
• HTML5 tutorial 9 – Få din hjemmeside på internettet
• HTML5 tutorial 10 – Hvad er næste sprog?

Hvis du er kommet igennem disse afsnit, skulle du gerne have en god basis for at kunne lave dine egne HTML baseret hjemmeside. Herefter kan du fortsætte med nogle af de andre programmeringssprog, som hjemmesider er bygget op af. Mere om det senere.

Hvad er HTML?

HTML er et programmeringssprog, som du kan lave hjemmesider med. Ligesom du kan tale forskellige sprog, findes der også forskellige sprog til at lave hjemmesider med. De har hver deres fordele, ulemper og begrænsninger. HTML er grundsproget til at lave hjemmesider med, og det ville ikke give mening at lære de andre programmeringssprog, hvis du ikke kan HTML. Så hvis du vil lave hjemmesider fra bunden, så skal du starte med HTML.
HTML er en forkortelse for HyperText Markup Language, og groft sagt er det et sprog bygget op af tekst der “markerer” opbygningen på en hjemmeside. For eksempel findes der tags til at vise et billede, tags til et link, tags til at skrive med fed skrift osv. Altsammen de ting der kræves, for at en hjemmeside kan vises.
HTML er et såkaldt “clientside” programmeringssprog. Det betyder at det er et sprog som “klienten”, dvs. browseren kan læse direkte. Det er i modsætning til et “serverside” sprog, der skal oversættes af en server (til HTML) for at kunne blive vist i en browser. Med andre ord kræver HTML ikke en server for at kunne blive vist. Du kan dobbeltklikke på en HTML-fil og så vises den direkte i din browser. Både offline eller når du er på internettet.
HTML er et gammelt sprog tilbage fra 1990, hvor det blev lanceret som et sprog hvor forskere kunne dele deres forskningsresultater med hinanden på internettet. Det sprog der blev udviklet endte dog med at blive grundsproget til hjemmesider, og i dag er det version 5 der er den gældende version. Deraf også navnet “HTML5” som denne tutorial baserer sig på.

Hvad kræver det for at kunne kode HTML?

Nu tror du måske du skal ud og investere i noget dyrt software for at kunne lave din egen HTML side? Men det er ikke tilfældet, fordi HTML kræver ikke andet end:

• En teksteditor (f.eks. Notesblok eller Notepad++)
• En browser (f.eks. Google Chrome eller Internet Explorer)

Du har altså allerede det installeret på din computer, som det kræver for at komme igang. Som nævnt kan du lave HTML-filerne i Notesblok, men det kan anbefales at skaffe en lidt mere avanceret HTML-editor, som f.eks. Notepad++ der er gratis. Ofte kan de markere bestemte tags med farver, så det er nemmere at finde rundt i koden. De kan også ofte finde en fejl i koden, hvis du har glemt noget eller måske selv indsætte en kode der mangler.

Øv dig på andre hjemmesider

Når du nu har gennemgået denne tutorial, så øv dig på en HTML fil løbende. Se hvad der sker hvis du tilføjer noget eller ændrer noget.
Det kan også være meget lærerigt at se hvilken HTML andre hjemmesider består af. Det kan du se i enhver browser, ved at vise kildekoden. I Google Chrome højreklikker du f.eks. bare på en hjemmeside og vælger “View page source”, hvorefter du får vist kildekoden direkte.

Det er dog vigtigt at være opmærksom på, at det du ser i kildekoden er koden for hjemmesiden på klientsiden. Mange hjemmesider er jo opbygget af et dynamisk serverside sprog, der som tidligere nævnt bliver oversat af en server til netop HTML. Den HTML du ser i kildekoden er altså den oversatte version, og derfor får du ikke den samme dynamik, hvis du blot kopierer koden ind på din side.

Hvad er en hjemmeside ellers bygget op af?

Det er værd at nævne, at det er ikke kun HTML kode du ser på klientsiden for en hjemmeside. Groft sagt vil der på klientsiden typisk være følgende sprog:

• HTML
• CSS
• Javascript

HTML er tagsproget der fortæller noget om hjemmesidens opbygning, tekst og indeholder links og billeder samt andre elementer. CSS er et designsprog, der kan udvide mulighederne for at designe udseendet på din hjemmeside, i forhold til hvad du kan med ren HTML. Javascript er et sprog der giver hjemmesiden funktionalitet.
I denne tutorial vil vi kun kigge på HTML, og det bliver i andre og fremtidige tutorials at du vil komme til at kende de andre sprog. Nu ved du i hvert fald lidt om hvad HTML er, og i næste afsnit vil vi kigge nærmere på hvordan du laver din første HTML side.