Modul 27. Start med hjemmesider

Øvelser

Inden du går i gang: Kodeøvelser er individuelle. Dvs. du må gerne sidde sammen med andre og diskutere øvelserne, men du skal lave dem individuelt på din egen computer. Dvs. jeg-kikker-bare-på-hans-computer løsningen er ikke hverken gangbar eller acceptabel.

27.1 HTML start. W3schools er din bedste ven på nettet

Gå ind på w3schools.com. Til højre ser du kode. Klik på knappen Try it yourself. Klik på den

  • I det nye vindue: Kik koden efter. Prøv at forklare strukturen med <html>, <head>, <body>, <title>, <h1> og <p>

27.2 Lav om på kodens udseende

  • Prøv om du kan lave om på koden inde i W3schools’ editor fra opgave 24.1 så du i vinduet til højre får noget, der ser cirka sådan ud her

  • Sæt kommentarer ind i koden. Du laver en kommentar ved at skrive “<!–” foran kommentaren og “–>” efter kommentaren, og det står med grøn skrift nedenfor. Det kan se sådan her ud. Bemærk at kommentarer ikke påvirker koden.

  • Når du er færdig: Kopier koden over i et andet dokument (f.eks. i OneNote, NotePad eller Word), vi skal bruge det til en af de næste opgaver
  • Sæt nedenstående ind og se, hvordan det virker.
    • Hvordan vil du forklare tags’ne <h2> og <br>
    • Et af de 2 tags <h2> og <br> er åbent, det andet er lukket. Prøv at forklare, hvad der menes med det
    • Hvad sker der, hvis du fjerner <br> tagget?
    • Hvad sker der, hvis du retter <h2> til <h3> og samtidig retter </h2> til </h3> ?
    • Hvad så hvis du retter <h3> til <h1> men beholder </h3>. Det er en åbenlys fejl, men hvordan reagerer koden på det?
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Informatik</h1>
<h2>Kodning</h2>
<p>Kodning er det mest fantastiske i verden ... når det virker.<br> Hvis det ikke virker, så man man godt blive både irriteret og utålmodig</p>
</body>
</html>
  • Bonusopgaver 1
    • Lav selv et nyt afsnit, hvor du bruger <h3>. Hvordan virker <h3>?
    • Sæt nedenstående ind i din kode. Hvordan virker det, og hvor skal det stå … i <head> eller <body> sektionen? 
          <p>Man kan også skrive med <strong>fed </strong> skrift</p>
  • Bonusopgave 2
    • Søg på w3schools og find ud af, hvordan man laver skråskrift. Skråskrift hedder Italics på engelsk.

27.3 Prøv Web Lab

Del 1 af opgaven: Undersøg en hjemmeside

Åben Web Lab og lav en kopi af siden her: https://studio.code.org/projects/weblab/GxKlVjloEOjkAorexaZhPxUrZyLPhEsGs68ju-Bofx4/edit

Hvis det ikke virker, så kan du lave en kopi ved først at logge ind på www.code.org. Bagefter åbner du linket i en browser (1), og til sidst klikker du på linket Wiev code nederst (2).

  • Prøv den af: Hvordan virker hjemmesiden?
  • Gå koden efter 2 og 2. Prøv at genkende kode og skriv kommentarer ind i koden.
    • Man skriver kommentarer LIGE OVEN OVER den kode, man kommenterer
    • Koden til kommentarer
    • Hvor sættes billedet ind henne
    • Hvor er linket henne

Del 2 af opgaven: Ret i koden

  • På siden index.html:
    • Ret “Børge” til “Balder”
    • Nogle steder i teksten mangler der sluttags. Tilføj sluttags
    • Andre steder passer starttag og sluttag ikke sammen. Ret det
    • Ret teksten i linket ffra “i en lærebog” til “mit liv”
  • På siden om-mig.html
    • Ret teksten til, så den står pænt i tags. Dvs. lav overskrifter og brødtekst, men du behøves ikke at lave teksten om.
    • Lav et returlink til siden index.html

27.4 Web Lab: Vores editor til hjemmesider

Jeg vil bruge Web Lab. Den findes under www.code.org, som du kender i forvejen fra App Lab. Det står dig dog frit for, hvis du vil bruge en anden editor.

Gennemfør videoen, som giver dig en intro til Web Lab.

27.5 Lav dit eget site

Lav et site i Web Lab. Det kan være om dig selv, dit kæledyr, hamsternes befrielsesfront (som en elev med god humor lavede en gang) eller din favorit hobby. Krav:

  • Der skal være en forside med 2 undersider
  • Du skal kunne navigere rundt mellem siderne
  • Der skal være overskrift(-er), brødtekster og billeder på alle siderne
  • Sæt koden her <p>Klik på <a href=”https://www.dkk.dk/race/cavalier-king-charles-spaniel” target=”_blank”>mig</a>.</p>. Hvad gør koden
  • Sæt kommentarer ind
  • Bonusopgave: Gå ind på W3schools og prøv at anvend f. eks. en punktopstilling (“list”) eller en tabel (“table”).
  • Bonusopgave: Sæt en 2 x 2 tabel ind, og sæt billeder ind i tabellen