En guide til HTML for begyndere

Alle hjemmesider er skrevet i HTML - HTML er det sprog som web-browsere som eksempel Internet Explorer, Firefox, Google Chrome og Safari kan forstå. Ligesom vi snakker dansk med hinanden, så snakker Internettet; HTML.

HTML er en forkortelse for HyperText Markup Langauge. Dette flotte navn bygger på de teknologier som HTML indeholder:

Hypertext betyder kort fortalt en tekst som indeholder et link.

Markup Languge er en måde hvorpå man med kode kan styre layout-informationer, eksempelvis tekstformatering som fed, kusiv og lign.

HTML er faktisk utrolig simpelt at lære og forstå. Det er blot en masse "tags" man skriver, for at bygge sin hjemmeside op. Alt det vil jeg komme ind på i denne serie af artikler.

Mange hjemmesider benytter også mere avancerede teknologier som eksempelvis PHP for at lave dynamisk indhold - dette kan du lære meget mere om i min "Kom i gang med PHP"-serie her på hjemmesiden.

Normalt laver jeg videoer om alle mine emner, men lige præcis dette emne handler om at lære en masse tags, og her mener jeg det er nemmere at udprinte dokumenterne fra min hjemmeside og skrive dem af, for at lære de forskellige "tags" man skal bruge - samtidig kan man altid kan bruge disse sider som et opslagsværk.

Når vi over den næste håndfuld artikler har alt "grund-lærdommen" på plads, så vil jeg udgive videoer om de mere avancerede teknologier og emner vi skal ind på som Javascript med mooTools og jQuery mv., men først skal du lære en masse om HTML's opbygning og om de tags du skal kende.

Sådan skriver du dine HTML-koder

En meget populær måde at lave HTML på - og dermed lave en hjemmeside på, er at bruge en WYSIWYG-editor (WYSIWYG står for What You See Is What You Get). Med en sådan editor kan du arbejde med indholdet direkte som du ser det, f.eks. som Microsoft Word, hvor du bare trykker på "FED" knappen og så bliver teksten fed. Nogle af de mest populære WYSIWYG-editorer hedder FrontPage og Dreamweaver.

Problemet ved disse WYSIWYG-editors er for det første at du ikke lære at skrive dine HMTL-koder selv, men der er også andre fordele i at skrive HTML fremfor at bruge en WYSIWYG-editor:

1. Du kan bruge specielle tags som din WYSIWYG-editor måske ikke kender eller understøtter.

2. Du lære at læse HTML-kode - både dine egne men også andres- og så kan man jo "låne"cool'e effekter og andre ting fra andres hjemmesider.

3. Du får en flot gennemskuelig HTML-kode, du selv ved hvad betyder.

Den perfekte editor

Selvom du uden problemer kan bruge Notesblok fra Windows (Textedit på Mac) eller en lign. alm. tekst-editor, så vil jeg anbefale dig at bruge en avanceret HTML-editor, der er flere grunde, men som udgangspunkt er der følgende væsentlige fordele:

1. Kodefarver - dine tags og koder bliver vist i forskellige farver (se figur 2), det gør det nemt at læse og ikke mindst skille koderne fra hinanden

Figur 2: Coda på Mac der viser et HTML-view med syntax-highlighting (farver)

2. Tag-completion - når du er i gang med at skrive et tag, så foreslår en moderne editor resten af tagget for dig, så du slipper for at skrive hele tagget.

Hvis du eks. Skal indsætte et billede, kan du skrive:

<img

Så foreslår den selv resten af koden:

<img src="image.jpg" alt="Billede af min motorcykel" />

På den måde kan du spare en masse tid og undgå trykfejl.

3. Debugging

Mange moderne editors har indbygget debugging (se figur 3). Ligesom vi kender det fra Word, hvis vi skriver et ord forkert, så understreger den ordet med en rød linje, på samme måde kan en moderne editor understrege et HTML-tag, hvis du har skrevet noget forkert. En slags HTML-stavekontrol.

Figur 3: Coda på Mac der fortæller om en fejl i HTML-koden (Debugging)

Populære editors til Windows
Jeg vil anbefale det danske TSW WebCoder eller det noget mere simple WebWriter fra Danske Stones

Populære editors til Mac OS X
Jeg vil anbefale det gratis TacoEdit eller det kommercielle og meget populære Coda fra Panic.com

De næste artikler

I de næste artikler skal vi i gang med selve HTML-koden. De efterfølgende artikler og videoer i serien kræver et guldmedlemskab på min hjemmeside.

God fornøjelse