2 Lenker, bilder og lister

I dette kapitlet lager du et nettsted med flere sider for Kafé Kanelsnurr. Forsiden heter alltid index.html. Lagre alt du lager i dette kapitlet i mappen kap02-lenker.

2.1 Lenker mellom sider

kafe/index.html
<h1>Kafé Kanelsnurr</h1>
<p>Velkommen til den koseligste kafeen i byen!</p>
<p><a href="meny.html">Se menyen</a></p>

Med elementet <a> lager du en lenke. Attributtet href forteller hvilken side lenken går til.

  1. Les koden ovenfor, og gjett hva nettleseren viser.
  2. Lag mappen kafe inne i mappen kap02-lenker, med filen index.html. Skriv en hel nettside med tittelen Kafé Kanelsnurr, og legg kodelinjene ovenfor inne i <body>.

Kopier min-forste-nettside.html fra kapittel 1 over til den nye mappen, gi kopien navnet index.html, og endre innholdet. Da slipper du å skrive <head> på nytt.

  1. Åpne siden i nettleseren, og klikk på lenken. Hva skjer?
  2. Lag en ny fil som heter meny.html i mappen kafe. Siden skal ha overskriften Meny og kodelinja nedenfor. Klikk deg fram og tilbake mellom sidene.
kafe/meny.html
<p><a href="index.html">Tilbake til forsiden</a></p>
  1. Endre href="meny.html" til href="menyen.html" i index.html. Klikk på lenken. Hva skjer? Rett feilen.
  2. Legg til kodelinja <p><a href="https://www.yr.no">Sjekk været før du kommer</a></p> i index.html. Hva er forskjellen på denne adressen og meny.html?

En adresse som begynner med https://, er en fullstendig adresse til et nettsted. En adresse som bare er et filnavn, peker til en fil i den samme mappen.

En skjermleser kan lese opp alle lenkene på en side etter hverandre, uten teksten rundt.

Kode A
<p><a href="meny.html">Klikk her</a> for å se menyen.</p>
Kode B
<p>Se <a href="meny.html">menyen vår</a>.</p>
  1. Hvilken av lenkene ovenfor er best for en som bruker skjermleser? Forklar hvorfor.
Spør KI

Hvorfor er «Klikk her» en dårlig lenketekst? Gi meg tre eksempler på bedre lenketekster til en nettside for en kafé.

2.2 Lenker til e-post, telefon og steder på siden

kafe/index.html
<p><a href="#apningstider">Se åpningstidene</a></p>
<p><a href="tel:+4712345678">Ring oss på 123 45 678</a></p>
<p><a href="mailto:post@kanelsnurr.example">Send oss en e-post</a></p>

<h2 id="apningstider">Åpningstider</h2>
<p>Mandag–fredag: 8–16</p>

En lenke kan også ringe et telefonnummer, åpne e-postprogrammet eller gå til et sted på den samme siden. Attributtet id gir et element et navn som en lenke kan gå til.

  1. Les koden ovenfor. Hva tror du skjer når du klikker på hver av de tre lenkene?
  2. Legg til kodelinjene nederst i <body> i index.html. Legg til så mange avsnitt over åpningstidene at siden blir lengre enn vinduet. Klikk på den første lenken. Hva skjer?
  3. Klikk på de to andre lenkene på datamaskinen. Hva skjer?
  4. Åpne siden på en mobil hvis du kan, eller spør en medelev hva som skjer på mobilen hennes. Hvorfor er slike lenker særlig nyttige på mobil?

Telefonnummeret i tel: skrives uten mellomrom, og med landskoden +47 foran. Teksten i lenken kan du skrive slik du vil.

  1. Endre id="apningstider" til id="åpningstider". Virker lenken fortsatt? Endre tilbake.

Skriv id med små bokstaver, uten mellomrom og uten æ, ø og å. Bruk bindestrek mellom ordene, for eksempel id="dagens-tilbud".

  1. Lag en lenke nederst på siden som går tilbake til toppen. Gi <h1> en id, og lag lenken til den.

2.3 Bilder og alternativ tekst

kafe/index.html
<img src="kanelsnurr.jpg" alt="En kanelsnurr på et hvitt fat" width="300">

Med <img> setter du inn et bilde. Attributtet src sier hvilken bildefil som skal vises. Attributtet alt er en alternativ tekst, som beskriver bildet for dem som ikke kan se det.

  1. Les koden ovenfor, og gjett hva nettleseren viser.
  2. Last ned bildet kanelsnurr.jpg fra nettressursen, eller bruk et bilde du har tatt selv. Lagre bildet i mappen kafe.
  3. Legg til kodelinja ovenfor under <h1> i index.html. Har du brukt et eget bilde, må du endre filnavnet og den alternative teksten.
  4. Endre width="300" til width="150". Hva skjer?
  5. Endre src="kanelsnurr.jpg" til src="kanelsnurr.png". Hva viser nettleseren nå? Rett feilen.
  6. Har <img> en sluttagg? Inspiser bildet for å sjekke.

Nedenfor ser du fire alternative tekster til det samme bildet.

Kode A
alt="bilde"
Kode B
alt="kanelsnurr.jpg"
Kode C
alt="En kanelsnurr på et hvitt fat"
Kode D
alt="Et nydelig bilde av byens beste kanelsnurr som du bare må smake"
  1. Hvilken alternativ tekst er best? Forklar hva som er galt med de tre andre.

Et bilde som bare er pynt, skal ha en tom alternativ tekst: alt="". Da hopper skjermleseren over bildet.

Spør KI

Jeg skal skrive en alternativ tekst til et bilde av [beskriv bildet]. Ikke skriv teksten for meg. Still meg heller spørsmål som hjelper meg å finne ut hva som er viktig å få med.

2.4 Bilder med bildetekst

kafe/index.html
<figure>
  <img src="kanelsnurr.jpg" alt="En kanelsnurr på et hvitt fat" width="300">
  <figcaption>Kanelsnurrene bakes ferske hver morgen.</figcaption>
</figure>

Med <figure> og <figcaption> får bildet en bildetekst. Bildeteksten kan alle se, og den forteller noe om bildet. Den alternative teksten beskriver hva bildet viser, for dem som ikke kan se det.

  1. Les koden ovenfor, og gjett hvordan bildet ser ut nå.
  2. Legg bildet i index.html inn i <figure>, og legg til bildeteksten.
  3. Hva er forskjellen på den alternative teksten og bildeteksten? Hvem leser hva?

Bilder på nettet lagres i ulike filformater.

Format Passer til
JPG fotografier
PNG logoer, skjermbilder og bilder med gjennomsiktig bakgrunn
SVG logoer og ikoner som skal være skarpe i alle størrelser
WebP fotografier og grafikk, med mindre filer enn JPG og PNG
  1. Hvilket format ville du brukt til logoen til kafeen? Hvilket ville du brukt til et bilde av kafeen?

Bruk bilder du har tatt selv, eller bilder du har lov til å bruke, for eksempel med en Creative Commons-lisens. Skriv i bildeteksten hvem som har tatt bildet.

  1. Finn et bilde av en kopp kaffe med en Creative Commons-lisens. Legg det inn på menysiden, og skriv navnet på fotografen og lisensen i bildeteksten.

2.5 Punktlister og nummererte lister

kafe/index.html
<h2 id="apningstider">Åpningstider</h2>
<ul>
  <li>Mandag–fredag: 8–16</li>
  <li>Lørdag: 10–15</li>
  <li>Søndag: stengt</li>
</ul>

Med <ul> lager du en punktliste, og med <ol> en nummerert liste. Hvert punkt i lista står i et eget <li>-element. Forkortelsene står for unordered list, ordered list og list item.

  1. Les koden ovenfor, og gjett hva nettleseren viser.
  2. Erstatt åpningstidene i index.html med kodelinjene ovenfor.
  3. Endre <ul> til <ol> og </ul> til </ol>. Hva endrer seg? Hvilken type liste passer best til åpningstider?

Bruk <ol> når rekkefølgen betyr noe, og <ul> når den ikke gjør det.

  1. Endre tilbake til <ul>. Lag en ny side som heter oppskrift.html, med oppskriften på kanelsnurrer. Ingrediensene skal stå i en punktliste, og framgangsmåten i en nummerert liste. Siden kan for eksempel se slik ut:
Nettleser
  1. Lister kan ligge inne i lister. Les koden nedenfor, og gjett hvordan den ser ut. Legg den deretter inn på menysiden.
kafe/meny.html
<ul>
  <li>Bakst
    <ul>
      <li>Kanelsnurr</li>
      <li>Skolebolle</li>
    </ul>
  </li>
  <li>Drikke
    <ul>
      <li>Kaffe</li>
      <li>Kakao</li>
    </ul>
  </li>
</ul>

Lenkene til sidene på nettstedet er også en liste. Derfor er det vanlig å skrive dem i en <ul>.

  1. Erstatt lenken Se menyen i index.html med lista nedenfor. Legg den samme lista øverst i meny.html og oppskrift.html.
kafe/index.html
<ul>
  <li><a href="index.html">Forside</a></li>
  <li><a href="meny.html">Meny</a></li>
  <li><a href="oppskrift.html">Oppskrift</a></li>
</ul>

  1. En skjermleser sier hvor mange punkter en liste har, før den leser punktene. Hvorfor tror du det er nyttig for en som bruker skjermleser?

  2. Kafeen har sendt oppskriften på kakao som ren tekst. Lag siden kakao.html i mappen kafe, og merk opp teksten nedenfor med overskrifter og riktig type liste. Lag en lenke til siden i lenkelista.

kakao.txt
Varm kakao

Til fire kopper

Ingredienser
8 dl melk
4 ss kakaopulver
3 ss sukker
1 klype salt

Slik gjør du
Rør sammen kakaopulver, sukker og salt i en kjele.
Tilsett litt av melka, og rør til det blir en jevn masse.
Tilsett resten av melka.
Varm opp under omrøring, men ikke la kakaoen koke.

2.6 Mapper og relative stier

Mappe
kafe
├── index.html
├── meny.html
├── oppskrift.html
├── bilder
│   └── kanelsnurr.jpg
└── sider
    └── om-oss.html

Når et nettsted får mange filer, legger vi dem i mapper. En adresse som bilder/kanelsnurr.jpg kalles en relativ sti. Den forteller veien fra filen du står i, til filen du vil vise. Skråstreken / betyr «inn i mappen», og ../ betyr «opp én mappe».

  1. Lag mappen bilder inne i mappen kafe, og flytt kanelsnurr.jpg dit. Last inn index.html på nytt. Hva skjer med bildet?
  2. Endre src="kanelsnurr.jpg" til src="bilder/kanelsnurr.jpg" i index.html. Sjekk at bildet vises igjen.
  3. Lag mappen sider, og lag filen om-oss.html der. Siden skal ha overskriften Om oss, og lenken nedenfor.
kafe/sider/om-oss.html
<p><a href="../index.html">Tilbake til forsiden</a></p>
  1. Legg til et punkt med en lenke til om-oss.html i lenkelista på forsiden. Hvilken adresse må du skrive i href?

Bildet kanelsnurr.jpg skal også vises på siden om-oss.html. Nedenfor ser du fire kodebiter. Bare én av dem viser bildet.

Kode A
<img src="kanelsnurr.jpg" alt="">
Kode B
<img src="bilder/kanelsnurr.jpg" alt="">
Kode C
<img src="../bilder/kanelsnurr.jpg" alt="">
Kode D
<img src="../kanelsnurr.jpg" alt="">
  1. Finn kodebiten som viser bildet. Forklar hvor de tre andre leter etter bildet.
  2. Legg lenkelista øverst i om-oss.html også. Hvilke adresser må endres for at lenkene skal virke derfra? Sjekk at alle lenkene virker fra alle sidene.

Bruk aldri en adresse som C:\Users\amira\kafe\bilder\kanelsnurr.jpg i koden. Den virker bare på din egen datamaskin, og ikke når nettstedet er lagt ut på nettet.

Spør KI

Her er mappestrukturen til nettstedet mitt: [lim inn mappestrukturen]. Still meg fem spørsmål om relative stier mellom filene. Still ett spørsmål om gangen, og si fra om svaret mitt er riktig.

Oppsummering

I dette kapitlet har du laget et lite nettsted med flere sider. Sidene har lenker mellom seg, bilder med alternativ tekst og bildetekst, og lister. Du har også lært å bruke relative stier når filene ligger i ulike mapper.

Lenker

kafe/index.html
<ul>
  <li><a href="index.html">Forside</a></li>
  <li><a href="meny.html">Meny</a></li>
  <li><a href="sider/om-oss.html">Om oss</a></li>
</ul>
<p>Sjekk <a href="https://www.yr.no">været på Yr</a>.</p>
Nettleser
Adressen begynner med Lenken går til
et filnavn, som meny.html en side på det samme nettstedet
https:// et annet nettsted
# elementet med den samme id på siden
tel: et telefonnummer
mailto: en e-postadresse

Bilder

kafe/index.html
<figure>
  <img src="bilder/kanelsnurr.jpg" alt="En kanelsnurr på et hvitt fat" width="200">
  <figcaption>Ferske kanelsnurrer hver morgen.</figcaption>
</figure>
Nettleser

Merk deg følgende:

  • Den alternative teksten beskriver bildet for dem som ikke kan se det.
  • Et bilde som bare er pynt, får alt="".
  • Bruk bare bilder du har lov til å bruke, og skriv hvem som har tatt dem.

Lister

kafe/oppskrift.html
<ul>
  <li>Mel</li>
  <li>Melk</li>
</ul>
<ol>
  <li>Lag deigen.</li>
  <li>Stek snurrene.</li>
</ol>
Nettleser

Relative stier

Fra Til Adresse
index.html meny.html meny.html
index.html bilder/kanelsnurr.jpg bilder/kanelsnurr.jpg
sider/om-oss.html index.html ../index.html
sider/om-oss.html bilder/kanelsnurr.jpg ../bilder/kanelsnurr.jpg

Oppgaver

Oppgave 2.1

oppg1-rett-feil.html
<ul>
  <li><a herf="index.html">Forside</a></li>
  <li><a href="meny.html">Meny<a></li>
</ul>
<img scr="bilder/kanelsnurr.jpg" alt="En kanelsnurr">
<ul>
  <li>Kaffe</li>
  <li>Kakao</il>
</ul>

Koden ovenfor har fire feil. Skriv av koden i filen oppg1-rett-feil.html, og rett alle feilene.

Oppgave 2.2

  • <li>Te</li>
  • </ul>
  • <li>Drikke
  • <ul>
  • <li>Kaffe</li>
  • </li>
  • <ul>
  • </ul>

Sett sammen kodelinjene i filen oppg2-drikke.html til en liste med punktet Drikke, og en liste med Kaffe og Te inne i punktet.

Oppgave 2.3

Lag filen oppg3-apper.html med en nummerert liste over de tre appene du bruker mest, med den du bruker mest øverst. Hver app skal være en lenke til nettstedet til appen.

Oppgave 2.4

Skriv en god alternativ tekst til hvert av disse bildene:

  • et bilde av kafeens logo, som også er en lenke til forsiden
  • et bilde av to personer som drikker kakao ved et vindu
  • et bilde av en blomsterbukett som bare er pynt på siden

Oppgave 2.5

Mappe
klubben
├── index.html
├── bilder
│   └── logo.png
└── sider
    ├── kontakt.html
    └── trening.html

Skriv adressen i href eller src for hver av disse:

  • en lenke fra index.html til kontakt.html
  • en lenke fra kontakt.html til index.html
  • logoen på siden trening.html
  • en lenke fra kontakt.html til trening.html

Oppgave 2.6

Kontaktlæreren har sendt informasjonen om klasseturen som ren tekst. Lag filen oppg6-klassetur.html, kopier teksten inn i <body>, og merk den opp.

  • Bestem hvilke lister som skal være punktlister, og hvilke som skal være nummererte.
  • Teksten i hakeparentes beskriver et bilde. Bruk et eget bilde, og skriv en god alternativ tekst.
  • Adressene i parentes skal bli lenker med en god lenketekst. Selve adressen skal ikke stå i teksten.
klassetur.txt
Klassetur til fornøyelsesparken

Vi drar til fornøyelsesparken fredag 6. juni. Billettene er betalt av skolen.

[Bilde: en berg-og-dal-bane mot blå himmel]

Program
Oppmøte ved hovedinngangen klokka 8.45
Bussen går klokka 9
Fri tid i parken
Bussen går hjem klokka 16

Husk å ta med
matpakke
vannflaske
regntøy
penger til is

Kart og åpningstider finner du på nettsiden til parken (https://fornoyelsesparken.example).

Spørsmål? Send en e-post til kontaktlæreren (larer@skolen.example), eller ring 123 45 678.

B-oppgaver

Oppgave 2.7

Lag siden oppg7-hobby.html om en hobby du har, med minst fire <h2>-overskrifter. Øverst på siden skal det stå en liste med lenker til hver av overskriftene, og nederst en lenke tilbake til toppen.

Oppgave 2.8

Lag et lite nettsted i mappen oppg8-fotoside om noe du liker å ta bilder av. Det skal ha en forside, index.html, og to sider med tre bilder hver som du har tatt selv. Hvert bilde skal ha alternativ tekst og bildetekst. Alle sidene skal ha den samme lenkelista øverst, og bildene skal ligge i mappen bilder.

Oppgave 2.9

Et bilde kan også være en lenke. Legg <img> inne i <a>, slik at logoen til kafeen blir en lenke til forsiden på alle sidene i kafe. Hva bør den alternative teksten til logoen være nå? Forklar hvorfor.

Oppgave 2.10

Lagre det samme bildet som JPG, PNG og WebP, og i to ulike størrelser. Sammenlign filstørrelsene. Bruk fanen Network i utviklerverktøyene til å finne ut hvor mye data nettleseren laster ned når du åpner kafe/index.html. Hvor mye data blir det til sammen hvis 1000 personer åpner forsiden i løpet av en dag? Hva kan du gjøre for å redusere mengden data?