Konstruktion af hjemmesiderHjemmesider er en del af World Wide Web (webben) og hjemmesider befinder sig på en webserver på internettet (nettet). I en webbrowser kan vi navigere rundt på nettet imellem hjemmesiderne på webben og få indholdet på siderne vist i browserens vindue.

Vi kan besøge websteder for at læse nyheder, finde informationer eller holde kontakt med familie og venner, som forklaret i videoen ” Web Development: Intro to Web Lab”, https://www.youtube.com/watch?v=itx0RYOnoBs (0:30-0:50):

Når vi bruger webben på den måde, er vi forbrugere af websteder designet og konstrueret af andre.

Nu skal vi se hvordan vi selv kan lave hjemmesider med et indhold vi bestemmer og som andre så kan få adgang til ved hjælp af en webbrowser.

Vi skal bruge værktøjet WebLab, https://code.org/educate/weblab. Ved at bruge WebLab kan vi designe og konstruere websider, som bliver placeret på en webserver, så websiderne er tilgængelige på internettet, se video https://www.youtube.com/watch?v=itx0RYOnoBs (0:50-1:03)):

”Klassens opskrifter” – et websted

Som et konkret eksempel på et websted som kan konstrueres ved hjælp af WebLab, vil vi se på hvordan vi kan konstruere et antal websider som tilsammen skal udgøre webstedet ”Klassens opskrifter”. Webstedet er tænkt som en samling websider, hvor hver side er en detaljeret beskrivelse af en elevs yndlingsopskrift. Desuden skal der være en webside, en oversigtsside, med en liste over titlerne på elevernes yndlingsopskrifter og titlerne i listen skal være henvisninger (links) til de enkelte websider med opskrifterne.

I design og konstruktionsprocessen skal vi arbejde ud fra to allerede eksisterende websider, en oversigtsside med en liste som blot har en enkelt opskrift på Broccoli-oste bidder og så en side med en detaljeret opskrift:

Siden med ”Klassens opskrifter” kan ses på http://kortlink.dk/ybba. Opskriften på Broccoli-oste bidder kan ses på http://kortlink.dk/ybb9 . Opskriften er fra:

”Klassens opskrifter” – i WebLab

De to websider er konstrueret i WebLab. Hvis man har en konto på https://code.org/ kan man åbne to WebLab projekter, et for hver webside. Åbnes http://kortlink.dk/ycd2 ses en WebLab projektside, hvor de enkelte elementer i oversigtswebsiden kan ses:

Til højre ses websiden som den vises i en webbrowser. Til venstre ses navnene på de filer som ligger på en webserver og som browseren henter og bruger, når den skal vise websiden. Indholdet af den markerede fil index.html kan ses i midten. Filen er en såkaldt .html fil og indholdet er en beskrivelse af websidens indhold og udseende i et sprog der hedder Hyper Text Markup Language forkortet HTML. Det er i .html filen der skal rettes, hvis hjemmesiden f.eks. skal ændres så listen af opskrifter bliver udvidet.

Filen style.css ser sådan her ud:

Det er en såkaldt .css fil som er skrevet i sproget Cascading Style Sheets forkortet CSS. I CSS bestemmes f.eks. farven af baggrunden på siden, så hvis white erstattes med red bliver hjemmesidens baggrund rød.

Når WebLab projektet åbnes af en person som ikke ”ejer” projektet, ser siden sådan her ud øverst til venstre:

”View only” betyder, at man ikke kan rette og ændre i projektet f.eks. i .html filen. Ønsker man at arbejde videre på projektet som sit eget, skal man trykke på ”Remix”.

Åbnes http://kortlink.dk/yccz ses en WebLab projektside, hvor de enkelte elementer i opskriftssiden kan ses:

Til venstre ses ud over filerne index.html og style.css, som for oversigtssiden, en tredje fil mini-brocostbid.jpg. Det er en .jpg fil som indeholder billedet af oste bidderne. Markeres filen ses billedet med supplerende oplysninger som f.eks. billedets dimension målt i pixel og størrelse af filen målt i byte:

Resten af videoen https://www.youtube.com/watch?v=itx0RYOnoBs (fra 1:03) er en ultrakort forklaring af de tre områder af WebLab skærmen og hvordan de bruges.

”Klassens opskrifter” – beskrevet i HTML

I sproget HTML beskrives hvordan en hjemmesides tekster og billeder skal vises i browserens vindue. For at lave et websted med klassens egne opskrifter skal der derfor rettes i de to index.html filer som indeholder beskrivelsen af de to websider i HTML.

Inden vi begynder at ændre og rette i de to filer lad os først se på hvilke elementer madopskriftsiden består af:

Det er disse elementer på siden som beskrives i HTML, altså HTML skal bruges til at beskrive opbygningen af madopskriftsiden med én tekst vist som en overskrift, to tekster vist som underoverskrifter og en række tekster opstillet i en liste. HTML bruges desuden til at beskrive hvor på siden overskrifter, billeder og lister skal placeres.

Som eksempel på brug af HTML til at beskrive indhold og udseende ser vi nu i detaljer på HTML beskrivelsen af hjemmesiden med madopskriften:

Ved siden af hjemmesiden til venstre ses til højre HTML beskrivelsen fra filen index.html. I HTML beskrivelsen er det umiddelbart let at finde overskriftteksten, de to underoverskrifttekster og tekster som beskriver ingredienserne i listen. Overskriften er f.eks. beskrevet i HTML med linjen:

I HTML bruges såkaldte HTML tag til at markere hvordan f.eks. tekst skal vises i browserens vindue. I beskrivelsen af hvordan overskriften skal vises bruges et sæt af to tag <h2> og </h2> til at omslutte overskriftteksten. I <h2> er h en forkortelse for ”heading” og 2 er størrelsen af skriften. De to underskrifter er jo lidt mindre og det opnås ved at bruge <h3></h3> til at omslutte teksterne.

På https://www.w3schools.com/html/html_headings.asp ses, at der i HTML kan angives 6 forskellige størrelser på tekster i overskrifter:

Listen af ingredienser er beskrevet i HTML ved at omslutte listens enkelte dele med de to HTML tag <ul> og </ul> (unordered list) og de enkelte ingredienser er omsluttet af <li> og </li>. Se på https://www.w3schools.com/tags/tag_li.asp hvordan nummererede og ikke-nummererede lister er beskrevet med HTML tag:

Til at få anbragt billedet af broccoli-oste bidderne benyttes et HTML tag <img>, https://www.w3schools.com/tags/tag_img.asp:

Her er oplysningen om hvilket billede der skal vises angivet som et navn på en .jpg fil, nemlig mini-brocostbid.jpg. Dette filnavn ses til venstre i WebLab projektet. Ønskes et andet billede trykkes på Add image som giver mulighed for at hente et nyt billede fra computeren ind i listen over projektfiler:

Hvis størrelsen af billedet i visningen skal ændres i forhold til pixelstørrelsen 450x250, kan det specificeres sådan her i <img>:

Egenskaben width i <img> sættes til 200, som betyder at billedet bliver vist mindre end oprindeligt, idet bredden nu er 200 pixels i stedet for som før 450 pixels. Forholdet imellem bredde og højde sørger browseren for at bevare. Hvis ikke browseren gjorde dette ville billedet blive vist forvrænget.

I opskriftens listen over ingredienser står der flere steder ½. Det tegn kan ikke umiddelbart skrives i HTML. I stedet bruges talkoder og tallet 189 bruges som talkode for specialtegnet ½. For at talkoden i HTML teksten ikke skal forveksles med cifrene 189, skal talkoden markeres, så 189 bliver fortolket som ½. Det sker med tegnene &# foran 189 og tegnet ; bagefter talkoden. Talkoder for andre specialtegn kan ses på https://www.w3schools.com/tags/ref_charactersets.asp.

Oversigtssiden beskrevet i HTML ser sådan her ud:

Henvisningen til opskriftsiden er beskrevet med to HTML tag <a> og </a>, https://www.w3schools.com/tags/tag_a.asp. Henvisningsteksten står imellem de to tag, altså Broccoli-oste bidder. Webadressen på opskriftsiden er angivet efter href= i <a>, og er angivet som en URL http://kortlink.dk/ybb9. Den URL WebLab konstruere som webadresse på en udviklet hjemmeside, når en hjemmeside skal deles på nette ved tryk på Share, er desværre utroligt lang. For at undgå at skulle kopiere en lang URL ind efter href=, benyttes en tjeneste som forkorter lange webadresser, se på http://Kortlink.dk hvordan det gøres.

I videoen ”Web Development: Intro to HTML”, https://www.youtube.com/watch?v=Hjl6gbg9kmk&t=14s gives en kort introduktion til HTML.

I kurset ”CSD Unit 2 - Web Development”, https://studio.code.org/s/csd2-2019 er der en række øvelser i at bruge HTML i WebLab. Især Chapter 1: Web Content and HTML lektionerne 3. Intro to HTML, 4. Headings og 6. Lists er relevante i forhold til at benytte de simple HTML tag som er brugt i de to sider ”Klassens opskrifter”.

”Klassens opskrifter” – beskrevet i CSS

Når hjemmesider beskrives i HTML fastlægges strukturen af hvordan en hjemmeside skal vises i en webbrowser. Hvis hjemmesiden udelukkende er beskrevet i HTML vil egenskaber som skrifttype, baggrundsfarve og indramning af billeder være fastlagt til et sæt standardvalg i webbrowseren, når hjemmesiden vises.

Ønskes andre valg skal sproget Cascading Style Sheets, forkortet CSS, benyttes. I CSS beskrives valg af egenskaber for de enkelte elementer i HTML, som f.eks. her i filen style.scc i WebLab:

I videoerne ”Web Development: Intro to CSS”, https://www.youtube.com/watch?v=EP9QMdoXvXE og ”Web Development: Using a Stylesheet”, https://www.youtube.com/watch?v=VgBVKlpLqsE gives en introduktion til CSS og hvordan CSS benyttes i WebLab.

I kurset ”CSD Unit 2 - Web Development”, https://studio.code.org/s/csd2-2019 er der en række øvelser i at bruge CSS i WebLab. Især Chapter 2: Styling and CSS lektionerne 11. Styling Text with CSS og 12. Styling Elements with CSS er relevante i forhold til at ændre udseende på de to sider i ”Klassens opskrifter”.

HTML og CSS begreber

<kommer senere>