TalentWeek 2022

5 Lad os lave en hjemmeside

I dette kapitel skal vi lave en simpel statisk hjemmeside. Vi skal bruge alt det, vi allerede har lavet, og så skal vi snuppe lidt styling fra WWW.

5.1 Forsiden

Enhver hjemmeside har en forside, som er den side, du kommer ind på, når du skriver hjemmesidens URL ind i browserens adressefelt. Forsiden hedder ofte index.html, fordi de fleste webservere som standard loader netop index.html når man besøger deres URL. Når man besøger www.talentcamp.dk loades index.html på TalentCampDK's webserver.

5.2 Containers

HTML kommer faktisk med en række elementer, som er tiltænkt at repræsentere de dele af en hjemmeside, som man finder på stort set alle hjemmesider. Vi tænker på disse som containers, altså kasser, der indeholder (container) dele af hjemmesiden.

<header></header> repræsenterer en container til sidens titel og en menubar.

<nav></nav> repræsenterer en container til menubar med navigationslinks.

<main></main> repræsenterer en container til sidens hovedindhold.
<footer></footer> repræsenterer en container til for eksempel kontaktoplysninger eller copyright information.

Lad os tilpasse vores index.html så vi bruger de predefinerede HTML-elementer i stedet for <div></div>-elementerne, vi lavede i sidste afsnit. <div></div>-elementerne bør kun bruges til at definere containers, der ikke allerede er indbygget i HTML-sproget.

HTML (index.html)<!DOCTYPE html>

<html>	
	<head>
		<meta charset="utf-8">
		<title>Mit første HTML-dokument</title>
		<link rel="stylesheet" href="myStylesheet.css">
	</head>
	<body>
		
		<header class="topMenu">
			<nav>
				<a href="#">Forsiden</a><a href="#">Kontakt</a><a href="#">Shop</a><a href="#">Job</a><h2>Min side</h2>
			</nav>
		</header>

		<main class="content">
			<h1>Velkommen til min side</h1>
			<p>Det er dejligt at du har lyst til at læse med.</p>
		</main>

		<footer class="footer">
			<p>Anders Friis</p><p>af@talentcamp.dk</p><p>22 16 55 90</p>
		</footer>
	</body>
</html>

Ovenstående ændringer påvirker ikke vores hjemmeside, men nu, hvor vi har valgt at følge standarden for HTML-elementer, findes der stylesheets, som er langt flottere end dem vi selv laver, der let kan bruges til vores hjemmeside. For eksempel kan vi let bruge det stylesheet, som denne hjemmeside bruger. Det ligger nemlig tilgængeligt online på: https://cdn.simplecss.org/simple.css.

Det skal vi udnytte nu. For at gøre vores hjemmeside klar, gør vi følgende fire ting:

Vi fjerner vores egne classes fra index.html.
Vi linker til CSS-filen på ovenstående adresse.
Vi tilføjer en overskrift til vores header.
Vi tilføjer noget "vrøvletekst", så man har en oplevelse af, at der er indhold på siden. Det gør du ved at skrive "Lorem" i Sublime Tekst og trykke på Tab.

Herunder kan du se, hvordan dit HTML-dokument gerne skulle se ud, når du har lavet ovenstående ændringer. Ændringerne er markeret med gult herunder.

HTML (index.html)<!DOCTYPE html>

<html>	
	<head>
		<meta charset="utf-8">
		<title>Mit første HTML-dokument</title>
		<link rel="stylesheet" href="https://cdn.simplecss.org/simple.css">
	</head>
	<body>
		
		<header>
			<nav>
				<a href="#">Forsiden</a><a href="#">Kontakt</a><a href="#">Shop</a><a href="#">Job</a>
			</nav>
			<h1>Min hjemmeside</h1>
		</header>
	

		<main>
			<h2>Velkommen til min side</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</p>

			<h3>Afsnitsoverskrift</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</p>
		</main>

		<footer>
			<p>Anders Friis</p><p>af@talentcamp.dk</p><p>22 16 55 90</p>
		</footer>

	</body>
</html>

Og voila! Nu har vi med en pæn hjemmeside!

Øvelse 8 (ekstra!)

Lav et ekstra HTML dokument, der hedder kontakt.html og link til det via navigationsbaren. Tilpas det nye HTML-dokument, så det får samme udseende som index.html. Nu fremstår din hjemmeside akkurart som siden her.