4 Struktur og kvalitet

I dette kapitlet lager du nettstedet til Elevavisa. Du lærer å dele siden i deler som både mennesker og programmer forstår, og å sjekke at koden er riktig. Lagre alt du lager i dette kapitlet i mappen kap04-struktur.

4.1 Dele siden i deler

elevavisa/index.html
<body>
  <header>
    <h1>Elevavisa</h1>
    <nav>
      <ul>
        <li><a href="index.html">Forside</a></li>
        <li><a href="sport.html">Sport</a></li>
        <li><a href="om-avisa.html">Om avisa</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <p>Nyheter fra skolen, skrevet av elevene.</p>
  </main>
  <footer>
    <p>Elevavisa · Nordbyen videregående skole · <a href="mailto:elevavisa@skolen.example">elevavisa@skolen.example</a></p>
  </footer>
</body>

Elementene <header>, <nav>, <main> og <footer> endrer ikke hvordan siden ser ut. De forteller hva delene av siden er. Slike elementer kalles semantiske.

  1. Les koden ovenfor. Ser siden annerledes ut enn en side uten disse elementene?
  2. Lag mappen elevavisa med filen index.html. Skriv en hel nettside med tittelen Elevavisa, og legg koden ovenfor inn som <body>.
  3. Inspiser siden. Hvor i utviklerverktøyene ser du de nye elementene? Klikk på pilene for å skjule og vise innholdet i hver av dem.
  4. Lag sidene sport.html og om-avisa.html. De skal ha den samme <header> og den samme <footer> som forsiden, men et annet innhold i <main>.
  5. Hvem tror du har nytte av at koden forteller hva delene av siden er?

En side skal ha ett <main>-element. <header> og <footer> står vanligvis direkte inne i <body>.

  1. Inspiser en nyhetsside, for eksempel nrk.no. Finn <header>, <nav>, <main> og <footer>. Hva ligger i hver av dem?
  2. En skjermleser kan hoppe rett til <main>, forbi menyen. Hvorfor er det nyttig for en som besøker mange sider på det samme nettstedet?

Rykk inn koden som ligger inne i et annet element. Da ser du lettere hvilke elementer som ligger inne i hverandre. Mange editorer kan rykke inn koden for deg.

4.2 Seksjoner og artikler

elevavisa/index.html
<main>
  <section>
    <h2>Siste nytt</h2>
    <article>
      <h3>Ny kantine fra januar</h3>
      <p>Kantina flytter inn i det nye bygget etter jul.</p>
    </article>
    <article>
      <h3>Elevrådet vil ha flere benker</h3>
      <p>Elevrådet har sendt et forslag til rektor.</p>
    </article>
  </section>
  <section>
    <h2>Ukens bilde</h2>
    <p>Vg1 IM på tur til Oslo.</p>
  </section>
</main>

Med <section> deler du hovedinnholdet i deler som hver har sin egen overskrift. En <article> er innhold som gir mening alene, også om det blir flyttet til en annen side. Eksempler er en nyhet, et innlegg, en anmeldelse eller en kommentar.

  1. Les koden ovenfor. Hvor mange seksjoner og artikler er det?
  2. Erstatt <main> på forsiden med koden ovenfor. Lagre, og last inn siden på nytt.
  3. Hvorfor har artiklene <h3> og ikke <h2>?
  4. Skriv to egne nyheter fra skolen din som artikler i seksjonen Siste nytt.
  5. Lag to artikler på sportssiden, for eksempel om en kamp eller et skirenn.

Nedenfor ser du fire innhold som skal inn i Elevavisa.

  • en anmeldelse av skoleforestillingen
  • værmeldingen for uka
  • et intervju med en ny lærer
  • lenkene til de andre sidene i avisa

  1. Bestem om hvert innhold bør være en <section>, en <article> eller en <nav>. Forklar valgene dine.

  2. Redaksjonen har sendt neste ukes forside som ren tekst. Lag siden neste-uke.html i mappen elevavisa, og merk opp teksten med semantiske elementer og riktige overskriftsnivåer. Ordene med store bokstaver er navn på seksjoner.

neste-uke.txt
Elevavisa
Forside | Sport | Om avisa

KULTUR

Revyen ble utsolgt på to timer
Alle de 300 billettene til årets elevrevy ble solgt på to timer. Revyen spilles i aulaen 12. og 13. mars.

Ny lærer i musikk
Lise Holm begynner som musikklærer etter vinterferien. Hun har spilt i band i ti år.

SPORT

Basketlaget er klart for finalen
Basketlaget vant semifinalen 54–48 og møter Sørbyen i finalen på lørdag.

Elevavisa · Nordbyen videregående skole · elevavisa@skolen.example
Spør KI

Jeg lærer om semantiske elementer i HTML. Forklar forskjellen på <section> og <article>. Gi meg tre eksempler på hver fra nettsider jeg kjenner, og still meg til slutt et spørsmål for å sjekke at jeg har forstått det.

4.3 Kommentarer i HTML

elevavisa/index.html
<!-- Siste nytt oppdateres hver mandag -->
<section>
  <h2>Siste nytt</h2>
  <!--
  <article>
    <h3>Skoleball 12. desember</h3>
    <p>Venter på svar fra rektor.</p>
  </article>
  -->
</section>

Tekst mellom <!-- og --> er en kommentar. Nettleseren viser ikke kommentarer på siden. Å gjøre kode om til en kommentar kalles å kommentere ut koden.

  1. Les koden ovenfor. Hva vises på siden?
  2. Legg til kommentaren på kodelinje 1 over seksjonen Siste nytt. Vises den på siden?
  3. Legg til artikkelen om skoleballet, og kommenter den ut. Lagre, og last inn siden på nytt. Fjern kommentaren igjen.
  4. Inspiser siden. Kan du se kommentarene i utviklerverktøyene?
  5. Hvem har nytte av kommentarene i koden din?

Alle som besøker siden, kan se kommentarene dine med utviklerverktøyene. Skriv derfor aldri passord eller noe privat i en kommentar.

  1. Skriv en kommentar øverst i <body> på hver side, med navnet ditt og hva siden inneholder.

En god kommentar forklarer hvorfor koden er slik den er, og ikke bare hva den gjør. Hva koden gjør, kan andre som regel lese av koden.

4.4 Validere og rette feil

feil.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Elevavisa</h1>
    <p>Kantina er <strong>endelig</p></strong> ferdig.
    <img src="bilder/kantina.jpg">
    <li>Sport</li>
  </body>
</html>

Siden nettleseren viser sider med feil, ser du ikke alltid at koden har feil. Et valideringsverktøy sjekker koden mot reglene for HTML, og skriver en melding for hver feil det finner. Det mest brukte verktøyet er Nu Html Checker på validator.w3.org/nu.

  1. Les koden ovenfor. Hvor mange feil finner du?
  2. Lag filen feil.html i mappen kap04-struktur. Skriv av koden, og åpne filen i nettleseren. Ser du at noe er feil?
  3. Gå til validator.w3.org/nu. Velg text input, lim inn koden, og trykk Check.
  4. Hvor mange feilmeldinger får du? Hvilken kodelinje gjelder hver av dem?
  5. Rett én feil om gangen, og valider på nytt etter hver endring. Fortsett til verktøyet ikke finner flere feil.

Én feil kan gi flere feilmeldinger. Rett derfor den første feilen først, og valider på nytt. Meldinger merket Warning er råd, og ikke feil, men les dem likevel.

Spør KI

Jeg fikk denne feilmeldingen fra Nu Html Checker: [lim inn feilmeldingen]. Forklar hva den betyr, og gi meg et hint om hvor i koden jeg bør lete. Ikke rett koden for meg.

  1. Valider alle de tre sidene i Elevavisa. Velg file upload, og last opp én fil om gangen. Rett feilene du finner.
  2. Valider en nyhetsside. Velg address, og skriv inn adressen til siden. Finner verktøyet feil?

Valider siden hver gang du har gjort en større endring. Det er lettere å rette én feil med en gang enn ti feil til slutt.

4.5 Universell utforming

Kode A
<p><strong>Ny kantine fra januar</strong></p>
<p>Kantina flytter etter jul.</p>
Kode B
<h3>Ny kantine fra januar</h3>
<p>Kantina flytter etter jul.</p>

En nettside er universelt utformet når alle kan bruke den, også de som ser dårlig, ikke kan bruke mus, eller bruker en skjermleser. I Norge er det krav om dette for nettsider, og kravene bygger på standarden WCAG.

  1. Les kodebitene ovenfor, og gjett hvordan de ser ut i nettleseren. Ser de like ut?
  2. Bare én av kodebitene er riktig for en skjermleser. Hvilken, og hvorfor?
  3. Slå på skjermleseren på datamaskinen din, og hør hvordan forsiden til Elevavisa blir lest opp. På Windows trykker du , på Mac og på Chromebook . Trykk det samme igjen for å slå av skjermleseren.
  4. Hvordan leser skjermleseren menyen og artiklene?
  5. Endre lang="nb" til lang="en" på forsiden, og hør på siden på nytt. Hva skjer? Endre tilbake til lang="nb".
  6. Lukk utviklerverktøyene, klikk på siden, og trykk flere ganger. Hva skjer? Kan du bruke alle lenkene uten mus?

Du har lært mye som gjør en side universelt utformet. Tabellen nedenfor samler det.

Krav Lærte du i
Siden har lang, og én <h1>, og overskriftene kommer i riktig rekkefølge 1.3 og 1.4
Lenketekstene forteller hvor lenken går 2.1
Alle bilder har en god alternativ tekst, eller alt="" hvis de bare er pynt 2.3
Lister er laget med <ul> og <ol> 2.5
Tabeller har <th> og <caption>, og brukes bare til data 3.2 og 3.6
Siden er delt inn med semantiske elementer 4.1 og 4.2
  1. Gå gjennom Elevavisa med tabellen ovenfor. Rett det som mangler.
  2. Åpne en nyhetsside i lesermodus i nettleseren. Hvilke deler av siden blir med, og hvilke forsvinner? Hvorfor tror du det er slik?

Bruk HTML-elementene til det de er laget for. En overskrift skal være et <h1>–<h6>-element, selv om tekst i <strong> kan se lik ut.

Oppsummering

I dette kapitlet har du delt inn sidene med semantiske elementer, skrevet kommentarer i koden, validert sidene og sjekket at de er universelt utformet.

En side med semantiske elementer

elevavisa/index.html
<header>
  <h1>Elevavisa</h1>
  <nav>
    <ul>
      <li><a href="index.html">Forside</a></li>
      <li><a href="sport.html">Sport</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <h2>Siste nytt</h2>
    <article>
      <h3>Ny kantine fra januar</h3>
      <p>Kantina flytter etter jul.</p>
    </article>
  </section>
</main>
<footer>
  <p>Elevavisa · Nordbyen videregående skole</p>
</footer>
Nettleser
Element Betyr
<header> toppen av siden
<nav> lenkene til de andre sidene
<main> hovedinnholdet, ett per side
<section> en del av innholdet, med egen overskrift
<article> innhold som gir mening alene
<footer> bunnen av siden

Kommentarer

elevavisa/index.html
<!-- En kommentar vises ikke på siden -->

Sjekke koden

  • Nettleseren viser siden selv om koden har feil.
  • Valideringsverktøyet på validator.w3.org/nu finner feilene og viser hvilken kodelinje de står på.
  • Rett den første feilen først, og valider på nytt.
  • Test siden med skjermleser og med .

Oppgaver

Oppgave 4.1

  • <p>© Kafé Kanelsnurr</p>
  • <h1>Kafé Kanelsnurr</h1>
  • <h2>Åpningstider</h2>
  • <p>Hverdager 8–16</p>
  • <li><a href="meny.html">Meny</a></li>

Lag filen oppg1-deler.html med <header>, <nav>, <main> og <footer>. Plasser kodelinjene ovenfor i det elementet der de hører hjemme.

Oppgave 4.2

oppg2-kontakt.html
<!DOCTYPE html>
<html lang="nb">
  <head>
    <title>Kontakt</title>
  </head>
  <body>
    <main>
      <h1>Kontakt oss</h1>
      <p>Ring oss på <a href="tel:+4712345678">123 45 678</p></a>
      <img src="bilder/kart.png">
    </main>
    <main>
      <p>Vi svarer innen to dager.</p>
    </main>
  </body>
</html>

Skriv av koden i filen oppg2-kontakt.html. Valider koden, og rett alle feilene. Forklar med egne ord hva hver feilmelding betydde.

Oppgave 4.3

Skriv en kommentar i hver av sidene i Elevavisa som forklarer hva som ligger i <main>. Kommenter ut lenken til sportssiden i <nav> på forsiden, og sjekk at den forsvinner. Fjern kommentaren igjen.

Oppgave 4.4

oppg4-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>

Skriv av koden i filen oppg4-overskrifter.html. Rett overskriftsnivåene slik at siden har én <h1>, og ingen nivåer blir hoppet over. Del deretter inn siden med <header>, <main> og <section>.

Oppgave 4.5

Forklar forskjellen på å bruke <strong> og å bruke <h2> for en overskrift. Hva merker en som ser siden, og hva merker en som bruker skjermleser?

Oppgave 4.6

Elevrådet har sendt teksten til en ny side som ren tekst. Lag filen oppg6-kulturkveld.html, og kopier teksten inn i <body>.

kulturkveld.txt
Kulturkveld på Nordbyen
Torsdag 20. mars klokka 18 i aulaen

Program
18.00 Skolekorpset åpner kvelden
18.20 Dans fra Vg2 dans og drama
18.45 Pause med kaffe og kake
19.15 Utstilling av elevarbeider fra Vg1 IM

Om kvelden
Kulturkvelden arrangeres hvert år av elevrådet. Inntektene går til skoleturen.

Billetter
Voksne: 100 kr
Elever: 50 kr

Arrangør: Elevrådet ved Nordbyen videregående skole

NOTAT TIL DEG SOM LAGER SIDEN: Tidspunktet for dansen er ikke bestemt ennå.
  • Merk opp siden med semantiske elementer og riktige overskriftsnivåer.
  • Bestem om programmet skal være en tabell eller en liste, og forklar hvorfor.
  • Notatet til slutt skal ikke vises på siden. Gjør det om til en kommentar i HTML-koden.
  • Valider siden, og rett feilene.

B-oppgaver

Oppgave 4.7

Lag et nettsted med tre sider for en klubb eller forening du kjenner, i mappen klubb. Hver side skal ha <header> med en <nav>, <main> og <footer>. Lenkene i <nav> skal stå i en punktliste. Minst én side skal ha en tabell, og minst én side skal ha et bilde med bildetekst. Valider alle sidene.

Oppgave 4.8

Velg en nettside du bruker ofte. Undersøk siden med utviklerverktøyene, en skjermleser og . Bruk tabellen i 4.5 til å skrive en kort vurdering av hvor godt siden er universelt utformet.

Oppgave 4.9

Gå tilbake til nettstedet kafe fra kapittel 2. Del inn sidene med semantiske elementer, valider dem og rett feilene.

Oppgave 4.10

Undersøk elementene <aside> og <time>. Lag filen oppg10-nyhet.html med en nyhet fra Elevavisa som en <article>, med datoen i et <time>-element med attributtet datetime. Legg til en <aside> med noe som hører til nyheten, men som ikke er en del av den. Valider siden, og forklar hvem som har nytte av datetime.