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

Forberedelse

  • 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

Øvelser

25.1 Lister

Lav en ny side i en Repl og kald den “Excercises”.

Lav først en liste, der ser sådan ud

  • AGF
  • Liverpool
  • Dortmund
  • … temmeligt mange klubber inklusive Kolding IF og Døllefjellemusse
  • BUNDby

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

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

  • 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 koden her ind i 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 fjern alt 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 Tid til 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
  • Hvordan har jeg sat billeder ind
    • 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 med visse gul-blå undtagelser. 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
  • Bemærk: Der er langt fra det, vi laver her, og så til de hjemmesider, du kan lave i Wix. Men det er den samme kode!
  • Krav:
    • Du skal have mindst 2, gerne 3 eller flere html sider
    • Der skal være billeder på alle sider
    • Der skal være mindst 1 YouTube video
    • Du skal bruge en tabel mindst 1 sted
    • Der skal være et link ud af huset
    • Du skal have en menu øverst, som skal være en liste. I menuen skal der være link til alle dine sider
  • 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