Modul 28. Mere HTML

Ø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.

28.1 Lidt repetition

  • Åben Web Lab og start en ny hjemmeside. Kald den for “Øvelser”
  • Hav en html side parat (f.eks. index.html) og indsæt nedenstående kode. Koden er hentet fra w3schools.com
 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
  • Indsæt kommentarer over de forskellige tags som kort forklarer, hvad de bruges til. Sæt din kommentar over tagget. En kommentar starter med “<!–” og slutter med “–>” Det ser sådan ud her
<!-- Dette er en kommentar -->
  • Bonusopgave: Tjek i Web Labs vejledning hvad de skriver om kommentarer. Kommentarer hedder “Comment” på engelsk. Er der andre måder at lave kommentarer på i HTML?

28.2 Lister

Som du sikkert allerede ved, er der mindst 2 gode steder at søge hjælp til HTML tags. Den ene er W3schools, den anden er Web Lab Documentation. Web Lab har kun det mest nødvendige med, W3schools er kæmpe-mega-stor og har 60 millioner besøgende hver måned. På W3schools kan du teste koden af.

  • Åben weblab og lav et nyt website, som du kalder for “Øvelser”
  • Lav en ny side, som du kalder for “lister.html”. Overskriften på siden dvs. tekst i <h1>, skal være “Lister”. Alle øvelserne i opgaven her skal du sætte ind i lister.html

Der findes 2 slags lister i HTML. Nummererede og unummererede. På engelsk “ordered list” hhv. “unordered list”. Nummereret list er 1., 2., 3 osv, mens unummererede lister er med f.eks. prikker/bullet points.

  • Du skal lave nedenstående 2 lister i dit dokument. Dokumentation
  • Når den er færdig, så lav listen her.
  • Bonusopgave. Prøv, om du kan finde ud af at lave en sådan liste som nedenfor. Tip: Du kan kalde det “en liste i en liste”, og hjælpen er på W3schools.com

28.3 Tabeller

Web Lab Documentation skriver ikke noget om tabeller, så vi bruger W3Schools: https://www.w3schools.com/html/html_tables.asp

  • Gå ind på linket til W3schools og klik på nr. 2 link “Try it yourself” (1).
  • Bagefter klik på knappen Run (2), så du ser hele koden (3).
  • Ud fra det, du ser: Prøv at forklare, hvordan en tabel er bygges op med HTML. Tip:
    • <tr> betyder “table row”, altså en række i tabellen
    • <th> betyder “table header”, dvs. tabel overskrift
    • <td> betyder “table data”, dvs. data i den enkelte celle
  • Lav et nyt dokument på dit site Øvelser, der hedder “tabeller.html” og lav en overskrift, der hedder Tabeller
  • Kopier koden til tabellen fra W3schools til tabeller.html. Tabellen er den, som du fandt frem til lige ovenfor, og den ser sådan ud:
  • I tabel.html ret koden til, så din tabel ser sådan ud:
  • Tilføj en linje med søndag til tabellen

28.4 Link til mobiltelefon og mail

Her er 2 link. Det ene er internt på websitet, det andet er eksternt eller “ud-af-huset”. 

<a href="index.html">Forside</a>
Link til <a href="www.dr.dk" target="_blank">Danmarks Radio</a>

Der findes andre slags link. Det øverste link åbner et mailprogram som f.eks. Outlook, hvis du har et mailprogram installeret. Det nederste vil forsøge at ringe til nummeret, hvis du kikker på det på en mobiltelefon. Begge dele er brugervenligt.

<a href="mailto:info@min-organisation.dk">info@min-organisation.dk</a>
<a href="tel:+4511223344">+45 11 22 33 44</a>

Nedenfor har jeg indsat koden. Opgaven går meget simpelt ud på at teste dem: Virker de?

28.5 Undersøge et site om Ærø

Åben siden her: https://studio.code.org/projects/weblab/EjL_n_mRsCWqi-MsQc81sBQ73dhOOtc06BBKRm-V818/edit eller linket her: https://codeprojects.org/projects/weblab/EjL_n_mRsCWqi-MsQc81sBQ73dhOOtc06BBKRm-V818 og lav en kopi.

Siden handler om Ærø og gør reklame for turismen på Ærø.

  • Hvad kan sitet?
  • Undersøg koden:
    • Hvordan bruges tabeller og lister på sitet
    • Hvordan bruges link på sitet
  • Sæt masser af kommentarer ind, så du f.eks. kan kende link, billeder mv.
  • Nogle af link’sne har et tilføjelse, der hedder “target = “_blank”. Prøv at finde ud af, hvad den gør. Evt. fjern den i et link og se, hvad der sker.
  • Bonusopgave: Lav et link til https://ærøsommerhusudlejning.dk/ på siden med “kontakt os. Brug følgende tekst “Link til Ærø Sommerhusudlejning” og gør den til et link. Er det pænest med korte eller lange link?

28.6 Prøv selv

28.7 Lav dit eget site

Mit site handlede om Ærø. Ærø er det perfekte sted for en cykeltur, en romantisk gåtur eller hygge. Men det appelerer nok ikke så meget til unge, som det gør til børnefamilier og folk på +50 år.

Nu er det din tur: Lav et site om et feriested, som du gerne vil besøge som turist. Alternativt lav et site om fanside for en popstjerne, sportsklub, mode, biler eller lignende. Du må stjæle kode fra andre lige så tosset, du vil, bare du kan gøre rede for koden. Her er kravene:

  • Sitet skal have mindst 3 sider
  • Alle 3 skal have en <h1> overskrift
  • Navigationen/menuen skal være en unordered list med link, og den skal ligge lige under overskriften
  • Man skal kunne navigere mellem alle sider fra alle sider
  • Der skal være et link ud af huset. Lige som jeg linkede til færgeselskaberne på mit Ærø-site
  • Der skal være kommentarer
  • Du skal have koden <meta charset=”UTF-8″> med
  • Der skal være billeder på alle sider
  • Indsæt link under kontakt, så der er link til email og telefon lige som i opgave 28.4

Web Lab understøtter ikke, at man kan indlejre videoer. Men skulle du få brug for at indlejre videoer i andre editorer end Web Lab, så prøv gerne nedenstående af f.eks. på W3Schools. Der vil det virke. Videoen kan hjælpe dig, men jeg har også skrevne vejledninger til YouTube og Google Maps:

Prøv f.eks. at sætte koden her fra YouTube ind på et “Try it yourself” sted hos W3Schools 🙂

<iframe width="560" height="315" src="https://www.youtube.com/embed/7c8U2g7H55Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>