Sidens opbygning

HTML5

HTML står for Hyper Text Markup Language og version 5 er designet med fokus på det semantiske web, hvor fokus er på betydningen af tekst og ord. Det skyldes at Internettet har udviklet sig fra at være en platform til at vise tekst, til at det skal kunne læses af ikke bare mennesker men også computere. Ved at markere semantikken i et dokument gør man dokumenterne søgbare i en lang højere grad. F.eks. kan man opmarkere:

  • Forkortelser - <abbr> f.eks CIA
  • Titler - <cite> f.eks. Eiffeltårnet

Det er ord og begreber vi godt kan læse og omsætte som mennesker, men computeren opfatter bare tegnene som et ord (en samling af bogstaver), uden at vide hvad de står for. Ved hjælp af disse elementer kan man lave "intelligente" søgemaskiner.

En anden stor fordel ved elementerne er, at de kan gøre skriveprocessen mere struktureret. Når man skriver vil man hele tiden være bevidst om hvad man er i gang med. Det man skal lære er, at se og forstå HTML-koden.

Man anvender elementer ved at pakke ord/ordene ind i dem. Man anvender elementets betegnelse både før og efter det man vil have markeret, hvor man sætter en / foran det afsluttende elementnavn . Se eksemplet herunder

	
<p>  **** en tekststreng ****     </p>
	

<p> beskriver indholdes som værende et tekst afsnit (en paragraf). På det afsluttende p er der en skråstrege / for at markere afslutningen.

Herunder ern lidt længere HTML-kode, der viser det i anvendelse:

	
<abbr title="Central Intelligense Agency">CIA</abbr> er en forkortelse for <b>C</b>entral <b>I</b>ntelligense <b>A</b>gency, som er en del af <abbr title="United States of America">USA</abbr>'s efterretningstjeneste.
	
Resultat af koden

CIA er en forkortelse for Central Intelligense Agency, som er en del af USA's efterretningstjeneste.

Læg mærke til at der kommer en stiplet linie under de forkortelser der er pakket ind i <abbr>. Det er din browser som markere forkortelser på den måde. Holder du musen hen over feltet forvandler den sig til et spørgsmålstegn og der kommer en sort boks der viser hvad der står i title="" feltet.

<b> ændrer indholdet så det bliver skrevet med fed skrift, og det er igen noget browseren gør. Formateringen af teksten inde i elementerne kan ændres ved hjælp af CSS

Du kan se en komplet liste over elementer her: http://www.w3schools.com/tags/.

Elementtyper

Når man taler om elementer er der fire egenskaber man kan sætte på dem:

  • Tomme elementer
  • Ikke-tomme elementer
  • Blok-elementer
  • Inline-elementer

Tomme elementer

Et tomt element har ingen tekstreng, og anvendes f.eks. til at angive en indstilling, som f.eks. <!DOCTYPE HTML> der fortælller angiver at det er et HTML5 dokument eller <img> der angiver stien til et billede/illustration.

Tomme elementer afsluttes ikke, og har derfor ikke behov for / til sidst.

Ikke-tomme elementer

De ikke-tomme elementer indeholder tekstrenge som f.eks. <p> *** TEKSTSTRENG *** </p>(se ovenfor).

.

Blok-elementer

Et blok-element resulterer i et linieskift når det slutter. Blok-elementer er f.eks:

  • <div>
  • <h1> - <h6>
  • <p>

Inline-elementer

Inline-elementer er afgrænset til tekststrengen, og kan anvendes inde i blok-elementer. Inline-elementer er f.eks:

  • <span>
  • <a>
  • <img>

Inline elementer laver ikke linieskift.

Opbygning

Illustrationen herunder viser hvordan en webside er bygget op efter HTML5 specifikationen. Siden starter med at sige at det er en HTML5 side (<!DOCTYPE>). Denne linie sørger for at browseren vil læse dokumentet som et HTML5 dokument. Når dokumenttypen er erklæret, kommer indholdet, som er pakket ind i elementer.

Du kan se grundopbygningen af et HTML dokument herunder

Nødvendige elementer

Her er de elementer som et HTML5 dokument skal indeholde, for at opfylde kravene til et HTML5 dokument..

<!DOCTYPE html>

<!DOCTYPE html> er den tag, der fortæller at det er HTML5 dokument. Det gør browseren og søge maskiner opmærksom på hvordan siden er struktureret og dermed også hvordan der kan søges i den. Den angiver også versionen for hjemmesideprogrammøren.

<html>

Selve HTML dokumentet skal være pakket ind i et html element. På den måde ved browseren hvornår html-koden starter og stopper.

<head>

I head sættes alle de paramtrere der overordnet gælder for hele dokumentet. Det er her sidens titel, sprog, tegnsæt, opsætning og scripts sættes og aktiveres.

Det som står i <title> er det som vil blive vist i den fane der hører til siden i browseren.

Man kan med fordel sætte javascripts i bunden af dokumentet efter <body>, da det kan gøre kørslen af koden hurtigere.

<body>

I body er de data der vises af browseren.

En simpel skabelon

For at komme hurtigt igang har jeg lavet en zip-fil som kan pakkes ud på skrivebordet.

Download skabelon: html_skabelon.zip

Zip-filen indeholder mappem html, der har følgende struktur:

I selve roden (html) ligger filen index.html. Dette er navnestandarden for hovedsiden. Vær opmærksom på at det skal være med små bogstaver.

I rodmappen ligger også mapperne:

  • css
  • Indeholder alle CSS (Cascading Style Sheets). Det er i disse filer at sidens udseende og design skal sættes op.

    Her er filen style.css allerede oprettet, så man kan indsætte CSS kode deri.

  • files
  • Indeholder alle filer der kan downloades fra hjemmesiden, f.eks. PDF- eller zip-filer.

  • images
  • Indeholder alle de billed og grafikfiler der anvendes på hjemmesiden

  • js
  • js (Java Script) mappen indeholder de lokale Java Script filer der anvendes på siden.

index.html

Skabelonens index.html er vist herunder. De vigtigste ting (sprog, stylesheet og titel) er konfigureret i <head> og selve hjemmesiden har en overskrift og en brødtekst.

	<!DOCTYPE html>
	
<html>

<head>

	<!-- Sprog konfiguration -->
	<meta charset="UTF-8" lang="da"/> 
	
	<!-- Link til CSS-fil -->
	<link rel="stylesheet" href="css/style.css" /> 

	<!-- Titel i browser tab'en -->
	<title>HTML5 skabelon</title> 

	<!-- Til scripts -->
	<script> 

	</script>

</head>

<body>

	<h1>Overskrift</h1>
	
	<p>Brødtekst</p>
		
</body>

</html>	

Du kan enten kopiere indholdet af filen her fra siden eller hente skabelonen her: HTML skabelon

Navigation

Hvis ens hjemmeside begynder at udvikle sig kan det være nødvendigt at oprette en mappestruktur. Så har man som udvikler et større overblik