Lektion 23. Start på HTML kodning

Forberedelse

  • Læs kapitel 16 Frontend kode til og med afsnit 16.5. Nærstuder videoen og afsnittene til og med 16.2. De sidste afsnit skal du bare læse kort igennem.
  • Installer Visual Studio Code med extensions. Du kan få hjælp ved at se den 3. video Installer Visual Studio Code, som du finder under Videoer > Videoer 8. SQL, HTML og CSS kode. Brug evt. linket her https://bliv-klogere.ibc.dk/index.php/videoer-8-sql-html-og-css-kode/

Formål

  • Forstå HTML
  • Forstå begreber som sider, sites og hjemmesider
  • Komme i gang med kodning i HTML i Visual Studio Code

Fælles gennemgang

Fra sidst

  • Hvad ER interaktionsdesign
  • Hvad er typografier, farvelære og gestaltlove for noget
  • Hvad kan brugervenlighed være
  • Hvad kan vi bruge Hicks og Fitts love til
  • Brugbarhed kontra brugervenlighed
  • Nævn nogle forskellige brugertest

Lektien til denne gang

  • Forklar HTML og SQL ud fra figuren her
3 lags arkitektur
  • VIS at der er video til stort set alt
  • FORTÆL OM W3schools – din bedste ven på nettet
  • Kod nedenstående hos W3schools i W3schools’ editor. Forklar koden undervejs
  • Kod den tilsvarende i Visual Studio Code arbejdsgang med “Kod-gem (i en projektmappe) – test i Browser – kod – gem – test i browser”

Øvelser

Vigtigt. Når du koder, skal du arbejde alene. Forstået på den måde, at du gerne må sidde sammen med din gruppe og snakke om opgaverne, men du skal selv have “lapperne på knapperne”. Du lærer ikke at kode ved at kikke andre over skulderen. Du lærer ved at prøve, begå fejl og lære af dine fejl. Du lærer også (meget) ved at hjælpe andre.

23.1 Prøv lidt kodning

<html>
<head>
<title>Min hjemmeside</title>
<head>
<body>
<h1>Hej verden</h1>
<p>Jeg koder HTML, <br>og dette er min første hjemmeside.</p>
</body>
</html>
  • Ret i koden, så der står “Hej Store Verden” i stedet for i overskriften, og få det til at virke
  • Ret i brødteksten
  • Tilføj noget brødtekst
  • Gem et skærmfoto af dit resultat

23.2 Noget teori

Se på koden fra før

  • 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

Tip: Kik i afsnit 16.1 i lærebogen.

23.3 Prøv selv

Prøv inde hos W3schools at lave noget kode. Koden skal give en side, der ser ud som nedenfor. Tip: Sætningen “Prøv selv” er lavet med tagget <h2>

23.4 Rode-kode

Mette Messengerhar (igen) haft lidt for travlt med at sende beskeder i timen. Nedenfor ser du hendes kode, som bestemt ikke er noget at prale af.

  • Giv eksempler på regler, hun har brudt
  • Få koden til at virke. Brug gerne editoren hos W3schools.com
  • Hils hende og sig, at man lærer kode bedst ved ikke at sende beskeder 🙂

Mette Messengers kode og resultatet ser du her:

Her er Mette Messenger 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>

23.5 Visual Studio Code

Jeg har valgt, at vi skal arbejde i Visual Studio Code eller bare VS Code. VS Code er en gratis udgave af top professionelle Visual Studio fra Microsoft. Visual Studio er nok det mest brugte editor/udviklerværktøj i verden.

  • Du skal have installeret Visual Studio Code med 2 extensions, hvis du ikke allerede har gjort det.
  • Gennemfør videoen “I gang med Visual Studio Code”, som du finder herunder. Du kan også bruge linket her https://bliv-klogere.ibc.dk/index.php/videoer-8-sql-html-og-css-kode/
  • MEGET VIGTIGT. Du skal installere extension der hedder “Open in Browser”. Der findes også en extension, der hedder “View in browser”. Den skal du undgå!

23.7 Ekstra opgave: Leg med W3schools

Gå ind på W3schools og leg med HTML koden. Start gerne her: Når du finder noget spændende, så prøv at få det til at virke i Visual Studio Code-editoren.