Lær å lage websider

Mozilla webmaker

Mozilla er en organisasjon som opprinnelig ble opprettet av nettleserselskapet Netscape. Netscape var den mest brukte nettleseren på begynnelsen av 1990-tallet, men selskapet gikk etter hvert dukken i konkurranse med Microsofts Internet Explorer. Mot slutten ble kildekoden til Netscape frigitt og videreført av Mozilla. Etter hvert som Netscape forsvant ble Mozilla en selvstendig organisasjon med flere større prosjekter, basert på åpen kildekode. Mest kjent er nettleseren Firefox.

Mozilla har de senere årene fokusert mye på utdanningssektoren, og laget flere verktøy med sikte på å lære hvordan man lager websider og bruke webmediene på bedre måter. En del av dette initiativet er webmaker.org med verktøyene Popcorn og Thimble. Vi skal her se litt på sistnevnte.

Thimble handler om å lage websider, og lære seg HTML og CSS, mens Popcorn er laget for å lage interaktiv video på web. På nettsiden finner du en lang rekke eksempler, som kan remikses fritt. Via søkefeltet kan du velge hva slags type prosjekter du vil kikke nærmere på.

Thimble

Thimble er et verktøy for å lage websider, bygget opp på en måte som gjør prosessen svært lærerik. Dette fordi du kan jobbe videre på allerede eksisterende sider, og lære gjennom å modifisere disse. Du kan også begynne med en side uten innhold, og du kan bruke denne funksjonen for å teste ut de enkleste funksjonene.

Det kjekke er at dette er skrudd sammen slik at de endringene du gjør i editoren til venstre, umiddelbart blir vist i vinduet til høyre. Dermed blir det enkelt å prøve seg fram og se konsekvensen av de endringene du gjør i koden.

Websiden vist til høyre finner du på denne URLen: https://jonhoem.makes.org/thimble/lamborghini Klikker du på “Remix” vil siden komme opp sammen med en editor, hvor du kan gjøre endringer i koden.

Læringskurven blir kanskje brattere, men potensialet er også størrre, dersom du begynner med en eksisterende side. Ikke minst fordi koden ofte er kommentert, slik at du blir forklart hva du kan gjøre.

Det første du bør legge merke til er “Remix”-knappen oppe til høyre. Denne signaliserer at hvem som helst kan åpne websiden i en editor, og gjøre endringer som de så kan lagre som en ny versjon. Den opprinnelige versjonen blir uendret. I prinsippet kan vi gjøre dette med en hvilken som helt webside, men her er det altså lagt spesielt til rette for dette. Hensikten er at vi på enklest mulig måte skal kunne kikke på og lære av hva andre har gjort.

http://thimble.webmaker.org/project/6040/edit

Her har vi markert noen av koblingene mellom kode og publisert webside. Skrevet tekst er ganske lett å kjenne igjen. Det er også ganske enkelt å finne adresser til bildene i koden. Bytt en adresse med adressen til et annet bilde på weben (se hvordan du finner bildeadressene), og du ser umiddelbart endringene.

Disse nettsidene er ganske avanserte. Det er mye kode som styrer visningen, som du kan kikke på etter hvert som du blir tryggere på hvordan dette fungerer.

Prinsippet er at HTML styrer strukturen på websiden, men s CSS styrer utseende og layout.

Vi kikker på dette med utgangspunkt i en liten del av siden og den tilhørende HTML-koden:

Her gjelder det å ikke la seg skremme av mange uforståelige tegn. Vi kan fint begynne å gjøre endringer i det små.

Tenk i første omgang på <div>-taggene som bokser som kan ha innhold og som vi kan knytte noen egenskaper til. "Boksene" er ikke synlige på nettsiden, men ligger i bakgrunnen. Disse "boksene" gjør at vi kan knytte en såkalt til deler av nettsiden. Klassen knytter div-elementet til CSS, som styrer utseende mm – vi kikker litt på det nedenfor:

<p>

Automobili Lamborghini holder til utenfor Bologna i Italia. Firmaet ble grunnlagt i 1963 av Ferruccio Lamborghini (1916–1993), som et sideprojekt til traktorfabrikken Lamborghini Trattori.

</p>

</div>

Inne i div-taggen ligger det en <p>-tag. Denne definerer et avsnitt. Størrelse på teksten, skrifttype mm defineres i CSS.

Så kommer en kommentar i koden. Alt som står mellom “" blir ikke tatt hensyn til når koden skal gjøres om til en nettside.

Deretter kommer flere div-elementer som ligger inni hvernadre. Det betyr at de også kan arve egenskaper fra hverandre i CSS. Klassen “column” kan da brukes til å definere noen egenskaper, mens klassen “image” kan kan få noen selvstendige egenskaper, og noen som er avhengige av at den er plassert inne i “column”. <img>-taggen definerer et bilde og inneholder adressen (URLen) til et bilde. Bildet kan også gis egenskaper i CSS. Til slutt brukes klassen “caption” for å gi noen egenskaper til bildeteksten.

</div>

Så langt alt vel. Vi har et avsnitt med tekst, et bilde og en kort bildetekst. alt plassert i sine respektive “bokser, dvs. <div>-tagger med tilhørende klasser. Så gjenstår det å gi disse et utseende. CSS-koden finner vi bunnen av det koden i det venstre vinduet.

Det første div-elementet i HTML-koden refererer til to klasser:

Disse klassene finner vi igjen på denne måten:

Denne CSS-koden bestemmer at en del av websiden, definert av klassen “column” skal ha noen bestemte egenskaper

Denne CSS-koden bestemmer at et avsnitt, definert av <p>-taggen, som er plassert inn i et div-element med klassen “intro-block” skal ha noen bestemte egenskaper

.column {

width:96%;

margin:2%;

float:none;

clear:both;

}

Bredde 96%

Marg 2%

Ikke tekstflyt rundt elementet

Teksten brytes under elementet

intro-block p {

font-size:15px;

font-style:italic;

color:#595959;

margin:20px 0;

}

fontstørrelse 15 piksler

teksten i kursiv

farge mørk grå

marg 20 piksler under

Prøv selv!

Vi ser jo at dette ikke er helt enkelt. Det tar lang tid å mestre dette til fulle, men samtidig er det et klart system i msakene. Ved hjelp av Thimle kan vi lett prøve oss fram.

Her er det absolutt ingen grunn til å være redd for å ødelegge noe.

Oversikt over aktuelle HTML-koder

Dette er ikke en komplett oversikt over HTML-koder. Her har vi kun tatt med de som vi mener er mest relevant for dere.

Koden på en nettside er strukturert slik:

<html>

<head>

<title>Tittel på nettsiden</title>

</head>

<body>

<h1>Dette er en overskrift</h1>

<p>Dette er et avsnitt. Med et linkeskift <br />og en <a href=”http://hib.no”>link til HiBs nettsider</a></p>

<h2>Dette er en overskrift på nivå 2</h2>

</body>

</html>

Et HTML-element starter med en start tag / åpningskode og avsluttes med en slutt-tag. Innholdet i et element er alt som befinner seg mellom start og slutt tag. De fleste HTML elementer kan ha attributter, og de kan stilsettes ved hjelp av CSS (Cascading Style Sheets).