Webprogrammering

Her kan du lære litt grunnleggende HTMLHyper-Text Markup Language. "Hovedprogrammeringsspråket" for webprogrammering. Tolkes av nettleseren din og gjøres om til det du ser på skjermen nå. og CSSCascading Style Sheets. Kan godt kalles "stilkode". Brukes til å endre på form og farge (bl.a)., som er bærebjelkene i webprogrammering. Du vil finne eksempler som du kan laste ned og tulle med (omprogrammere), lenker til nyttige steder (ressurser), forklaringer på enkelte taggerEn "tag" er et HTML-element. De fleste "tagger" har en start-tag og en slutt-tag. Slutt-taggen begynner med en /. og andre tips og tricks! Sidene er under utvikling.

Kom i gang!

Det er mange måter å begynne med ting på, men vi foreslår at du går frem i denne rekkefølgen:

Skaff deg en kode-editorEn "kode-editor" er et lite program som du bruker til å skrive kode i. Det finnes mange varianter der ute og mange er gratis. Se i menyen til venstre for mer informasjon om redigeringsprogram.!
Lage en mappe til kodene dine på datamaskinen din.
Åpne kode-editoren din, lag et nytt dokument - og lagre det i kodemappen din. Det er veldig viktig at filen din slutter på .html.
Kikk på den oppgaven som heter "HTML-dokumentet". For å kunne lage websider i html, så må du lage dokumentet ditt etter en bestemt "mal".
Skriv kode inn i din egen fil og lag din egen webside! Om du dobbeltklikker på filen din, så vil du se at den åpnes i nettleseren din. Det er sånn vi ofte skriver kode: gjør endringer i html-filen, lagrer, bytter til nettleseren (hvor du har den samme filen åpen) og trykker "refresh". Da ser du resultatet av endringene dine med en gang.
Nå kan du gå løs på alle de andre oppgavene og kikke på lenker og ressurser du finner på disse sidene.

Happy coding!

Oppgaver

Her finner du noen oppgaver/eksempler som du kan laste ned og manipulere (endre på). Om dette hadde vært en vanlig nettside, så ville vi laget det slik at siden åpnet i nettleseren din når du trykket på lenken. Det kunne vi fått til ved å lenke direkte til filen og ikke til mappen med filen i, slik vi gjør her. Grunnen til at vi lenker til mappen er at det blir lettere for deg å se hvilke filer som ligger i mappen - og enklere å laste dem ned. Høyreklikk på hver enkelt fil og last dem ned til din PC. Det er viktig at alle filene ligger i samme mappe på din PC også.

HTML-DOKUMENTET	Lær hvordan et html-dokument settes opp! Dette er så grunnleggende at du nesten må gjøre denne oppgaven først! Du må nesten lese alt som står i koden. Det er også veldig fint å få en gjennomgang av dette sammen med en av de voksne.
KATT	Et enkelt eksempel på en typisk "katt savnet" plakat. Bruker bare noen ytterst få tagger og ett bilde. All CSS (les: stilkode) er skrevet rett inn i filen. Last ned, endre på tekst/bilde/css - og bruk den gjerne som inspirasjon til å lage din helt egen plakat!
OPPSKRIFTER	Bittelitt mer avensert enn "katt". Her ligger all CSS i en egen fil, vi bruker et par nye tagger - og så har vi laget 2 klasserKlasse-atributten kan brukes for å knytte et navn til noen spesielle egenskaper du velger å legge til klassen. Alle elementer som knyttes til klassen vil bruke de samme egenskapene.. Lag din egen! Det behøver ikke handle om matoppskrifter. Denne koden kan like gjerne brukes til å lage en enkel blogg.
GRID	Denne siden du nå ser på er laget med gridsEt "grid" er rett og slett et slags rutenett du kan bygge for å skille forskjellige områder på siden din - som overskrift (header), meny, undertekst (footer) osv.. Her finner du et eksempel. Det som er nytt av css ligger inne i selve html-filen. Det du trolig har vært borti før har jeg "gjemt" i css-filen style.css.

HTML-tagger

Her kommer det litt forklaringer på de vanligste html-taggene. En liten kickstart. Du kan jo prøve å klippe ut denne koden, lime den inn i et html-dokument og se hvordan det ser ut i nettleseren din?

				
<h1>Heading 1</h1> 			<!-- Overskrift. Den største av dem. -->
<h2>Heading 2</h2>			<!-- Overskrift som er litt mindre enn h1 -->
<h3>Heading 3</h3>			<!-- Jepp - det går nedover i størrelse og oppover i tall helt til h6 -->
<p>Paragraph</p>			<!-- Avsnitt. All tekst inne i denne taggen blir til ett avsnitt -->
<br/>					<!-- Står for "break". Blir ett linjeskift -->
<a href="vg.no">Lenke</a> 		<!-- Komplett lenke til vg.no med lenketekst. Her finnes det atributter også -->
<img src="bilde.jpg" />			<!-- Slik setter du inn et bilde. Bildefilen må ligge i samme mappe som html-filen -->

<!-- Disse tror vi er selvforklarende -->
<strong>Uthevet tekst</strong> 	
<em>Kursiv tekst</em>				
<u>Underlinje på teksten</u>

Når du er klar for å lære flere tagger, så kan du enten vente på at noen viser deg noen - eller du kan kaste deg over HTML referansen som vi har lenket til i menyen til venstre.

Redigeringsprogram

Det finnes mange programmer man kan bruke til å kode websider. De kalles gjerne for kode-editorerEller på engelsk: "Code editors".. Noen er avenserte og dyre, mens andre er enkle og gratis. Det er ikke viktig hva slags program du bruker. Alt funker!

Vi har ikke tatt oss tid til å liste opp alle programmene som finnes. Hvis du har en skole-pc, så får du kanskje ikke lov til å innstallere slike programmer. I så fall er det veldig sannsynlig at du finner en kode-editor allerede innstallert på maskinen din. Det programmet heter antageligvis CodeWriter. Søk etter det.

Jonas er veldig glad i Sublime Text. Klikk på lenken for å laste ned det (gratis).

Et annet program, som sikkert er like bra, heter Notepad++.

Om å "låne" kode

Det å klippe ut kode fra andre steder og lime inn i dine egne dokumenter kan være en fin måte å lære nye ting på.

Bare vær obs på at det fort kan bli litt vanskelig å tilpasse denne koden til dine sider. Når du ikke forstår hele koden, så er det jo vanskelig å endre på den? Det kan også være vanskelig for de voksne å hjelpe deg - hvis de må sette seg inn i 100 linjer med noen andres kode for så å finne ut av hvordan den kan manipuleres, så går det fort litt tid ... Med andre ord så kan du ikke regne med at du får hjelp til å fikse på "stjålet" kode.

Vi anbefaler at du "stjeler" litt kode - men stjel litt av gangen! Stjel noen linjer og forsøk å tolke hva de forskjellige linjene i koden gjør. Prøv å forstå den selv - helt enkelt. Gjør du det, så vil du gradvis kunne "stjele" mer og mer - og du vil forstå mer og mer. Kanskje vil du forstå så mye at du egentlig kunne skrevet koden selv ;-)

Samarbeid om koding

Noen ganger føles det litt ensomt å sitte hjemme med koden sin - særlig når den ikke virker helt. Codeshare.io er en fantastisk (gratis) nettside hvor du kan samarbeide med dine venner om kode. Dere kan skrive sammen (i sanntid) og ha en liten videokonferanse samtidig!

Jonas vil også gjerne hjelpe deg utenom kodeklubbtider. Han er litt travel fra tid til annen, men om du sender ham en e-post og foreslår et par alternative tidspunkter - samt sender en lenke til din Codeshare - så kan vi sikkert få til en liten "privattime".

Om bilder på nettsider

Bilder er ikke bare bilder. Du har .jpg, .gif, .png og diverse andre å velge i. Vi skal ikke gå igjennom alle detaljene for de forskjellige bildeformatene nå, men la oss se på det aller viktigste:

Piksler

Alle bildeformatene vi nevnte ovenfor er lagret med et visst antall pikslerPixel (ordet er laget av "Picture Element") er den minste enheten av programmerbart område på din skjerm. Størrelsen på en piksel er avhengig av oppløsningen på skjermen din. i bredden og et visst antall piksler i høyden.

Et bilde kan eksempelvis være 200px bredt og 300px høyt. Hvis du forstørrer... som er ganske enkelt å gjøre med IMG-taggen. Alt du behøver å gjøre er å legge til atributten WIDTH og/eller HEIGHT. Da kan bildet ditt fort gjøres dobbelt så stort. et slikt bilde, så vil det bli veldig uklart (pikslete) og stygt.

Det er derfor viktig at du bruker bilder som er akkurat så store (i piksler) som du trenger - eller større. Bildene blir nemlig ikke stygge om du forminsker dem.

Piksler per tomme (ppi)

Dette er en nokså komplisert bildevariabel, så her tar vi bare noen tommelfingerregler først.

PC-skjermen din viser sannsynligvis drøyt 100 piksler per tomme. Når du tar bilder med et skikkelig kamera, så kan du velge i innstillingene på kameraet hvor mange piksler per tomme kameraet skal lagre. Ofte tar man bilder med helt opp til 300 piksler per tomme. Et bilde lagret med 100 piksler per tomme og det samme bildet lagret med 300 piksler per tomme vil se helt klin like ut på din skjerm. Hovedforskjellen her er hva som skjer når vi printer dette bildet. Da vil vi kunne forstørre bildet lagret med 300ppt mye mer enn bildet med 100ppt.

Når vi lagrer bilder for web, så lagrer vi dem typisk enten med 72ppt eller 96ppt. La oss ikke gå inn på forskjellen på hvordan de to vises på skjerm (den er nemlig minimal). Det som er viktig er størrelsen på filene! Et bilde lagret med 300ppt er ofte på flere megabyte. Samme bildet lagret med 72ppt er kanskje bare 15 kilobyte.

Når vi lager nettsider, som jo skal lastes ned fra Internett, så er vi opptatt av at denne nedlastingen går FORT! Da er filstørrelsen viktig. Vi vil at den skal være så liten som mulig.

Bildebehandling

Så når vi jobber med nettsider, så bruker vi ofte også et bildebehandlingsprogram til å redigere bildestørrelsen (bl.a) på de bildene vi bruker. Det mest kjente bildebehandlingsprogrammet heter Adobe Photoshop og det koster masse penger. Et veldig bra gratis alternativ heter GIMP.

Webprogrammering 101