1 Den første nettsiden

1.1 Lage den første nettsiden

min-forste-nettside.html
<!DOCTYPE html>
<html lang="nb">
  <head>
    <meta charset="utf-8">
    <title>Verkstedet</title>
  </head>
  <body>
    <h1>Hallo, Norge!</h1>
  </body>
</html>

En nettside er en tekstfil skrevet i HTML. Nettleseren leser filen og viser innholdet. Teksten mellom <h1> og </h1> blir en overskrift på siden.

  1. Les koden ovenfor, og gjett hva nettleseren viser.
  2. Lag en mappe som heter kap01-forste-nettside på datamaskinen din. Åpne mappen i editoren din.
  3. Lag en ny fil i mappen, og gi den navnet min-forste-nettside.html. Skriv av koden, og lagre filen.
  4. Åpne filen i nettleseren.

I tillegg A ser du hvordan du gjør dette i Visual Studio Code. Der ser du også hvordan nettleseren kan oppdatere siden av seg selv hver gang du lagrer.

  1. Endre teksten mellom <h1> og </h1>. Lagre filen, og last inn siden på nytt i nettleseren.

Husk å lagre filen før du laster inn siden på nytt. De fleste editorer viser et merke på fanen til filen når den ikke er lagret.

1.2 Endre og rette nettsiden

min-forste-nettside.html
<!DOCTYPE html>
<html lang="nb">
  <head>
    <meta charset="utf-8">
    <title>Verkstedet</title>
  </head>
  <body>
    <h1>Hallo, Norge!</h1>
    <p>Her lager jeg nettsider.</p>
  </body>
</html>

En nettside lager du litt om gangen. Du legger til noen kodelinjer, lagrer og ser på resultatet i nettleseren, før du legger til flere. Den markerte kodelinja i koden ovenfor er ny. Elementet <p> lager et avsnitt.

  1. Les koden ovenfor, og gjett hva nettleseren viser.
  2. Legg til den nye kodelinja i min-forste-nettside.html. Lagre, og last inn siden på nytt.
  3. Endre teksten mellom <title> og </title>. Hvor i nettleseren ser du endringen?

Det er vanlig å gjøre feil når man skriver kode. Nedenfor ser du fire kodebiter. Bare én av dem er riktig.

Kode A
<h1>Hallo, Norge!<h1>
<p>Her lager jeg nettsider.</p>
Kode B
<h1>Hallo, Norge!</h1>
<p>Her lager jeg nettsider.</p>
Kode C
<h1>Hallo, Norge!</h>
<p>Her lager jeg nettsider.</p>
Kode D
<hl>Hallo, Norge!</hl>
<p>Her lager jeg nettsider.</p>
  1. Finn kodebiten som er riktig. Forklar feilen i hver av de tre andre.
  2. Lag feilen fra Kode A i filen din. Lagre, og last inn siden på nytt. Hva skjer med avsnittet under overskriften?
  3. Gjør det samme med feilene i Kode C og Kode D, én om gangen. Rett feilene til slutt.

Nettleseren viser siden selv om HTML-koden har feil. Den prøver å gjette hva du mente, og gjetter ofte feil. Derfor må du selv sjekke at koden er riktig.

Spør KI

Hva er forskjellen på <head> og <body> i en HTML-fil? Forklar det for en som aldri har laget en nettside før.

1.3 Overskrifter og avsnitt

min-forste-nettside.html
<h1>Verkstedet</h1>
<p>Her lager jeg nettsider.</p>
<h2>Om meg</h2>
<p>Jeg heter Amira og går på Vg1.</p>
<h2>Hva jeg vil lære</h2>
<p>Jeg vil lære å lage nettsider og apper.</p>

HTML har seks nivåer av overskrifter, fra <h1> til <h6>. <h1> er hovedoverskriften, og en side skal bare ha én. Under den kommer <h2>, og under hver <h2> kan det komme <h3>. Avsnitt skrives med <p>, som står for paragraph.

  1. Les koden ovenfor, og gjett hva nettleseren viser.
  2. Erstatt kodelinjene inne i <body> i min-forste-nettside.html med kodelinjene ovenfor. Lagre, og last inn siden på nytt.
  3. Endre <h2>Om meg</h2> til <h3>Om meg</h3>. Hva endrer seg på siden?
  4. Endre tilbake til <h2>. Skriv om avsnittet under Om meg slik at det går over flere linjer i editoren, og legg inn ekstra mellomrom mellom noen av ordene. Hvordan viser nettleseren linjeskiftene og mellomrommene?

Nettleseren slår sammen mellomrom og linjeskift til ett mellomrom. Et nytt avsnitt lager du med en ny <p>-tagg.

  1. Utvid siden slik at den ser omtrent slik ut. Skriv om deg selv, og ikke om Amira.
Nettleser
  1. Skriv ned alle overskriftene på siden din i rekkefølge, med nivået foran, for eksempel h1 Verkstedet og h2 Om meg. Ser du hvordan overskriftene lager en innholdsfortegnelse for siden?

Velg overskriftsnivå etter hvor overskriften hører hjemme i innholdet, og ikke etter hvor stor teksten skal være. Hvordan overskriftene ser ut, bestemmer du senere med CSS.

Ofte får du teksten til en nettside som ren tekst, for eksempel i en e-post eller et dokument. Da må du selv bestemme hva som er overskrifter og hva som er avsnitt, og skrive taggene rundt. Det kalles å merke opp teksten.

  1. Teksten nedenfor er en nyhet fra skolen. Lag filen filmfestivalen.html med en hel nettside, og kopier teksten inn i <body>. Åpne siden i nettleseren. Hvordan ser den ut?
filmfestivalen.txt
Vg1 vant filmfestivalen

Filmen «Siste ferje» fikk juryens pris på Ungdommens filmfestival i helgen.

Om filmen
Filmen handler om tre venner som går glipp av den siste ferja hjem fra en øy. Den ble spilt inn på to dager i oktober.

Juryens begrunnelse
Juryen mente filmen hadde de beste bildene og den mest overraskende slutten av alle filmene i konkurransen.

Neste prosjekt
Klassen vil lage en dokumentar om skolens historie. Den skal vises på skolens jubileum i mai.
  1. Merk opp teksten med <h1>, <h2> og <p>, og sjekk resultatet i nettleseren. Hva gjør nettleseren med de tomme linjene i teksten?

1.4 Elementer, tagger og attributter

min-forste-nettside.html
<h2>Om meg</h2>
<p>Jeg heter Amira og går på <abbr title="informasjonsteknologi og medieproduksjon">IM</abbr>.</p>
<p lang="en">Hello, world!</p>

Et element består av en starttagg, et innhold og en sluttagg. Starttaggen kan ha attributter, som gir mer informasjon om elementet. Et attributt har et navn og en verdi, for eksempel title="...".

<abbr title="informasjonsteknologi og medieproduksjon">IM</abbr>
  1. Les koden ovenfor, og gjett hva nettleseren viser.
  2. Legg til kodelinjene 2 og 3 under Om meg i min-forste-nettside.html. Lagre, og last inn siden på nytt.
  3. Hold musepekeren over IM på siden. Hva skjer?
  4. Attributtet lang="en" forteller at teksten er på engelsk. Ser du noen forskjell på siden? Hvem tror du har nytte av attributtet?
  5. Finn attributtet lang på kodelinje 2 i 1.1. Hva tror du nb står for?

Elementer kan ligge inne i andre elementer. På siden din ligger <abbr> inne i <p>, og <p> ligger inne i <body>. Nedenfor ser du fire kodebiter. Bare én av dem er riktig.

Kode A
<p>Jeg går på <abbr>IM</p></abbr>
Kode B
<p>Jeg går på <abbr>IM</abbr></p
Kode C
<p>Jeg går på <abbr>IM</abbr></p>
Kode D
<p>Jeg går på <abbr>IM<abbr></p>
  1. Finn kodebiten som er riktig. Forklar feilen i hver av de tre andre.

Elementer lukkes i motsatt rekkefølge av den de ble åpnet i. Det elementet du åpnet sist, skal lukkes først.

Noen elementer har ikke noe innhold, og derfor heller ingen sluttagg. Et eksempel er <meta charset="utf-8"> i <head>. Det forteller nettleseren hvordan tegnene i filen er lagret, slik at æ, ø og å blir vist riktig.

  1. Fjern kodelinja <meta charset="utf-8"> fra min-forste-nettside.html, lagre og last inn siden på nytt. Vises æ, ø og å fortsatt riktig? Legg kodelinja tilbake.
Spør KI

Jeg lærer om HTML. Still meg fem spørsmål om forskjellen på tagger, elementer og attributter. Still ett spørsmål om gangen, vent på svaret mitt, og si fra hvis jeg tar feil.

1.5 Framheve tekst

min-forste-nettside.html
<p>Jeg vil <strong>virkelig</strong> lære å <em>programmere</em>.</p>
<p>Akershus vgs<br>Skoleveien 1<br>1234 Skolebyen</p>
<p>Et avsnitt begynner med &lt;p&gt;.</p>

Med <strong> viser du at noe er viktig, og med <em> legger du trykk på et ord. <br> lager et linjeskift inne i et avsnitt.

  1. Les koden ovenfor, og gjett hva nettleseren viser.
  2. Legg til kodelinjene nederst i <body> i min-forste-nettside.html. Bytt ut adressen med adressen til skolen din.
  3. Hvordan viser nettleseren <strong> og <em>?
  4. Endre &lt;p&gt; til <p> på kodelinje 3. Hva skjer? Endre tilbake.
  5. <br> har ingen sluttagg. Hvorfor trenger den ingen, tror du?
  6. Hva tror du &lt; og &gt; står for? Hvorfor kan du ikke bare skrive < og > i teksten?

Nedenfor ser du to måter å lage luft mellom to avsnitt på.

Kode A
<p>Jeg spiller håndball.<br><br>Jeg redigerer video.</p>
Kode B
<p>Jeg spiller håndball.</p>
<p>Jeg redigerer video.</p>
  1. De to kodebitene ser nesten like ut i nettleseren. Hvilken er riktig? Forklar hvorfor.

Bruk <br> bare der linjeskiftet hører til innholdet, for eksempel i en adresse eller et dikt. Et nytt avsnitt skal alltid være en ny <p>.

  1. Noen tegn har en egen kode i HTML. Legg til avsnittet nedenfor, og finn ut hva hver kode blir til.
min-forste-nettside.html
<p>Kafé &amp; bakeri &copy; 2026</p>
  1. Gå gjennom siden din. Er det et ord eller en setning som er særlig viktig? Bruk <strong> eller <em> der det passer.

Du kan også se elementene <b> og <i> i koden til andre. De gjør teksten fet og kursiv, men forteller ikke at teksten er viktig eller har trykk. Bruk <strong> og <em>.

1.6 Undersøke en nettside

min-forste-nettside.html
<h1>Verkstedet</h1>
<p>Her lager jeg nettsider.</p>

Alle nettlesere har innebygde utviklerverktøy. Der kan du se HTML-koden til alle nettsider og prøve ut endringer. Du åpner dem med , eller ved å høyreklikke og velge Inspiser.

  1. Åpne min-forste-nettside.html i nettleseren. Høyreklikk på overskriften, og velg Inspiser. Utviklerverktøyene åpnes, og overskriften er markert.
  2. Finn <body> i utviklerverktøyene. Klikk på den lille pilen foran <body> for å skjule og vise elementene som ligger inni. Hvordan ser du at elementene ligger inne i hverandre?
  3. Dobbeltklikk på teksten Verkstedet i utviklerverktøyene, og skriv en ny tekst. Trykk . Hva skjer på siden?
  4. Last inn siden på nytt. Hva skjer med endringen? Forklar hvorfor.

Endringer i utviklerverktøyene gjelder bare i din egen nettleser, og bare til du laster inn siden på nytt. For å beholde en endring må du skrive den i filen.

  1. Lag feilen fra Kode A i 1.2 i min-forste-nettside.html. Inspiser siden. Hvordan har nettleseren tolket koden din? Rett feilen.
  2. Åpne en nyhetsside, for eksempel nrk.no. Inspiser en overskrift, og endre teksten. Kan andre som besøker siden, se endringen? Forklar.
  3. Inspiser hovedoverskriften og en av de mindre overskriftene på nyhetssiden. Hvilke overskriftsnivåer bruker siden?
  4. Finn <title>-elementet og lang-attributtet til nyhetssiden. Sammenlign teksten i <title> med det som står på fanen i nettleseren.
Spør KI

Jeg har inspisert en nettside og funnet dette elementet: [lim inn elementet]. Forklar hva hver del av elementet gjør. Bruk ordene starttagg, sluttagg, innhold og attributt.

Oppsummering

I dette kapitlet har du laget en nettside i en egen mappe, med overskrifter, avsnitt og tekst som er framhevet. Du har lært hva elementer, tagger og attributter er, og du har undersøkt nettsider med utviklerverktøyene.

En nettside

min-forste-nettside.html
<!DOCTYPE html>
<html lang="nb">
  <head>
    <meta charset="utf-8">
    <title>Verkstedet</title>
  </head>
  <body>
    <h1>Verkstedet</h1>
    <h2>Om meg</h2>
    <p>Jeg går på <abbr title="informasjonsteknologi og medieproduksjon">IM</abbr>.</p>
    <p>Jeg vil <strong>virkelig</strong> lære å <em>programmere</em>.</p>
  </body>
</html>
Nettleser

Merk deg følgende:

  • I <head> står informasjon om siden. Alt som skal vises på siden, står i <body>.
  • En side har én <h1>. Overskriftsnivåene skal komme i riktig rekkefølge.
  • Lagre filen før du laster inn siden på nytt.

Elementer og attributter

Del Eksempel
Element <p lang="en">Hello!</p>
Starttagg <p lang="en">
Attributt lang="en"
Sluttagg </p>
Element uten sluttagg <br>, <meta charset="utf-8">
  • Elementer lukkes i motsatt rekkefølge av den de ble åpnet i.
  • Attributter står i starttaggen, og har et navn og en verdi.

Framheve tekst

Kode Betyr Vises som
<strong> viktig fet skrift
<em> trykk kursiv
<br> linjeskift i et avsnitt ny linje
&lt; og &gt; tegnene < og > < og >
&amp; tegnet & &

Undersøke en nettside

  • Nettleseren viser siden selv om koden har feil.
  • Med utviklerverktøyene () ser du hvordan nettleseren har lest koden. Endringer der blir ikke lagret.

Oppgaver

Oppgave 1.1

oppg1-rett-feil.html
<!DOCTYPE html>
<html lang="nb">
  <head>
    <meta charset="utf-8">
    <titel>Min side</titel>
  </head>
  <body>
    <h1>Velkommen<h1>
    <p>Dette er siden min.</b>
  </body>
</html>

Skriv av koden i filen oppg1-rett-feil.html, og rett alle feilene. Siden skal se slik ut:

Nettleser

Oppgave 1.2

  • </head>
  • <h1>Sommer</h1>
  • <html lang="nb">
  • <title>Sommer</title>
  • </body>
  • <!DOCTYPE html>
  • <body>
  • </html>
  • <meta charset="utf-8">
  • <head>

Sett sammen kodelinjene i riktig rekkefølge i filen oppg2-sommer.html, slik at de blir en nettside med overskriften Sommer.

Oppgave 1.3

Lag en ny fil som heter oppg3-om-meg.html. Siden skal ha tittelen Om meg, en overskrift med navnet ditt og to avsnitt om deg selv. Siden kan for eksempel se slik ut:

Nettleser

Oppgave 1.4

Nettleser

Lag siden oppg4-vis-tagger.html, som viser teksten ovenfor med taggene synlige.

Oppgave 1.5

Forklar forskjellen på å endre en nettside i utviklerverktøyene og å endre den i editoren.

Oppgave 1.6

Teksten nedenfor er en nyhet til nettsiden til skolen. Lag filen oppg6-ladestasjon.html, og kopier teksten inn i <body>. Merk opp teksten med elementene du har lært i dette kapitlet:

  • overskrift og avsnitt
  • <abbr> for forkortelsen FAU
  • <strong> for det som er viktigst for leseren, og <em> for et ord som har trykk
  • <br> i adressen
ladestasjon.txt
Ny ladestasjon for elsykler

Fra mandag kan alle elever lade elsykkelen gratis ved hovedinngangen. Det er plass til tolv sykler.

Ladestasjonen er et samarbeid mellom elevrådet og FAU. FAU står for foreldrenes arbeidsutvalg.

– Dette er en stor dag for oss som sykler hver eneste dag, sier elevrådsleder Jonas Berg.

Syklene må hentes før klokka 17. Etter det blir porten låst, og sykkelen må stå der til neste morgen.

Spørsmål kan sendes til:
Elevrådet
Nordbyen videregående skole
Skoleveien 1
1234 Skolebyen

Skriv en kort forklaring av hvorfor du valgte <strong> og <em> der du gjorde.

B-oppgaver

Oppgave 1.7

oppg7-overskrifter.html
<h1>Kafé Kanelsnurr</h1>
<h3>Meny</h3>
<h4>Kaker</h4>
<p>Kanelsnurr, eplekake og brownies.</p>
<h4>Drikke</h4>
<p>Kaffe, te og kakao.</p>
<h1>Åpningstider</h1>
<p>Hverdager 8–16</p>

Overskriftene i koden ovenfor er brukt feil. Rett overskriftsnivåene slik at siden har én <h1>, og ingen nivåer blir hoppet over.

Oppgave 1.8

Lag siden oppg8-favoritt.html om en film, en bok eller et spill du liker. Siden skal ha minst tre overskrifter på to nivåer, et avsnitt med et ord i <strong> og et ord i <em>, og en forkortelse med <abbr>. Skriv teksten selv.

Oppgave 1.9

Velg en nettside du bruker ofte. Undersøk siden med utviklerverktøyene. Har siden én <h1>? Kommer overskriftsnivåene i riktig rekkefølge? Har <html>-elementet et lang-attributt? Skriv en kort vurdering av det du fant.

Oppgave 1.10

Åpne en nyhetsside, og åpne fanen Network (Nettverk) i utviklerverktøyene. Last inn siden på nytt. Hvor mange filer lastes ned, og hvor mange megabyte er det til sammen? Hvilke typer filer er det flest av? Gjør det samme med din egen min-forste-nettside.html, og forklar hvorfor tallene er så forskjellige.