Modul 25. Tabeller, lister, video, Google Maps, link og sites

Forberedelse

  • Hvis du ikke allerede er det: Opret dig som bruger på https://repl.it. Brug gerne min vejledning til Repl under Vejledninger > Vejledning 6. Repl https://bliv-klogere.ibc.dk/index.php/vejledning-5-repl-it/
  • Læs/genlæs afsnit 16.4 og 16.5 om hhv sider, sites og separation of conserns
  • Læs afsnittene 16.6 Mer’ HTML: Tabeller, billeder, lister, links, 16.7 Iframes og 16.8 Undgå problemer med æ, ø og å. Dvs. resten af kapitel 16

Formål

  • Arbejde videre med HTML, herunder link, lister, tabeller og video
  • Lave et site

Fælles gennemgang

Fra sidst

3 lags arkitektur
  • Alle hjemmesider i hele verden er skrevet i HTML og CSS. De bruges kun frontend
    • HTML laver indhold samt en lille smule udseende
    • CSS laver kun styling. Dvs. farver, former mv.
    • JavaScript laver alt det dynamiske. F.eks. animation, lægge tal sammen mv. Koden bagved i App Lap er javaScript. JavaScript kan som det eneste sprog af alle bruges både frontend, backend og i databaser
  • Strukturen i HTML kode
Head og body i html
  • Gennemgå basiskode på W3schools
    • Hvordan fungerer tags (åbne/lukkede tags)
    • Hvad bruger vi <html> til
    • Hvad bruger vi <title>, <h1> og <p> til
    • Hvad er “semantiske tags”, hvad bruger vi dem til, og hvilke 2 semantiske tags findes ovenfor.
    • Hvad er forskellen på en side og et site
    • Hvad skal forsiden på et site altid hedde – og overholder Repl det?

Lektien til denne gang

Fælles øvelse: Lav en skabelon for HTML sider

  • Åben en notesblok eller andet, du noterer i
  • Gå ind på w3schools under HTML og kopier noget simpel kode
  • Ret det til, så det kun indeholder DET MEST NØDVENDIGE. Dvs. det, som ALLE html-sider skal have som minimum
  • Sæt kommentarer ind i <head> og <body> om, hvad de skal indeholde. Du laver en kommentar sådan her:
    • <!– her kommer kommentaren –>.
  • Gem dit arbejde, for der vil komme flere ting

Øvelser

Inden du går i gang: Hold ORDEN og gør det nemmere for dig selv at finde fejlene .

VIGTIGT: Alle opgaver skal laves i Repl.it

25.1 Lister

Lav en ny Repl og kald den “Excercises”.

Lav først en liste, der ser sådan ud. VIGTIGT: Husk nu at du altid skal have <html>, <head> og <body> tags med :-). Tip. Brug W3schools: w3schools.com/html/html_lists.asp

  • AGF
  • Liverpool
  • Dortmund
  • … temmeligt mange klubber inklusive Døllefjellemusse, Snave og hvad der nu ellers er af klubber med sjove bynavne
  • Varde (som har slået BUNDby ud af pokaltuneringen som 2. divisionshold)
  • Skagen (som har slået BUNDby ud af pokaltuneringen som Danmarksseriehold)
  • BUNDby (b-UN-iteD)

Bagefter skal listen se sådan ud:

  1. AGF
  2. Liverpool
  3. Dortmund
  4. … temmeligt mange klubber inklusive Kolding IF og Døllefjellemusse
  5. BUNDby

Så kommer det svære: Lav en indrykning. Tag koden her og sæt den ind i din Repl. Se, hvordan den virker. Inden du sætter den ind: Lav et par mellemrum, så den står for sig selv væk fra den anden liste.

<ul>
      <li>AGF</li>
      <ul>
        <li>Aarhus Fremad</li>
        <li>Skovbakken</li>
      </ul>
      <li>FC Midtjylland</li>
    <ul>
  • Forklar, hvordan det kan lade sig gøre at lave en indrykning

25.2 Tabeller

Gå ind på W3Schools på https://www.w3schools.com/html/html_tables.asp.

Hvis du vil se video, så har W3 nogle gode videoer her: https://www.w3schools.com/videos/index.php

  • Hvordan bygger man en tabel op
  • Prøv at fjerne den nederste række i koden hos W3Schools. Tag et skærmfoto af dit resultat
  • Sæt nedenstående kode ind din Repl. Tilføj en ny række, hvor der under Ugedag skal stå “Søndag” og under Åbningstider skal der stå “Lukket”
  • Prøv at fjerne tekst i den øverste linje, så der kun står <table> og ikke <table style=”witdth:50%”>. Hvad sker der
<table style="width:50%">
  <tr>
    <th>Ugedag</th>
    <th>Åbningstider</th>
  </tr>
  <tr>
    <td>Mandag - fredag</td>
    <td>10 - 17</td>
  </tr>
  <tr>
    <td>Lørdag</td>
    <td>9 - 13</td>
  </tr>
</table>

25.3 Undersøg et site

Jeg har lavet et site om Ærø på https://replit.com/@LarsLjungqvist/Site-for-AEro#index.html. P

  • Surf rundt på sitet og få klikket på alle link. Hvad kan sitet
  • Forklar, hvordan jeg har sat billeder ind. Tip: Det står i vejledningen om Repl https://bliv-klogere.ibc.dk/index.php/vejledning-5-repl-it/
  • Find koden, der linker mellem siderne og forklar, hvordan den virker
  • På forsiden er der et link til færgerne til Ærø. Test links’ ne af og forklar, hvordan koden virker
  • Hvordan har jeg lavet listen
  • Det billede, jeg har sat ind på forsiden, har jeg kaldt “aeroe.jpg”. Hvorfor mon jeg ikke bare har kaldt det for “ærø.jpg”? Æ = ae og ø = oe på andre sprog end dansk
  • På den sidste side, “Kontakt”, kan du downloade en pdf-brochure. Hvilken kode kan få det til at lykkedes
  • Også på den sidste side, “Kontakt”, har jeg fået billederne nederst til at stå lidt som på et skakbræt. Hvordan kan det lade sig gøre
  • Hvad gør koden <meta charset=”utf-8″>
  • Svært spørgsmål, du skal nok slå det op: Hvad gør koden <meta name=”viewport” content=”with-device-width”>

25.4 Dit eget site

  • Lav dit eget site i Repl. Vælg mellem følgende emner:
    • Kageopskrifter
    • Tøj
    • En fanside for en popstjerne inklusive K-pop eller en sportsklub bare ikke noget med gult undtagen Dortmund, Aarhus Fremad og uruguaianske Peñarol. Gult er grimt 🙂
    • Biler
    • En feriedestination. Ærø er en værre pensionist-ø, det er derfor, at jeg kommer der :-). Du må gerne genbruge kode fra mit Ærø-site, men du vil måske hellere lave for en festival eller andet, der tiltrækker unge
    • Selvvalgt emne
  • Måske synes du ikke, at siderne er så flotte som i Wix. Men siderne i Wix er 100% lavet i den samme kode, som du bruger her.
  • Krav:
  • Tip: Kopier endelig løs af koden fra andre sites inklusive min og W3Schools. Kopier også løs internt i din Repl, så du ikke skal starte forfra på de nye sider
  • Imponer mig: Find selv kode hos W3Schools som du sætter ind og får til at virke