HTML -
Struktur og semantikk

- Camilla Larsen

Agenda

Repetisjon

#1

Semantikk og struktur

#2

Oppgave

#3

Linker

#4

Oppgaver

#5

Sammendrag

#5

  • Hva står HTML for?
  • Hva er forskjellen på HTML, CSS og JS?
  • Hva er et element?
  • Husker dere noen tagger?
  • Hva er en attributt?
  • Hva består det grunnleggende HTML oppsettet av?

Repetisjon

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gokstad akademiet</title>
</head>
<body>
    <p>Velkommen til Gokstad Akademiet</p>
</body>
</html>

Vi går videre innenfor semantikk og struktur

  • Handler om hvordan vi skal sette opp et HTML dokument på best mulig måte.
  • Et dokument som er satt opp riktig, vil være lett å lese for andre.
  • Vi ønsker alltid å sørge for at koden vår er ryddig, og det gjør vi ved å rydde opp i dokumentet.
  • For å holde koden ryddig, sørger vi for å hele tiden formattere dokumentet

Semantikk

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gokstad akademiet</title>
</head>
<body>
    <p>Velkommen til Gokstad Akademiet</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
    				<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Gokstad 
   akademiet
   </title>
</head>
<body>
    <p>Velkommen 
    til Gokstad 
    Akademiet</p>
						</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gokstad akademiet</title>
</head>
<body>
    <p>Velkommen til Gokstad Akademiet</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
    				<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Gokstad 
   akademiet
   </title>
</head>
<body>
    <p>Velkommen 
    til Gokstad 
    Akademiet</p>
						</body>
</html>

Ser dokumentet ditt slik ut, må du rydde opp i koden din

Extension: Prettier code-formatter

Hjelper oss med å holde koden vår ryddig og uten feil

  • Gå inn på Visual Studio Code.
  • Naviger deg til extensions, altså pakker du kan laste ned på visual studio code.
  • Søk etter prettier - code formatter
  • Last det ned.

Oppgave - vi gjør det sammen

  • Vi kan gjøre HTML dokumentet vårt enda enklere å lese, ved å benytte de nye HTML5 taggene.
  • Taggene har forklarende navn, og forteller dokumentet hva det inneholder. 
  • Gjør det enda lettere for andre å finne ut av hvor i dokumentet de er eller hvor de skal lete etter en spesifikk kode.

Semantiske HTML5 elementer

Dere har allerede jobbet med et semantisk HTML5 tag.
Klarer dere å huske hvilken?

  • <nav>
  • <header>
  • <main>
  • <footer>
     
  • Dette er elementer som ikke gjør noe visuelt for dokumentet, men deler opp dokumentet inn i seksjoner, og gjør det enda lettere for andre å lese
  • nav, header, main og footer legger vi til i det grunnleggende dokument oppsettet.

HTML5 Semantiske elementer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gokstad akademiet</title>
</head>
<body>
	<header>
    	<h1>Dette er starten på dokument innholdet</h1>
    	<nav></nav>
    </header>
    <main>
    	<p>Velkommen til Gokstad Akademiet</p>
    </main>
    <footer>
    	<p>Dette er slutten av dokumentet</p>
    </footer>
</body>
</html>

Dokument struktur - ny versjon

  • Vær obs på at HTML ikke fungerer 100% på alle sider enda
     
  • <nav> </nav>
    Står for navigations link, og skal benyttes når vi skal skrive ned et sett med linker
     
  • <header> </header>
    Brukes for å definere toppen av et html dokument, inneholder flere forskjellige tagger.

HTML5 Semantiske tagger

  • <main> </main>
  • Brukes rundt det dominerende innholdet  i HTML dokumentet.
     
  • <footer> </footer>
  • Brukes i slutten av dokumentet og inneholder gjerne innhold som andre linker og informasjon.
     
  • Det finnes en del andre semantiske tagger dere kan ta i bruk, men dette er vårt hovedfokus

HTML5 Semantiske tagger

  • Lag et HTML dokument som inneholder det nye grunnleggende HTML dokumentet
  • Husk taggene
    - header
    - nav
    - main
    - footer
  • Bruk prettier underveis.
  • Har dere ekstra tid, les dere opp på andre semantiske elementer som kan benyttes. Bruk valgfritt søkemotor.

Oppgave

Vi går igjennom løsningen sammen

Attributter

Tilleggsinformasjon vi legger til elementene

Linker

Hvordan linker man til interne dokumenter?

  • <a href=""> elementet brukes til å linke til interne dokumenter eller eksterne linker.
  • Vi går inn i mappen vår for å peke mot dokumentet vårt.

<a href=""></a>

Vi benytter a taggen hvor vi legger til en attributt som forteller hvor vi vil gå.

<a href="">Dette er en link</a>

For å få tilgangen til mappen vi jobber i, benytter vi denne metoden

Velger du en av de tilgjengelige html filene, så får du dette resultatet

Da har du linket til en annen html fil, og vil bli navigert til denne filen når linken blir trykket på.

Bruker vi denne metoden, går vi bakover i dokumentene

Kan være grei å bruke hvis du jobber med flere mapper og vil ha tak i noen lenger bak

Vi prøver sammen!

  • Lag et HTML dokument som inneholder:
  • Det grunnleggende html oppsettet
  • Bilder
  • Navigasjonsfelt med linker
  • Link HTML dokumentet til 2 andre HTML dokumenter
     
  • Når dere er ferdig, be meg komme bort slik at vi kan se igjennom oppgaven sammen

Oppgave