I et Word-dokument kan du enkelt strukturere innholdet ved å bruke noen enkle verktøy. Du kan velge en tekst og formatere den som en overskrift ved å trykke på et par knapper. Hvis du trenger mindre overskrifter, kan du velge mellom overskrift 2 eller 3. Hvis du vil legge til et bilde, kan du enkelt plassere det der du ønsker det.
I HTML må du derimot bruke forskjellige “tagger” eller koder for å fortelle nettleseren hvordan innholdet skal struktureres og vises på nettstedet. For eksempel må du bruke en overskrift-tagg for å få en overskrift, en avsnitt-tagg for å få et avsnitt, en link-tagg for å legge til en lenke, og en bilde-tagg for å legge til et bilde.
Hva er HTML?
<h2>Dette er en html kode for en overskrift</h2>
<p>Dette er en html kode for tekst</p>
<p>HTML er koder med forskjellige bruksområder</p>HTML står for Hyper Text Markup Language, og det er grunnlaget for alle nettsteder på internett. HTML-koder beskriver strukturen og innholdet i en nettside, og definerer hvordan nettleseren skal tolke og vise innholdet.
HTML kan sammenlignes med grunnmuren til et hus. Akkurat som at en grunnmur gir stabilitet og støtte til huset, gir HTML grunnleggende struktur og innhold til et nettsted. Uten HTML ville det ikke være mulig å lage et nettsted og vise informasjonen på en organisert måte.
Hva er et HTML dokument?
For å lage en nettside med HTML-koder, må du først opprette et dokument med en .html-filtype. Dette filtypen forteller datamaskinen at dokumentet inneholder HTML-koder.
Du kan tenke på et Word-dokument, men i stedet for å skrive vanlig tekst, skriver du HTML-koder for å definere innhold og struktur på nettsiden.
Så la oss se på noen HTML-koder.
HTML-koder
HTML-koder brukes til å lage strukturen og innholdet på en nettside, og dette oppnås ved å bruke ulike HTML-elementer, også kjent som “tagger”. Hver tagg har en spesifikk funksjon og kan ha egenskaper som gir ytterligere informasjon om hvordan innholdet skal vises på nettsiden.
Ved å kombinere disse taggene på en riktig måte, kan du skape en hierarkisk struktur som gir mening og betydning til innholdet på nettsiden din. Dette er spesielt viktig med tank på SEO(Søkemotoroptimalisering).
Tagg og Element
P-taggen består av en begynner-tagg, innhold, og ende-tagg akkurat som de fleste andre tagger, men det er noen unntak.
Element uten ende-tagg
<img>
<br>
<hr>
<input>Taggene ovenfor trenger ikke en ende-tagg fordi de ikke har innhold mellom begynner-taggen og ende-taggen. Disse taggene er såkalte “selvlukkende tagger” og skrives kun med en tagg.
img-taggen = brukes til å vise bilder på nettsiden
br-taggen = bryter teksten til en ny linje
hr-taggen = lager en linje
input-taggen = lar brukeren skrive inn tekst, eller velge fra en liste på nettsiden
Element med ende-tagg
<h1>tittel</h1>
<p>tekst</p>
<button>knapp</button>Taggene ovenfor har både en begynner-tagg og en ende-tagg. Dette er fordi disse taggene har innhold imellom taggene.
h1-taggen = brukes til hovedoverskriften
p-taggen = brukes til å lage avsnitt
button-taggen = lager en knapp
Nestede elementer – (parent / child)
I HTML er det vanlig å bruke såkalte “nestede” elementer, hvor et element er plassert inni et annet element. Dette oppretter en forelder/barn (parent/child) relasjon mellom de to elementene.
<div>
<ul>
<li>tekst</li>
<li>tekst</li>
</ul>
</div>Ikke tenk på hva taggene gjør, fokuset ligger på nestede elementer.
I dette eksempelet har vi en div-tagg som er forelderen til ul-taggen, eller ul-taggen er ungen til div-taggen.
Inni ul-taggen har vi to li-elementer som er barn til ul-taggen, eller ul-taggen er forelderen til li-elementene.
Oppsummering av HTML
- HTML lar deg definere innhold og strukturen på en nettside.
- Et HTML-dokument er en fil med filtypen .html.
- HTML-koder er tagger med forskjellige bruksområder.
- Nestede elementer er elementer inni andre elementer.
