Opret en ny fil i din foretrukne editor til din første test. Hvis du bruger Windows-editoren, kan du åbne den ved at gå til Start>Alle programmer>Tilbehør>Editor.
Derefter skal du vælge Fil>Gem som. Vigtigt er feltet Filtype.
Det er vigtigt at vælge Alle filer. Indtast derefter index.htm i feltet Filnavn. Nu kan du gemme filen på det ønskede sted. Dette er nu filen, som du vil arbejde med, din første HTML-fil, som dog stadig er tom. Det vil ændre sig snart.
Hvis du bruger Dreamweaver, anbefales det at angive, at du vil oprette en HTML-fil direkte ved programstart.
HTML-grundstruktur
Før vi går i gang med HTML-grundstrukturen, er der en vigtig note om semantikken, som anvendes i denne serie - og også i HTML-verdenen. Du vil konstant støde på begreberne tag og element, som desværre ofte misforstås. Et eksempel:
<a href="news.htm">Til nyhederne</a>
Dette eksempel viser et a-element, nemlig <a href="news.htm">Til nyhederne</a>. Dette element består af en åbnings a-tag, altså <a> eller fuldstændigt <a href="news.htm">, elementindholdet Til nyhederne og den afsluttende a-tag </a>. Derudover har elementet a attributten href med attributværdien news.htm.
Det foregående eksempel viser en hyperlink-definition i HTML via elementet a. Dette element a markeres med det åbnende <a>-tag og det lukkende </a>-tag. Du kan se, at det ikke er så svært at bruge betegnelserne element og tag korrekt.
Nu går vi i gang. Åbn den tidligere gemte HTML-fil i din editor. Ethvert HTML-dokument har en bestemt struktur.
Først her er den nævnte struktur i al sin pragt:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> </body> </html>
Hvad betyder de enkelte elementer? Vi starter med de såkaldte dokumenttype-deklarationer.
<!DOCTYPE html>
Med en sådan dokumenttype-deklaration informerer du browseren, som senere vil vise din webside, hvilken HTML-standard du bruger. I dette tilfælde er det HTML5. Hvis du derimod brugte HTML 4.01, så ville DOCTYPE-angivelsen se sådan ud:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Især emnet dokumenttype-deklaration skaber forvirring blandt HTML-nybegyndere, da der er ret mange forskellige varianter. Men det er faktisk ret simpelt: Forestil dig en dokumenttype-deklaration som en slags instruktion, som beskriver, hvilke elementer der må være indeholdt i et dokument.
Generelt anbefaler jeg den korte HTML5-angivelse.
<!DOCTYPE html>
Moderne browsere genkender den og viser siderne, hvor den bruges, i standardtilstand. Dog bør du kun definere de elementer i HTML5, der rent faktisk er tilladt. Men mere om det senere.
Vi fortsætter med html-elementet.
<html lang="de"> … </html>
Dette element omgiver dokumentet. Bemærk attributten lang. Her angives det sprog, der bruges i dokumentet. Her er nogle lang-forkortelser til den tysktalende region.
• de - Tysk (standard)
• de-ch - Tysk (Schweiz)
• de-at - Tysk (Østrig)
• de-lu - Tysk (Luxembourg)
• de-li - Tysk (Liechtenstein)
Der er også mange forskellige lang-forkortelser for engelsk.
• en-us - Engelsk (USA)
• en-gb - Engelsk (Storbritannien)
• en-au - Engelsk (Australien)
• en-ca - Engelsk (Canada)
• en-nz - Engelsk (New Zealand)
• en-ie - Engelsk (Irland)
• en-z - Engelsk (Sydafrika)
• en-jm - Engelsk (Jamaica)
• en - Engelsk (Caribien)
Om du vil bruge de to-bogstavs forkortelser de, gb etc., eller om du foretrækker de sammensatte forkortelser, er op til dig. Jeg foretrækker de to-bogstavsforkortelser.
I head-elementet forventes hoveddataene for dokumentet.
<head> … </head>
Headerdata lyder måske lidt tungt, men er hurtigt forklaret. Her inkluderer man bl.a. ting, der beskriver dokumentet nærmere. Dette inkluderer f.eks. titlen og den anvendte tegnsætning. Her kan også scripts og stylesheets inkluderes samt generelle metadata defineres. Mere om dette senere.
Det vigtigste er især elementet title.
<title>Tutorials til billedredigering med Photoshop, webdesign & fotografering - PSD-Tutorials.de </title>
Her defineres titlen, som er nødvendig på forskellige steder.
• I browserens titellinje.
• Når der oprettes et bogmærke i browseren.
• Og selvfølgelig spiller titlen en væsentlig rolle med hensyn til søgemaskineoptimering.
Så I ser, hvor vigtig titlen er. Vælg en titel så kort og præcis som muligt.
Til en detaljeret beskrivelse af siden kan I bruge metaoplysninger. Yderligere information herom følger.
Næste skridt er den anvendte tegnsætning.
<meta charset="UTF-8" />
Dette angivelse er vigtig for browsere. For kun gennem dette ved de, hvordan tegnene skal kodes for at blive vist korrekt. Kun ved at angive den rigtige tegnsætning vises f.eks. specialtegn og accenter korrekt. Normalt angives UTF-8 her.
Nu kommer vi til websidens faktiske indhold, altså det, som besøgende faktisk ser. Alt dette defineres i body-elementet.
<body> … </body>
Til demonstrationsformål kan I blot tilføje følgende mellem åbnings- og lukkende <body>-tag:
<h1>PSD-Tutorials.de</h1>
Dokumentet bør herefter se sådan ud:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Eksempel på HTML5 grundstruktur - www.html-seminar.de</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>PSD-Tutorials.de</h1>
</body>
</html>Gem ændringerne og åbn filen i en browser.
Som I kan se, vises PSD-Tutorials.de nu faktisk. I har dermed oprettet jeres første egne HTML-dokument.
