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

  • 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å Run inde i Repl og se, at den virker
  • Indsæt koden fra opgave 24.2 og se, at den virker lige så godt som på W3schools.com

Hvis du er i tvivl om noget med Repl. Spørg mig eller brug min vejledning på

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

ScoreKaj har (igen) haft lidt for travlt med at sende (ret så) kærlige SMS’er til FlirteFie. Så han har (igen) ikke helt hørt efter i timen. Nedenfor ser du hans kode, som bestemt ikke er noget at prale af.

Lav en ny fil i Repl og kald den scorekaj.html. Sæt koden ind i filen og klik på Run-knappen.

  • Giv eksempler på regler, han har brudt
  • Få koden til at virke. Brug gerne editoren hos W3Schools eller bedre: Opret en ny fil i din Repl og indsæt og test koden
  • Hils ham og sig at FlirteFie foretrækker at date fyre, der er dygtige til informatik. Især op til årsprøver og eksamen, for har ScoreKaj store muligheder for at gøre positivt indtryk på FlirteFie. Så han må hellere lægge mobiltelefonen væk i timerne

ScoreKajs kode og resultatet ser du her:

Her er ScoreKajs kode:

<!doctype html>
<html>
<head>
<title>Min hjemmeside</title>
<p>Overskrivt: Jeg må ikke bruge mobil i timerne

</head>
<bODY>

<h1>Det er svært <p> at koncentrere sig.</h1></p>
<p>Hvis man bruger mobilen alt for meget.</h1>eller hvis man gamer i 
timerne</p>

</body>
</THML>

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
    6. Nederst selvfølgelig BUNDby. Hvis de da ikke forlængst er rykket ned.
  • 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