1 Internettet, browsere, markup og styling
I dette kapitel skal vi opbygge en overordnet, dog temmelig unuanceret, forståelse af, hvad internettet er, og hvordan det virker. Formålet er, at du skal have en forståelse af nogle af de overordnede begreber, som knytter sig til webudvikling. Det lyder måske teknisk, men mange af begreberne kender du allerede i forvejen - du har i hvert fald hørt om dem.
1.1 World Wide Web
I daglig tale bruger vi ordet internettet, eller bare nettet, i flæng, og langt de fleste af os ved ikke rigtig, hvad det egentlig betyder. Ordet refererer egentlig til det globale netværk af computere, og alt hvad der foregår mellem disse computere. Imidlertid er det vi mener, når vi taler om internettet, ofte den del af internettet, som kaldes World Wide Web eller bare WWW.
World Wide Web er et system, der gør det muligt at dele og tilgå ressourcer som tekst, dokumenter, billeder, filer osv. via internettet. Med andre ord er WWW den rodebutik, der indeholder alt, du har adgang til, når du "går på nettet". For at vi kan finde filer og hjemmesider på WWW, tildeles de alle deres egen "adresse" på internettet. Adressen kaldes en uniform resource locator, eller bare en URL, og den angiver, hvor man skal lede efter en given ressource. Eksempelvis, kan man finde TalentCampDK's hjemmeside på URL'en https://www.talentcamp.dk ved at skrive URL'en ind i browserens adressefelt og trykke på enter. De enkelte bestanddele på hjemmesiden har også deres egen specifikke adresse, for eksempel finder man undersiden for matematikkurser her: https://talentcamp.dk/kurser-mat.
1.2 Hvad er en browser?
Når du tilgår ressourcer, som for eksempel hjemmesider eller billeder, på WWW, bruger du en browser. En browser er, som ordet antyder, et program som bruges til at vise, eller "browse" om man vil, indhold på WWW (eller lokale filer). Når man besøger en side på WWW er det browserens opgave at hente, fortolke og vise indholdet på siden. Når du fx besøger https://www.talentcamp.dk modtager browseren en fil med en masse kode. Browseren læser koden og viser dig et grafisk layout på skærmen - det er dét, du ser, når du besøger siden.
Der findes mange forskellige browsere, og du kender helt sikkert en eller flere af dem. Den mest udbredte er Google Chrome, som er den browser Google laver. Hvis du har Windows på din computer, har du sikkert også Microsoft Edge, som er den browser Microsoft laver, og hvis du har en Mac, bruger du med stor sandsynlighed Apple's browser, som hedder Safari.
1.3 Markup og HTML
Når du besøger en hjemmeside, henter browseren en fil, der fortæller hvordan hjemmesiden skal se ud og hvilke andre ressourcer, der skal vises som en del af det grafiske layout som browseren laver (for eksempel billeder eller video). Sådanne filer kaldes HTML-dokumenter. Formålet med dette forløb er, at du skal lære selv at skrive HTML-dokumenter, så du kan give instruktioner til en browser. Inden vi når så langt, vil vi dvæle lidt ved, hvad HTML er.
HTML står for HyperText Markup Language, og, som navnet antyder, er det et sprog, der kan bruges til at arbejde med tekst - eller hypertext. Hypertext er tekst som vises på en skærm og som kan forbindes til andre tekster på skærme ved hjælp af hyperlinks. Et hyperlink, i daglig tale bare kaldet et link, er en kort tekst, som man kan klikke på for at blive ført videre til den URL linket peger på. Du har med garanti set eksempler på hyperlinks før, men for en god ordens skyld er her et par eksempler: www.talentcamp.dk er et link til TalentCampDK's hjemmeside, mens det her er et link til Google's hjemmeside. Man kan lave links til alle ressourcer på WWW, som har en URL. For eksempel er her et link til forsidebilledet på TalentCampDK's hjemmeside.
Et Markup Language er et sprog, der bruges til at indkode metainformation om teksten i et elektronisk dokument. Selvom det bestemt ikke umiddelbart er oplagt, så indeholder langt de fleste dokumenter meget mere information end selve tekstindholdet. Det er lettest at forstå ved at kigge på et eksempel.
Når du for eksempel læser en artikel i avisen, står det jo ikke med ord i teksten, hvad der er overskriften, hvad der er underoverskrifter, og hvad der er brødtekst - men du er alligevel ikke i tvivl. Avisen opnår dette ved at journalisten, der har skrevet artiklen, fortæller trykkeren, at den første sætning i artiklen er overskriften og hvilke dele af den øvrige tekst der er henholdsvis underoverskrifter og brødtekst. Trykkeren sørger herefter for, at overskriften bliver trykt med en stor skriftstørrelse, at underoverskrifterne bliver trykt med en fed skrift, og resten af teksten trykkes som almindelig tekst. Det kaldes styling, og det er stylingen der gør læseren af avisen i stand til let at se, hvad der er overskrift, og hvad der er brødtekst. Det vigtige er at notere sig, at der er to skridt i processen:
- Journalisten beslutter sig for hvilke dele af artiklen, der er henholdsvis overskriften, underoverskrifter og brødtekst.
- Trykkeren beslutter hvordan henholdsvis overskriften, underoverskrifter og brødtekst skal se ud.
HTML-dokumenter og browsere fungerer på samme måde! Her spiller HTML-dokumentet samme rolle som journalisten, mens browseren styler dokumenterne ligesom trykkeren. HTML-dokumentet fortæller altså browseren, hvad de forskellige dele af teksten er uden at tage stilling til, hvordan de forskellige del skal se ud. HTML er med andre ord det sprog, der giver en hjemmeside struktur.
Når en browser modtager et HTML-dokument, læser browseren hvordan strukturen i dokumentet skal være. Browseren giver så de forskellige elementer styling, så vi mennesker lettere kan læse og forstå indholdet. Til sidst præsenterer browseren det færdige layout på skærmen med sin egen styling af dokumentet. Her finder vi også forklaringen på, hvorfor den samme hjemmeside kan se lidt forskellig ud i forskellige browsere. Ligesom de ikke har samme skrifttype og størrelse i Jyllands Posten og i Politiken, så styler Google Chrome og Edge ikke hjemmesider helt ens.
1.4 CSS og styling
I første omgang er det måske rart, at browseren står for stylingen af vores hjemmesider, men du vil snart opdage at browseres styling har et helt særligt 90'er-agtigt look. Og det er ikke fedt.
Det er her CSS kommer ind i billedet. CSS står for Cascading Style Sheets og er præcis det, som navnet antyder: det ark, der beskriver, hvordan dit HTML-dokument skal styles. Vi skal lære grundideerne i CSS, så vi kan få de hjemmesider vi selv laver til at ligne noget, der hører til i 2020'erne.
1.5 Er det her programmering?
Nej. HTML og CSS er ikke programmeringssprog. HTML bruges udelukkende til at beskrive en hjemmesides struktur, mens CSS udelukkende handler om styling. Man kan altså ikke lave beregninger, logik eller arbejde med funktioner i hverken HTML eller CSS. Det betyder også, at de hjemmesider, vi kan lave med HTML og CSS, er statiske. At en hjemmeside er statisk betyder, at hjemmesiden ikke kan svare på noget brugeren gør. Brugeren kan klikke rundt på siden, ligesom når man bladrer i en avis, men hun kan ikke påvirke siden eller bede den om at beregne noget. Med andre ord er en statisk hjemmeside præcis som en avis.
Der er mange hjemmesider, der er statiske. Det gælder for eksempel https://www.talentcamp.dk og denne hjemmeside, som du kigger på lige nu. Det betyder ikke, at de er dårlige hjemmesider - du kan bare ikke interagere med dem.
Moderne hjemmesider som Instragram eller Netflix er derimod dynamiske og giver mulighed for at brugeren kan interagere med dem. Du kan for eksempel logge ind på instagram og poste et billede, som efterfølgende kan ses af andre brugere. Det er også dynamisk, når du bestiller take-away fra den lokale restaurant, shopper online eller spiller et spil i browseren. På dynamiske hjemmesider kan brugeren, med andre ord, føre en "dialog" med hjemmesiden - på statiske hjemmesider er der tale om envejskommunikation.
HTML og CSS er også centrale dele af dynamiske hjemmesider, men der skal bygges et lag ovenpå, ved hjælp af et programmeringssprog, for at gøre en hjemmeside dynamisk. Måske tænker du nu, at det er kedeligt at lære HTML og CSS, fordi det fede på WWW er de dynamiske hjemmesider. Og det måske også delvist rigtigt. Vi skal imidlertid lære at kravle før vi kan gå, og derfor tager vi nu fat på at lære HTML og CSS. Og frygt ej! Du skal ikke snydes for at lære at programmere dynamiske hjemmesider, for det er netop det vi skal i forløbet om Elm.