Prosjekt 1 Et nettsted i ren HTML

Bestillingen

E-post fra kunden
Hei!

Jeg er leirsjef på Gransjøen leirsted. Hver sommer har vi en leiruke for barn, og foreldrene ringer med mange spørsmål: Hva skjer hver dag? Hva skal barna ha med? Hvordan kommer vi oss dit?

Vi ønsker oss et lite nettsted med tre sider:
– en forside om leiren og påmeldingen
– en side med programmet for uka
– en side med praktisk informasjon

Jeg har skrevet tekstene, og sender dem som vedlegg. Jeg har også et bilde av badeplassen.

Flere av foreldrene er blinde eller ser dårlig, og bruker skjermleser. Det er viktig at nettstedet virker godt for dem også.

Hilsen Hilde Bakken

I dette prosjektet lager du et lite nettsted for en kunde med det du har lært i kapittel 1–4. Du arbeider slik en webutvikler gjør: bestilling, plan, bygging, testing og dokumentasjon. Lagre alt i mappen gransjoen-leirsted.

  1. Les e-posten. Hvilket problem vil kunden løse med nettstedet?
  2. Lag en kravliste med en tabell som den nedenfor. Tabellen har tre av kravene. Finn minst tre til.
Krav Fra bestillingen Slik sjekker jeg det
Tre sider: forside, program og praktisk info «et lite nettsted med tre sider» Alle sidene finnes, og er lenket i <nav>
Programmet viser hva som skjer hver dag «Hva skjer hver dag?»
Nettstedet virker med skjermleser «Flere av foreldrene … bruker skjermleser» Skjermleseren og tabellen i 4.5
  1. Hvordan kan du sjekke at programmet viser hva som skjer hver dag? Fyll inn den tomme ruta i tabellen.
  2. Kunden har ikke skrevet noe om farger eller utseende. Skriv minst tre spørsmål du vil stille kunden før du begynner.

I dette prosjektet bruker du bare HTML. Nettstedet blir derfor enkelt å se på, men det gjør ingenting. En side med god struktur virker godt med skjermleser, og den er lett å gi stil senere. Det lærer du i Del 2.

Spør KI

Jeg skal lage et lite nettsted i HTML for en kunde. Her er bestillingen: [lim inn bestillingen]. Ikke lag nettstedet for meg. Hvilke spørsmål bør jeg stille kunden før jeg begynner, og hvorfor er hvert spørsmål viktig?

Plan

flowchart LR
  forside["Forside<br>index.html"]
  program["Program<br>program.html"]
  praktisk["Praktisk info<br>praktisk.html"]
  forside <--> program
  forside <--> praktisk
  program <--> praktisk

Et nettstedskart viser hvilke sider nettstedet har, og hvilke sider som lenker til hverandre. Ovenfor ser du nettstedskartet for leirstedet.

Overskriftsplan for index.html
h1  Sommerleir ved Gransjøen
h2    Velkommen til sommerleiren
h2    Hvem kan være med?
h2    Leiren i år
h2    Påmelding

En overskriftsplan viser overskriftene på en side, og hvilket nivå de har. Med den ser du om siden har en god struktur før du skriver koden.

  1. Se på nettstedskartet. Hvor mange lenker skal menyen ha på hver side?
  2. Les tekstene fra kunden i neste del. Lag en overskriftsplan for program.html og en for praktisk.html.
  3. Hvorfor er det bare én <h1> i overskriftsplanen? Hva ville en skjermleserbruker merket hvis alle overskriftene var <h1>?
Mappe
gransjoen-leirsted
├── index.html
├── program.html
├── praktisk.html
├── dokumentasjon.html
└── bilder
    └── badeplassen.jpg
  1. Lag en plan for mappen til din kunde. Hvilke sider trenger du, og hva skal filene hete?

Gi filene navn med små bokstaver, uten mellomrom og uten æ, ø og å. Bruk bindestrek mellom ordene, for eksempel om-oss.html.

Bygge sidene

gransjoen-leirsted/index.html
<!DOCTYPE html>
<html lang="nb">
  <head>
    <meta charset="utf-8">
    <title>Sommerleir ved Gransjøen</title>
  </head>
  <body>
    <header>
      <h1>Sommerleir ved Gransjøen</h1>
      <nav>
        <ul>
          <li><a href="index.html">Forside</a></li>
          <li><a href="program.html">Program</a></li>
          <li><a href="praktisk.html">Praktisk info</a></li>
        </ul>
      </nav>
    </header>
    <main>
    </main>
    <footer>
      <p>Gransjøen leirsted · Telefon 123 45 678</p>
    </footer>
  </body>
</html>

Koden ovenfor er en mal for alle de tre sidene. Delene <header> og <footer> er like på alle sidene. Det eneste som er forskjellig fra side til side, er <title> og innholdet i <main>.

  1. Les koden ovenfor. Hvilke kodelinjer må du endre når du lager programsiden?
  2. Lag mappen gransjoen-leirsted med filen index.html. Skriv av koden, og valider siden.

Gjør én side ferdig og valider den før du kopierer den. Da slipper du å rette den samme feilen på tre sider.

Kunden har sendt tekstene som ren tekst. Det er din jobb å bestemme hva som er overskrifter, avsnitt, lister og tabeller, og å merke opp teksten med de riktige elementene.

  1. Kopier teksten nedenfor inn i <main> på forsiden. Merk opp hver del som en <section> med en <h2>, slik overskriftsplanen viser. Bruk <strong> der noe er ekstra viktig, og gjør e-postadressen til en lenke med mailto:.
om-leiren.txt
Velkommen til sommerleiren
Hver sommer arrangerer vi en uke med bading, kanopadling og bål for barn mellom 9 og 13 år. Leiren holder til i det gamle tømmerhuset ved Gransjøen, en halvtime nord for byen.

Hvem kan være med?
Alle barn mellom 9 og 13 år kan være med. Du trenger ikke å kunne svømme for å bli med, men alle som padler kano, må ha på redningsvest.

Leiren i år
Uke 27: mandag 5. juli til fredag 9. juli
Pris: 1900 kr for hele uka, med mat og overnatting
Søsken får 300 kr i rabatt.

Påmelding
Påmeldingen åpner 1. mars. Send en e-post til leir@gransjoen.example med navnet og alderen til barnet.
  1. Legg bildet av badeplassen øverst i <main>, i et <figure> med en <figcaption>. Bruk et bilde du har tatt selv, eller som du har lov til å bruke.

Nedenfor ser du fire <img>-tagger for bildet av badeplassen. Bildet viser tre barn som hopper fra brygga, og en voksen som står på brygga med redningsvest.

Kode A
<img src="bilder/badeplassen.jpg">
Kode B
<img src="bilder/badeplassen.jpg" alt="badeplassen.jpg">
Kode C
<img src="bilder/badeplassen.jpg" alt="Tre barn hopper fra brygga i Gransjøen mens en voksen med redningsvest følger med.">
Kode D
<img src="bilder/badeplassen.jpg" alt="Bilde">

  1. Hvilken av kodebitene gir en skjermleserbruker mest nytte? Hva leser skjermleseren opp for hver av de tre andre?

  2. Lag program.html ved å kopiere index.html. Endre <title>, og tøm <main>. Gjør programmet nedenfor om til en tabell med <caption>, <thead> og <th>. Bruk colspan der en aktivitet varer flere deler av dagen.

program.txt
Program for uka

Dag;Formiddag;Ettermiddag;Kveld
Mandag;Ankomst og omvisning;Badetest i vannet;Grilling og bli kjent-leker
Tirsdag;Kanokurs;Bading;Bål og historiefortelling
Onsdag;Tur til Utsikten (hele dagen);Tur til Utsikten (hele dagen);Stjernekikking
Torsdag;Fiske;Bading;Talentshow
Fredag;Rydde og pakke;Hjemreise klokka 14;Hjemreise klokka 14

Måltider
Frokost klokka 8.30, lunsj klokka 12, middag klokka 17 og kveldsmat klokka 20.
  1. Hvorfor er programmet en tabell, mens måltidene ikke er det? Tenk på hva du lærte i 3.6.
  2. Lag praktisk.html på samme måte. Merk opp teksten nedenfor. Bestem selv hvilke deler som skal være en punktliste, og hvilke som skal være en nummerert liste. Gjør telefonnummeret og e-postadressen til lenker med tel: og mailto:.
  3. Tallene foran trinnene i veibeskrivelsen skal ikke stå i HTML-koden. Hvorfor ikke?
praktisk.txt
Praktisk informasjon

Pakkeliste
sovepose og laken
regntøy og støvler
badetøy og håndkle
lommelykt
drikkeflaske
Mobilen kan være med, men den skal ligge i resepsjonen om natta.

Slik kommer du til leiren
1. Kjør riksvei 4 nordover fra byen.
2. Ta av mot Gransjøen ved bensinstasjonen.
3. Følg skiltene til leirstedet i fem kilometer.
Buss 210 går fra rutebilstasjonen til Gransjøen to ganger om dagen.

Allergier og medisiner
Skriv i påmeldingen hvis barnet har allergier eller trenger medisiner. Kjøkkenet lager all mat uten nøtter.

Kontakt
Leirsjef: Hilde Bakken
Telefon: 123 45 678
E-post: leir@gransjoen.example

Når alle tre sidene er ferdige, ser forsiden omtrent slik ut. Den har ingen CSS, så det er nettleseren som bestemmer skrift og avstander.

index.html
Spør KI

Her er HTML-koden til en side jeg har laget: [lim inn koden]. Ikke rett koden for meg. Pek på steder der jeg kunne brukt et mer passende element, og forklar hvorfor det ville vært bedre for en skjermleserbruker.

Teste og levere

Test Slik tester du Resultat
Koden er gyldig Validatoren, for hver side
Alle lenkene virker Klikk på alle lenkene fra alle sidene
Overskriftene følger overskriftsplanen Skjermleseren, hopp fra overskrift til overskrift
Alle bildene har god alternativ tekst Inspiser hvert bilde
Tabellen har tabelltittel og overskriftsceller Inspiser tabellen
Lister er laget med <ul> og <ol> Inspiser listene
Siden kan brukes med tastaturet Trykk gjennom alle lenkene

En testtabell er en liste over alt du skal teste, hvordan du tester det, og hva som skjedde. Når du fyller ut tabellen, viser du kunden og læreren at du har sjekket hele nettstedet.

  1. Lag en testtabell for nettstedet ditt. Legg til de kravene fra kravlisten som ikke er med i tabellen ovenfor.
  2. Gjennomfør alle testene, og skriv resultatet i tabellen. Rett feilene du finner, og test på nytt.

Skriv i tabellen hva som var galt, og hva du gjorde for å rette det. Det er ikke en svakhet å finne feil. Det viser at du har testet grundig.

Kunden har sagt at flere av foreldrene bruker skjermleser. Derfor skal du også teste med skjermleser, slik du lærte i 4.5.

  1. Slå på skjermleseren, og åpne programsiden. Finn ut hva som skjer onsdag kveld, uten å se på skjermen. Hvordan leser skjermleseren tabellen?
  2. Gi en medelev disse tre oppgavene: Finn ut hva leiren koster. Finn ut hvilken buss som går til leiren. Finn telefonnummeret til leirsjefen. Skriv ned hvor medeleven ble usikker. Hva vil du endre?

Når alt er testet, skal nettstedet leveres. Kunden og læreren må kunne åpne mappen på en annen datamaskin.

  1. Kopier mappen gransjoen-leirsted til et annet sted, for eksempel til en minnepinne. Åpne index.html i kopien. Vises bildet, og virker alle lenkene?
  2. Lag en ZIP-fil av mappen, og lever den slik læreren sier.

Forsvinner bildet når du flytter mappen, har du brukt en adresse som begynner med C:\ eller /Users/. Bruk relative stier, som du lærte i 2.6.

Dokumentere prosjektet

gransjoen-leirsted/dokumentasjon.html
<main>
  <h2>Dokumentasjon: Gransjøen leirsted</h2>
  <h3>Kunden og bestillingen</h3>
  <p>Gransjøen leirsted ville ha et nettsted med tre sider om sommerleiren.</p>
  <h3>Plan</h3>
  <h3>Valg jeg tok</h3>
  <p>Programmet er en tabell, fordi foreldrene skal kunne se hva som skjer hver dag til hver tid.</p>
  <h3>Testing</h3>
  <h3>Kilder</h3>
</main>

Når du dokumenterer et prosjekt, skriver du ned hva du har laget, hvilke valg du tok, og hvorfor. Du skriver dokumentasjonen som en egen HTML-side i mappen, men den skal ikke ha noen lenke i <nav>.

  1. Lag dokumentasjon.html. Bruk malen fra Bygge siden, og fyll <main> med de samme overskriftene som i koden ovenfor.
  2. Under Plan skal du legge inn overskriftsplanene for de tre sidene, for eksempel som nøstede lister.
  3. Under Valg jeg tok skal du skrive minst tre valg, for eksempel hvorfor noe ble en liste eller en tabell. Bruk kravlisten.
  4. Legg inn testtabellen som en HTML-tabell under Testing, og skriv under Kilder hvor bildet kommer fra.
  5. Skriv to eller tre kommentarer i HTML-koden på sidene, der du har gjort noe som ikke er lett å forstå med en gang. Du lærte å skrive kommentarer i 4.3.

Oppsummering

I dette prosjektet har du laget et lite nettsted i ren HTML for en kunde, fra bestilling og plan til testing med validator og skjermleser.

Arbeidsmåten

Del Du lager
Bestillingen en kravliste og spørsmål til kunden
Plan et nettstedskart, overskriftsplaner og en plan for mappen
Bygge sidene en mal for sidene, og sidene med kundens tekster
Teste og levere en testtabell, en test med skjermleser og en ZIP-fil
Dokumentere prosjektet dokumentasjon.html og kommentarer i koden

I Prosjekt 2 arbeider du på samme måte, men da lager du også skisser og gir nettstedet stil med CSS.

Før du leverer

  • Alle sidene er gyldige i validatoren.
  • Alle lenkene virker fra alle sidene.
  • Hver side har én <h1>, og overskriftene følger overskriftsplanen.
  • Alle bildene har god alternativ tekst.
  • Lister er laget med <ul> og <ol>, og tabeller har <caption> og <th>.
  • Filnavnene har små bokstaver, uten mellomrom og uten æ, ø og å.
  • Mappen virker når den er kopiert til en annen datamaskin.

Flere bestillinger

Læreren kan gi deg en av bestillingene nedenfor. Arbeid på samme måte som med Gransjøen leirsted. Be læreren om tekstene, eller skriv dem selv som ren tekst før du begynner å merke dem opp.

Bestilling A: Loppemarkedet i Bakkegata

E-post fra kunden
Hei!

Beboerne i Bakkegata har loppemarked hver høst. Vi vil ha et lite nettsted med en forside om dagen, en side med alle bodene og hva de selger, og en side om hvordan man kan leie en bod selv.

Bodene bør stå i en tabell med nummer, navn og hva boden selger. Ta gjerne med et bilde fra i fjor.

Hilsen Bakkegata velforening

Bestilling B: Fotballskolen

E-post fra kunden
Hei!

Idrettslaget arrangerer fotballskole i høstferien for barn fra 6 til 12 år. Barna deles i tre grupper etter alder, og hver gruppe har egne tider på banen.

Vi trenger en side med tidene for hver gruppe, en side om hva barna skal ha med, og en side med påmelding og kontaktinformasjon.

Hilsen Trenerteamet

Bestilling C: Lokalhistorielaget

E-post fra kunden
Hei!

Lokalhistorielaget har samlet gamle bilder fra bygda. Vi vil ha et nettsted med en tidslinje over de viktigste hendelsene i bygda fra 1850 til i dag, og en side der hvert bilde har en tekst om hva det viser, og hvem som har tatt det.

Mange av medlemmene våre er eldre, og noen bruker skjermleser.

Hilsen Lokalhistorielaget

Undersøk elementene <time> og <details>. Bruk <time> med attributtet datetime for årstallene i tidslinjen, og <details> med <summary> for lengre tekster om hvert bilde. Forklar i dokumentasjonen hvem som har nytte av hvert av de to elementene.