HTML

	HTML (HyperText Markup Language)
	HTML 5 logoet
Filendelse:	.html, .htm, .shtml, .shtm
MIME-type:	text/html
Udviklet af:	World Wide Web Consortium
Formattype:	Opmærkningssprog
Udvidet fra:	SGML
Udvidet til:	XHTML
Standard(er):	ISO/IEC 15445 W3C HTML 5.1

HyperText Markup Language (HTML) er et opmærkningssprog, der primært har til formål at strukturere indholdet på en hjemmeside og få tekst og billeder til at virke som links til andre html-sider. Markup betyder at opmærke. I hjemmesidesammenhæng vil det sige at html definerer indhold på websider, f.eks. kan en tekst markeres som overskrift eller brødtekst, arrangeres i en punktopstilling eller tabel og et hyperlink kan indsættes som klikbar tekst. Dermed kan en webbrowser som f.eks. Firefox, MS Internet Explorer, Safari, Opera eller Google Chrome, skelne teksttyper fra hinanden og vise indholdet formateret efter hvilken type det er markeret som. Typisk vil f.eks. overskrifter vises med forstørret fed skrift og hyperlinks med blå skrift. Html indeholder dog også mulighed for at bestemme mere detaljeret over udseendet af f.eks. overskrifter, tabeller, hyperlink og indlejring af billeder. Html-filer bruges på internettet, især på World Wide Web.

HTML-side

Hver enkelt html-side kan siges at være én hjemmeside men ofte vil det være hele den samling af html-sider der ligger under ét domæne, der betegnes som en persons eller virksomheds hjemmeside. Et andet navn for hjemmeside er derfor websted eller fra engelsk website eller blot site.

Historie

Html-sproget blev opfundet af to medarbejdere hos CERN-atomforskningsinstituttet i Geneve, Schweiz. Tim Berners-Lee var hovedmanden. Formålet var at give forskerne på instituttet et simpelt markup-sprog, som de kunne bruge til at dele deres forskningsresultater via internettet.

Html er baseret på SGML, Standard Generalized Markup Language, en international standard til opmærkning af tekster, så de kan præsenteres på forskellige fysiske enheder. SGML opmærker en tekst som f.eks. overskrift, brødtekst, lister og lignende men fortæller intet om hvordan f.eks. overskriften skal se ud. Udseendet bestemmes af den enhed teksten præsenteres på. Samme tekst vil derfor kunne se meget forskellig ud fra enhed til enhed. Det var oprindelig heller ikke meningen at html skulle gøre meget ud af udseendet.

Html 1.0

Denne udgave af html blev skabt før W3C, The World Wide Web Consortium, for alvor var etableret og html 1.0 blev derfor ikke formelt specificeret. Html 1.0 indeholdt ikke mange formateringskoder f.eks. kunne man ikke vælge baggrundsfarve eller baggrundsbillede. Man havde heller ingen indflydelse på hvilken skrifttype teksten var skrevet med. Alle hjemmesider lignede derfor hinanden meget med samme grå baggrund, blå tekst-links og Times Roman som skrifttype.
Billeder skulle være i gif-formatet, men de fleste hjemmesider indeholdt ingen billeder. Html 1.0 blev kun brugt i browserne Mosaic og Lynx (Lynx var kun tekstbaseret og virkede under UNIX).

Html 1.1

Denne version af html blev skabt af folkene bag browseren Netscape og skulle understøtte de ting den kunne. Der var ikke så mange browsere på markedet at vælge mellem, og det blev almindeligt at tilføje egne koder, der understøttede de funktioner browseren indeholdt.

Html 2.0

I denne version af html kom flere formateringskoder til, f.eks. baggrundsfarve. Det blev muligt at lave formularer i begrænset omfang, så brugeren kunne indtaste data, som administratoren af hjemmesiden kunne gøre brug af. Tabeller blev også en del af html 2.0.
The World Wide Web Consortium blev dannet mellem version 1 og 2 med Tim Berners-Lee som leder og html 2.0 blev formelt specificeret. Det forhindrede dog ikke udviklerne af browserne i at tilføje deres egne koder.

Html 3.2

Version 3.2 fik en del flere formateringskoder som designerne kunne bruge til at styre udseendet af indholdet på hjemmesiden. 3.2 indeholdt også understøttelse af CSS 1 (Cascading Style Sheet level 1). Tanken med CSS er at lægge formateringen her og strukturen i html, således at struktur og udseende blev adskilt og fastlagt med hver deres kode. Da browserne ikke understøttede CSS særlig godt, var CSS imidlertid ikke så anvendelig. Det blev derfor formateringskoderne i html designerne måtte bruge for at få indflydelse på en sides udseende.
Frames var ikke en del af 3.2 men browserudviklerne indførte alligevel understøttelse af frames for at tilgodese kravet fra hjemmesidedesignere om bedre mulighed for at bestemme over sidernes udseende.

Html 4.0

Hidtil havde udviklingen af html givet flere og flere formateringskoder og trukket html længere væk fra den oprindelige tanke om et markup-sprog, der strukturerede indholdet og en præsentation, der lå hos den enhed html-siden blev præsenteret på. Formålet med html 4.0 har været at vende tilbage til den oprindelige idé om at adskille struktur og præsentation (udseende). Derfor er de fleste formateringskoder taget ud af html og lagt over i CSS.

Html 4.01

En af de seneste udgaver af html er 4.01 som er en mindre revidering af version 4.0.

Html 5

Den seneste version af html har mange nye såkaldte tag-understøttelser, dvs. koder. Det lykkedes ikke at erstatte html med xhtml, som W3C anbefalede i 2000, selvom mange web-designere dog bruger det. Læs mere om html 5's nye tags på w3schools html 5 tutorial

Htmls grundprincipper

Et eksempel

Et eksempel på et simpelt HTML-Dokument ses nedenfor, hvor de første linjer med blåt angiver dokument typen.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>sidens titel</title>
</head>

<body>
<h1>Tekst kodet med den største overskrift kode</h1>
<p>En tekst mærket med koden for afsnit</p>
<h2>En overskrift kodet med næststørste overskrift</h2>
<p>Her er endnu et afsnit tekst kodet med afsnitstagget</p>
</body>
</html>

Koden til venstre ser ud som nedenfor når html-siden vises i en browser

Elementer og attributter

HTML består af et fast antal elementer, der kan tildeles en række attributter (egenskaber). Et eksempel på et element er en overskrift. I html-koden sættes et åbnings-tag foran den tekst der skal være overskrift og et lukke-tag efter teksten:

<h1>Min overskrift</h1> Her er åbnings-tag <h1> og lukke-tag </h1>

Et andet eksempel på et element er html og body som altid begynder indholdet på siden og slutter indholdet på siden. Et element kan indeholde andre elementer og for at få vist min overskrift på siden i browseren skal koden være:

<!doctype html>
<html>
<body>
<h1>Min overskrift</h1>
</body>
</html>

Mit overskriftelement ligger indeni mit bodyelement, der igen ligger indeni mit html-element.

Det eneste en browser vil vise på siden er teksten: "Min overskrift" i en stor tekststørrelse. Det browseren gør er at tolke ovenstående kode på følgende måde:
Linje 1: Her er en side, der bruger html som kodesprog.
Linje 2: Nu begynder indholdet på siden.
Linje 3: Tekst skal vises med en stor skriftstørrelse.
Linje 4: Nu slutter indholdet.
Linje 5: Nu slutter html koden.

Den kode du ser herunder indholder et attribut i body elementet, der beskriver hvilken farve, der skal være baggrundsfarven på siden.

<!doctype html>
<html>
<body bgcolor="blue">
<h1>Min overskrift</h1>
</body>
</html>

CSS

Uddybende artikel: CSS

CSS står for Cascading Style Sheets, "CSS" definerer hvordan html-elementer skal fremvises. CSS bliver skrevet i "style-tags", "styles" var tilført til html for at løse er problem i HTML 4.0. "External Style Sheets" kan spare en webdesigner for en masse tid, "External Style Sheets" er lagret i "CSS Filer"

"Styles løste et stort problem, html var aldrig beregnet til at indeholde tags til formatering af et dokument. Html havde formålet at definere indholdet af et dokument, som:

<h1>Dette er en overskrift</h1>
<p>Dette er et afsnit</p>

CSS kan spare webdesigner for en masse arbejde og tid, ved at CSS definerer hvordan html-elementer skal vises. Formateringskoden gemmes som regel i "External", "CSS-filer". "External Style Sheets" kan ændre udseendet og layoutet af sider på et websted, blot ved at redigere en enkelt fil og helt uafhængig af sidens indhold.

Baggrunden for at skille struktur og præsentation

Den seneste udvikling af html har gjort mere og mere ud af at skille strukturen af en hjemmeside fra udseendet. Strukturen har til formål at fortælle den enhed og browser, der skal gengive hjemmesiden, hvad de enkelte dele er. Ideelt set skal html-koder blot give browseren beskeder i stil med: her begynder html-siden, her er sidens titel, her begynder indholdet, her er en overskrift, her er et billede, her er et link, her er en tabel, her slutter indholdet osv.
Undlader hjemmesidedesigneren, at bruge nogen form for formateringskoder, vil browseren vise siden med en formatering som er standard for den pågældende browser. Dette betyder, at siden kan komme til at se meget forskellig ud, afhængig af hvilken browser brugeren vælger at se hjemmesiden med. I praksis er der ikke den store forskel på hvordan de forskellige browsere vil vise f.eks. en overskrift.
Nedenfor er et eksempel på html skrevet uden formateringskoder og hvordan den side kunne se ud, når den bliver vist med en browsers egen idé om hvordan de enkelte elementer skal se ud.

<html>
   <head>
      <title>Kun struktur</title>
   </head>
   <body>
      <h1> Denne sides html er ren struktur</h1>
      <p> Derfor står det de enkelte browsere frit for at formatere
       indholdet med det Style Sheet den pågældende browser er født med</p>
      <h3>Et link</h3>
      <p>Sådan ser et link ud
      <a href=”http://da.wikipedia.org/wiki/Forside”>
       Link til wikipedias danske forside</a>
      </p>
   </body>
</html>

Koden til venstre ser ud som nedenfor når html-siden vises i en browser

Vedligeholdelse

Der er ikke ret mange hjemmesidedesignere, der er tilfredse med at lade browseren klare formateringen. Som du kan læse i historieafsnittet fik html flere og flere formateringskoder. Dette gjorde det tidskrævende og dyrt at vedligeholde et sæt hjemmesider. Hver gang udseendet skulle ændres, f.eks. have ændret baggrundsfarven, var det nødvendigt at åbne samtlige html-sider, der indgik i webstedet og foretage nøjagtig den samme ændring i koden.
Ved at lægge formateringen i et eksternt Style Sheet og lade hver html-side referere til dette ene dokument, kan ændringen af endda temmelig store sæt af hjemmesider foregå ved at foretage én ændring af koden.

Præsentation på forskellige enheder

Det er ikke længere kun computere, der kan koble sig på internettet og vise hjemmesider. Håndholdte enheder f.eks. mobiltelefoner kan også. Hvis strukturen og formateringen adskilles, kan den samme hjemmeside se fornuftig ud på både en computer og en mobiltelefon, ved at bruge et specielt Style Sheet til hver enkelt enhed.

Editorer og WYSIWYG

Der er i dag mange værktøjer som kan bruges i web-udvikling, det inkluderer funktionalitet som Syntax Highlighting, Autofuldførelse, og Faneblade. Nogle værktøjer forsøger helt at erstatte hånd-skrivning af markup og stil, med forskellig grad af succes. Ideen er, at en webudvikler derved ikke behøver at hånd-kode ret meget, men der kan dog nemt opstå problemer i forskellige situationer.

Mange begyndere er kendt for at benytte disse værktøjer, og når det kombineres med ringe viden omkring de underliggende standarder går det ofte galt.

Generelt kan enhver tekst-editor benyttes til at skrive HTML-Markup, eksempelvis Notepad i Windows.

HTML sammenlignet med XHTML

XHTML er en videreudvikling af HTML, som er baseret på XML. Det betyder at man kan kombinere andre XML baserede sprog med XHTML, og omvendt.

De fleste vil dog ikke mærke nogen større fordel ved at bruge XHTML frem for HTML 4.01 Strict, bruger man bare XHTML alene, vil forskellen være minimal. Se også: What are the advantages of using XHTML rather than HTML? (Engelsk)

Det kan endvidere være problematisk at arbejde med XHTML, da selv den mindste fejl i koden kan betyde at browseren ikke vil vise siden. De fleste sider som er lavet i XHTML bliver endvidere "serveret" af webserveren med den forkerte mime-type, og endvidere vil mange xhtml-dokumenter end ikke rendere hvis de blev vist med den rigtige mimetype.

Det skyldes hovedsageligt uerfarne webdesignere, som bruger XHTML uden at have fuld forståelse for nogle enkelte, men vigtige ting.

Se også

Wikimedia Commons har flere filer relateret til HTML

Eksterne henvisninger