Introduktion til HTML
Indhold på denne side
Hvad er HTML?
HTML står for HyperText Markup Language og bliver benyttet til at skabe hjemmesidens struktur og indhold. Derfor er HTML fundamentalt for alt indhold på internettet. Det betyder at tekst, billeder, videoer, tabeller, links, formularer og meget mere bliver tilføjet til hjemmesider ved hjælp af HTML. Derfor kan man betragte dette programmeringssprog som hjemmesidens skelet. Sproget er meget nemt at lære sammenlignet med andre programmeringssprog og derfor er det et godt sprog at lære som det første – især hvis man er interesseret i at kunne skabe hjemmesider.
HTML blev opfundet af Tim Berners-Lee i 1990, som på daværende tidspunkt arbejdede som kontrahent i CERN. Tim Berners-Lee havde året forinden opfundet World Wide Web (WWW) og HTML skulle derfor fungere som et sprog til at fremvise multimedie-hjemmesider på World Wide Web. Siden da, er sproget blevet opdateret med nye versioner. HTML 2 blev udgivet i 1995, HTML 3 blev udgivet i 1997, HTML 4 blev også udgivet i 1997, HTML 5, som på nuværende tidspunkt er den nyeste version, blev udgivet i 2014.
Følgende programmer kan anbefales til at skrive HTML i: Notepad++, Coffecup HTML Editor, RJ TextEd og Atom. Disse programmer kaldes IDE’er som står for Integrated Development Environment (på dansk: integrerede udviklingsmiljøer) og det er de programmer man hovedsageligt benytter til at programmere i.
HTML i sammenspil med CSS og JavaScript
HTML alene kan kun skabe indhold på hjemmesider. Hvis man rent faktisk skal skabe visuelt interessante hjemmesider, er det nødvendigt at benytte CSS (Cascade Style Sheets) som et assisterende sprog til HTML. Med CSS kan man designe hjemmesidens udseende ved at ændre på farver, tekststørrelser, skrifttyper og meget mere.
Sammenspillet mellem de to programmeringssprog kan sammenlignes med bygningen af et hus. For at bygge et hus skal man først skabe et fundament, samt lave gulve, vægge og et tag. Når det er gjort har man skabt husets struktur. Det er dét som HTML gør med hjemmesider. Men hvis huset bare står tomt, så er det ikke særligt interessant. Derfor skal man selvfølgelig indrette det med møbler, man skal male tapeter på væggene, lægge gulvtæpper og hænge lamper op. Når det er gjort, så har man dekoreret huset så det er mere spændende at kigge på. Det er dét som CSS gør med hjemmesider.
Hvis man skal gøre sin hjemmeside endnu mere interessant kan man implementere et helt tredje programmeringssprog: JavaScript. JavaScript kan skabe dynamisk indhold på hjemmesider, uden at hjemmesiden behøver at blive genindlæst eller ført over på en ny side. Det kunne f.eks. være at man gjorde at brugeren blev i stand til at ændre farverne på hjemmesiden ved et klik på en knap.
Strukturen for HTML
HTML er sammensat af elementer som skabes ved hjælp af åbningstags og lukningstags. For at tilføje en normal tekst til sin hjemmeside skal man benytte følgende åbningstag: <p>, og på lukningstagget er der tilføjet en skråstreg: </p>. En skråstreg er gældende for alle slags lukningstags i HTML. Indholdet som står imellem åbnings- og lukningstagget er defineret som et HTML-element. HTML-elementer er alle de synlige genstande på hjemmesiden. Hvis man f.eks. skulle skrive en tekst på hjemmesiden, så ville man skrive teksten mellem åbnings- og lukningstagget, ligesom her:
<p>Dette er teksten som bliver vist på hjemmesiden.</p>
En HTML-fil har filformatet “.html”. I en HTML-fil skal ethvert tag som indeholder et synligt element på hjemmesiden stå imellem åbnings- og luknings-tagget: <body>. Derudover skal HTML-filen også følge en bestemt struktur. Prøv at tage et kig på nedenstående kodestykke:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Dette er dokumentets titel!</title>
</head>
<body> <h1>Dette er en overskrift!</h1> <p>Dette er en paragraf!</p> </body>
</html>
Det ovenstående kodestykke vil resultere i en side med overskriften “Dette er en overskrift!” samt paragraffen “Dette er en paragraf!” uden noget andet indhold. Udover det så indeholder kodestykket også tagget <!DOCTYPE html> samt tagget <html>. Disse koder fortæller browseren at filen indeholder en HTML-kode og de skal derfor inkluderes i enhver HTML-fil.
Inde i <html>-tagget er der et <head>-tag og et <body>-tag. <head>-tagget indeholder alt det information som hjemmesiden skal bruge, men som ikke er synligt på siden, mens <body>-tagget indeholder alle de elementer som er synlige på siden. Inde i <head>-tagget er der et <meta> tag som indeholder teksten charset = “UTF-8”, som angiver hjemmesidens tegnsæt. I det her tilfælde er UTF-8 benyttet, som dækker stort set alle bogstaver og symboler i verden, inklusiv Æ, Ø og Å.
Derudover er der også angivet titlen “Dette er dokumentets titel” i tagget <title>. Dette tag har ikke nogen betydning for hjemmesidens indhold, men vil stå oppe i hjemmesidens browservindue. Derudover benyttes titlen også af Google til deres søgeresultater, så det er altid en god ide at inkludere det.
Koden er gjort nemmere at læse ved at indrykke det indhold frem som er inde i et tag. Det anbefales at man gør dette i HTML og i mange andre kodesprog, for at skabe bedre struktur over koden. Indrykningen har ikke nogen betydning for kodens funktionalitet eller indholdet på hjemmesiden, men det gør det lettere at læse koden for os mennesker.
Indholdet på denne side
Denne side indeholder vejledninger til alle de vigtigste tags og attributter i HTML. Man kan få et overblik over de forskellige sider i den højre side-menu i toppen. Siderne er strukturerede som et opslagsværk, så de er meget korte og præcise, så du derved let kan kopiere dem over til dine egne noter, hvis du skulle få behov for det. Hvis du er ny til HTML kan du også sagtens læse siderne for at blive klogere på hvad HTML er.
Opslagsværket om HTML er delt op i følgende kategorier:
- Tekster: Tilføj overskrifter, paragraffer, linjeafstande og tekstformateringer til din hjemmeside
- Attributter: Lær om attributter og se hvad de mest benyttede attributter er
- Billeder: Tilføj billeder til din hjemmeside
- Videoer: Tilføj videoer til din hjemmeside
- Links: Tilføj links til din hjemmeside
- Lister: Tilføj sorterede, usorterede og indlejrede lister til din hjemmeside
- Tabeller: Tilføj tabeller med rækker, kolonner og dataværdier til din hjemmeside
- Inddeling: Lær hvordan man inddeler elementerne på hjemmesiden på den mest optimale måde
- Kommentarer: Tilføj kommentarer i din HTML-fil
Gå videre til Tekster i HTML her →