Modul 24. Hjemmesider

Forberedelse

Formål

  • Præsentere HTML og CSS, som man bruger til frontend kodning af hjemmesider
  • Lære de første HTML tags som f.eks. <html>, <body>, <head> m.fl.
  • Blive præsenteret for w3 schools og repl.it. Vi skal bruge repl.it som editor til vores kode

Fælles gennemgang

Fra sidst

Lektien til denne gang

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

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

24.1 HTML start

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>

24.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
  • Når du er færdig: Kopier koden over i et andet dokument, vi skal bruge det til en af de næste opgaver

24.3 Noget teori

Se på koden fra en af de første opgaver og besvar spørgsmålene ud fra din teori:

  • 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

24.4 Repl.it: Vores editor til hjemmesider

Vi kan bruge W3schools til ret meget inden for kodning, men vores arbejde forsvinder, når man opdaterer siden. Derfor har vi brug for en editor, hvor vi kan gemme vores resultater. Det skal vi bruge Repl til.

  • Opret en Repl. Klik på knappen Create Repl (1). Det åbner et vindue Create a Repl. I vinduet skriv HTML (2) og vælg skabelonen HTML, CSS, JS (3). Klik til sidst på knappen Create Repl (4)
  • Klik på Run inde i Repl og se, at koden virker
  • Indsæt koden fra opgave 24.2 som erstatning for koden i filen index.html og se, at den virker lige så godt som på W3schools.com.
    • Klik på filen index.html (1)
    • Slet koden og indsæt koden fra w3schools.com (dvs. koden fra opgave 24.2)
    • Klik på Run (3)
    • Se det færdige resultat (4)

Vigtigt: Brug gerne min vejledning til Repl under Vejledninger > Vejledning 6. Repl https://bliv-klogere.ibc.dk/index.php/vejledning-5-repl-it/

24.5 Rode-kode

Mette Messenger har igen haft lidt for travlt med at sende beskeder på mobilen frem for at følge med i informatiktimen. Så hun har lavet noget kode, der roder noget!

  • Bliv i din repl fra opgave 24.5
  • Lav en ny fil i Repl og kald den mette.html. Det ser sådan ud
  • Sæt koden ind i mette.html. Koden ser du herunder
<!doctype html>
<html>
<head>
<title>Min hjemmeside</title>
<p>HTML kan drille

</head>
<bODY>

<h1>Tags kan drille. Det tag, man sidst er <h>startet med, skal man slutte med først.</h1></p>
<p>HTML virker ofte, også selvom man <h1>laver fejl. Til gengæld bliver det umuligt at arbejde i, hvis der ikke er styr på </h1> koden.</p>

</body>
</THML>
  • Desværre kan man ikke se mette.html, med mindre man laver et link fra filen index.html. Jeg har lavet linket til dig nedenfor. Sæt derfor koden ind i index.html et sted inde i <body> – tagget
<p>Link til <a href="mette.html">Mette Messenger</a></p>

Det ser sådan ud her i index.html filen

  • Test linket ved at klikke på Run-knappen.

Mettes kode og resultatet ser sådan her ud:

Nu kan du gå i gang med selve opgaven.

24.6 Sæt en YouTube video ind på din side

  • Lav en ny HTML side i din Repl. og kald den f.eks. kodetest.html
  • Indsæt følgende kode et sted i <body> sektionen. Kør løsningen. Hvad gør koden?
<iframe width="560" height="315" src="https://www.youtube.com/embed/7c8U2g7H55Q?start=34" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Find selv en video og sæt den ind på din hjemmeside. Du kan få hjælp til at gøre det under Vejledninger > Vejledning 5. Indlejr video fra YouTube med HTML kode https://bliv-klogere.ibc.dk/index.php/vejledning-4-indlejr-video-fra-youtube-paa-en-html-side/S

24.7 Stjæl kode fra W3Schools

Næste gang skal vi arbejde med billeder, tabeller, link og lignende. Men du kan tyvstarte. Du får en række link, som fører dig til W3Schools. Tag koden fra W3Schols og prøv at få det til at virke i din Repl

  • Lister w3schools.com/html/html_lists.asp. Lav f.eks. en liste over de bedste hold i superligaen:
    1. AGF
    2. Midtjylland
    3. (flere klubber, Hobro og Nykøbing FC, som slog FxxxCK ud af pokalen 2021 er da nuttede)
    4. 3. nederst Krikkerne (= Randers)
    5. Næstnederst FxxxCK. (venligst undlad at bruge et “U” her, selvom det kan være fristende)
    6. Nederst selvfølgelig BUNDby. Hvis de da ikke forlængst er rykket ned. I Danmarksserien, vel at bemærk
  • Tabeller: https://www.w3schools.com/html/html_tables.asp
  • BIlleder: w3schools.com/html/html_images.asp. Bemærk: Du skal først uploade et billede til Repl, se Vejledning 6. Repl
  • Prøv at lave et link til AGF’s hjemmeside. Brug koden her. Bemærk at den lille tilføjelse target=”_blank” får linket til at åbne i en ny fane.
<p>Link til <a href="https://www.agf.dk/" target="_blank">AGF</a>.</p>
  • Lav et link til en hjemmeside, du bestemmer selv hvilken