HTML

For alternative betydninger, se HTML (flertydig). (Se også artikler, som begynder med 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 få tekst og billeder på en hjemmeside til at virke som links til andre html-sider. Markup betyder at opmærke, og html definerer netop indhold på websider.

Fx kan en tekst markeres som overskrift eller brødtekst, arrangeres i en punktopstilling eller en tabel, og et hyperlink kan indsættes som klikbar tekst. Dermed kan webbrowsere som Firefox, MS Internet Explorer, Safari, Opera eller Google Chrome skelne teksttyper og vise indholdet formateret efter den type, det er markeret som. Overskrifter vises med forstørret fed skrift og hyperlinks med blå skrift. Html giver også mulighed for at bestemme overskrifter, tabeller, hyperlink og indlejring af billeder. HTML-filer bruges på internettet, især på World Wide Web.

HTML-side

Hver HTML-side kan være en hjemmeside, men oftest vil det være flere html-sider, der ligger under ét domæne, der kaldes en hjemmeside. Et bedre navn er derfor websted, website eller site.

Historie

HTML-sproget blev opfundet af medarbejdere hos CERN-atomforskningsinstituttet i Geneve i Schweiz. Tim Berners-Lee var hovedmanden. Formålet var at give forskerne på instituttet et simpelt markup-sprog til deres forskningsresultater på internettet.

HTML er baseret på SGML, Standard Generalized Markup Language, en international standard til opmærkning af tekster, så de kan præsenteres på fysiske enheder.

SGML opmærker en tekst: overskrift, brødtekst, lister og lignende, men fortæller ikke hvordan overskriften skal se ud. Udseendet bestemmes af den enhed teksten præsenteres på. Samme tekst vil se meget forskellig ud fra enhed til enhed. Det var 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 få formateringskoder: man kunne hverken vælge baggrundsfarve eller baggrundsbillede. Man havde heller ingen indflydelse på, hvilken skrifttype teks ten var skrevet med, så alle hjemmesider lignede hinanden 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

Den nye version blev skabt af holdet bag browseren Netscape og skulle understøtte det, den kunne. Der var ikke så mange browsere på markedet, 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 som 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 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å 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 strukturer indhold og 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

4.01 er en mindre revidering af version 4.0.

HTML 5

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

HTML's 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 og slutter indholdet på siden. Elementet body kan kun bruges en gang, man kan altså ikke indsætte det flere steder. 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 inden i mit bodyelement, der igen ligger i 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 både arbejde og tid, da 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 helt uafhængigt af sidens indhold.

Baggrunden for at skille struktur og præsentation

Den seneste udvikling af html har gjort mere for 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 besked: 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 og her slutter indholdet osv.
Undlader hjemmesidedesigneren at bruge formateringskoder, vil browseren vise siden med en standardformatering. Det betyder, at den kan komme til at se meget forskellig ud, afhængigt af hvilken browser, brugeren vælger. I praksis er der ikke den store forskel på de forskellige browsere viser en overskrift.
Nedenfor ses et eksempel på html skrevet uden formateringskoder, og hvordan den side kunne se ud, når den bliver vist med en browsers egen idé.

<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=”https://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. Html fik flere og flere formateringskoder. Det gjorde det tidskrævende og dyrt at vedligeholde et sæt hjemmesider. Hver gang udseendet skulle ændres, fx have anden baggrundsfarve, 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 selv store hjemmesider foregå ved en enlelt ændring af koden.

Præsentation på forskellige enheder

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

Editorer og WYSIWYG

Mange værktøjer kan bruges i web-udvikling med funktionalitet som Syntax Highlighting, Autofuldførelse og Faneblade. Nogle forsøger helt at erstatte håndskrivning af markup og stil med forskelligt held. Ideen er, at en webudvikler ikke behøver at hånd-kode ret meget, men der kan nemt opstå problemer.

Mange begyndere benytter disse værktøjer, og når det kombineres med ringe viden om standarderne, går det ofte galt.

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

HTML sammenlignet med XHTML

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

De fleste mærker ingen større fordel ved at bruge XHTML frem for HTML 4.01 Strict. Med XHTML alene er forskellen minimal. Se også: What are the advantages of using XHTML rather than HTML? (Engelsk)

Det kan være svært at arbejde med XHTML, da selv den mindste fejl i koden kan betyde, at browseren ikke viser siden. De fleste sider, som er lavet i XHTML, bliver endvidere "serveret" af webserveren med den forkerte mime-type, og mange xhtml-dokumenter vil 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 få, men vigtige detaljer.

Se også

• Web-sikre farver
• Hypertekst
• ASP
• Perl
• PHP
• XML
• URL
• CSS

• Wikimedia Commons har flere filer relateret til HTML

Eksterne henvisninger

Wikimedia Commons har medier relateret til: HTML

• W3C's hjemmeside: HTML validering mm.
• W3schools: HTML reference (engelsk)
• HTML analysator (engelsk)