Lektion 24. Mer’ HTML

Forberedelse

Formål

  • Arbejde videre med HTML
  • Arbejde med tabeller, link, billeder, lister og iframes

Fælles gennemgang

Fra sidst

  • Forstå HTML
  • Hvordan ser en basis hjemmeside ud, når man koder den
  • Nævn regler for HTML
  • Hvad er et site, en side og en hjemmeside
  • Hvad betyder konventionen “separation of concerns”, og hvad kan vi bruge den til i vores kode-hverdag

Lektien til denne gang

  • Samle op på kodning fra sidst
  • Vis hvordan man kopiere koden fra opgaven ind i Visual Studio Code i et html-dokument
  • Vis tagget <meta charset=”utf-8″> og hvorfor, at det er vigtigt
  • Lav en site mappe og lav separation of concerns. Her har jeg lavet en mappe på mit skrivebord, der hedder “Opgavesæt24”
  • Inde i mappen laver jeg en mappe til øvelserne. Her gemmer jeg alle mine html dokumenter
  • Lav en ekstra mappe til billeder inde i mappen “Opgavesæt24”, som du kalder for “images” Det ser sådan ud
  • Nu skal du åbne mappen fra Visual Studio Code. Det gør du inde fra File > Open folder (pc) eller File > Open workspace (mac)
  • Så ser det sådan ud
  • Bemærk: Hvis du ikke ser panelet “Explorer”, så kan du åbne det i Visual Studio Code fra View > Explorer

Øvelser

Inden du går i gang:

  • Arbejd i Visual Studio Code. I videoen fra sidste lektion kan du se, hvordan man opretter nye filer
  • Se videoen herunder igennem bid for bid. Den viser dig, hvordan du laver dagens opgaver

24.1 Repetition

  • Forklar, hvordan koden nedenfor virker
  • Forklar specifikt, hvad tags’ne <html>, <title>, <head> og <body> samt <h1>, <p> og <br> gør
  • Hvilket system er der i måden, som der kodes på
  • Hvad er der galt med koden her <h1>Overskrift<p></h1>Brødtekst</p>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

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

</body>
</html> 

24.2 Koden meta charset=”utf-8″>

Hvis du er uheldig, så får du noget, hvor browseren slet ikke kan finde ud af æ, ø og å.. Nettet kan ikke lide andre bogstaver end folk fra engelsktalende lande kender, så hvis du har en tekst med æ, ø og å, så kan du godt risikere nedenstående.

  • Lav et nyt, tomt html dokument i Visual Studio Code
  • Gem dokumentet som opgave24-2.html
  • Indsæt koden nedenfor
  • Gem dokumentet og se det i en browser
<!DOCTYPE html>
<html>
<head>
<title>Dette er en test på æ, ø og å</title>
</head>
<body>

<h1>Ærøskøbing ligger på Ærø og ikke på Årø</h1>
<p>Dette er en test på æ, ø og å</p>

</body>
</html>

Nogle browsere vil som sagt ikke kunne skrive æ, ø og å. Løsningen er at sætte et taget <meta charset = “UTF-8”> ind i <head> – området. Du skal ikke skrive “<head>” og “</head>”, hvis du har skrevet det i forvejen. Se evt. https://www.w3schools.com/TAGs/att_meta_charset.asp.

24.3 Lister

Inden du går i gang: Du kan få hjælp her https://www.w3schools.com/html/html_lists.asp.

  • Lav et nyt, tomt html dokument i Visual Studio Code
  • Gem dokumentet som opgave24-3.html
  • Indsæt koden nedenfor
  • Gem dokumentet og se det i en browser
<!DOCTYPE html>
<html>
<body>

<h2>An Unordered HTML List</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

<h2>An Ordered HTML List</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 
  • Hvordan fungerer koden bag en liste
  • Den øverste liste starter og slutter med tagget <ul> (står for “unordered list”. Den nederste liste starter og slutter med tagget <ol>. Ellers er koden ens. Hvad er forskellen på de 2
  • Lav en kopi af den øverste liste og sæt koden ind. Ændr i listen, så der ikke står “Coffee, Tea, Milk”, men i stedet “AGF, Dortmund, Barcelona”.
  • Sæt listen nedenfor ind lige ovenover, hvor <body> tagget slutter (dvs. lige før tagget </body>). Gem dokumentet og se det i en browser. Hvad gør koden
<ul>
  <li>Coffee</li>
  <ul>
     <li>Coffe with sugar</li>
     <li>Coffe with creme</li>
     <li>Expresso</li>
  </ul>
  <li>Tea</li>
  <li>Milk</li>
</ul> 

Kod til sidst en liste, der ser sådan her ud:

24.4 Tabeller

Inden du går i gang: Du kan få hjælp her: https://www.w3schools.com/html/html_tables.asp.

  • Lav et nyt, tomt html dokument i Visual Studio Code
  • Gem dokumentet som opgave24-4.html
  • Indsæt koden nedenfor
  • Gem dokumentet og se det i en browser
<!DOCTYPE html>
<html>
<body>

<h2>Basic HTML Table</h2>

<table style="width:100%" border="1">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

</body>
</html>
  • I tagget <table> ser du noget ekstra kode. Det ekstra kode er egenskaber ved tabellen. Prøv først at fjerne at fjerne koden “style=”width:100%”. Se tabellen i en browser: Hvad er der sket?
  • Bagefter fjern koden “border=”1″”. Hvad sker der så
  • Sæt de 2 egenskaber tilbage igen. Prøv at lav tabellen her
  • Prøv at tilføje en ekstra række, hvor fodboldholdenes hjembyer skal stå. De er “Aarhus”, “Dortmund”, “Malmø Vest”
  • Ekstra opgave. Prøv at lave denne ret almindelige tabel.

24.5 Billeder

Inden du går i gang: Du kan få hjælp til billeder på https://www.w3schools.com/html/html_images.asp

  • Start med at se på siden her: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_trulli. Hvilken html kode bruger W3schools for at få billedet vist
  • Lav et nyt, tomt html dokument i Visual Studio Code
  • Gem dokumentet som opgave24-5.html
  • Indsæt koden nedenfor som er den samme, som du lige har set hos W3Schools
  • Gem dokumentet og se det i en browser
  • Du vil se, at billedet nu ikke vises. Det er fordi, at “stien” til billedet ikke virker
<!DOCTYPE html>
<html>
<body>

<h2>HTML Image</h2>
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">
</body>
</html>
  • Prøv at sætte nedenstående kode ind i stedet for <img src=”pic_trulli.jpg” alt=”Trulli” width=”500″ height=”333″>. Det skulle gerne virke. Prøv, om du kan forklare, hvorfor det pludselig virker.
<img src="https://www.w3schools.com/html/pic_trulli.jpg">

  • Nu skal du holde tungen lige i munden. Download billedet nedenfor og gem det som agf.jpg. MEGET VIGTIGT: Du skal gemme det i SAMME MAPPE som dér, hvor du har gemt opgave24-5.html, ellers virker det ikke
  • Opdater Visual Studio Code, så du kan se billedet inde i Explorer i Visual Studio Code. Så skulle det gerne se sådan ud:
  • Sæt så koden her ind i dit html dokument. Billedet skulle gerne være synligt nu
<!DOCTYPE html>
<html>

<head>
    <title>AGF forside</title>
</head>

<body>
    <h1>KSDH = KåmSåDeHVIIIIII</h1>
    <p>AGF er et fantastisk fodboldhold, som spiller teknisk flot fodbold og altid gennemtværer alle modstanderne (i
        hvert fald nogle gange).</p>
    <img src="images/agf.jpg">
</body>

</html>

24.6 Link

Kik i lærebogen afsnit 16.6 Mer’ HTML… og se, hvordan man laver link. Du kan også godt bruge siden her hos W3Schools: https://www.w3schools.com/html/html_links.asp.

  • Lav et nyt, tomt html dokument i Visual Studio Code
  • Gem dokumentet som opgave24-5.html
  • Indsæt koden nedenfor
  • Gem dokumentet og se det i en browser
<!DOCTYPE html>
<html>
<body>

<h1>HTML Links</h1>

<p>Link til AGF's hemmeside: <a href="https://www.agf.dk/">AGF</a></p>
<p>Link til <a href="https://www.dr.dk/">Danmarks Radio</a><p>

</body>
</html>
  • Tilføj 2 linjer mere med link efter eget valg. Det kan f.eks. være link til https://tv2.dk/, til Facebook https://www.facebook.com eller til min hjemmeside https://bliv-klogere.ibc.dk/

Bemærk: Hvis denne opgave skal virke, skal du have en html side i forvejen i din sitemappe. F.eks. hvis du har løst opgave 24.5 og har gemt opgavens html dokument som “index.html”.

  • Sæt koden her ind i link.html et sted i <body> sektionen
  • Test det af. Du skulle meget gerne nu have et link til siden “index.html”
<p>Link til <a href="opgave24-5.html">opgave24-5</a></p>

24.7 Video

Det er enormt nemt at indsætte videoer fra YouTube. Du kan kopiere HTML koden og sætte den ind. Jeg viser i videoen hvordan, men nu skal du prøve det af:

  • Lav et nyt, tomt html dokument i Visual Studio Code
  • Gem dokumentet som opgave24-7.html
  • Indsæt koden nedenfor
  • Gem dokumentet og se det i en browser
  • Nyd videoen. Bemærk at jeg bare har kodet alt kode, der starter og slutter med “<iframe”, fra YouTube
  • Prøv bagefter selv at finde en video fra YouTube, som du kan sætte ind i et html dokument
<!DOCTYPE html>
<html>
<body>

<h1>Video</h1>

<p>Nyd denne skønne video</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7c8U2g7H55Q?start=35" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</body>
</html>

24.8 Lav et site

Nu skal du lave en hel hjemmeside. Emnet er AGF, men du må gerne lave en hjemmeside om et andet emne, hvis du har lyst (minus Brø…. undskyld Bundby, selvfølgelig. Gult er grimt!). Bare din hjemmeside har en tabel, en indlejret video, en punktopstilling og link mellem siderne.

VIGTIGT: Gem din opgave, vi skal bruge den i næste øvelsesgang.

Koder til opgaven:

Forsiden til AGF sitet. Gem koden som index.html.

<!DOCTYPE html>
<html>

<head>
    <title>AGF forside</title>
</head>

<body>
    <h1>KSDH = KåmSåDeHVIIIIII</h1>
    <p>AGF er et fantastisk fodboldhold, som spiller teknisk flot fodbold og altid gennemtværer alle modstanderne (i
        hvert fald nogle gange).</p>
</body>

</html>

Den næste side til AGF sitet. Gem koden som agf_triumfer.html

<!DOCTYPE html>
<html>

<head>
    <title>AGF forside</title>
</head>

<body>
    <h1>KSDH = KåmSåDeHVIIIIII</h1>
    <p>AGF er et fantastisk fodboldhold, som spiller teknisk flot fodbold og altid gennemtværer alle modstanderne (i
        hvert fald nogle gange).</p>
</body>

</html>

Sidste side til AGF sitet: agf_shop.html

<!DOCTYPE html>
<html>

<head>
    <title>AGF fanshop</title>
</head>

<body>
    <h1>AGF fanshop</h1>
    <p>AGF har en fanshop</p>
    <p>Du kan bruge linket her:</p>
    <p>Ellers er åbningstiderne nedenfor</p>
</body>

</html>

Billeder til opgaven

Her er 2 billeder, som du kan bruge til opgaven. Gem dem i mappen images lige som i opgave 24.5 om billeder.

AGF’s Bror Blume jubler med fansene efter nok en sejr
AGF fans. KåmsådeHVIIIIIII

24.9 Ekstra opgave. Leg med W3schools

Find kode, jeg ikke har gennemgået, og prøv det af på dit site. Lav gerne ekstra sider, hvor du prøver det nye af.