Skip to main content

HTML består av elementer

HTML kalles for et markeringsspråk og det brukes til å strukturere innhold på nettsider. HTML består av elementer, og disse må skrives på en spesifikk måte slik at nettleseren skal forstå språket. Se igjen på:

<!DOCTYPE html>
<html>
    <body>
        <h1>Hallo verden!</h1>
    </body>
</html>

I hjemmesiden vi lagde i forrige avsnitt er det tre element: html, body og h1. Elementenes oppbygning kan man generelt beskrive som følgende:

Et HTML-element

  1. Åpningstaggen: Denne består av navnet på elementet (i dette tilfellet h1), pakket inn i "krokodillemunner".
  2. Lukketaggen: Denne er lik som åpningstaggen, bare at vi legger til en skråstrek før navnet på elementet.
  3. Innholdet: I mellom taggene er innholdet i elementet, som i dette tilfellet bare er tekst.
  4. Hele elementet: Åpningstaggen, lukketaggen og innholdet utgjør til sammen hele elementet.

Når vi skal lære oss HTML, vil mye av jobben bestå av å vite hvilke elementer som finnes, hvordan de skrives og hva slags funksjon de har. For eksempel er h1-elementet et såkalt header-element, altså en overskrift. Vi kan lage mindre overskrifter ved å bruke et h2-element, helt ned til h6.

Hva med html og body? De er begge en del av "skjelettet" til en html-fil. Dette skjelettet er det vanlig å starte hver gang vi skal lage en nettside. VS Code hjelper oss med å sette det opp:

Lag en ny html fil f.eks. "minside.html". Start ved å skrive html og du vil se at du får opp noen forslag:

VS Code skriver skjelettet

Velg det midterste alternativet, html:5, og du vil få følgende tekst:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
    
    </body>
</html>

Dette er altså den grunnleggende oppbyggingen av en html-fil.

html-elementet ligger rundt hele html-fila vår slik at nettleseren vet hva som skal tolkes.

head-elementet består av såkalt meta-informasjon, altså informasjon nettleseren skal ha, men som ikke skal synes på selve siden. Vi ser nærmere på dette senere.

body-elementet ligger rundt alt innholdet som faktisk skal vises på nettsiden vår. Inne i body-elementet kan vi nå legge til overskrifter, tekst, bilder og annet innhold.

La oss legge til en overskrift igjen. Legg merke til at siden vi bruker VS Code så slipper vi å skrive krokodillemunnene og de andre symbolene selv. Dersom du bare skriver "h1", vil du få opp et alternativ, og når du velger dette vil elementet skrives for deg. Nå trenger du bare å legge til innholdet, altså selve teksten i overskriften.

Vi kan også legge til litt tekst, da er p-elementet kjekt å bruke. All tekst vi skriver som innhold i dette elementet vil lage et avsnitt (paragraph). Ved å legge flere p-element etter hverandre får vi flere avsnitt under hverandre.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Min Side</title>
    </head>
    <body>
        <h1>Hallo verden!</h1>
        <p>Katten min er veldig gretten</p>
        <p>Den er også veldig lat</p>
    </body>
</html>

Eksperimenter ved å sette inn noen overskrifter og paragrafer i body-elementet. Skriv for eksempel noen linjer om ferien din.

Nøstede elementer​

Nå ser du kanskje at vi ofte har lagt elementer inne i elementer, dette kalles nøsting. Hvis vi har lyst til å understreke at katten vår er veldig gretten, kan vi sette "veldig" i et strong-element, det vil gjøre at "veldig" blir skrevet med fet skrift på nettsiden.

<p>Katten min er <strong>veldig</strong> gretten.</p>
pass på

Her må du passe på at du nøster riktig. Dette blir feil:

<p>Katten min er <strong>veldig gretten.</p></strong>

Elementene må åpnes og lukkes korrekt, slik at de er innenfor eller utenfor hverandre. Hvis de overlapper, slik som i koden over, vil nettleseren din prøve å tippe hva du mener, og det blir ofte feil.

Når vi skriver HTML, viser vi hvilke elementer som er nøstet i hverandre ved innhopp:

<body>
    <h1>Min Sommerferie</h1>
</body>

Siden h1 har "hoppet" et hakk inn, er det lett å se at det ligger nøstet inn i body-elementet.

Attributter​

Når vi legger til et element så vil vi ofte ha behov for å legge til litt ekstra informasjon. Dersom vi for eksempel skal legge til et bilde på nettsiden, må vi fortelle hvilket bilde og hvor det finnes. Slik informasjon legger vi til som attributter. I dette tilfellet skal vi lage et bilde-element img (image), med en attributt src (source). I HTML ser det ut som følger:

HTML-element med attributt

src-attributtet er altså kilden til bildet, for at dette skal vises må du ha et bilde med samme navn i samme mappe som html-fila. alt-attributtet er eventuell tekst for synshemmede som kan bli lest opp av et spesielt program, men det vil også bli vist dersom bildet av en eller annen grunn ikke kan vises. Legg også merke til at img-elementet er litt spesielt, siden det bare består av en åpnings-tagg. Det er fordi når vi har fylt ut src-attributtet, trenger vi ikke noe mer innhold til bildet, og vi trenger heller ingen lukke-tagg.

merk

Du kan alternativt legge til nettadressen til et bildet på internett i src-attributten, men da bryter du som regel opphavsrett, og bildet vil forsinne dersom originalen blir borte.

Vi har nå laget en nettside med overskrift, tekst og bilder, for eksempel:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Min Side</title>
    </head>
    <body>
        <h1>Hallo verden!</h1>
        <p>Katten min er veldig gretten</p>
        <p>Den er også veldig lat</p>
        <p>Her er et bilde av katten min:</p>
        <img src="minkatt.jpg" alt="katten min">
    </body>
</html>

Vi skal i neste avsnitt se litt nærmere på lenker (2.3), og så på strukturering av nettsiden (2.4). Siste del av dette kapittelet er en oppsummering av de mest brukte elementene (2.5). Mange begynner nå å bli mer interessert i å gjøre utseende på nettsiden bedre. Da må vi se nærmere på CSS, som vi tar for oss i kap 3.

Oppgaver​

2.2.1

Lag en nettside om deg selv. Du kan ta med informasjon om hvilken klasse du går i, hvilke fag du har valgt samt hobbyer og interesser. Ta et bilde av deg selv og legg det til nettsiden. Dersom du bruker et bilde fra iphone er det av en filtype som nettleseren ikke klarer å vise. Spør lærer eller andre hvordan du endrer filtype på et slikt bilde.