Fotograf Jakob Kjøller

Blog

Portræt og livsstils fotograf

Kom på Nettet del 3 - Grundlæggende HTML

En hjemmeside er bygget op med en masse HTML og CSS. Dette er meget enkelt, da jeg prøver at holde det så "uteknisk" som muligt.

HTML er "grundstenen" i koden på en hjemmeside. Det er det din browser (Internet Expore, Firefox, Safari, mm.) tolker og oversætter til en side på nettet med tekst og billeder.

En typisk HTML start side hedder index.html eller index.htm, om den hedder .htm eller .html er sådan set lige meget, de virke lige godt.

HTML er bygget på på en lang række "Tags", disse tags bliver så tolket af browseren og vist på en bestemt måde.

Et tag er f.eks. <div>, altså det starter med et "<" og slutter med et ">". Dette står dog ikke alene, det skal aflsuttes igen med et "</..>, ellers vil din side knække efter tagget. Altså et korrekt tag kommer til at ligene dette "<..>noget tekst</..>".

Tags er altid med små bokstaver, aldrig med store.

Typisk så ser koden til en HTML side således ud:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- html tagget starter siden --> <head><!-- Header tagget indeholder metadata--> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Den overskrift som står i toppen af browseren</title> </head> <body><!-- Body tagget indeholder alle de ting der bliver vist på siden --> <div> Et område hvor man kan putte en masse andre tags og informationer ind i. Divs kommer du til at arbejde    med. <br /> <!-- <br/> er linie skift--> Nå man afslutter et div, og starter et nyt, så bliver der automatisk skiftet linie. </div><span>Det er det samme som div, ofte bliver det brugt til mindre områder. Og nå det bliver afsluttet, så skifter det ikke linie</span>

<p>Paragraf, tekst område, der laver afstand før og efter tagget, lige som afsnit i en bog</p>

<h1>Stor overskrift</h1> <h2>mindre overskrift</h2> <h3>lille overskrift</h3>

<a href="https://www.jakobkjoller.com/blog" titel="Titel på link, godt for døve">et link, der linker til en anden side</a><br />

<img src="/wp-content/themes/Jakob/Jakob/images/Jakob.jpg" alt="Tekst som vises  hvis billedet ikke kan vises. Samt det er beskrivende for synshæmmede"/> <ul> <li>punkt 1</li> <li>punkt 2</li> <li>punkt 3</li> </ul>

</body> </html>

Download eller se filen her, vil du downloade så højreklik på linket og tryk "Gem desitination".

Prøv at pille i filen og se hvad der sker, lige nu er det ikke så meget :)

Umidlbart, så er nedestående skellettet til en HTML side og det skal der ikke pilles for meget ved.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>.. Titel her...</title> </head> <body> .. Indhold her ...</body> </html>

Den overstående fil, indeholde de fleste html tags vi kommer til at bruge i den næste tid.

<!-- --> tagget, udkommenterer det der bliver pakket ind i tagget, så det ikke bliver vist på siden.

Et tag kan indeholde attributter som id, class mm. men dem kommer vi ind på efterhånden.

Dette er et meget enkelt eksempel på hvordan bruger tagsene, og resultatet af dem er "ren" HTML, næste gang kigger vi på CSS og hvordan man gør det lidt pænere at se på :)

Prøv evt. at højre klikke på denne side og vælg "Vis Kildekode" og se hvad der er med til at lave denne side.

Læs meget mere om HTML på HTML.dk, de har nogle gode guides til hvordan man kommer i gang med HTML