Produsere‎ > ‎

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.

 

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.


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. 


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.


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:


<div class="column intro-block">

<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 “<!-- “ og  “-->" blir ikke tatt hensyn til når koden skal gjøres om til en nettside.


<!-- Try changing the 'src' in the <img> tag to point to a different photo. -->


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 class="column">

<div class="image">

<img src="http://cdn.lamborghini.com/content/company/history_1963-1964_1800x810.jpg">

<div class="caption">350 GT, fra 1964</div>

</div>

</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:


<div class="column intro-block">


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


.column {

width:96%;

margin:2%;

float:none;

clear:both;

}

 

Bredde 96%

Marg 2%
Ikke tekstflyt rundt elementet

Teksten brytes under elementet

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


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).


Kode

Beskrivelse

Grunnleggende

 

<!DOCTYPE>

Definerer dokument type. Denne ivaretas av publiseringssystemet, men det er greit å vite hva det er,

<html>

Definerer et HTML dokument

<body>

Definerer den delen av dokumentet som innholder informasjon som skal vises på nettsiden.

<h1> til <h6>

Definerer ulike nivåer av overskrifter

<h3>Overskrift, nivå 3, på en egen linje</h3>

<p>

Definerer et avsnitt

<p>Dette blir et avsnitt.</p><p>mens dette blir neste avsnitt.</p>

<br />

Lager en ny linje


Formatering

 

<b>

Lager fet tekst

<b>Denne teksten vises med fete typer</b>, men ikke denne.

<blockquote>

Definerer et langt sitat. Vises med innrykk i de fleste weblesere.

<blockqoute>Denne teksten vises som et sitat med inrykk</blockqoute>, mens denne kommer i avsnittet nedenfor.

<cite>

Definerer et sitat. Vises i kursiv i de fleste weblesere.

<cite>Denne teksten vises som sitat</cite>, men ikke denne.

<i>

Lager tekst i kursiv.

<i>Denne teksten vises i kursiv</i>, men ikke denne.


Rammer

 

<iframe>

Definerer en iframe, som lar deg vise fram en webside i et vindu, integrert i en annen webside.

Eksempel fra YouTube:

<iframe width="500" height="284" src="http://www.youtube.com/embed/Ju-dS2FVmII?rel=0" frameborder="0"></iframe>


Bilder

 

<img />

Definerer et bilde

<img src="adresse_til_bilde.png" alt="Beskrivelse av bildet" width="120" height="240" />


Linker

 

<a>

Definerer en link eller et anker i teksten

<a href="http://fag.webdokumentar.no" title="Tekst som vises når markøren er over pekeren" >Dette er teksten som vises som peker</a>

<a name="Navn på anker">Synlig tekst</a>

<a href="mailto:joh@hib.no">Send e-post!</a>


Lister

 

<ul>

For å lage en uordnet liste

<ol>

For å lage en ordnet liste

<li>

Definerer et element i en liste

<ul>

<li>Punkt i uordnet liste</li>

<li>Punkt i uordnet liste</li>

</ul>

<ol>

<li>Punkt i ordnet liste</li

<li>Punkt i ordnet liste</li

</ol>


Meta Informasjon

 

<head>

Definerer informasjon om dokumentet. Ivaretas vanligvis av publiseringsystemet.

<title>

Definerer dokumentets tittel. Ivaretas vanligvis av publiseringsystemet.


Programmering

 

<script>

Definerer et skript som skal kjøres i webleseren (på klientsiden).

<noscript>

Definerer alternativt innhold for brukere som ikke støtter skript.

<object>

Definerer et innebygd objekt. En metode som fremdeles er mye brukt, men som nok forlates til fordel for <iframe>

<param />

Definerer et parameter for et objekt.


Eksempel fra YouTube:

<object width="500" height="284"><param name="movie" value="http://www.youtube.com/v/Ju-dS2FVmII?version=3&amp;hl=nb_NO&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Ju-dS2FVmII?version=3&amp;hl=nb_NO&amp;rel=0" type="application/x-shockwave-flash" width="500" height="284" allowscriptaccess="always" allowfullscreen="true"></embed></object>