HTML-programmering i 8. klasse

Hardware, software, programming – Yes! Kan vi lære at hacke? Kan vi bryde ind et eller sted? Kan vi lave en virus? Den forestilling og høje forventninger 
til dét at kode, møder mange elever ind til faget IT med. Andre er skeptiske 
og frygter, at faget er meget svært og kompliceret, og at de ikke vil kunne finde ud af det. Faget IT kræver koncentration, men er ikke svært. Eleverne kommer ikke til at lave en virus eller hacke noget som helst, men får alligevel en fornemmelse af det, ved at lege med og selv skrive kode, og forventninger bliver for de flestes vedkommende både indfriet og pillet ned.

På 7. klassetrin i faget IT på Steinerskolen i København, arbejder eleverne bl.a. med en konkret forståelse af computerens ydre hardware og software, altså det man umiddelbart kan se på en computer. Hardware: hvilke indgange har din computer, hvad kan de bruges til, hvad betyder de symboler og tal på dit tastatur, som du ikke normalt bruger osv.? Software: hvad betyder ikonerne nederst på din skærm, hvad er stisystemer, hvor finder jeg mine programmer, skal jeg også tømme skraldespanden på min computer osv.? 

På 8. klassetrin går vi videre med forståelsen af computeren, men nu med den indre hardware og software, altså det man ikke umiddelbart kan se. Hardware går ud på, at forstå den fysiske del af computeren – hvordan og af hvad er den sat sammen? Hvordan fungerer den? Dette undersøger vi ganske enkelt at skille en computer 
ad, se på sagerne og forsøgsvis samle den igen. Det er en spændende forløb og er beskrevet 
i artiklen CPU, CPU – jeg har fundet CPU’en! #3/2018. Efter hardware går vi videre med forløbet software, som artiklen her skal handle om.

Alt, hvad der er programmeret kaldes software, og softwarens opgave er at fortælle, hvad computeren skal gøre. Det gør software ved at modtage data, udføre opgaver og levere et output, for eksempel i form af, at din spiller sparker til bolden i FIFA, din snap bliver sendt, eller et klik åbner den hjemmeside, du har søgt på. Forståelsen, af hvordan det sker, er målet med forløbet programmering.

Man kan programmere på mange niveauer, men grundlæggende kan programmering sammenlignes med at bygge med legoklodser. Hver legoklods har en farve, en form og en funktion, det har hver kodelinje, du skriver, også. At forstå programmering handler om at forstå de forskellige kodelinjers funktion, sætte dem rigtigt sammen og derved bygge for eksempel en app, et spil eller en hjemmeside op. I princippet foregår det på samme måde, som hvis du ville bygge en borg op i lego med en hovedindgang, der leder til forskellige rum med forskellige formål.

HTML

Alt online, alle hjemmesider er skrevet i html – HyperTextMarkupLanguage. Både HTML og www, WorldWideWeb, blev udviklet af Tim Berners-Lee omkring 1990, med det ene formål at kunne give forskere på universiteter verden over mulighed for at dele og tilgå hinandens resultater. Man kan måske sige, at Tim Berners-­Lee mere end lykkedes med sit projekt, for samtidig skabte han internettet, som vi kender det i dag. Det er stadig www. vi er på og alt er stadig bygget op om html.

Der findes mange andre programmeringssprog end html, men da det er forståelsen af, hvordan det vi hver dag ser på, kommunikerer gennem og arbejder og leger med på vores telefon og på vores computer, er bygget op, der er grundideen bag forløbet, har jeg valgt, at det er html eleverne skal arbejde med. Html er i øvrigt ganske simpelt at lave øvelser i. Alle kan skrive en side i html.

Vi hacker – næsten – hjemmesider

Vi starter programmeringsforløbet med at se på en tilfældig hjemmeside. Jeg har både gjort det ved, at vi sammen ser på en side på storskærm, og ved at eleverne åbner hver sin side.

Sidstnævnte giver selvfølgelig mulighed for, at hver elev kan lege med, mens førstnævnte bliver et fælles projekt, som bestemt også har sine fordele, specielt når vi skal kigge lidt på koden og prøve at forstå, hvordan den er bygget op. Når vi har fundet en side taster vi crtl-i på pc eller cmd-alt-i på mac. Nu deles siden op i to og man ser både sidens kildekode samt siden, som vi normalt ser den. Øverst i kildekoden vil der altid stå: <!DOCTYPE html> hvilket viser, 
at siden er bygget op om en HTML struktur. 
Det sjove her er, at eleven ud over at kunne se koden, og at vi sammen kan analysere den, også kan ændre i den. Finder man for eksempel det sted, hvor sidens baggrundsfarve er defineret, typisk under elements/styles/background-color: #cc2020; så kan eleven selv ændre baggrundsfarven. Tekstfarver, tekststørrelser er også sjove at lege med. Selve teksten kan nogle steder også ændres. Denne leg med kode er sjov og eleven oplever øjeblikkeligt, hvordan og hvorfor koden ændrer den visuelle visning af siden. Det hele foregår kun på vores egne skærme – eleven kan ikke gøre noget galt her.

Nu har eleverne «hacket», brudt ind i, og leget med en rigtig, eksisterende kildekode og på den måde fået et indblik i, hvad en kode er. Inden eleverne selv skal i gang med at skrive deres egen kode og dermed bygge deres egen side op, udtænker de enkeltvis eller i grupper en ide til en hjemmeside, et simpelt spil eller lignende. Det skal være noget de har lyst til at arbejde med, for selvom programmering ikke nødvendigvis 
er så svært, så er det tålmodighedskrævende. Ideen til hjemmesiden eller spillet skal tegnes ned på papir. Tanker om tekst, billedindhold, links, farver, placering af elementer, evt. antal undersider osv. skal være med. Disse tegninger sender vi til vores gæstelærer, programmør Søren Kopp Christensen, som udfra elevernes ideer planlægger selve programmeringsforløbet.

Programmør-Søren

I selve programmeringsdelen er det Søren, der er hovedlærer, og jeg assisterer og hjælper til, så godt jeg kan. I kraft af sin profession kan Søren svare på langt de fleste spørgsmål og individuelt guide eleverne i deres hjemmesider eller spil, og også fortælle, hvad der er muligt, og hvad der vil være for krævende. Jeg oplever, at det giver en «rigtig» oplevelse af at arbejde med programmering, hvor til- og fravalg, udfordringer og fejl, bliver forklaret, forstået og prøvet af på egen hånd, på en måde, som det ikke ville være muligt for mig at gøre.

Søren lader eleverne starte ud i textedit, notesblok eller et hvilket som helst tekstprogram, 
der genererer ren tekst, og som de har på deres computer. Her skriver de deres første kode i HTML og tester den i en browser. Testen kan foregå lokalt og behøver ikke at gøres online. 

Programmering i sammenhæng 
/ Bit, byte, kilobyte

Forløbet har ikke til hensigt at lære eleverne 
at programmere, men at give eleverne indblik 
i hvad programmering er og at opleve en flig af arkitekturen bag alt det, vi dagligt benytter os af online. Denne flig, denne snert af forståelsen af noget, er hovedmålet for alle temaerne i IT-planen og derfor står et forløb som program­mering ikke alene, men indgår i en sammen­­hæng, hvor både teknisk forståelse og historisk forankring er vigtige dele. Ud over at programmering ligger i forlængelse af forløbet hardware, så kommer vi også omkring computerens historie og Alan Turing, som af mange anses for at være skaberen af den computer, som vi kender den i dag.

Den matematik som Turing gør brug af i sine dechifreringsmaskiner, er den samme som ligger i computeren i dag. Selv om computeren fysisk set har ændret sig rigtigt meget siden dengang, hvor én computer kunne fylde en hel kælder, for kun omkring 75 år siden, så har matematikken, den måde en computer beregner på, ikke ændret sig synderligt. Turings maskiner og også computeren, som vi sidder med i dag, er baseret på det binære talsystem og ikke titalssystemet, som vi kender og normalt regner med. Derfor arbejder vi i forbindelse med forståelsen af computerens software, i programmering, også med binære tal.

Det en computer arbejder med er data. Den mindste enhed af data kaldes bit. Bit, byte, kilobyte, megabyte, gigabyte osv. En bit kan have to tilstande, den kan være tændt og den kan være slukket, og det er her de berømte binære cifre 0 og 1 kommer ind, når vi taler om computere. En del af undervisningen bliver derfor også, at eleverne leger med binære tal.

Det vil sige, at inden vi kommer til det egentlige arbejdet med programmering og HTML, så har eleverne også været gennem hardware, computerens udviklingshistorie og har leget med binære tal, i arbejder med at give eleverne en bredere forståelse af hvad nettet, computeren, hardware, software er – også i en historisk sammenhæng.

Hvad gør HTML?

Det HTML-koden gør, er at dele arbejds­området op i først 2 hovedområder<head> og <body>. <head>, er der, hvor man lægger information 
om siden, som ikke er synligt på siden. Det kan være scripts (avanceret funktionalitet) styles (formatering) og andre generelle informationer 
(fx metadata). <body>, er der, hvor man lægger 
alt synligt på siden, altså selve designet af siden. Denne grundopdeling bygger eleverne videre 
på, med i udgangspunktet 2 grundelementer; 
tags og attributter.

Tags er selve elementerne på siden. Det kan være links (<a>), billeder (<img>), almindelig tekst <p> overskrifter (<H1>, <H2>, osv) tabeller, som opdeler siden yderligere (<table>, <tr> og <td> mm.

Attributter er en specificering af de enkelte tags, som giver fx farver og funktionalitet. En attribut kan for eksempel gøre at linket faktisk bliver et link (<a href>), eller at tekstfarven på overskriften bliver grøn <div>

Her ses en html-struktur med en overskrift 
og en almindelig tekstlinje

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>Dette er en overskrift</h1>

<p>Dette er en paragraf.</p>

</body>

</html>

Uddrag af Felix’ selvstændige projekt

Oplevelsen af at blive snydt på nettet, at nettet er endeløst, og at man kan fare vild, synes jeg, kommer til udtryk i den her side, med en laaaang uforståelig tekst med, lovning af free v-bucks og links til mærkelige sider og steder på nettet. Derudover er siden i sin enkelthed sat meget klassisk og fint op, og Felix har leget lidt med 
online layout.

I koden, skrevet i visual studio, er der tydelige eksempler på tags og attributter og på selve 
html-strukturen.

Uddrag af Jonathans projekt 

Der er altid nogen der gerne vil programmere et spil. Og en variant af det klassiske pong-­­­spil, som Jonathan har skrevet, er næsten altid blandt elevernes arbejde. Det at kunne skrive en kode, 
der forbinder fx piletasterne med en form og får den til at bevæge sig som du vil – det er da også meget fascinerende og i øvrigt grundlæggende 
for alle computerspil.

En startkode fra en af eleverne skrevet i notesblok, så sådan her ud. Udover en overskrift og to tekst­linjer er der også sat et aktivt ind, og det viser således html-strukturen og både tags og attributter.

Denne første elevkode resulterer i en side, der ser sådan her ud. Det er måske ikke just smukt, men koden virker og udløser et højlydt Yes!

Uddrag af Sophus’ projekt 

Endnu et eksempel på en både underholdende 
og lidt irriterende side med en snert af følelsen 
af uendelighed; firkanten, der skal klikkes, bliver efterhånden meget, meget lille, og det kræver rigtigt mange klik inden man når målet. Men siden er også fyldt af humor: Samtidig med at man skal klikke den evigt flyttende firkant, der bliver mindre og mindre, så snurrer baggrunden hypnotisk rundt. Når man endeligt har klikket sidste firkant, popper en video op, der giver dig et chok; noget med idyllisk landskab og pludselig opdukken af råbende monster meget tæt på.

Uddrag af Alberts projekt 

En side, hvor du bliver drevet lidt til vanvid ved kravet om frygteligt mange klik inden du får, hvad du vil have, hvilket viser sig, at være ingenting – når man endelig har klikket sig igennem, bliver man snydt og starter forfra.

Uddrag af Sagals projekt 

Sagal fik startet et meget fint portfolioopsæt og ville på sigt gerne fylde op med egne billeder. På grund af nedlukning blev vi ikke færdige, men Sagal har gennem arbejdet med 
at skrive siden, selv erfaret, hvordan det er muligt, at man ved klik kan komme fra en side til en anden, hvordan man lægger tekst, billede, eller video ind; i bund og grund hvordan det, hun hver dag 
ser online, grundlæggende 
er bygget op.

Enigma fra filmen The Imitation Game.

Alan Turing

Alan Turing var en britisk matematiker som blandt andet er kendt for hans arbejde 
med dechifrering af enigmakoderne, som tyskerne kommunikerede med under Anden Verdenskrig. Man mener i dag, at han og hans hold var en stor medspiller i, at de allierede vandt krigen. Turings arbejde med dechifrering af enigmakoderne, menes af mange at ligge til grund for datalogien og dermed også de computere, vi i dag kender og sidder med derhjemme i form at laptops, stationære, mobiler osv.

Lais Christensen

Kunst og it-lærer, Rudolf Steinerskolen i København.