Kode 1 Informasjonsteknologi 1 (kap. 1-3)

<Gløer Olav Langslet> <Petter Bae Brandtzæg> <Eirik Solheim>

kode 1 Informasjonsteknologi 1 HTML5, CSS og Firebase

© CAPPELEN DAMM AS, 2017 ISBN 978-82-02-52765-5 1. utgave

1. opplag 2017 Tekniske tegninger: Terje Sundby/Keops

Omslagsdesign: Anders Bergesen/Superultraplus Designstudio Grafisk formgiving: Kristine Steen/07 Media Fotografier: Getty Images/Thinkstock

Forlagsredaktører: Terje Idland og Eva Irgens Sats: HAVE A BOOK, Polen 2017

Trykk og innbinding: Livonia Print SiA, Latvia 2017

Materialet i denne publikasjonen er omfattet av åndsverklovens bestemmelser.

Uten særskilt avtale med Cappelen Damm AS er enhver eksemplarfremstilling og tilgjengeliggjøring bare tillatt i den utstrekning det er hjemlet i lov eller tillatt gjennom avtale med Kopinor, interesseorgan for rettighetshavere til åndsverk.

Utnyttelse i strid med lov eller avtale kan medføre erstatningsansvar og inndragning, og kan straffes med bøter eller fengsel. www.cdu.no

www.kode.cdu.no

FORORD Læreboken dekker hele­ ­læreplanen i ­informasjonsteknologi 1

Kode 1 er en lærebok skrevet for Informasjonsteknologi 1, programfag for studiespesialiserende utdanningsprogram. Læreboken dekker hele læreplanen i Informasjonsteknologi 1 på Vg2 med bruk av HTML, CSS og Firebase. Totalt består boken av 11 kapitler som til sammen dekker kompetansemålene til de tre hoveddelene: Digital samtid, Nettsteder og multi­ medier og Databaser. Til databaser lærer du om Firebase som er teknologi fra Google. Du vil kunne utvikle og publisere dynamiske nettsteder.

Oversiktlig og strukturert innhold

Hvert kapittel starter med en oversikt over hva du skal lære. Teorien er bygd opp med forklarende tekst og eksempler som belyser teorien. Viktige ord i satt i halvfet slik at du lett skal finne de igjen. Underveis i teksten finner du faktarammer i gult. Dette er innhold du bør lære deg godt. ­Innimellom dukker det opp rammer med Ekstrastoff. Dette er innhold du bør lese, men det er ikke alltid noe du skal bruke videre med en gang.

I denne læreboken har vi lagt vekt på at du raskt skal komme i gang med kodingen. Etter hvert delkapittel finner du derfor Prøv selv-oppgaver. Løser du disse oppgavene får du god trening i å programmere. Sist i kapittelet finner du Sammendrag. Stikkordregister og læreplanen har vi plassert sist i læreboka. Innsiden av omslaget inneholder stoff du kan slå opp i.

Gratis programvare og digital ressurs

Elevnettstedet kode.cdu.no inneholder oppgaver, løsningsforslag og en Kodeeditor. I venstre felt i Kodeeditoren skrives og redigeres programmeringskoden. Til høyre vises koden.

Boken viser en gratis publiseringsløsning. På eksamen må du lagre ­koden i en fil. Nettlesere du kan bruke er Safari, Chrome, FireFox og Internet Explorer. Lagrer du koden din i en fil kan du åpne den i en Nettleser. Et annet nettleserverktøy du vil ha nytte av er det som heter Konsoll. Et eget lærernettsted gir deg som lærer forslag til årsplan og tips til undervisningen.

Hilsen Forfatterne

3

Slik er boken bygd opp Her lærer du om: Hvert kapittel starter med en oversikt over hva du skal lære.

Margtekst: Margtekster inneholder ordforklaringer eller utdyper teoriteksten.

Teoristoff: Dette er stoff du må lese. Her er det viktigste tatt med (læreplanstoffet).

Ekstrastoff: Her står det interessant stoff eller stoff som er en fordypning av læreplanen. Du bør lese ekstrastoffet, men det er ikke alt du behøver å ta med deg videre i programmeringen.

Faktaramme: Her finner du en oppsummering av det mest sentrale stoffet i avsnittet du akkurat har lest.

Eksempler: Her finner du eksempler på bruk av den teorien du akkurat har lært.

Ord i halvfet: Sentrale ord i teorien er satt i halvfet. Ordene er forklart der de er brukt, de fleste finner du også igjen i stikkordregisteret bak i boka.

Illustrasjoner/bilder: Levendegjør og forklarer teksten i teoristoffet.

Prøv selv: Sist i hvert delkapittel finner du Prøv selv-oppgaver.

Teoristoff

Her lærer du om

<03> Variabler Her lærer du om: в

variabler

в

ulike datatyper

в

в

tegne med canvas

Variabel

Gunhild

3.1 Definere og bruke variabler Variabler, variabelnavn og variabelverdi

tilordne uttrykk til variabler

fornavn

Hvis variabel­ verdien er en tekst, setter vi den alltid i anførselstegn.

Variabelverdi Variabelnavn

Variabelen lagres i minnet på datamaskinen. Vi kan tenke på en variabel som en slags beholder som man kan putte forskjellige dataelementer oppi.

Bruk Editoren på kode.cdu.no og legg inn JavaScript-koden før sluttaggen </body>.

Når vi vil at programmet vårt skal lagre en verdi som vi kan hente opp igjen ved behov, oppretter vi det som heter en variabel. Da blir det satt av en egen plass til variabelen i minnet på datamaskinen. Hver variabel som vi oppret­ ter i dataprogrammet, må ha et navn, et variabelnavn. Variabelnavnene gjør at maskinen klarer å skille de ulike variablene fra hverandre. Variabel­ navnet peker da til denne plassen i minnet som kan holde på en ønsket verdi, for eksempel fornavnet til en person. Det er programmereren som bestem­ mer hva variabelnavnet skal være, og det bør beskrive hva som lagres.

var fornavn = "Gunhild"; document.write(fornavn);

EKSEMPEL

Brev til elevene Rektor på en skole vil gjøre meldingene som skolen sender ut til elevene, mer effektive. Skolen oppretter derfor flere variabler med ulike meldinger som de kan sende alt etter hva de vil melde til elevene. Variabelen som inneholder den teksten rektor vil sende, velges som variabelnavn i document.write(…).

Å opprette en variabel kalles i JavaScript å deklarere en variabel. Det gjør vi ved å skrive kodeordet var og så variabelnavnet. Her velger vi variabel­ navnet fornavn, vi skriver: var fornavn;. Hvis du vil gi denne variabelen en verdi, for eksempel navnet Gunhild, skriver du: fornavn = "Gunhild";. Dette kalles å tilordne verdier til variabelen.

Brev…

Når man deklarerer en variabel opprettes en tom variabel med angitt variabelnavn. Variabelen til høyre har nå fått variabelverdi "Gunhild";.

46

Faktaramme

4

fornavn

Gunhild fornavn

var fornavn;

fil://IT2/Kode/Kap3/filnavn.html

Varsel om fravær Vi vil gjøre deg oppmerksom på at du nærmer deg fraværsgrensen.

Variabel

Variabel

Skjermen ovenfor viser bruk av variabelen forvarsel.

Brev…

fil://IT2/Kode/Kap3/filnavn.html

Varsel om fravær

Varsel om fravær

Vi vil gjøre deg oppmerksom på at du nærmer deg fraværsgrensen.

Du har nå overskredet fraværsgrensen med to skoletimer.

fornavn

var fornavn="Gunhild";

Gunhild

Når vi har definert en variabel, kan vi bruke variabelnavnet i koden til å hente verdien. Definerer vi variabelen fornavn, kan vi for eksempel hente ut verdien ved å sette variabelnavnet inn i metoden document.write(…).

Verdien Gunhild skrives ut på skjermen.

</script>

Deklarere, tilordne og definere variabler

Merk at koden ikke viser noe på skjermen. Den bestemmer bare at vi setter av en plass i minnet til en variabel med variabelnavnet fornavn Brev… , og at den fil://IT2/Kode/Kap3/filnavn.html lagrer verdien "Gunhild".

Når verdien som skal lagres i variabelen, er en tekst (string), setter vi den alltid i anførselstegn. Vi sier at variabelverdien er av datatypen tekst – eller som vi også kaller den: datatypen string. Variabelen kaller vi en tekstvariabel. Så lenge den står i anførselstegn, er det en tekstvariabel.

Variabler kan lagre verdier av flere ulike datatyper, for eksempel tall. Data­ typer som ikke er tekst, men tall, sier vi har datatypen number. I neste delkapittel lærer vi om tallvariabler.

<script>

Tenk deg at du vil registrere fornavnet på en person og bruke det i forskjel­ lige sammenhenger. Da er det naturlig at variabelnavnet blir fornavn. Det som lagres i variabelen, er for eksempel fornavnet Gunhild. Gunhild vil da være den verdien som lagres i variabelen. Verdier som lagres i variabler, kaller vi variabelverdier.

Svært ofte deklarerer og tilordner vi verdier på én og samme linje.

Det kaller vi å definere variabler, og vi gjør det slik: var fornavn = "Gunhild";

Margtekst

<html> <head> <title>Brev til elevene</title> </head> <body> Brev… fil://IT2/Kode/Kap3/filnavn.html <h1>Varsel om fravær</h1> <script> Varsel om fravær var forvarsel = "Vi vil gjøre deg oppmerksom på at du nærmer deg Du har nå overskredet fraværsgrenfraværsgrensen."; sen med to skoletimer. var varsel = "Du har nå overskredet fraværsgrensen med to skoletimer."; document.write(forvarsel); </script> </body> </html>

Hvis det senere blir nødvendig for rektor å sende en melding der eleven blir gjort oppmerksom på at fraværsgrensen er overskredet, endres koden til å bruke den andre variabelen slik: document.write(varsel);

Skjermen ovenfor viser bruk av variabelen varsel.

< 03 Variabler >

fornavn

Illustrasjoner

47

Eksempel

Halvfet

LÆREPLAN Informasjonsteknologi 1 Programfag i studiespesialiserende utdanningsprogram

Kompetansemål DIGITAL SAMTID MÅL FOR OPPLÆRINGEN ER AT ELEVEN SKAL KUNNE

• beskrive ulike typer digitalt utstyr og forklare hovedtrekkene ved virkemåten • forklare hvordan de fysiske signalene i datautstyr kan tolkes som binære tall, tegnsett, grafiske framstillinger, billedpunkter og lyd • gjøre rede for standarder for kommunikasjon mellom ulike former for digitalt utstyr og mellom programmer • gjøre rede for hvilke utfordringer og muligheter den digitale verden kan skape for språklige og kulturelle minoriteter • gjøre rede for og argumentere for nødvendigheten av regelverk og etiske normer for bruk av informasjonsteknologi • beskrive og drøfte informasjonsteknologiens muligheter og konsekvenser • beskrive og foreslå tiltak mot trusler i den digitale verden

NETTSTEDER OG MULTIMEDIER MÅL FOR OPPLÆRINGEN ER AT ELEVEN SKAL KUNNE

• gjøre rede for hvilke standarder og prinsipper som muliggjør Internett • planlegge nettsteder som inneholder multimediekomponenter • utvikle nettsteder i henhold til planer og vurdere om krav til brukergrensesnitt er oppfylt • redigere nettsteder ved bruk av standardiserte oppmerkingsspråk • organisere og begrunne filstrukturen for nettsteder • sette opp krav til og vurdere nettsteder

DATABASER MÅL FOR OPPLÆRINGEN ER AT ELEVEN SKAL KUNNE

• gjøre rede for begrepene primærnøkkel, kandidatnøkkel, fremmednøkkel og atomærkravet • utvikle normaliserte datamodeller ut fra problemstillinger og begrunne valgene som er gjort • lage databaser i henhold til gitte datamodeller • utvikle, presentere og begrunne databaseapplikasjoner • lage dynamiske nettsider som bruker en database ved hjelp av spørrespråk og programvare på ­tjener

5

INNHOLD

<01> Lage nettsider med HTML 8 1.1 Kode nettsider med HTML 1.2 Tekst

3.6 Kommunikasjon mellom ­digitalt ­utstyr Sammendrag

1.3 Bilder

1.4 Lyd og video

1.5 Lenker og nøstede HTML-elementer 1.6 Tabeller

1.7 Skjemaer

Sammendrag 33

<04> Planlegging og utvikling av nettsider 108 4.1 Fra skisse til nettside

4.2 Bakgrunnsbilder med CSS-kode 4.3 Lage nettsider

4.4 Lage en nettavis med grid

<02> CSS endrer utseendet til nettsider 34 2.1 CSS i et HTML-element

2.2 CSS i eget style-element

4.5 Innhold tilpasset ulike skjerm­ størrelser 4.6 Responsiv navigasjon Sammendrag

2.3 Utseende til tekst

2.4 Utseende til bilder

2.5 Selektor med id eller class

2.6 Pseudoselektor og pseudoklasser 2.7 Kombinasjoner av selektorer og ­tabeller Sammendrag

<05> Sosiale medier 165 5.1 Sosiale medier

5.2 Konsekvenser og muligheter

5.3 Etiske normer – forventet oppførsel på nett 5.4 Din risiko på internett Sammendrag

<03> Fysiske signaler i ­data­utstyr 66 3.1 Binære tall – bit og byte

3.2 Bilder består av bildepunkter 3.3 Tegnsett

3.4 Digitale lydopptak

3.5 Video og animasjon

6

<06> Sikkerhet og regelverk 183 6.1 Risikoen for angrep øker 6.2 Informasjonssikkerhet

6.3 Sikkerhet og personvern 6.4 Regelverk Sammendrag

<07> Databaser ogarray, set, <08> Kolleksjonene datamodeller 200 map og nodelist 198 8.1 Database Array 198 7.1 8.2 Å Å designe traversere array 206 7.2 enetdatabase 8.3 Relasjoner Set 211 i datamodeller 7.3 8.4 Større Map 215 7.4 datamodeller 8.5 NodeList 221 Sammendrag 8.6 Diagrammer 224 8.7 JSON og lagring av data 240 Sammendrag 245 nettsider 229 <08> Dynamiske 8.1 Dynamiske nettsider med Firebase <09> Multimedier – animasjon 246 8.2 Hente og legge inn data 9.1 Animering med CSS Transitions 246 8.3 Bygg en database med egne data 9.2 Animering av bilde som erstattes Sammendrag av en tekst 254 9.3 Animering med CSS Transitions og JavaScript 258 <09> Animasjon CSS 249 262 9.4 Animering med med CSS Animations 9.1 animasjoner med CSS 9.5 Lage Animering med Web Animations API 270 9.2 Interaktive animasjoner 9.6 Egenskaper WAAPI med som nodelist, hendelsesstyrt 9.3 kan endres animasjon og stop-motion 278 9.4 CSS keyframes Sammendrag 284 9.5 Stop-motion animasjon

<11> Planlegging og dokumentasjon 310 11.1 Ulike arbeidsmetoder 310 11.2 Smidig utvikling og Scrum 314 11.3 Lean startup 320 11.4 Valg av arbeidsmetode 327 11.5 Dokumentasjon av funksjonelle krav 328 11.6 Teknisk dokumentasjon av programkoden 333 Sammendrag 337 <12> Objektorientert programmering 338 12.1 Klasser og objekter 338 12.2 Grafisk grensesnitt og kolleksjoner av objekter 348 12.3 Strukturere koden i ulike filer 356 12.4 Realtime-lagring og synkronisering av JSON-data i en database 360 Sammendrag 365 Stikkordregister 366

Sammendrag <10> Spillprogrammering 285 10.1 Et enkelt spill 285 Stikkordregister 288med canvas 291 10.2 Bevegelse i spill 10.3 Veggtennis 298 Sammendrag 309

7

<01> Her lærer du om: >

>

>

>

>

nettsider kodet med HTML nettsider med tekst, bilder, lenker, lyd, video og tabeller nøsting av HTMLelementer strukturen til en nettside skjemaer

HTML = HyperText Markup Language Nettlesere: • Chrome • Safari • Edge • Firefox • Internet Explorer

Lage nettsider med HTML 1.1 Kode nettsider med HTML HTML er et markeringsspråk HTML er det som kalles for et markeringsspråk som brukes når vi koder nettsider. Nettsidene vises i egne programmer som heter nettlesere. Nettlesere er for eksempel Chrome, Safari eller Edge. En nettside inneholder ofte tekst og bilder. Teksten som skal vises på nettsiden skriver vi inn mellom markører, kalt tagger. Taggene forteller nettleseren om teksten for eksempel skal være en overskrift, et tekstavsnitt eller om teksten skal være uthevet eller kursivert. Det er også egne tagger for å sette inn bilder, lyd eller video på nettsiden. Vi kaller taggene og innholdet vi skriver for å lage en nettside for HTML-kode. På figuren nedenfor ser du HTML-kode på skjermen til venstre og resultatet som er en nettside i en nettleser til høyre.

HTML-kode med tagger

Nettleser

Nettside

Min første

fil://IT1/Kode/Kap1/filnavn.html

Min overskrift 1 2 3 4 5 6 7 8 9 10 11 12

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Min første nettside</title> </head> <body> <h1>Min overskrift<h1> <p>Dette er et avsnitt på min første nettside.</p> </body> </html>

Dette er et avsnitt på min første nettside.

|

En HTML-kode er bygd opp med tagger. HTML-koden blir tolket av nettleseren og presentert som en nettside.

Strukturering med tagger En nettside kodet med HTML har en bestemt struktur som vi bør følge. Den første linjen med kode til en nettside er <!DOCTYPE html>. Det er informasjon til nettleseren om at dette er et HTML-dokument. Det neste vi skriver, er start-taggen <html>. Slutt-taggen </html> kommer helt nederst.

Slutt-tagger skiller seg fra start-tagger ved at de har en /. Alt som ligger mellom disse start-taggene og slutt-taggene, er HTML-kode. Inni taggen <html> står koden lang="no". Det er informasjon om at vi skriver på norsk (lang = language = språk). HTML-koden mellom <html lang="no"> og </html> har så to hoveddeler: <head>…</head> og <body>…</body>.

8

Kode1_Informasjonsteknologi Kap01.indd 8

24.05.2017 14:35:46

Strukturen til en nettside med HTML <!DOCTYPE html> <html lang="no"> <head> <meta charset="UTF-8"> <title>Min første nettside</title> </head> <body> <h1>Min overskrift</h1> <p>Dette er et avsnitt på min første nettside.</p> </body> </html>

Min første

Resultatet av HTML-koden viser en overskrift og et tekstavsnitt.

Teksten i overskriften er større enn i tekstavsnittet.

fil:///IT1/Kode1/Kap1/filnavn.html

Min overskrift Dette er et avsnitt på min første nettside.

Mellom taggene <head>…</head> skriver vi informasjon om nettsiden.

Koden <meta charset="UTF-8"> sier hva slags tegnsett som skal brukes på nettsiden. UTF-8 er navnet på et tegnsett med en samling tegn, tall, bokstaver, emojier og lignende. Hvis vi ikke sier noe om hvilke tegn som skal være tillatt på nettsiden, kan det hende at for eksempel nordiske bokstaver som æ, ø og å ikke vises på riktig måte. I <head>…</head> skriver vi inn kode for det som kalles for metadata, det er informasjon om nettsiden som ikke blir synlig på selve nettsiden. Teksten vi skriver mellom <title>…</title> blir derimot synlig i fanen øverst i nettleseren.

HTML-kode som er synlig på nettsiden ligger mellom taggene <body> og </body>

I <body>…</body> skriver vi inn HTML-koden for innholdet som blir synlig på nettsiden. En overskrift i HTML lager vi på denne måten: <h1>Min overskrift</h1>. Kodene <h1>…</h1> er taggene som ligger før og etter teksten vår og sier at den skal være en overskrift på nivå 1. <h1> er start-tagg, og </h1> er en slutt-tagg. Kodene <p>…</p> er tagger som vi bruker til et tekst­ avsnitt. Alt som ligger mellom start-taggen <p> og slutt-taggen </p>, blir et tekstavsnitt på nettsiden.

Kom i gang med HTML-koding HTML-filer har filendelsen .html

HTML-koden vi skriver blir det vi kaller et HTML-dokument som vi lagrer som en HTML-fil. Navnet på en HTML-fil kan være minside.html. Vi kan bruke egne programmer som er utviklet spesielt for skriving av HTMLkode. Men du kan også bruke et skriveprogram som for eksempel Notisblokk. Følg oppskriften på neste side, så lager du din første nettside.

< 01 Lage nettsider med HTML >

Kode1_Informasjonsteknologi Kap01.indd 9

9

24.05.2017 14:35:46

<!DOCTYPE html> <html lang="no"> <head> <meta charset="UTF-8"> <title>…</title> </head> <body> <h1>…</h1> <p>…</p> </body> </html>

<h1>Min overskrift</h1> Start-tagg

Innhold HTML-element

Dette HTML-elementet kalles h1-elementet.

Slutt-tagg

Kom i gang med HTML-koding 1. Opprett en mappe på skrivebordet ditt og kall den Kap1.

2. Åpne et skriveprogram, for eksempel Notisblokk.

3. I skriveprogrammet oppretter du et nytt dokument som du lagrer i mappen kapittel 1. Skriv inn filnavn: minside.html.

Hvis du bruker N ­ otisblokk, må du passe på at filtypen er «Alle filer».

4. Skriv inn HTML-koden til venstre i dokumentet ditt. Vær nøyaktig. Velg Fil og Lagre.

5. Nå fyller du de tomme feltene … med din egen tekst.

6. For å se resultatet av koden i en nettleser kan du åpne filen enten ved å dobbeltklikke på den eller ved å dra den over til nettleseren.

HTML-elementer En start-tagg, innhold og en slutt-tagg kaller vi for et HTML-element. Et HTML-element som vi har taggene <h1> og </h1> kaller vi også et h1-element. På den samme måten kaller vi det vi har markert med taggene <p> og </p> for et p-element.

Et HTML-element består som regel av en start-tagg, innhold og en slutt-tagg.

Tegnene < og > er det som kalles for reserverte til HTML-kode. Det betyr at vi må unngå å bruke dem i teksten for at ikke nettleseren skal tro at nå kommer det en tagg. Ønsker vi likevel å ha tegnene < eller > på nettsiden, kan vi bruke koden &lt; for < og &gt; for >.

EKSTRASTOFF

Innrykk i koden Hvis et HTML-element har flere ulike HTML-elementer inni seg, bør vi skrive koden under hverandre og med innrykk. Dette innrykket lager struktur i koden vår og gjør den lettere å lese. Bruk tabulatortasten til å lage innrykk i koden. Alternativt kan du lage et innrykk med fire mellomrom med spacetasten.

<body> Innrykk <h1>Min overskrift</h1> Innrykk < p>Dette er et avsnitt.</p> </body>

Bruk tabulatortast til å lage innrykk.

10

Kode1_Informasjonsteknologi Kap01.indd 10

24.05.2017 14:35:48

PRØV SELV 1. Åpne programmet Notisblokk eller last ned et gratis program på www.kode.cdu.no.

2. Lag en nettside med HTML-kode som inneholder en overskrift med taggene <h1>…</h1> og et tekstavsnitt med taggene <p>…</p>. Lagre fila som minreise.html i mappen kapittel 1.

3. Kode en nettside med HTML der du forteller om en reise du har hatt.

Skriv ned hvilke HTML-elementer du har brukt.

1.2 Tekst Ulike tagger former en tekst Nå skal vi begynne å fylle nettsiden vår med tekst. Teksten til nettsiden skriver vi inne i body-elementet, altså mellom start-taggen <body> og slutt-taggen </body>. Vi legger ofte HTML-elementer inni andre HTML-­ elementer. Hvis vi for eksempel vil utheve deler av innholdet i et p-element, kan vi bruke taggen <b> for å gjøre teksten fet. Kun teksten som står mellom taggene <b> og </b> blir da fet tekst. Tabellen nedenfor viser noen HTML-tagger vi kan bruke på tekst i body-elementet.

Vi setter inn tekst inni body-elementet. Tagger kan settes inni andre tagger. <body> <h1>Overskrift</h1> <p>Vanlig tekst<b>Fet tekst</b>Vanlig tekst</p> </body>

Vi skriver tre prikker … der det skal være et innhold.

TAGG

BRUK

FORKLARING

STÅR FOR

<h1>

<h1>…</h1>

overskrift på nivå 1

heading 1

<h2>

<h2>…</h2>

overskrift på nivå 2

heading 2

<p>

<p>…</p>

avsnitt

paragraph

<b>

<b>…</b>

fet

bold

<i>

<i>…</i>

kursiv

italic

<mark>

<mark>…</mark>

markert tekst

marked

<br>

<br>

bryter linja, har ingen slutt-tagg

break

<span>

<span>…</span>

grupperer innhold uten linjeskift

span

<ul>

<ul>…</ul>

unummerert liste

unordered list

<ol>

<ol>…</ol>

nummerert liste

ordered list

<li>

<li>…</li>

listepunkt

list item

<!-->

<!--…-->

kommentar, innholdet vises ikke på nettsiden < 01 Lage nettsider med HTML >

Kode1_Informasjonsteknologi Kap01.indd 11

11

24.05.2017 14:35:48

EKSEMPEL

Overskrift og tekstavsnitt med fet og kursiv Vi skal nå lage en nettside som handler om en klassetur til Hardanger­ vidda. Nettsiden skal ha to overskrifter og en tekst der deler av teksten skal være uthevet som kursivert og fet. Vi oppretter en HTML-fil og lagrer den som tur.html. Vi begynner med overskriftene. Overskriften skal begynne på nivå 1. Hvis du har underoverskrifter, skal de ligge på nivå 2 osv.

Størrelsen på teksten blir da mindre og mindre. Til tekstavsnittet bruker vi taggen <p>. Vi vil kursivere alle reisedatoer og ha fet tekst på viktige ord som «Hardangervidda» og «varme klær». <!DOCTYPE html> <html lang="no"> <head> <meta charset="UTF-8"> <title>Min andre nettside</title> Min andre fil:///IT1/Kode1/Kap1/tur.html </head> <body> <h1>Klassetur</h1> Reise til et fiskevann <h2>Reise til et fiskevann</h2> Vi reiser til Hardangervidda på fisketur. Denne <p> reisen vil foregå i tidsrommet 01.09.2018 til

Vi reiser til <b>Hardangervidda</b> på fisketur. Denne 10.09.2012. Ta med fiskestang og god tålmodighet! reisen vil foregå i tidsrommet <i>01.09.2018</i> til Det kan bli kaldt, så varme klær er også viktig. <i>10.09.2018</i>. Ta med fiskestang og god tålmodigNår du åpner HTML-filen i het! Det kan bli kaldt, så <b>varme klær</b> er også viktig. en nettleser, ser du at det er </p> forskjellig størrelse på teksten </body> i overskriftene og teksten i </html> avsnittet.

Klassetur

Hvis et HTML-element har mye innhold eller har flere ulike HTML-­ elementer inni seg, setter vi som oftest tagger over og under innholdet og rykker innholdet inn. Hvis et HTML-element har lite innhold og får plass på én linje, setter vi som oftest taggene til venstre og til høyre for innholdet.

Vi kan samle HTML-koden på en linje slik: <body> <h1>Overskrift</h1><p>Vanlig tekst<b>Fet tekst</b>Vanlig tekst</p> </body>

Lister med HTML <ul> = unordered list = kulepunkt liste <ol> = ordered list = nummerert liste

Vi kan med HTML-kode sette opp teksten på en nettside i en liste. En liste kan være med kulepunkter eller med nummer. Taggene <ul>…</ul> gir en liste med kulepunkter, mens taggene <ol>…</ol> blir en nummerert liste.

Vi bruker taggene <li>…</li> altså et li-element, på alle de enkelte punktene som vi setter inni et ul-element eller et ol-element.

12

Kode1_Informasjonsteknologi Kap01.indd 12

24.05.2017 14:35:49

En nummerert liste

En unummerert liste

<ol> <ul> <li>…</li> <li>…</li> <li>…</li> <li>…</li> <li>…</li> <li>…</li> </ol> </ul>

EKSEMPEL

En liste Vi skal utvide nettsiden til klasseturen til Hardangervidda og har behov for å lage en liste med det alle må ha med seg på turen. Vi velger en liste som viser kulepunkter. Ovenfor listen legger vi inn en overskrift med <h3>. <!DOCTYPE html> <html lang="no"> <head> <meta charset="UTF-8"> <title>Min tredje nettside</title> </head> <body> <h1>Klassetur</h1> <h2>Reise til et fiskevann</h2> <p> Reise til et fiskevann Vi reiser til <b>Hardangervidda</b> på fisketur. Denne Vi reiser til Hardangervidda på fisketur. Denne reisen vil foregå i tidsrommet <i>01.09.2017</i> til reisen vil foregå i tidsrommet 01.09.2017 til <i>10.09.2017</i>. Ta med fiskestang og god tålmodig10.09.2017. Ta med fiskestang og god tålmodighet! het! Det kan bli kaldt, så <b>varme klær</b> er også vikDet kan bli kaldt, så varme klær er også viktig. tig.

Huskeliste </p> • Sovepose og liggeunderlag. <h3>Huskeliste</h3> • Matpakke til bussturen. <ul> • Drikkeflaske til vann. <li>Sovepose og liggeunderlag</li> • Fiskestang. <li>Matpakke til bussturen</li> <li>Drikkeflaske til vann</li> Resultatet av HTML-koden er en liste med kulepunkter. <li>Fiskestang</li> fil://IT1/Kode1/Kap1/tur.html </ul> Huskeliste </body> 1 Sovepose og liggeunderlag. </html> 2 Matpakke til bussturen.

Min tredje

fil:///IT1/Kode1/Kap1/tur.html

Klassetur

Vil du endre listen med kulepunkter til en nummerert liste, kan du endre dette ved å bytte ut ut taggene <ul> og </ul> med <ol> og </ol>.

3 Drikkeflaske til vann.

4 Fiskestang.

Med taggen <ol> lager vi en nummerert liste.

< 01 Lage nettsider med HTML >

Kode1_Informasjonsteknologi Kap01.indd 13

13

24.05.2017 14:35:50

Skriver vi inn to tekstavsnitt på nettsiden vår, kan vi skille dem fra hverandre ved å legge dem i hvert sitt p-element, slik: <p>…</p> og <p>…</p>. En annen måte å legge inn et linjeskift på er å bruke taggen <br>. Denne taggen bryter linja og har ingen slutt-tagg. Vi kan derfor dele opp et tekstavsnitt, slik: <p>Vi reiser til <b>Hardangervidda</b> på fisketur. Denne reisen vil foregå i tidsrommet <i>01.09.2017</i> til <i>10.09.2017</i>. <br>Ta med fiskestang og god tålmodighet! Det kan bli kaldt, så <b>varme klær</b> er også viktig.</p>

EKSTRASTOFF

Utviklingsverktøy og editorer Når du skal skrive HTML-kode kan du bruke et skriveprogram som Notisblokk. Du kan også velge å laste ned et utviklingsverktøy som er et prog­ram laget spesielt for skriving av kode. Eksempler er Notepad++, Sublime Text, Atom, Vim og WebStorm. Profesjonelle utviklere bruker ofte flere skjermer. Da har de utviklingsverktøyet med editoren på den ene skjermen og visning av resultatet på en annen skjerm. Det er ofte hensiktsmessig å få plass til både editor og visning av resultatet av koden på samme skjerm. På nettstedet www.kode.cdu.no finner du en slik gratis kode­editor.

Skriv inn/rediger koden: Tilbakestill HTML <!DOCTYPE html> <html lang="no"> <head> <meta charset="UTF-8"> <title>Min andre nettside</title> </head> <body> <h1>Klassetur</h1> <h2>Reise til et fiskevann</h2> <p>Vi reiser til <b>Hardangervidda</b> på fisketur. Denne reisen vil foregå i tidsrommet <i>01.09.2018</i> til <i>10.09.2018</i>. Ta med fiskestang og god tålmodighet! Det kan bli kaldt, så <b>varme klær</b> er også viktig. </p> </body> </html>

Resultat av koden: Kjør koden!

Klassetur

Reise til et fiskevann Vi reiser til Hardangervidda på fisketur.

Denne reisen vil foregå i tidsrommet 01.09.2018 til 10.09.2012. Ta med fiskestang og god tålmodighet! Det kan bli kaldt, så varme klær er også viktig.

I det venstre vinduet skriver du inn koden, mens i det høyre vinduet ser du nettsiden, altså resultatet av HTML-koden.

PRØV SELV

Du kan bruke editoren på www.kode.cdu.no

1. Lag en nettside om hvor du liker å reise på ferie. Nettsiden skal ha overskrifter på to nivåer. Det skal være tre avsnitt med tekst og to lister.

En unummerert liste om hva du liker med det å ha ferie og en nummerert liste med dine favorittsteder å reise på ferie. Filen kan du kalle ferie.html.

2. Lag en nettside med to lister. Det kan for eksempel være en handleliste eller en liste med favorittfilmene dine. Hver liste skal ha en overskrift.

3. Bruk en tekst du har skrevet tidligere og legg inn ulike tagger til å gjøre om tekst til overskrifter, tekstavsnitt og lister. Se tabellen på side 11.

Du finner også flere tagger på innsiden av omslaget.

14

Kode1_Informasjonsteknologi Kap01.indd 14

24.05.2017 14:35:50

1.3 Bilder Bilder med img-elementet

Bildefiler har ofte filendelsen .jpg

De fleste nettsider inneholder bilder. Hver dag lastes det ned milliarder av bilder fra Internett. I HTML bruker vi et img-element når vi skal sette inn et bilde på en nettside. De HTML-elementene vi har sett på til nå, har hatt en start-tagg og en slutt-tagg med innhold mellom seg. img-­elementet har ikke noen slutt-tagg, kun en start-tagg <img>. Vi kan sammenlikne et img-element med en bilderamme. Bilderammen må fylles med et bilde, og inni taggen <img> setter vi inn den bildefilen vi vil vise på nettsiden, slik: src="filnavn.jpg".

Vi legger inn et bilde med taggen <img> i body-elementet. img-elementet med en bildefil ser slik ut: <body> <img src="filnavn.jpg"> </body>

Bildefiler er ofte på jpg-formatet. For at bildet skal vises på nettsiden, må det være lagret på samme sted som HTML-filen på datamaskinen din. Hvis du lagret HTML-filen til nettsiden på skrivebordet, må du også lagre bildefilen på skrivebordet. Legger du inn to bilder, må begge være i den samme mappen. To bilder legger du inn i to img-elementer, slik: <body> <img src="filnavnA.jpg"> <img src="filnavnB.jpg"> </body> < 01 Lage nettsider med HTML >

Kode1_Informasjonsteknologi Kap01.indd 15

15

24.05.2017 14:35:51

Attributter til img-elementet Merk at verdien til attributtet alltid settes i anførselstegn “…”

Koden src="filnavn" inne i taggen <img> forteller nettleseren hvilket bilde som skal vises. Slik informasjon som ligger inne i tagger, kaller vi attributter. Attributt betyr egenskap. Et img-element må ha attributtet src, som forteller nettleseren hvilken bildefil som skal vises. Et annet attributt vi bør bruke er alt. <body> <img src="filnavn.jpg" alt="Alternativ tekst"> </body>

alt = alternative

Attributtet alt gjør at når du fører pila over bildet, vil teksten “Alternativ tekst” dukke opp. Det fins programvare og nettlesere som er tilpasset blinde og svaksynte. Den teksten som står i attributtet alt, blir lest opp for dem, slik at de som ikke kan se bildet, får en beskrivelse av det i stedet.

Den alternative teksten vises også istedenfor bildet hvis nettleseren av en eller annen grunn ikke laster inn bildet. De vanligste attributtene til img-elementet er vist i tabellen nedenfor.

ATTRIBUTT

FORKLARING

IMG-ELEMENT

Piksler = bildepunkter

src

forteller nettleseren hvilket bilde som skal vises src="filnavn.jpg"

width

bredden på bildet i piksler eller som prosent av bredden til vinduet til nettleseren

height

høyden på bildet i piksler eller som prosent av høyden til vinduet nettleseren

title

tittel på bildet som vises når du holder markøren over bildet en stund

alt

alternativ tekst som beskriver bildet hvis bildet ikke vises ordentlig eller for nettlesere tilpasset svaksynte

Sette bredden og høyden med HTML-koden Med attributtene width og heigth setter vi bredden og høyden i antall piksler til det feltet bildet skal vises på nettsiden. Hvis du bare setter attributtet for bredden eller for høyden, vil bildet bli skalert proporsjonalt. Det vil si at størrelsesforholdet mellom høyde og bredde fremdeles er riktig. <body> <img src="filnavn.jpg" alt="Alternativ tekst" width="100" heigth="120"> </body>

16

Kode1_Informasjonsteknologi Kap01.indd 16

24.05.2017 14:35:51

EKSEMPEL

Legge inn bredden og høyden til et bilde med HTML-koden

Du kan laste ned bilder fra kode.cdu.no.

Min fjerde

La oss nå legge inn et bilde på nettsiden til fisketuren. For at dette skal fungere, må du ha et bilde som heter for eksempel fisketur.jpg lagret på samme sted som HTML-filen klassetur.html på datamaskinen din. Hvis du lagret nettsiden på skrivebordet, må du også lagre bildet på skrivebordet. Vi bruker taggen <img>. Bildefilen vår heter fisketur.jpg og vi legger den inn i koden med attributtet src. Bredden og høyden setter vi med attributtene width og height.

<!DOCTYPE html> fil:///IT1/Kode1/Kap1/fisketur.html <html lang="no"> <head> <meta charset="UTF-8"> <title>Min fjerde nettside</title> </head> <body> <h1>Fisketur</h1> <img src="fisketur.jpg" width="600" height="400" title="Fisketur" alt="På bildet ser vi fiskeutstyr og et vann."> </body> </html>

Fisketur

Med HTML-koden <img src="fisketur.jpg"> har vi satt inn et bilde under overskriften på nettsiden.

Vi kan også skrive koden for img-elementet bortover slik: <img src="fisketur.jpg" width="600" height="400" title="Fisketur" alt="På bildet ser vi fiskeutstyr og et vann.">

Endre bredde og høyde i et bilderedigeringsprogram

Når du zoomer inn på et bilde vil du se pikslene, de små firkantene, bildet er satt sammen av.

Du lærer mer om bilder i kapittel 2 og 3.

Et bilde er satt sammen av piksler. Hvis du høyreklikker på en bildefil og velger «Egenskaper» får du opp informasjon om hvor mange piksler bildet har i høyden og bredden. Et bilde kan for eksempel ha 2048 x 1536 piksler.

Det vil si 2048 piksler i bredden og 1536 i høyden. Med attributtene width og height kan vi velge en bredde og høyde i antall piksler eller prosent til det feltet vi vil at bildet skal vises på nettsiden. Det betyr at vi til bildet med 2048 piksler i bredden kan velge en visning på 600 piksler i bredden, og høyden vil da skaleres automatisk. Hvis vi i utgangspunktet har et mindre bilde på for eksempel 400 x 266 piksler bør vi helst ikke skrive i HTML-koden et større antall piksler. Gjør du det, vil bildet se kornete ut.

< 01 Lage nettsider med HTML >

Kode1_Informasjonsteknologi Kap01.indd 17

17

24.05.2017 14:35:52

Image Size W: 1000

px

H: 667

px

I et bildebehandlingsprogram kan du skalere ned antall piksler i bredden.

I et bilderedigeringsprogram kan du ta ned antall piksler i bredden, og antall piksler i høyden endres da automatisk i et bilde. Ønsker du en visning av et bilde på 600 piksler i bredden av skjermen, er det ikke nødvendig at selve bildet er på flere piksler enn 600 i bredden. Du kan derfor åpne bildet i et bilderedigeringsprogram og skalere ned bredden der. Men du må fortsatt huske på at du i HTML-koden må sette bredden og høyden til det feltet du vil at bildet skal vises på nettsiden.

EKSTRASTOFF

Ulike skjermstørrelser En skjerm er også satt sammen av piksler. Oppløsningen til en skjerm oppgir vi som antall piksler i bredden og høyden. Jo større skjermen er, desto flere piksler må vi ha for at kvaliteten på skjermen skal være god. En liten skjerm med mange piksler har bedre kvalitet enn en stor skjerm med få piksler. 1000 små piksler tar mindre plass enn 1000 store piksler. En piksel på en mobiltelefon er derfor mindre enn en piksel på en stor skjerm.

Skjermoppløsning til en datamaskin kan være 1280 x 1024 piksler og en mobiltelefon 1334 x 750 piksler.

PRØV SELV 1. Lag en nettside der du setter inn ett bilde og bruker attributtet alt.

2. Lag en nettside der du setter inn tre bilder og skriver en tittel og tekst til hvert av bildene.

3. Hva bruker vi attributtet width til i img-elementet?

4. Sett inn åtte eller flere bilder med ulik størrelse på en nettside. a) Hvordan plasserer bildene seg på nettsiden? b) Sett den samme høyden på alle bildene med attributtet height.

Hvordan plasserer bildene seg nå?

5. Legg inn et img-element på en nettside, men sett inn en referanse til en bildefil som ikke finnes, for eksempel src="feilfilnavn.jpg". a) Hva ser du på skjermen? b) Skriv inn attributtene alt, width og height. Hva ser du nå?

6. Sett bredden og høyden på et bilde med HTML-kode.

7. Undersøk hvor mange piksler skjermen din har. Prøv ut ulike bredder og høyder på et bilde satt med HTML-koden.

8. Bruk et bilderedigeringsprogram og skaler ned et bilde slik at det får samme antall piksler i bredden som du har satt inn i HTML-koden.

18

Kode1_Informasjonsteknologi Kap01.indd 18

24.05.2017 14:35:54

1.4 Lyd og video Lyd med audio-elementet Lyder kan brukes på mange måter på nettsider. I spill som ligger på nett­ sider kan vi ha lydeffekter. Det kan for eksempel komme et pling når det blir skåring i en fotballkamp, eller det kan være et band som legger ut musikken sin osv. I HTML har vi et audio-element som vi bruker til å sette inn lyd på nettsiden. Det ligner på img-elementet, men i motsetning til img-elementet har audio-elementet både en start-tagg og en slutt-tagg.

Vi legger inn en lyd med taggen <audio> i body-elementet. Audioelementet med en mp3-fil ser slik ut: <audio src="filnavn.mp3"></audio> Lydfiler har ofte filendelsen .mp3

Lydfilen er ofte i formatet mp3. Lydfilen lagrer vi her på samme sted på datamaskinen som HTML-filen. Når vi åpner nett­siden, kan vi nå verken høre lyden eller se noen forandring. Lydfilen spilles nemlig ikke av automatisk. Vi må sette inn attributtet autoplay i start-­taggen for at lyden skal spilles av automatisk når nettsiden åpnes, slik: <audio src="filnavn.mp3" autoplay></audio>

Hvis vi ønsker å gi dem som er inne på nettsiden, mulighet til å starte og stoppe lyden og justere volumet, setter vi også inn attributtet controls i start-taggen. Da vil en avspiller med knapper og volumkontroll vises. Slik setter du inn en lydfil som avspilles automatisk og med en lydavspiller på nettsiden: <audio src="filnavn.mp3" autoplay controls></audio> Attributtet controls gir oss en avspiller for lydfilen.

00:27

ATTRIBUTT

00:54

FORKLARING

AUDIO-ELEMENT

src

lydfil som skal spilles src="filnavn.mp3"

autoplay

lyden spilles av med en gang

controls

viser en lydavspiller

loop

lyden spilles av flere ganger

muted

volumet er skrudd helt ned

preload

lydfilen lastes inn med en gang nettsiden åpnes

< 01 Lage nettsider med HTML >

Kode1_Informasjonsteknologi Kap01.indd 19

19

24.05.2017 14:35:54

EKSEMPEL

Spille en sang når nettsiden åpnes På nettsiden vår vil vi sette inn en bursdagssang med audio-elementet.

Mp3-filen lagrer vi på skrivebordet der vi har HTML-filen. Eleven som åpner nettsiden skal få avspilt lydfilen med en gang og vi setter inn attributtet autoplay. For at det skal være lett å skru av lyden setter vi også inn en lydavspiller med attributtet controls.

Min femte

fil:///IT1/Kode1/Kap1/sang.html

Bursdagssang 00:00

01:24

Resultatet av koden blir en nettside med en lydavspiller.

<!DOCTYPE html> <html lang="no"> <head> <meta charset="UTF-8"> <title>Min femte nettside</title> </head> <body> <h1>Bursdagssang</h1> <audio src="bursdagssang.mp3" autoplay controls> </audio> </body> </html>

Video med video-elementet

Videofiler har ofte filendelsen .mp

Vi deler ofte video med andre vi kjenner, og alle de store nettavisene bruker video til nyhetsinnslag og underholdning. I HTML bruker vi videoelementet til å sette inn en video. Det første bildet fra videoen vises, men videoen spilles ikke av automatisk. På samme måte som med audioelementet må vi sette inn attributtet autoplay i taggen <video> for at videoen skal spilles av med en gang nettsiden med videoen åpnes. Hvis vi vil ha en videoavspiller, setter vi også her inn attributtet controls.

Vi legger inn en video med taggen <video> i body-elementet. Videoelementet med en mp4-fil ser slik ut: <video src="filnavn.mp4"></video>

ATTRIBUTT

FORKLARING

VIDEO-ELEMENT

src

videofil som skal spilles src="filnavn.mp4"

autoplay

videoen spilles av med en gang

controls

viser en videoavspiller

loop

videoen spilles av flere ganger

muted

volumet er skrudd helt ned

preload

videofilen lastes inn med en gang nettsiden åpnes

poster

bilde som vises før avspilling av videoen poster="filnavn.jpg"

width

bredden på visningen i piksler

20

Kode1_Informasjonsteknologi Kap01.indd 20

24.05.2017 14:35:55

EKSEMPEL

Spille en video når nettsiden åpnes På nettsiden ønsker vi nå å sette inn en video fra juleforestillingen.

Mp-4-­filen lagrer vi på skrivebordet, og i HTML-filen skriver vi koden. Som du ser har vi ikke tatt med all HTML-kode her. Når du koder, må du alltid ha med all kode.

Min sjette

fil:///IT1/Kode1/Kap1/forestilling.html

Video fra juleforestillingen

<head> <meta charset="UTF-8"> <title>Min sjette nettside</title> </head> <body> <h1>Video fra juleforestillingen</h1> <video src="forestilling.mp4" width="400" ></video> </body>

Vi ser det første bildet i videoen fra juleforestillingen.

Du finner filer du kan bruke på kode.cdu.no

Video-elementet har de samme mulige attributtene som audio-elementet, men det har i tillegg attributtet poster, som brukes til å sette inn et bilde som vises før avspillingen av videoen begynner. Koden for å sette inn en video med et bilde som vises før videoen starter, og en avspiller til å kontrollere videoen, ser slik ut: <video src="forestilling.mp4" poster="show.jpg" width="400" controls></video>

PRØV SELV 1. Sett inn en lydfil på en nettside.

2. Sett inn tre lydfiler til på nettsiden. Sett på en avspiller for hver av dem.

Den første lydfilen skal spilles av automatisk.

3. Sett inn en video med en avspiller på en nettside. Videoen skal ikke begynne å spille med en gang, men det skal vises et bilde inntil filmen settes i gang.

4. Sett inn lydfilen Blues-loop.mp3 med audio-elementet på en nettside, og sørg for at den spilles av i loop.

5. Gjør et lydopptak med datamaskinen din. Spill av lyden på en nettside samtidig med at blues-loopen går i bakgrunnen.

< 01 Lage nettsider med HTML >

Kode1_Informasjonsteknologi Kap01.indd 21

21

24.05.2017 14:35:56

1.5 Lenker og nøstede HTML-elementer Lenker med a-elementet

Eksempler på url-adresser: http://www.kode.cdu.no http://www.aftenposten.no http://www.nrk.no http = hypertext transfer protocol

Når du klikker på en lenke på en nettside, åpnes den nettsiden. En lenke legger vi inn i HTML-koden med et a-element. Den består av en start-tagg <a>, en slutt-tagg </a> og et innhold mellom start-taggen og slutt-taggen.

Dette innholdet er ofte en tekst, og det er den som blir klikkbar. Det kan være en tekst, men det kan også være for eksempel et bilde. Slik klikkbar tekst kaller vi hyperlenke eller hypertekst. Nettsiden som lenke skal gå til setter vi inn med attributtet href, slik. <a href="url">Tekst som er klikkbar</a>.

Verdien til attributtet href er det vi kaller en url (Unified Resource Locator).

Alle nettsider på Internett har en unik url-adresse.

Vi setter inn en lenke med taggen <a> i body-elementet.

Med a-elementet setter vi inn en lenke, slik: <a href="URL-adresse">Tekst som er klikkbar</a>

EKSEMPEL

Lenke til en nettside

Resultatet av koden er en lenke.

Hvis man klikker på teksten, åpnes NRKs nettsider. fil://IT1/Kode/Kap1/lenke.html

Les mer på NRK.

Vi skal nå lage en lenke av teksten “Les mer på NRK” på nettsiden vår. Når du klikker på denne lenken, lastes NRK-nettsiden med URL-adressen: http://www.nrk.no inn i nettleseren. Attributtet href må altså ha URL-adressen til NRKs nettsider som verdi. Som du ser har vi heller ikke her tatt med all HTML-kode. Når du koder, må du alltid ha med all kode. <body> <a href="http://www.nrk.no">Les mer på NRK</a> </body>

Hvis du ønsker at nettsiden lenken peker til skal åpnes i en ny fane i nett­ leseren bruker vi attributtet target med verdi _blank. En annen verdi til target er _self som åpner den nye nettsiden det pekes til i samme fane. Denne setter vi sjelden på, siden det er dette som er standard target for hyperlenker. <a href="url-adresse" target="_blank">Nettsiden åpnes i en ny fane</a>

Nøstede HTML-elementer HTML-elementer som ligger inne i andre HTML-elementer, kaller vi nøstede HTML-elementer. Vi så et eksempel på dette da vi laget en tekst bestående av lister. Li-elementene i en liste ligger inne i et ul- eller ol-element. Li-elementene kan også inneholde nye HTML-elementer.

22

Kode1_Informasjonsteknologi Kap01.indd 22

24.05.2017 14:35:56

For eksempel kan et punkt inneholde et a-element med en lenke, nå ligger a-elementet inni et li-element. På denne måten nøstes de ulike HTML-­ elementene inni hverandre. Når vi skriver kode for nøstede HTML-elementer, bruker vi innrykk. Koden nedenfor viser to nivåer av nøsting. <ul> <li> <a href="url-adresse">Tekst</a> </li> </ul>

Et HTML-element kan inneholde andre HTML-elementer. Dette kalles nøstede HTML-elementer.

EKSEMPEL

En liste med lenker til nettaviser I en unummerert liste <ul> legger vi inn en liste <li> som inneholder lenker <a> til noen kjente nettaviser. Vi velger å lage en liste til The New York Times, Le Monde og El Pais. Som vanlig setter vi verdiene til attributtet href i anførselstegn "…"

fil:///IT1/Kode1/Kap1/nyheter.html

Les siste nytt fra • New York Times • Le Monde • El Pais

Lenkene ligger inne i li-elementet.

<a href="url-adresse"> <img src="filnavn.jpg"> </a>

<body> <h2>Les siste nytt fra</h2> <ul> <li>

<a href="http://www.nytimes.com/">New York Times</a> </li> <li> <a href="http://www.lemonde.fr/">Le Monde</a> </li> <li> <a href="http://elpais.com/">El Pais</a> </li> </ul> </body>

Et bilde kan ligge inne i et a-element slik at du kommer til en annen nettside når du klikker på bildet. På forsiden til mange nettaviser kan du klikke både på et bilde, en overskrift og en liten tekst for å lese mer om en nyhet.

Da ligger HTML-elementene for bilde og tekst sammen som en lenke inne i a-elementet. Klikk på dette vil føre til den nettsiden som er angitt i attributtet href inni <a>. < 01 Lage nettsider med HTML >

Kode1_Informasjonsteknologi Kap01.indd 23

23

24.05.2017 14:35:57

EKSEMPEL

Bruk av bilde, overskrift og tekst i en lenke Resultatet av koden er at klikk på bildet, på overskriften eller på teksten åpner nettsiden pinnsvinhjelpen.no.

På nettsiden vår setter vi inn et bilde, en overskrift og en tekst. Bildet, overskriften og teksten <p> ligger inne i et a-element. Når noen klikker på bildet, overskriften og teksten åpnes nettsiden.

fil:///IT1/Kode1/Kap1/pinnsvin.html

<a href="http://www.pinnsvinhjelpen.no/"> <img src="pinnsvin.jpg"> <h1>Pinnsvin</h1> <p>På pinnsvinhjelpen.no finner du informasjon om pinnsvin.</p> </a>

Pinnsvin

På pinnsvinhjelpen.no finner du informasjon om pinnsvin.

Struktur og navigasjon på nettsteder Et nettsted består av flere nettsider.

Til nå har vi laget lenker til nettsider som allerede fins på Internett. Et nettsted består av flere nettsider. Vi sier for eksempel at aftenposten.no er et nettsted som består av et stort antall nettsider. På forsiden er det lenker til mange av disse nettsidene. Å klikke på disse lenkene på nettstedet og åpne forskjellige nettsider kaller vi å navigere på et nettsted.

EKSEMPEL dyrenett ekorn.html ekorn.jpg kanin.html kanin.jpg pinnsvin.html pinnsvin.jpg I mappen dyrenett har vi lagret de tre HTML-filene og de tre bildefilene.

Resultatet av koden er det vi kaller et nettsted med tre nettsider. Det er interne lenker mellom nettsidene.

Et nettsted med interne lenker Vi skal nå lage et nettsted som består av tre nettsider. Nettstedet vårt skal ha tre ulike nettsider som handler om forskjellige dyr – et pinnsvin, et ekorn og en kanin. De tre nettsidene skal være lenket sammen slik at vi kan navigere mellom dem med interne lenker.

1.

2.

3.

4.

5.

fil:///IT1/Kode1/Kap1/kanin.html

Ekorn Pinnsvin Kanin

Kanin

En kanin kan leve i 8–10 år.

Opprett en ny mappe på datamaskinen din og kall den dyrenett.

Opprett tre HTML-filer og lagre dem i mappen dyrenett.

I den samme mappen lagrer du tre bilder av dyrene.

I hvert av HTML-dokumentene skriver du en kort tekst og legger inn bilde.

Fra de enkelte nettsidene skal det også være mulig å navigere til de andre nettsidene. Vi må derfor legge inn tre lenker på hver av nettsidene.

Her er koden for nettsiden om kaniner: <body> <a href="ekorn.html">Ekorn</a> <a href="pinnsvin.html">Pinnsvin</a> <a href="kanin.html">Kanin</a> <h1>Kanin</h1> <img src="kanin.jpg" alt="Bilde av en kanin"> <p>En kanin kan leve i 8-10 år.</p> </body>

24

Kode1_Informasjonsteknologi Kap01.indd 24

24.05.2017 14:35:57

Interne og eksterne lenker HTML-filene til nettsidene er lagret på det som kalles en webserver. En webserver er en datamaskin som kun brukes til å lagre nettsider og innhold som bilder, lyd og video. Webserveren fungerer slik at innholdet på den er “synlig” for hele verden. Alle med Internett-tilgang kan se disse nettsidene. Innholdet på webserveren er organisert i mapper, slik som de er på din egen datamaskin. Når vi lager lenker mellom nettsider som er lagret på samme webserver, eller for den saks skyld på den samme datamaskinen, behøver vi ikke skrive den fullstendige adressen til nettsiden.

Lenker mellom nettsider på samme nettsted kaller vi interne lenker. Lenker til nettsider på andre nettsteder kaller vi eksterne lenker.

Webserver

EKSTRASTOFF

Filer lagret i ulike mapper dyrenett ekorn.html kanin.html pinnsvin.html bilder ekorn.jpg kanin.jpg pinnsvin.jpg

I eksempelet på forrige side lagret vi HTML-filene og jpg-filene i den samme mappen «dyrenett». I img-elementet refererer vi til bildefilen slik: <img src="kanin.jpg">. Hvis vi i mappen «dyrenett» oppretter en ny mappe som vi kaller «bilder» og i denne mappen lagrer alle bildefilene, må vi i img-elementet si hvilken mappe bildefilen ligger i, slik at html-koden finner den. Både mappenavnet og bildefilen må med, slik: <img src="bilder/kanin.jpg">.

Oppretter vi en mappe til nedover i strukturen som heter «dyrebilder», må vi ta med begge mappenavnene, slik: <img src="/bilder/dyrebilder/kanin.jpg">.

Hvis vi derimot oppretter mappen «bilder» på samme nivå som mappen «dyrenett» må vi gi beskjed slik at html-fila går ett nivå utover i strukturen. Ett nivå utover i strukturen viser vi med ../ før mappenavnet, slik: <img src="../bilder/kanin.jpg">.

PRØV SELV 1. Lag en liste med lenker til nettsteder du ofte er innom.

2. Vi sier at taggen <html> viser hvor nivå 1 i nøstingen starter. Nevn tre elementer som er typiske på nivå 2.

3. Lag et nettsted om reptiler. a) Nettstedet skal bestå av tre nettsider. b) Alle nettsidene skal ha et bilde og en tekst. c) Alle nettsidene skal ha tre mindre bilder som skal kunne klikkes på for å navigere til de andre sidene. d) Alle nettsidene skal ha en liste med fakta om et reptil.

4. Lag en nettside med et bilde. Når bildet klikkes på skal nettsiden til kode.cdu.no åpne seg.

5. Lag en nummerert liste med lenker til kapitlene til Kode 1 på kode.cdu.no.

< 01 Lage nettsider med HTML >

Kode1_Informasjonsteknologi Kap01.indd 25

25

24.05.2017 14:36:00

1.6 Tabeller

En tabell lager vi med table-elementet og taggene <tr> og <td>.

Rader og kolonner i tabeller Tabeller bruker vi til å vise tall og tekst på en oversiktlig måte. I HTML bruker vi table-elementet med taggen <table> til å lage tabeller. En tabell består av flere rader, og i HTML lager vi en rad med taggen <tr>. I en rad legger vi inn innholdet i de enkelte cellene med taggen <td>. Vi nøster altså td-elementer inni tr-elementer. Vil vi ha en overskrift med større font på den øverste raden bruker vi taggen <th>.

<table> <tr> <td>Innhold</td> </tr> </table>

EKSEMPEL

Legge inn sanger i en tabell Nå skal vi skrive kode for en tabell som viser hvilken låt som var julens slager de siste årene i Norge. Først setter vi inn en rad med celler som fungerer som overskrifter. Vi bruker taggen <th> til overskriftene. Deretter følger det en rad for hvert år med data om slagerne. Til dette bruker vi taggen <td>.

fil:///IT1/Kode1/Kap1/juleslagere.html

År 2014 2015 2016

Slager Wild Eyes Hello Rockabye

Artist Broiler feat. Ravvel Adele Clean Bandit feat. Sean Paul & Anne-Marie

Resultatet av koden er en tabell med de sangene som var mest populære i julen fra 2014 til 2016 ifølge VG-lista.

<body> <table> <tr> <th>År</th> <th>Slager</th> <th>Artist</th> </tr> <tr> <td>2014</td> <td>Wild Eyes</td> <td>Broiler feat. Ravvel</td> </tr> <tr> <td>2015</td> <td>Hello</td> <td>Adele</td> </tr> <tr> <td>2016</td> <td>Rockabye</td> <td>Clean Bandit feat. Sean Paul & Anne-Marie</td> </tr> </table> </body>

26

Kode1_Informasjonsteknologi Kap01.indd 26

24.05.2017 14:36:03

<table> <thead> <tr> <th>Overskrift</th> </tr> </thead> <tbody> <tr> <td>Data</td> </tr> </tbody> </table>

Tabeller inneholder ofte overskrifter som sier noe om dataene som kommer i radene under. Dataene som står i radene hentes gjerne ut fra en database, som vi skal lære om i kapittel 9. Derfor deler vi opp tabellen i <thead> for overskriftene og <tbody> for dataene under overskriftene TAGG

BRUK

FORKLARING

STÅR FOR

<table>

<table>...</table>

En tabell

table

<tr>

<tr>...</tr>

En rad bortover

table row

<td>

<td>innhold</td>

Innhold i en celle

table data

<th>

<th>overskrift</th>

Overskrift

table head

<thead>

<thead>overskrifter</thead>

Alle overskriftene

table head

<tbody>

<tbody>data</tbody>

All data

table body

EKSTRASTOFF

Kommentarer i HTML-koden Når vi skriver HTML-kode hender det at vi trenger å notere forklaringer til oss selv eller andre som skal lese koden på et senere tidspunkt. Slike kommentarer ønsker vi ikke skal bli synlig på nettsiden. Vi legger derfor denne teksten inn i en kommentartagg <!-- … -->.

<body> <!-- tekst som ikke blir synlig på nettsiden --> </body>

PRØV SELV PLAGG

PRIS

Jakke

1200 kr

Genser

800 kr

Bukse

650 kr

Totalt

2650 kr

1. Lag tabellen i margen med HTML. Lagre fila som budsjett.html.

2. Lag en tabell med fire matretter du liker. Tabellen skal ha kolonner for nummer, navn og hvorfor du liker denne matretten.

3. Utvid tabellen med en kolonne og legg inn lenker til oppskrifter på disse matrettene.

4. Skriv om tabellen med juleslagerne slik at den blir delt opp i <thead> og <tbody>.

5. Finn en tabell på Internett og forsøk å gjenskape innholdet med din egen kode.

< 01 Lage nettsider med HTML >

Kode1_Informasjonsteknologi Kap01.indd 27

27

24.05.2017 14:36:03

1.7 Skjemaer Skjemaer til innsending av opplysninger I dag kan vi bestille varer på internett. Når du har bestemt deg for hva du vil kjøpe, fyller du også ut et skjema med navn og adresse, trykker på en knapp og skjemaet sendes inn. Så går det noen dager før varene ligger i postkassen din.

Med HTML-kode bruker vi form-elementet når vi skal lage skjemaer.

Form-elementer har taggene <form>…</form>. I et form-element er det forskjellige input-elementer. Det kan være et innskrivingsfelt for tekst eller tall. En knapp lager vi med et button-element. Når brukeren trykker på knappen, sendes dataene fra skjemaet inn. Hvor skjemaet blir sendt, angir du som en verdi i attributtet action i start-taggen <form action="filnavn.html">.

Netthandel

Vi oppretter et skjema med et form-element. I form-elementet legger vi et input-element og et button-element, slik: <body> <form action="filnavn.html"> <input> <button>…</button> </form> </body>

Input-element og button-element Skjemaer brukes til å samle informasjon av forskjellig slag. Inputelementet <input> har et attributt som heter type. Hva slags informasjon vi ønsker å samle inn, avgjør hva slags input-element det skal være. Hvis vi skal samle inn tekst, bruker vi <input type="text">. Dette gir oss et innskrivingsfelt for tekst. Hvis vi skal samle inn tall, bruker vi <input type="number">.

Da får vi et innskrivingsfelt der brukeren må skrive tall.

Tittel

fil://IT1/Kode/Kap1/filnavn.html

Innskrivingsfelt

<form action="filnavn.html"> <input type="text"> </form>

Attributtet name i et input-element brukes av den nettsiden som skal motta dataene som blir skrevet inn i skjemaet. Vi skriver for eksempel <input type="text" name="fornavn"> for å identifisere at det som brukeren skriver inn i dette innskrivingsfeltet, skal være et fornavn.

Button-elementet gir oss en knapp. For at klikk på knappen inni et skjema <form> skal føre til at skjemaet sendes inn, må button-elementet ha attributtet type satt til submit slik: <button type="submit">.

28

Kode1_Informasjonsteknologi Kap01.indd 28

24.05.2017 14:36:04

<form action="register.html"> <input type="text" name="navn"> <input type="number" name="alder"> <button type="submit">Registrer navn og alder</button> </form> fil:///IT1/Kode1/Kap1/register.html

Resultatet av koden er et skjema som skal fylles ut med navn og alder.

Registrer navn og alder

Når brukeren klikker på knappen, sendes skjemaet til en annen nettside. Vi må derfor to HTML-filer i den samme mappen. I den ene filen skal du skrive HTML-koden for skjemaet. Den andre HTML-filen kan være tom.

EKSTRASTOFF

URL-parametere Når du skriver inn navn og alder i eksempelet ovenfor og trykker på knappen, vil du se at nettsiden med URL-adressen register.html lastes inn i nett­ leseren. I adressefeltet på nettleseren ser du at det du skrev i skjemaet, sendes med og blir liggende etter navnet på URL-adressen. Dette kaller vi URL-parametere. Med URL-parametere kan vi sende informasjon mellom nettsider. Vi skriver

Hanne og 18 som henholdsvis navn og alder og klikker på knappen. Det er to parametere som sendes: navn=Hanne og alder=18.

Vi skal ikke gjøre noe mer med dataene vi sender med skjemaer i dette kapittelet. Nettsiden vi sender data til, kan ha kode som legger navnet vårt og alderen inn i et kunderegister. Dette får du lære mer om i kapittel 9.

fil:///IT1/Kode1/Kap1/register.html?navn=Hanne&alder=18

Data fra skjemaet sendes til en annen nettside som URL-parametere.

Brukervennlighet og label-elementet Det er viktig at de dataene brukeren skriver inn i et skjema er skrevet inn på riktig måte, og at brukeren har fylt inn informasjon i alle input-elementene. Skjemaet bør gi brukeren informasjon om hva som skal skrives i innskrivingsfeltene. Vi bruker label-elementet <label>…</label> til å sette på en «etikett» eller merkelapp på et input-element.

Label-elementet gir en etikett der vi skriver informasjon til brukeren: <form action="register.html"> <label>Navn:</label> <input type="text" name="navn" placeholder="Kari Nordmann" required> </form>

< 01 Lage nettsider med HTML >

Kode1_Informasjonsteknologi Kap01.indd 29

29

24.05.2017 14:36:04

ATTRIBUTT

Attributtet required til input-elementet sørger for at skjemaet ikke blir sendt før brukeren har fylt ut dette input-elementet. Attributtet placeholder brukes til å gi brukeren føringer for hva slags format dataene må ha når de skal settes inn. Vi kaller det validering når vi sjekker at alt som skal fylles ut, er utfylt, og at det er i riktig format.

Hvis noen har skrevet inn tekst der hvor det skal være tall, kan vi få problemer med å behandle dataene riktig.

FORKLARING

INPUT-ELEMENT

type

Utseendet til skjemaet

name

Et navn for å identifisere det som brukeren skriver inn

required

Skjemaet må fylles ut før det sendes

placeholder

En forklarende tekst til brukeren

EKSEMPEL

Skjema med etiketter og validering Nå skal vi forandre litt på skjemaet fra det forrige eksempelet så det blir mer brukervennlig. Begge innskrivingsfeltene er obligatoriske, så vi setter required som attributt til begge input-elementene og legger til attributtet placeholder for å gi et hint om formatet i innskrivingsfeltene. I tillegg setter vi på etiketter med <label>.

Med etiketter og forhåndsutfylling gjør vi skjemaet mer brukervennlig.

fil:///IT1/Kode1/Kap1/register.html

Navn: Kari Nordmann

Alder: 17

Registrer navn og alder

<body> <form action="register.html"> <label>Navn:</label> <input type="text" name="navn" placeholder="Kari Nordmann" required> <label>Alder:</label> <input type="number" name="alder" placeholder="17" required> <button type="submit">Registrer navn og alder</button> </form> </body> fil:///IT1/Kode1/Kap1/register.html

Navn: Kari Nordmann Hvis brukeren ikke har fylt ut et felt som er obligatorisk, vises en feilmelding.

Alder: 17

Registrer navn og alder

Vennligst fyll ut dette feltet.

fil:///IT1/Kode1/Kap1/register.html

Navn: Linda Nilsen Hvis det er feil format i et innskrivingsfelt, vises også en feilmelding.

Alder: e|

Registrer navn og alder

Skriv inn et tall.

30

Kode1_Informasjonsteknologi Kap01.indd 30

24.05.2017 14:36:04

Input-elementer til fargevelger, radiobokser, avkrysningsbokser og kalender Input-elementene for tekst er type="text" og for tall har vi type="number". Å bruke forskjellige input-elementer handler om å gjøre det enklere for de som skal bruke nettsidene våre, og det handler om å få inn informasjon som er korrekt. For eksempel ønsker vi ikke at brukeren skal skrive inn tekst når vi ønsker et tall. I HTML-koden fins det mange ulike input-elementer.

INPUT-ELEMENT

FORKLARING

<input type="text">

Innskrivingsfelt for tekst

<input type="number">

Innskrivingsfelt for tall

<input type="color">

Fargevelger - velge en farge

<input type="range">

Glider - velge et tall eller hvor mye det skal være

<input type="date">

Kalender - velge en dato

FIGUR

dd.mm.åååå februar 2019 ma 28 4

<input type="password">

Passordfelt - skrive inn passord

<input type="radio">

Radioknapper - velge ett alternativ

Ja

<input type="checkbox">

Avkrysningsbokser - velge ett eller flere alternativer

Liker

ti

29 5

on

30 6

to

fr

lø

sø

7

8

9

10

31

1

2

3

••••••••••• Nei Liker ikke

Select-element gir en nedtrekkliste En nedtrekkliste kan være nyttig der hvor brukeren skal kunne velge fra et gitt sett med alternativer fra en liste. Vi lager en nedtrekkliste med et selectelement som har taggene <select>…</select>. Option-elementer med de ulike alternativene er nøstet inni et select-element. Mellom taggene <option> og </option> setter vi inn teksten som blir synlig for brukerne. I optionelementet setter vi inn attributtet value slik at når dataene samles inn kan man se hvor de ulike svarene hører til.

Nedtrekksmeny Velg land

Velg land Norge Sverige Danmark

<body> <form action="URL-adresse"> <select name="velgLand"> <option value="Overskrift">Velg land</option> <option value="Norge">Norge</option> <option value="Sverige">Sverige</option> <option value="Danmark">Danmark</option> </select> </form> </body> < 01 Lage nettsider med HTML >

Kode1_Informasjonsteknologi Kap01.indd 31

31

24.05.2017 14:36:05

EKSEMPEL

Skjema for registrering I dette eksempelet skal vi lage et skjema for påmelding til en klassefest.

For å gjøre det enklest mulig for medelevene å fylle inn skjemaet riktig, bruker vi input-elementer som passer til den informasjon vi trenger. Vi bruker også et select-element der vi skal velge hva man skal spise.

Hva heter du?

Hva ønsker du å drikke til maten?

Brus Saft Vann Hva ønsker du å spise?

Resultatet av koden er et skjema for påmelding til klassefest.

<body> <form action="kode.cdu.no/klassefest.html"> <input type="text" name="navn" placeholder="Hva heter du?" required><br> <label>Hva ønsker du å drikke til maten?</label><br> <input type="radio" value="brus" name="rbDrikke"><span>Brus</span> <input type="radio" value="saft" name="rbDrikke"><span>Saft</span> <input type="radio" value="vann" name="rbDrikke"><span>Vann</ span><br> <select name="velgMat" required> <option value="">Hva ønsker du å spise?</option> <option value="pizza">Pizza</option> <option value="torsk">Torsk</option> <option value="taco">Taco</option> </select> </form> </body> Når vi skriver " " blir brukeren tvunget til å ta et valg.

PRØV SELV

32

Kode1_Informasjonsteknologi Kap01.indd 32

1. Lag et skjema med et innskrivingsfelt og en knapp for innsending.

2. Lag et skjema som inneholder alle de forskjellige input-elementene i tabellen på side 31.

3. Bruk skjemaet fra oppgave 2 og legg til en kontroll på at skjemaet er utfylt. Legg også inn placeholdere i innskrivingsfeltene. Det gir brukeren et hint om hvordan det skal fylles ut.

4. Lag to HTML-filer. Den ene skal være tom. I den andre skal du ha to innskrivingsfelt og en innsendingsknapp. Når knappen klikkes skal brukerens inntastede verdier sendes med URL-adressen til den tomme HTML-fila.

5. Lag et skjema for valg av forrett, hovedrett og dessert med tre nedtrekkslister og en innsendingsknapp. Ved innsending skal de tre rettene sendes med URL-adressen til en annen tom HTML-fil.

6. Lag et skjema for valg av forrett, hovedrett og dessert med tre nedtrekkslister og en innsendingsknapp. a) Ved innsending skal de tre rettene sendes med URL-adressen til en annen tom HTML-side. b) Legg inn <option value="">Velg forrett</option> i nedtrekkslisten til forretten, og sett required som attributt i select-elementet. Hva skjer hvis du ikke velger en forrett?

24.05.2017 14:36:05

SAMMENDRAG

< 01 Lage nettsider med HTML >

Kode1_Informasjonsteknologi Kap01.indd 33

33

24.05.2017 14:36:05

<02> Her lærer du om: вв

вв вв

вв

endre utseende til nettsider med CSS CSS i HTML-element CSS i eget styleelement tekst, bilder og tabeller med CSS

CSS endrer utseendet til nettsiden 2.1 CSS i et HTML-element Med CSS endrer vi utseendet til en nettside I 1990-årene tok nordmannen Håkon Wium Lie i bruk markeringsspråket HTML og laget nettsider. Han syntes ikke at utseendet på nettsidene han laget var helt bra. Lie la derfor fram den første versjonen av CSS i 1994. På de aller fleste nettsider i dag brukes stilformateringsspråket CSS til å kontrollere nettsidenes utseende. CSS er som HTML videreutviklet siden det ble lansert og tatt i bruk. Dagens versjon av HTML er HTML5, og dagens versjon av CSS heter CSS3. https://www.cappelendammundervisning.no

Et nettsted uten og med CSS.

CSS = Cascading Style Sheet = gjennomgripende stilark

CSS er et svært omfattende formateringsspråk med hundrevis av mulig­ heter. CSS kan brukes til alt fra å bestemme utseendet på en overskrift til å styre hvordan innholdet på nettsteder skal plasseres. Innholdet på en nettside skal gjerne være lett å lese og ha et tiltalende utseende. Med CSS kan vi endre utseende på eksempelvis skriftstørrelser, skrifttyper og plassering av HTML-elementer. Det er tre ulike metoder vi kan bruke. Den første er å legge inn CSS-kode direkte inn i et HTML-element. Den andre er å legge det inn i et egent style-element. Den siste metoden er å legge CSS-koden i en egen fil, det lærer du om i kapittel 5.

34

Kode1_Informasjonsteknologi Kap02.indd 34

24.05.2017 15:29:04

CSS-kode bruker vi for å endre utseendet på en nettside.

1. attributtet style i start-taggen til et HTML-element 2. et eget style-element 3. en egen fil med CSS-kode

Attributtet style i start-tagg til et HTML-element Uten CSS er fargen på teksten sort

Style = stil

Hvis vi ønsker å endre utseendet på et enkelt HTML-element, kan vi skrive CSS-kode ved å bruke attributtet style i start-taggen til dette HTML-elementet. Hvis en overskrift skal gjøres grønn, legger vi inn CSS-koden i start-taggen til h1-elementet med attributtet style. Eller hvis en tekst skal gjøres blå, legger vi inn CSS-koden i start-taggen til dette p-elementet med attributtet style. Det vi velger, definerer utseendet til dette ene HTML-elementet. Dette kaller vi for stil.

Vi kan endre utseendet på et HTML-element ved å bruke attributtet style. <body> <h1 style="egenskap: verdi;">Min overskrift</h1> </body>

Egensap og verdi skal alltid stå i anførselstegn og avsluttes med semikolon ”…;”. I tabellen nedenfor finner du fire egenskaper du kan velge mellom.

EGENSKAP: VERDI

FORKLARING

color: farge;

Farge på teksten

background-color: farge;

Farge på bakgrunnen

margin: antall px;

Marg rundt HTML-elementet

padding: antall px;

Fyll inni HTML-elementet

For eksempel kan vi endre farge på overskriften med egenskapen color og verdien green, slik: fil:///IT1/Kode1/Kap2/nyheter.html

Min overskrift Med CSS bestemmer vi fargen på overskriften.

<body> <h1 style="color: green;">Min overskrift</h1> </body>

Eller du kan lage en bakgrunnsfarge. Koden for det er: <body> <h1 style="background-color: green;">Min overskrift</h1> </body> < 02 CSS endrer utseendet til nettsiden >

Kode1_Informasjonsteknologi Kap02.indd 35

35

24.05.2017 15:29:04

farge = green, white, red, orange, grey, pink, blue, lightblue osv.

Når du skal endre farge på både tekst og bakgrunn på et HTML-element, må du ha semikolon ; mellom dem. Vi setter inn stilen som består av to egenskaper og verdier for disse etter attributtet style, anførselstegnene gjelder for hele stilen til overskriften, slik: <h1 style="background-color: green; color: white;">Min overskrift</h1> fil:///IT1/Kode1/Kap2/nyheter.html

Med CSS bestemmer vi fargen på både overskriften og bakgrunnen.

Bakgrunnsfargen strekker seg til høyre og fyller hele bredden.

Min overskrift EKSEMPEL

Skriftfarge og bakgrunnsfarge En overskrift skal stå på bakgrunnsfargen lightgrey og ha skriftfargen red.

Vi legger inn CSS-koden i start-taggen i h1-elementet med attributtet style.

Vi skal også ha et p-element med blå tekst. <!DOCTYPE html> <html lang="no"> <head> <meta charset="UTF-8"> <title>CSS</title> </head> <body> <h1 style="background-color: lightgrey; color: red;">Høstferie</h1> <p style="color: blue;">Vi reiser til Sirdalen i høstferien.</p> </body> </html>

Vi har endret både skriftfarge og bakgrunnsfarge.

fil:///IT1/Kode1/Kap2/nyheter.html

Høstferie Vi reiser til Sirdalen i høstferien

Padding og margin Alle HTML-elementer kan sammenlignes med en boks.

I eksempelet ovenfor er overskriften nesten like stor som bakgrunnen. Alle HTML-elementer kan sammenlignes med en boks. Med stilen padding kan vi legge inn et mellomrom mellom kanten av boksen og teksten, slik at det fargede feltet blir større. CSS-koden er padding: antall px. Størrelsen på mellomrommet bestemmes av et visst antall bildepunkter eller piksler.

36

Kode1_Informasjonsteknologi Kap02.indd 36

24.05.2017 15:29:05

Hvis vi for eksempel vil at en overskrift ha lysegrå bakgrunnsfarge og litt avstand til kantene, legger vi inn stilen slik: fil:///IT1/Kode1/Kap2/nyheter.html

Min overskrift Avstanden fra kanten på boksen til skriften er 15 piksler.

<body> <h1 style="padding: 15px; background-color: lightgrey;"> Min overskrift</h1> </body>

Egenskapen margin bruker vi for å skape marg rundt boksen. Hvis et HTML-element har stilen margin, vil det oppstå avstand rundt HTML-elementet. Hvis det er flere HTML-elementer vil margin føre til at andre HTML-elementer ikke kommer nærmere enn det margen er bred.

EKSEMPEL

Marg rundt flere bilder Med HTML-kode legger vi inn seks bilder på en nettside med img-elementet. Det skal være litt avstand mellom alle bildene, og vi bruker derfor egenskapen margin for hver av bildene ved å skrive margin: 15px; inni start-taggen til img-elementet. Legg merke til at attributtene style og src ikke kan dele anførselstegn. <body> <img style="margin: 15px;" src="blomst.jpg"> <img style="margin: 15px;" src="katt.jpg"> <img style="margin: 15px;" src="kjemi.jpg"> <img style="margin: 15px;" src="mat.jpg"> <img style="margin: 15px;" src="fugl.jpg"> <img style="margin: 15px;" src="blader.jpg"> </body> fil:///IT1/Kode1/Kap2/bilder.html

Avstanden mellom bildene er 30 piksler, siden det er 15 piksler marg rundt hvert bilde.

< 02 CSS endrer utseendet til nettsiden >

Kode1_Informasjonsteknologi Kap02.indd 37

37

24.05.2017 15:29:05

Attributtet style i body-elementet Alle de synlige HTML-elementene nettsiden din består av ligger mellom taggene <body>…</body>. Hvis du for eksempel ønsker et utseende som skal gjelde for hele nettsiden, setter du inn attributtet style i start-taggen <body>.

Vi bestemmer utseendet på alt som er i den synlige delen av nettsiden ved å legge inn attributtet style i body-elementet: <body style="egenskap: verdi;"></body>

EKSEMPEL

Bakgrunnsfarge og padding for hele nettsiden Vi har en nettside med en overskrift <h1> og et tekstavsnitt <p>. Hele nettsiden skal være lysegrønn, så vi bruker bakgrunnsfarge på body-elementet. Det skal være litt avstand fra kanten av body-elementet til teksten, så vi bruker padding i body-elementet. <!DOCTYPE html> <html lang="no"> <head> <meta charset="UTF-8"> <title>CSS</title> </head> <body style="background-color: lightgreen; padding: 80px;"> <h1>Skidag på Stryn</h1> <p>Vi våknet til strålende sol og satte kursen mot Stryn skisenter for årets skidag. På bussen var stemningen på topp. Vi sang og gledet oss. </p> </body> </html> CSS

fil:///IT1/Kode1/Kap2/farger.html

Skidag på Stryn Vi våknet til strålende sol og satte kursen mot Stryn skisenter for årets skidag. På bussen var stemningen på topp. Vi sang og gledet oss.

Bakgrunnsfarge og padding i et body-element endrer hele nettsiden.

38

Kode1_Informasjonsteknologi Kap02.indd 38

24.05.2017 15:29:05

PRØV SELV 1. Skriv HTML-kode for tre forskjellige overskrifter fra <h1> til <h3>.

Bruk CSS til å utforme de tre overskriftene slik: a) Gul skrift på blå bakgrunnsfarge. b) Hvit skrift på brun bakgrunnsfarge. c) Sort skrift på rosa bakgrunnsfarge.

2. Skriv HTML-kode for et avsnitt <p> med hvit skrift på oransje bakgrunnsfarge. La det være 30 bildepunkter (piksler) marg.

3. Skriv HTML-kode for tre lenker <a>. Bruk bakgrunnsfarge, farge på lenkene, margin og padding til å utforme lenkene.

4. På kode.cdu.no finner du en oversikt over fargenavn du kan bruke.

Bruk ulike fargenavn til å lage to nettsider med en overskrift og et avsnitt. a) Den ene nettsiden skal være så stygg som mulig. b) Den andre nettsiden skal være så pen som mulig. c) Vis frem resultatet til de andre i klassen.

2.2 CSS i eget style-element Selektor Vi legger style-elementet inni head-elementet.

Til nå har vi lagt inn CSS-kode i de enkelte HTML-elementene. Men som regel ønsker vi å endre utseendet på flere HTML-elementer av en bestemt type. Vi gjør dette ved å opprette et eget style-element som vi legger inni head-elementet. Der bestemmer vi stilen, altså hvordan overskrifter, avsnitt, lister osv. i HTML-koden skal se ut.

Vi velger hvilket HTML-element vi skal endre utseendet på med en selektor. <style> selektor { egenskap1: verdi; egenskap2: verdi; } </style>

<style> img { egenskap: verdi; } </style>

En selektor sier hvilket HTML-element stilen skal gjelde for. For eksempel vil selektorene body gjøre at alt i body-elementet får et bestemt utseende.

Selektoren h1 gjør at alle overskrifter i <h1> får et bestemt utseende, og selektoren p gjør at all tekst i <p> får et bestemt utseende. Selektoren img velger bilder.

< 02 CSS endrer utseendet til nettsiden >

Kode1_Informasjonsteknologi Kap02.indd 39

39

24.05.2017 15:29:05

Etter selektoren og mellom { og } skriver vi inn egenskaper og verdier. Du har allerede sett noen av egenskapene vi kan bruke, som color, backg­roundcolor, margin og padding. Verdiene har du også sett; for farger brukte vi navn som green, lightgreen, blue osv. For margin og padding brukte vi antall bildepunkter, som for eksempel 22px.

EKSEMPEL

Endre utseende på overskrift og tekst Teksten vi bruker er et utdrag fra «Et dukkehjem» av Henrik Ibsen. Vi vil ha ett bestemt utseende på overskriftene og ett på teksten. Selektoren h1 definerer hvordan overskrifter av typen <h1> skal se ut. Selektoren p definerer hvordan teksten i avsnittet <p> skal se ut. <!DOCTYPE html> <html lang="no"> <head> <meta charset="UTF-8"> <title>Ibsen</title> <style> h1 { color: lightcyan; background-color: purple; padding: 20px; } p { color: white; background-color: steelblue; padding: 20px; } </style> </head> <body> <h1>HELMER:</h1> <p>Du elsker meg ikke mer.</p> <h1>NORA:</h1> <p>Nei, det er just tingen.</p> </body> </html> Resultatet av koden er at alle overskrifter ser like ut, og alle tekstavsnitt får samme utseende.

Ibsen

fil:///IT1/Kode1/Kap2/farger.html

HELMER: Du elsker meg ikke mer.

Nora: Nei, det er just tingen.

40

Kode1_Informasjonsteknologi Kap02.indd 40

24.05.2017 15:29:05

CSS i eget style-element – endrer bestemte HTML-elementer: 1. Lag HTML-koden uten CSS. 2. Velg det HTML-elementet stilen skal gjelde for.

3. Opprett en selektor til HTML-elementet. Legg inn CSS-koden i et style-element, i head-elementet.

4. Deretter bestemmer du hvilke egenskaper du vil bruke og verdien.

Det skrives inn mellom klammene { … }.

Hierarki av stiler Et HTML-element som ligger inne i et annet, får automatisk stilen til HTML-elementet det ligger inne i. Hvis du for eksempel setter skriftfargen i selektoren body til å være blå, vil alle HTML-elementer inni body-elementet også bli blåe. I koden nedenfor har vi med selektoren body bestemt utseende på alt som ligger inne i body-elementet. <head> <meta charset="UTF-8"> <title>CSS</title> <style> body { color: blue; } </style> </head> <body> <h1>HELMER:</h1> <p>Du elsker meg ikke mer.</p> </body> CSS

fil:///IT1/Kode1/Kap2/farger.html

HELMER: Du elsker meg ikke mer.

< 02 CSS endrer utseendet til nettsiden >

Kode1_Informasjonsteknologi Kap02.indd 41

41

24.05.2017 15:29:05

Men du kan velge å ha en annen farge for noen HTML-elementer. Hvis du for eksempel definerer en stil for h1, som sier at den skal være grønn, vil denne stilen overstyre stilen til selektoren body. Jo mer spesifikk selektoren er, jo sterkere er den. <head> <meta charset="UTF-8"> <title>CSS</title> <style> body { color: blue; } h1 { color: green; } </style> </head> <body> <h1>HELMER:</h1> <p>Du elsker meg ikke mer.</p> </body> CSS

Resultatet av koden er at overskriften får stilen til selektoren h1, ikke stilen til selektoren body.

fil:///IT1/Kode1/Kap2/farger.html

HELMER: Du elsker meg ikke mer.

Stilen for body er generell og gjelder for alt som ligger inne i bodyelementet. Stilene som settes for de enkelte HTML-elementene inne i body-elementet er mer spesifikke og vil overstyre stilen til body.

PRØV SELV 1. Skriv et avsnitt om sirkelen i et p-element. Begrepene radius, diameter og omkrets skal være overskrifter. Bruk h3-elementer på disse overskriftene. a) Legg inn et style-element i head-elementet der du gjør bakgrunnsfargen til body-elementet sort og teksten hvit. b) Bruk CSS til å gjøre tekstfargen til h3-elementene lysegul.

2. Lag en nettside med en unummerert liste (ul-element) med ting du trenger til en telttur. a) Legg inn et style-element i head-elementet der du gjør bakgrunnsfargen til body-elementet gult. b) Gjør bakgrunnsfargen til listen hvit. body-elementet skal fremdeles være gult.

42

Kode1_Informasjonsteknologi Kap02.indd 42

24.05.2017 15:29:05

2.3 Utseende til tekst Egenskaper for tekst Teksten på en nettside kan ha mange forskjellige skrifttyper, og størrelsen på skriften varierer på ulike nettsteder. Det er mye som avgjør om en nettside er god og lettlest eller ikke. Nettsider med liten skriftstørrelse er for eksempel ikke lettleste.

Når du lager nettsider, må du tenke på: 1. Er overskriftene tydelige?

2. Er det lett å lese teksten?

3. Hvilken skriftstørrelse, skriftfarge og skrifttype passer best?

Tabellen nedenfor viser de mest brukte egenskapene for tekst, noen av disse har du allerede brukt.

Som regel bør du velge en farge på teksten som står i kontrast til bakgrunnen. Hvis det ikke er mulig, kan en løsning på dette være å legge skygge bak teksten slik at den blir lettere å lese.

Egenskapen text-shadow kan brukes til det.

CSS-koden ser slik ut: En god og lettlest nettside?

text-shadow: [lengde til høyre] [lengde under] [uttoning av skygge] [farge på skygge]; EGENSKAP

FORKLARING

EKSEMPEL

color

Farge på teksten

color: darkorange;

font-size

Størrelse på teksten

font-size: 14px;

font-family

Skrifttype på teksten

font-family: verdana;

line-height

Avstand mellom tekstlinjer

line-height: 1.5;

margin

Marg rundt teksten

margin: 20px;

margin-top, margin-right, margin-bottom, marginleft

Marg over, til høyre, under eller til venstre for teksten

margin-bottom: 30px;

text-align

Horisontal plassering av tekst

text-align: center; text-align: left; text-align: right;

text-shadow

Skygge bak tekst

text-shadow: 3px 2px 3px black;

< 02 CSS endrer utseendet til nettsiden >

Kode1_Informasjonsteknologi Kap02.indd 43

43

24.05.2017 15:29:07

EKSEMPEL

Tekst – endre farge, størrelse og skrifttype Vi ønsker at all teksten skal være av typen Georgia. Linjeavstanden i avsnittene skal være halvannen. Fontstørrelsen skal være 22 piksler i overskrifter på nivå 1 og 18 piksler på nivå 2. Fargen skal være mørkegrå i avsnittene og mørkegrønn i overskriftene. Vi vil ha skygge på overskriften <h1>. Skyggen skal være 2 piksler lang til høyre for teksten og 3 piksler lang under teksten, og den skal ikke tones ut. Fargen på skyggen skal være darkslateblue. <head> <meta charset="UTF-8"> <title>Ibsen</title> <style> body { font-family: Verdana; } h1 { font-size: 22px; color: red; fil:///IT1/Kode1/Kap2/etdukkehjem3.html text-shadow: 2px 3px 0 darkslateblue; } Et Et dukkehjem dukkehjem h2 { Av: Henrik Ibsen font-size: 18px; color: rebeccapurple; HELMER: Du taler som et barn. Du forstår ikke det } samfunn du lever i. p { NORA: Nei, det gjør jeg ikke. Men nå vil jeg sette font-family: Georgia; meg inn i det. Jeg må se å komme etter hvem som font-size: 14px; har rett, samfunnet eller jeg. color: darkslategray; line-height: 1.5; HELMER: Du er syk, Nora, du har feber, jeg tror margin-bottom: 20px; nesten du er fra sans og samling. } NORA: Jeg har aldri følt meg så klar og sikker som i </style> </head> natt. <body> Nettsiden har nå fått stil med CSS-kode. <h1>Et dukkehjem</h1> <h2>Av: Henrik Ibsen</h2> <p>HELMER: Du taler som et barn. Du forstår ikke det samfunn du lever i.</p> <p>NORA: Nei, det gjør jeg ikke. Men nå vil jeg sette meg inn i det. Jeg må se å komme etter hvem som har rett, samfunnet eller jeg.</p> <p>HELMER: Du er syk, Nora, du har feber, jeg tror nesten du er fra sans og samling.</p> <p>NORA: Jeg har aldri følt meg så klar og sikker som i natt.</p> </body>

44

Kode1_Informasjonsteknologi Kap02.indd 44

24.05.2017 15:29:07

Websikre og generiske skrifttyper De verdiene vi har satt for egenskapen font-family, har til nå vært skrifttyper som Georgia og Trebuchet MS. De er begge en del av et sett med skrifttyper som defineres som websikre. Det vil si at skrift­typene er installert på de mest kjente operativ­systemene som Windows, Mac, Linux, Android og iOS. Når du bruker tekstbehandleren din, kan du velge fra et stort sett med skrifttyper. Det er de skrifttypene som er installert på din datamaskin. Men det er ikke dermed sagt at alle andre har den skrifttypen installert som du velger å bruke. Derfor bør du holde deg til de websikre skrifttypene.

Websikre skrifttyper er installert i de mest kjente operativsystemene.

Websikre skrifttyper:

Arial Courier New Georgia Times New Roman Trebuchet MS Verdana Generiske skrifttyper: serif sans-serif monospace cursive fantasy

AA Bokstaven A med og uten seriffer.

Hvis du velger en skrifttype som ikke er websikker, kan du definere at en annen skrifttype skal vises i stedet hvis den som ser nettsiden, ikke har installert den første skrifttypen. I CSS definerer vi skrifttype og alternative skrifttype ved å skrive dem etter hverandre med et komma mellom, slik: font-family: "websikker skrifttype", "websikker skrifttype";. For eksempel: fontfamily: Chalkboard, Verdana;. Hvis ikke skrifttypen Chalkboard er installert på maskinen til den som ser nettsiden, bruker maskinen Verdana i stedet.

Hva så om heller ikke Verdana er installert på maskinen? Det er det liten sjanse for, men det er vanlig å definere en tredje skrifttype til slutt hvis alt annet skulle feile. Vi har fem såkalte generiske skrifttyper: serif, sansserif, monospace, cursive og fantasy. Nettleseren velger en generisk skrifttype hvis ikke noen av de andre skrifttypene kan vises. For eksempel: font-family: Georgia, "Times New Roman", serif; Hvis hverken Georgia eller Times New Roman er tilgjengelige, velger nettleseren en skrifttype med seriffer. Seriffer er streker som står på tvers av de rette linjene i en bokstav.

De brukes ofte i trykk, som i aviser og bøker. Digital tekst bruker vanligvis bokstaver uten seriffer.

< 02 CSS endrer utseendet til nettsiden >

Kode1_Informasjonsteknologi Kap02.indd 45

45

24.05.2017 15:29:08

EKSTRASTOFF

Webfonter Når du skal lage nettsider fins det et alternativ med skrifttyper som kalles webfonter. Webfonter er skrifttyper som vi legger ved nettsiden, omtrent som du setter inn et bilde på en nettside.

Siden ikke alle maskiner har installert de skrifttypene som trengs, refererer du til hvor på nett den skrifttypen du har valgt, er å finne. Google Fonts har en stor samling av webfonter vi kan bruke.

Kom i gang med Google Fonts 1. Gå inn på nettsiden til GoogleFonts: https://fonts.google.com/ 2. Velg en skrifttype 3. Kopier koden og lim den inn i et HTML-dokument. <link href="https://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet"> <style>body { font-family: ‘Architects Daughter’, cursive; text-align: center;} </style> 4. Du kan nå bruke skrifttypen Architects Daughter slik som du bruker andre skrifttyper på nett­ siden. For å midtstille teksten bruker vi text-align: center;

PRØV SELV 1. Lag en nettside med en tekst om et tema du jobber med i et annet fag på skolen. a) Bruk overskrifter og avsnitt. b) Bruk CSS til å utforme teksten så nettsiden ser fin ut.

2. Legg inn noen lenker i teksten (a-elementer) i oppgave 1. Lenkene skal ha en annen farge enn blå og i tillegg ha en bakgrunnsfarge.

3. Med CSS definerer du en skrifttype i body-elementet som gjelder for all tekst på en nettside. Legg inn CSS-kode som endrer skrifttypen til alle overskriftene.

4. Finn en web-font som ser skummel ut. Bruk den på en stor overskrift med innholdet ”BØ!” og legg skygge bak overskriften.

5. Lag teksten på en nettside med tre ulike fonter. Bruk både websikre og generiske fonter.

46

Kode1_Informasjonsteknologi Kap02.indd 46

24.05.2017 15:29:08

2.4 Utseende til bilder Egenskaper til bilder I kapittel 1 om HTML lærte du å sette inn bilder på en nettside med koden <img src="filnavn.jpg">. Med CSS kan vi blant annet sette ramme på bildene, legge skygger bak bildene og bruke filter til å endre utseendet på bildene.

Vi kan også endre størrelsen på bilder og sette marger på dem, så de får en bestemt avstand fra andre elementer på nettsiden. Tabellen nedenfor viser de mest brukte egenskapene for bilder.

Med CSS kan vi endre utseendet til bilder.

EGENSKAP

FORKLARING

width

Bredden på bildet

border

Ramme rundt bildet

margin

Marg rundt bildet

box-shadow

Skygge bak bildet

filter

Effekter på bildet

Ramme inn bilder med kantlinjer En ramme består av kantlinjer rundt et bilde. Egenskapen border brukes til å ramme inn et bilde. Når du skal ramme inn et bilde, må du angi tykkelsen på rammen (border-width), hva slags ramme det skal være (solid, dashed, dotted), og hva slags farge rammen skal ha (border-color).

EGENSKAP

FORKLARING

EKSEMPEL

border-width

Tykkelse på rammen

border-width: 10px;

border-style

Heltrukken ramme Stiplet ramme Prikkete ramme

border-style: solid; border-style: dashed; border-style: dotted;

border-color

Farge på rammen

border-color: darkorange;

border-radius

Avrunding av rammen

border-radius: 5px;

< 02 CSS endrer utseendet til nettsiden >

Kode1_Informasjonsteknologi Kap02.indd 47

47

24.05.2017 15:29:09

EKSEMPEL

Å ramme inn et bilde Med HTML setter vi nå inn et bilde på en nettside. Med CSS setter vi bredden på bildet og en ramme rundt bildet. HTML-koden har: <img src="katten.jpg">

<style> img { width: 300px; border-style: solid; border-color: lightblue; border-width: 15px; } </style> Resultatet av koden er en blå ramme rundt bildet.

Avrundede kanter med border-radius: 8px; til venstre og border-radius: 50% til høyre.

Med border-radius kan du runde av hjørnene på rammen. Verdien du angir, kan være antall piksler fra hjørnene der avrundingen begynner. Koden border-radius: 8px; vil starte avrundingen av rammen 8 piksler fra hjørnene.

Avrunding av hjørnene kan også settes med prosentverdier. Hvis du bruker 50 %, vil avrundingen begynne akkurat midt på rammen, både i høyden og bredden. Hvis bildet er kvadratisk, får du en sirkelrund ramme. Hvis bildet er et rektangel, får du en ramme som er formet som en ellipse.

Kortform Egenskaper med binde­strek har en kortform.

Verdiene til egenskapene border-style, border-color og border-width kan vi samle i en kortform der vi angir verdiene til alle de tre egenskapene på en linje. Der hvor du ser en bindestrek i en egenskap, fins det alltid en kortform hvor du kan angi alle egenskapene på én linje. Kortformen for å beskrive rammen i eksempelet ser slik ut: border: 15px solid lightblue;

Vi legger inn en ramme rundt et bilde, slik: border: [width] [style] [color] [radius]; 48

Kode1_Informasjonsteknologi Kap02.indd 48

24.05.2017 15:29:10

Marger rundt bilder

40 px

20 px

10 px

30 px Du kan ha forskjellig marg på hver side av et HTML-element

Hvis vi ønsker å ha plass rundt et bilde, kan vi sette på en marg. CSS-koden margin: 20px gir en marg på 20 piksler rundt et bilde (eller et annet HTML-element). På samme måte som border er også margin på kortform.

Vi kan sette individuelle marger i fire retninger: margin-top, margin-right, margin-bottom og margin-left. Hvis du bruker kortformen skriver du den første verdien som lager marg ovenfor et element, den neste er til høyre, så under og til slutt til venstre. Verdiene følger altså klokken og starter på klokken 12.00. CSS-koden margin: 10px 20px 30px 40px; betyr: 10px over, 20px til høyre, 30px under og 40px til venstre.

Vi legger inn en marg rundt et bilde, slik: margin: [marg over] [marg til høyre] [marg under] [marg til venstre];

EKSEMPEL

Bilder med marger Vi fortsetter på forrige eksempel og legger inn fem nye bilder. Med CSS setter vi nå inn marg til høyre og under alle bildene. <style> img { width: 300px; border-style: solid; border-color: lightblue; border-width: 15px; margin-right: 20px; margin-bottom: 20px; } </style>

Margen er på 20 piksler til høyre for hvert bilde og 20 piksler under.

< 02 CSS endrer utseendet til nettsiden >

Kode1_Informasjonsteknologi Kap02.indd 49

49

24.05.2017 15:29:10

Skygger bak bilder Med CSS kan vi definere hvordan et bilde eller et annet HTML-element skal kaste skygge. Det kan gi en fin visuell effekt på nettsiden. Egenskapen box-shadow brukes til dette. Vi setter fire verdier: hvor langt skyggen skal strekke seg til høyre for bildet, hvor langt den skal strekke seg under bildet, hvor langt fra kanten av skyggen den skal tones ut, og til slutt hvilken farge skyggen skal ha. Hvis skyggen skal falle til venstre for bildet, setter vi en negativ verdi for lengden. Det samme kan vi gjøre hvis skyggen skal gå over bildet.

Vi legger inn skygger, slik: box-shadow: [lengde til høyre] [lengde under] [lengde på uttoning] [farge];

EKSEMPEL

Bilde med skygge I dette eksempelet skal vi bruke box-shadow slik at et bilde på nettsiden kaster skygge til høyre og under seg. Skyggen skal falle 20 piksler til høyre og 10 piksler under, være svart og tones ut langs de siste 5 pikslene. <style> img { box-shadow: 20px 10px 5px black; } </style>

Vil vi ha skyggen til venstre, uten at fargen (indigo) tones ned: img { box-shadow: -20px 10px 0 indigo; }

Eller legge skyggen rett bak bildet og samtidig tone ut skyggen: img { box-shadow: 0px 0px 5px indigo; }

Med CSS kan vi la et bilde kaste flere skygger. Det kan vi for eksempel bruke til å oppnå enkle tredimensjonale effekter. For å få til dette definerer vi flere sett med verdier for egenskapen box-shadow. De siste legger seg under dem som er foran. box-shadow: [første skygge], [andre skygge], .. , [siste skygge];

50

Kode1_Informasjonsteknologi Kap02.indd 50

24.05.2017 15:29:10

EKSEMPEL

Skygger i regnbuens farger I dette eksempelet skal vi ha regnbuefargene som skygger til et bilde. Vi bruker huskeregelen om at fargene i regnbuen kan kalles roggbif. <style> img { margin: 50px; box-shadow: 4px 2px 0 red, 8px 4px 0 orange, 12px 6px 0 yellow, 16px 8px 0 green, 20px 10px 0 blue, 24px 12px 0 indigo, 28px 14px 0 violet }

EKSTRASTOFF

Filformater for bilder Bilder kommer i forskjellige filformater. De vanligste til bruk på nettsider er av typen PNG, GIF og JPG. • PNG egner seg godt til logoer og enkel grafikk.

Deler av bildet kan være helt eller delvis gjennomsiktig.

• JPG egner seg godt til fotografier. Kan ikke være gjennomsiktige.

• GIF egner seg til enkel grafikk. Deler av bildet kan være gjennomsiktig. GIF kan også brukes til å lage såkalte GIF-animasjoner.

Filtre på bilder På mobilen din har du kanskje mulighet til å endre på bilder som du har tatt, ved å legge på effekter som gjør bildene om til svart-hvitt, snu fargene som i et røntgenbilde eller bruke andre virkemidler. Dette kan du også gjøre med CSS slik: filter: effekt(verdier for effekt); Du kan også kombinere filtre slik: filter: effekt1(verdi1) effekt2(verdi2); EGENSKAP

FORKLARING

filter: blur(5px);

Uklarhet

filter: brightness(0.4);

Lysstyrke

filter: contrast(200%);

Kontrast

filter: drop-shadow(16px 16px 20px blue);

Skygge

filter: grayscale(50%);

Tar vekk farger

filter: hue-rotate(90deg);

Endre fargene

filter: invert(75%);

Snur fargene

filter: opacity(25%);

Gjennomsiktighet

filter: saturate(30%);

Styrke på fargene

filter: sepia(60%);

Gammeldags < 02 CSS endrer utseendet til nettsiden >

Kode1_Informasjonsteknologi Kap02.indd 51

51

24.05.2017 15:29:10

EKSEMPEL

Bilder med filter Vi skal nå bruke filteret invert til å snu alle fargene i et bilde. Filteret invert snur fargene omtrent som i et røntgenbilde. CSS-koden ser slik ut:

img { filter: invert(100%); } Til venstre ser du bildet uten fi filter, filteret Til lter, til høyre med fi lteret invert.

Hvis du bruker et gjennomsiktig PNG-bilde, vil drop-shadow kun legge skygge bak den synlige delen av bildet. Her kombinerer vi sepia og dropshadow for å oppnå ønsket effekt:

Skyggen plasseres til venstre bak bildet og kombineres med en sepia-effekt.

<style> img { width: 200px; margin: 100px; filter: sepia(100%) drop-shadow(-100px -50px 5px black); } </style> </head> <body> <img src="statue.png"> </body>

PRØV SELV

Bilder finner du på kode.cdu.no

1. Sett inn bildet stjerne.jpg med img-elementet og bruk CSS til å sette på en ramme som er 10 piklser bred og fiolett. Prøv deg frem med forskjellige typer kantlinjer og se hva som skjer.

2. Bruk det kvadratiske bildet skihopp.jpg og bruk border-radius til å gjøre bildet sirkelrundt.

3. a) Fortsett med bildet fra oppgave 2, og sett på en skygge bak bildet. b) Legg på flere skygger og se om du klarer å få det til å se ut som en sylinder.

4. Bruk de åtte bildene som ligger i mappen ”vinterbilder”, og sett dem inn på en nettside. a) Bruk marg til å styre avstanden mellom bildene b) Sett på passende rammer på bildene c) Legg skygge bak bildene 5. Finn frem et bilde av deg selv eller en annen person på datamaskinen din, og eksperimentér med forskjellige filtre på bildet.

52

Kode1_Informasjonsteknologi Kap02.indd 52

24.05.2017 15:29:10

2.5 Selektor med id eller class

I mange tilfeller er det ønskelig å endre utseendet til bestemte HTMLelementer på en nettside. Når vi vil endre utseendet på bestemte HTMLelementer, kan vi merke dem ved å sette attributtene id eller class inn i start-taggene. På den måten får vi en CSS-kode som bare gjelder for disse bestemte elementene.

Hashtag-selektorer med id

Vi legger som vanlig inn stilen mellom style-taggene.

Attributtet id kan vi sette på ett enkelt HTML-element som skal skille seg ut på en nettside. I start-taggen til det elementet vi vil endre utseende på, skriver vi inn id = "idNavn". Selektoren, som finner det elementet som har id = "idNavn", skriver vi slik #idNavn { }, altså med hashtag foran det idNavn som står i start-taggen. Dette navnet velger vi selv. Som før setter vi inn egenskaper og verdier, mellom krøllparentesene { og }.

Hashtag-selektor velger ett enkelt HTML-element med en id: <style> #idNavn { egenskap: verdi; } </style>

idNavn er et valgfritt navn du velger selv.

Vi legger inn en id i det ene html-elementet stilen skal gjelde for: <body> <h1 id="idNavn">…</h1> </body>

Punkt-selektorer med class Attributtet class kan vi sette på flere HTML-elementer som skal ha et bestemt utseende. I de HTML-elementene vi vil endre, skriver vi inn attributtet class = "classNavn". I selektoren forteller vi hvordan alle elementene med class = "classNavn" skal se ut. Selektoren angir vi nå som .classNavn, altså med et punktum.

Navnet på classNavn velger du selv.

Punkt-selektor velger flere HTML-elementer med class: <style> .classNavn { egenskap: verdi; } </style> Vi legger inn class i alle html-elementene stilen skal gjelde for: <body> <h1 class="classNavn">…</h1> <p class="classNavn">…</p> </body> < 02 CSS endrer utseendet til nettsiden >

Kode1_Informasjonsteknologi Kap02.indd 53

53

24.05.2017 15:29:10

EKSEMPEL

Selektor med id og selektor med class I dette eksempelet har vi fire ulike bilder. Vi ønsker at ett av bildene skal være firkantet med en liten avrunding. Dette bildet gir vi en id, som er id="hovedbilde". De andre tre bildene skal være runde, så vi gir de en class="rundtBilde" i starttaggen til hvert bilde som skal være rundt. Med CSS får vi avrunding av kantene på bildene med border-radius: 50%;. <head> <title>Kjente byer</title> <style> img { margin-right: 10px; border: 2px solid orange; } #hovedbilde { border-radius: 5px; width: 150px; } .rundtBilde { border-radius: 50%; width: 100px; height: 100px; } </style> </head> <body> <h1>Kjente byer</h1> <img src="pisa.jpg" id="hovedbilde"> <img src="moskva.jpg" class="rundtBilde"> <img src="tel_aviv.jpg" class="rundtBilde"> <img src="paris.jpg" class="rundtBilde"> </body>

Kjente byer

Bildet med id = "hovedbilde" har kun en svak avrunding og er høyere enn de andre bildene. Bildene med class = "rundtBilde" er sirkelrunde.

54

Kode1_Informasjonsteknologi Kap02.indd 54

24.05.2017 15:29:10

PRØV SELV 1. Sett inn åtte bilder på en nettside med img-elementer. Noen av bildene skal ha attributtet class="sort_ramme", mens andre skal ha attributtet class="lilla_ramme". Skriv CSS-kode som sørger for at rammene får riktige farger.

2. Skriv kode for fire lenker med a-elementer. Teksten i lenkene kan være Sommer, Sol, Sjø og Bading. Skriv attributtet id="valgt" på en av lenkene og bruk CSS-kode til å sørge for at denne lenken har en annen farge og størrelse.

2.6 Pseudoselektor og pseudoklasser Pseudoselektor En pseudoselektor beskriver hvordan deler av et HTML-element skal se ut. For eksempel kan du endre hvordan den første bokstaven i et tekst­ avsnitt skal se ut, den første linjen, eller tekst som brukeren markerer på nettsiden. Du kan også sette inn innhold før eller etter et element.

En pseudoselektor beskriver deler av et HTML-element. <style> selektor::pseudoselektor { egenskap: verdi; } </style>

PSEUDOSELEKTOR

FORKLARING

::before

setter inn innhold før elementet

:.after

setter inn innhold etter elementet

:.first-letter

den første bokstaven i et element

::first-line

den første linjen i et element

::selection

del av elementet som er markert av bruker

Alle egenskaper og verdier vi har sett til nå kan brukes for en pseudoselektor. Til de to pseudoselektorene ::before og ::after kan vi også bruke egenskapen content. Verdien til content legger vi inn mellom ″ og ″. Det innholdet vi setter her blir lagt inn før eller etter elementet vi har valgt som selektor.

< 02 CSS endrer utseendet til nettsiden >

Kode1_Informasjonsteknologi Kap02.indd 55

55

24.05.2017 15:29:10

EKSEMPEL

Ulike pseudoselektorer former et tekstavsnitt

q = quote = sitat

I dette eksempelet bruker vi ulike pseudoselektorer til å forme teksten i et avsnitt <p>. Den første bokstaven i avsnittet skal være ekstra stor og ha 42px. Den første linjen skal ha en annen farge enn de neste. Når brukeren markerer teksten, skal fargen på teksten bli hvit med blå bakgrunn. Vi bruker q-elementet til å sette anførselstegn ″ foran og bak sitatet. Vil vi erstatte ″ med « kan vi bruke q::before { content: "«";}. <style> p::first-letter{ font-size: 42px; } p::first-line { color: darkorange; } p::selection { color: white; background-color: blue; } q::before { content: “«“; } q::after { content: "»"; } </style> </head> <body> <p>I dag leste jeg en artikkel i avisen hvor lederen for en naturvernsorganisasjon skriver <q>Korallrevene dør</q>.

Det var skremmende lesing.</p> </body>

Foto s.56 mangler (?)

fil:///IT1/Kode1/Kap2/farger.html

Resultatet av koden. Hvis du markerer teksten, blir den hvit med blå bakgrunn.

I

dag leste jeg en artikkel i avisen hvor lederen for en naturvernsorganisasjon skriver «Korallrevene dør». Det var skremmende lesing.

56

Kode1_Informasjonsteknologi Kap02.indd 56

24.05.2017 15:29:11

Pseudoklasser

Pilmarkør kalles også for markør.

Pseudoklasser er en form for pseudeselektor, men pseudoklasser brukes til å bestemme utseendet på HTML-elementer når de er i en bestemt tilstand. Tilstanden kan være når du fører pilmarkøren over elementet, når du har haket av en flervalgsboks, eller når du har trykket på en lenke.

Pseudoklasser kan også bestemme utseende til elementer som er det første av mange andre elementer.

Pseudoklasser bestemmer utseendet til et HTML-element i en bestemt tilstand. <style> selektor:pseudoklasse { egenskap: verdi; } </style>

PSEUDOKLASSE

FORKLARING

:hover

pilmarkøren føres over et element

:active

klikk på et element

:focus

et element er i fokus – for eksempel når du klikker i et input-element

:checked

en radioknapp eller en flervalgsboks er valgt

:nth-child(odd) :nth-child(even)

velger annen hvert element, partall eller oddetall

EKSEMPEL

Endre størrelsen på et bilde Vi kan for eksempel endre størrelsen på et bilde når pilmarkøren føres over bildet med pseudoklassen active, slik: <style> img:active { width: 200px; } </style> </head> <body> <img src="filnavn.jpg" width="100px"> </body>

< 02 CSS endrer utseendet til nettsiden >

Kode1_Informasjonsteknologi Kap02.indd 57

57

24.05.2017 15:29:11

EKSTRASTOFF

Mobiltelefon HTML-koden: <meta name="viewport" content="width=device-width, initialscale=1"> skalerer nettsiden slik at den fyller hele skjermen på en mobiltelefon.

EKSEMPEL

Ulik tilstand gir ulikt utseende I dette eksempelet skriver vi HTML-kode for en lenke, et bilde og en liste.

Med pseudoklasser sørger vi for at lenken endrer seg når pilmarkøren føres over den, bilde blir større når du klikker på det og annen hvert kulepunkt får ny bakgrunnsfarge. <!DOCTYPE html> <html lang="no"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Forfatter</title> <style> img:active { width: 200px; } a:hover { background-color: lightgreen; } li:nth-child(odd) { background-color: lemonchiffon; } </style> </head> <body> <img src="Nilsson.jpg"> <p> Forfatter fil:///IT1/Kode1/Kap2/Lindgren.html <a href="http://cappelendamm.no">Astrid Lindgren</a> </p> Astrid Lindgren <ul> • Vi på Saltkråkan <li>Vi på Saltkråkan</li> • Pippi Langstrømpe <li>Pippi Langstrømpe</li> • Ronja Røverdatter • Emil i Lønneberget <li>Ronja Røverdatter</li> • Mio, min Mio <li>Emil i Lønneberget</li> <li>Mio, min Mio</li> Resultatet av koden er en nettside med et bilde, lenke og </ul> en punktliste. </body> </html> 58

Kode1_Informasjonsteknologi Kap02.indd 58

24.05.2017 15:29:11

PRØV SELV 1. Skriv kode for et avsnitt med p-elementet. Inni avsnittet skal det ligge noe tekst og noen lenker til nettsteder du liker. Skriv CSS som sørger for at disse lenkene har blå bakgrunnsfarge og hvit tekst. Lenker som ikke ligger i avsnittet skal ikke ha blå bakgrunn og hvit tekst.

2. Opprett to avsnitt med p-elementer. Det ene med attributtet class="sommer", det andre med class="vinter". Inne i hvert av avsnittene skal det ligge et bilde. Disse skal ikke ha noen id- eller class-attributt.

Bruk kombinasjoner av selektorer slik at bildet i avsnittet med class="sommer" får en rød skygge, mens det andre bildet får en blå skygge.

3. Legg inn en sjekkboks med <input type="checkbox"> etterfulgt av et bilde. Når sjekkboksen er haket av skal filteret invert settes på bildet.

2.7 Kombinasjoner av selektorer og tabeller Kombinasjoner av selektorer <ul> <li>…</li> <li>…</li> </ul> <ol> <li>…</li> <li>…</li> </ol>

De synlige HTML-elementene på en nettside ligger i body-elementet. I en liste med kulepunkter har vi et ul-element der det ligger flere li-elementer.

I en tabell table-element, er det rader tr-elementer som igjen inneholder td-elementer. Lister og tabeller er bygd opp med det vi kaller en tre-struktur. Med CSS kan vi velge ett HTML-elementer som ligger på en spesiell plass i forhold til andre elementer. I HTML-koden i margen ser vi en liste med kuleepunkter og en med nummer inne i elementet <ul> eller <ol> har vi <li>.

<style> ul li { egenskap: verdi;

CSS-kode som består av flere selektorer kaller vi for CSS combinators. Vil vi gi li-elementene som ligger inni ul-elementet en stil, bruker vi de to selektorene ul og li med mellomrom mellom selektorene, slik ul li. Li-elementer inni ol-elementer vil vi ikke endre. Med kombinasjonen av selektorene ul li vil kun skriften som ligger inne i ul bli endret. I tabellen nedenfor ser du at selektorer kan kombineres på ulike måter.

}

</style>

Vi kan kombinere flere selektorer. <style> selektor1 selektor2 { egenskap: verdi; } </style>

KOMBINASJON

FORKLARING

ul li

Alle li-elementer inni et ul-element

ul > li

Første li-elementet inni et ul-element

h1 + p

Første p-element etter et h1-element

h1 ~ p

Alle p-elementer etter et h1-element

< 02 CSS endrer utseendet til nettsiden >

Kode1_Informasjonsteknologi Kap02.indd 59

59

24.05.2017 15:29:11

EKSEMPEL

Kombinasjon av to selektorer Vil vi gi li-elementene inni ul-elementene en stil, bruker vi de to selektorene ul li. <style> ul li { color: plum; } </style> </head> <body> fil:///IT1/Kode1/Kap2/farger.html <ul> • Fargen endres <li>Fargen endres</li> • Men kun i punktlisten <li>Men kun i punktlisten</li> 1. Fargen endres ikke </ul> 2. I den nummererte listen <ol> <li>Fargen endres ikke</li> Resultatet av koden er at kun fargen på punktlisten <li>I den nummerert listen</li> endres. Den nummererte listen endres ikke, selv om den </ol> også har li-elementer.

EKSEMPEL

Kombinasjon med + og ~ Med + mellom selektorene h1 + p velges det p-elementet som ligger rett etter den første selektoren h1.

fil:///IT1/Kode1/Kap2/farger.html

Kombinere med + Første avsnitt endres De neste endres ikke De neste endres ikke

<style> h1 + p { background-color: lightgreen; } </style> </head> <body> <h1>Kombinere med +</h1> <p>Første avsnitt endres</p> <p>De neste endres ikke</p> <p>De neste endres ikke</p> </body>

60

Kode1_Informasjonsteknologi Kap02.indd 60

24.05.2017 15:29:11

Hvis vi bytter ut + med ~ mellom selektorene gjelder stilen for alle de etterfølgende elementene, på samme nivå i nøstingen. <style>

h1 ~ p {

background-color: lightgreen;

} </style> </head> Min andre fil:///IT1/Kode1/Kap2/farger.html <body> Kombinere med ~ <h1>Kombinere med ~</h1> <p>Første avsnitt endres</p> Første avsnitt endres <p>De neste endres også</p> De neste endres også <p>De neste endres også</p> De neste endres også </body>

Tabeller med table-elementet I kapittel 1 om HTML på side 26 lærte du å lage tabeller. Vi skal nå se hvordan vi kan bruke CSS til å gi tabellene et mer tiltalende utseende. Vi lager HTML-kode for en tabell som inneholder Oscar-vinnere for beste film årene 2013, 2014 og 2015. <body> <table> <thead> <tr> <th>År</th> <th>Vinner</th> <th>Regissør</th> </tr> </thead> <tbody> <tr> <td>2015</td> <td>Spotlight</td> <td>Thomas McCarthy</td> </tr> <tr> <td>2014</td> <td>Birdman</td> <td>Alejandro González Iñárritu</td> </tr> År Vinner Regissør <tr> 2015 Spotlight Thomas McCarthy <td>2013</td> 2014 Birdman Alejandro González Iñárritu <td>12 years a slave</td> 2013 12 years a slave Steve McQueen <td>Steve McQueen</td> Slik ser tabellen ut uten CSS. </tr> </tbody> </table> < 02 CSS endrer utseendet til nettsiden > 61 </body>

Kode1_Informasjonsteknologi Kap02.indd 61

24.05.2017 15:29:12

Med selektoren td kan vi nå bestemme hvordan cellene i tabellen skal se ut. Vi setter en bakgrunnsfarge på alle td-elementene. År 2015 2014 2013

Vinner Spotlight Birdman 12 years a slave

Regissør Thomas McCarthy Alejandro González Iñárritu Steve McQueen

td { background-color: papayawhip; }

Vi ser at det blir en liten glippe mellom cellene i tabellen. Det er en kantlinje som nettleseren lager automatisk for tabeller. Vi kan fjerne dette ved å sette verdien for egenskapen border-collapse til collapse for tabellen. table { border-collapse: collapse; }

Med padding kan vi skape litt luft rundt teksten. Vi setter 7px over og under, 14px til høyre og venstre. År 2015 2014 2013

Vinner Spotlight Birdman 12 years a slave

Regissør Thomas McCarthy Alejandro González Iñárritu Steve McQueen

td { background-color: papayawhip; padding: 7px 14px; }

Hvis vi ønsker å skille tydeligere mellom innholdet i de forskjellige cellene, kan vi sette på en kantlinje rundt dem. Kantlinjen kan gjøre tabellen lettere å lese. År 2015 2014 2013

Vinner Spotlight Birdman 12 years a slave

Regissør Thomas McCarthy Alejandro González Iñárritu Steve McQueen

td { background-color: papayawhip; padding: 7px 14px; border: 2px solid olive; }

Overskriftene i th er automatisk midtsilte. Dette kan vi justere ved å sette text-align til left. Vi kan også sette på padding for å skape litt luft. Hvis vi først bruker kortformen for kantlinjen; border, og deretter spesifiserer med border-bottom, kan vi oppnå at overskriftene har en tykkere kantlinje i bunn. År 2015 2014 2013

Vinner Spotlight Birdman 12 years a slave

Regissør Thomas McCarthy Alejandro González Iñárritu Steve McQueen

th { text-align: left; padding: 7px 14px; border: 2px solid olive; border-bottom: 4px solid darkolivegreen; }

62

Kode1_Informasjonsteknologi Kap02.indd 62

24.05.2017 15:29:12

EKSEMPEL

Tabell med kombinasjoner av selektor Bakgrunnsfargen som vi satt til cellene kunne like gjerne ha vært satt på hele raden med CSS-selektoren tr. Men hvordan kan vi skille om vi setter bakgrunnsfarge for radene i thead med overskriftene og radene i tbody? Da kan vi bruke kombinasjoner. For eksempel vil koden thead > tr gjelde for tr som ligger inne i thead, mens tbody > tr vil gjelde for radene inne i tbody. Vi fjerner nå bakgrunnsfargen for cellene, og setter den i stedet på radene. <style> table { border-collapse: collapse; } thead > tr { background-color: aliceblue; } tbody > tr { background-color: papayawhip; } th { text-align: left; padding: 7px 14px; border: 2px solid olive; border-bottom: 4px solid darkolivegreen; } td { padding: 7px 14px; border: 2px solid olive; } </style>

Bakgrunnsfargen er satt på radene.

År 2015 2014 2013

Vinner Spotlight Birdman 12 years a slave

Regissør Thomas McCarthy Alejandro González Iñárritu Steve McQueen

< 02 CSS endrer utseendet til nettsiden >

Kode1_Informasjonsteknologi Kap02.indd 63

63

24.05.2017 15:29:12

EKSTRASTOFF

Tabeller med class På et nettsted ser du ofte tabeller med variasjoner i det visuelle uttrykket. Sportssidene i en avis har gjerne litt annen utforming enn tabeller på kultursidene. Vi kan definere forskjellige typer tabeller med CSS ved å sette attributtet class="typetabell" i HTML-koden, og skrive CSS for denne typen tabeller. For eksempel kan vi definere en stripete tabell ved å si at annenhver rad skal ha en annen bakgrunnsfarge enn den neste. Da bruker vi pseudo­ selektoren nth-child(odd) eller nth-child(even).

Annenhver rad i tbody har en annen farge.

<style> table.striped > tbody > tr:nth-child(odd) { background-color: springgreen; } </style> </head> <body> <table class="striped"> <!-- samme HTML-kode som side 61 --> </table> År 2015 2014 2013 2012 2011

Vinner Spotlight Birdman 12 years a slave Argo The Artist

Regissør Thomas McCarthy Alejandro González Iñárritu Steve McQueen Ben Affleck Michel Hazanavicius

PRØV SELV 1. Skriv HTML-kode for en tabell med overskriftene År, Låt og Artist.

Legg inn en rad for favorittlåten din fra de forskjellige årene. Bruk CSS til å forme utseendet på tabellen.

2. Bruk pseudoklassen :hover på cellene i radene i tbody slik at disse endrer farge når du fører pilmarkøren over dem.

3. Gjør om teksten med artistens navn til en lenke som du kan klikke på for å komme til en nettside om artisten.

4. Bruk audio-elementet som du lærte om i kapittel 1 til å legge inn en avspiller i en ny kolonne i tabellen.

5. Finn en tabell på en nettside, og forsøk å lage en som ligner mest mulig.

64

Kode1_Informasjonsteknologi Kap02.indd 64

24.05.2017 15:29:12

SAMMENDRAG

< 02 CSS endrer utseendet til nettsiden >

Kode1_Informasjonsteknologi Kap02.indd 65

65

24.05.2017 15:29:12

<03> Her lærer du om: вв

вв

fysiske signaler i datautstyr og binære tall grafiske framstillinger og bildepunkter

вв

tegnsett

вв

lyd

вв

video og animasjon

Fysiske signaler i datautstyr 3.1 Binære tall – bit og byte Bit De aller første datamaskinene var mekaniske og kunne bestå av muttere, tannhjul og metallstenger. I overgangen fra mekanisk til elektronisk datamaskin fant man ut at den enkleste og mest pålitelige måten å lagre informasjon på er å ha to «tilstander»: strømmen av og strømmen på. Var strømmen i av-tilstanden, skulle det stå for tallet 0, og var strømmen i på-tilstanden, representerte det tallet 1. Hvordan kan vi så lagre noe særlig av verdi ved hjelp av bare null og en? La oss se på et eksempel. Du har en hytte med en vimpel i flaggstangen. Naboene dine vet at hvis vimpelen er oppe, så er du på hytta. Ellers er du der ikke. På denne enkle måten kan naboene se om noen er på hytta. Da har du allerede gitt viktig informasjon ved hjelp av en enkel av/på-tilstand.

En elektronisk datamaskin sjekker om tilstanden er av eller på, ved hjelp av strøm.

Hvordan kan vi signalisere noe av verdi ved hjelp av bare to tilstander, av eller på?

La oss så si at du har to utelamper på hytta di, en utenfor hoveddøren og en utenfor bakdøren. Så lager du et lite system med tanke på naboene dine.

Hvis begge lampene er av, er du ikke på hytta. Hvis begge er på, så er du inne. Med to lamper kan du gjøre dette mer avansert. For eksempel kan du ha det slik at hvis lampen ved hoveddøren er på mens lampen ved bak­ døren er av, så viser det at du bare er ute en liten tur. Mens hvis lampen ved hoveddøren er av mens den ved bakdøren er på, kommer du ikke tilbake før dagen etter.

66

Kode1_Informasjonsteknologi Kap03.indd 66

24.05.2017 15:46:04

Det binære tallet 10 leser vi som en­null, ikke som ti. Og 11 leser vi som en­en, ikke som elleve.

Allerede her blir det litt komplisert. Med to lamper har du fire muligheter.

Lampene kan representere det som kalles bit i en datamaskin. Her har vi to lamper i av- eller på-tilstand. To bit gir fire muligheter: på-på, av-av, på-av og av-på. Hvis vi nå bruker tallet 1 for på og tallet 0 for av, får vi 11, 00, 10 og 01. Dette er det vi kaller binære tall. Hvis du øker til tre utelamper på hytta, får du åtte muligheter: 000, 001, 010, 100, 011, 101, 110, 111. Når du har tre utelamper, sier vi i at du har et system basert på tre bit.

TO UTELAMPER

HOVEDDØRBAKDØR

TO BIT BINÆRT TALL

BESKJED

På-På

11

Inne på hytta

Av-Av

00

Ikke på hytta

På-Av

10

Ute en kort tur

Av-På

01

Ute, tilbake etter ett døgn

Vi bruker binære tall, 1 og 0 for tilstandene av og på i en datamaskin.

To bit gir fire muligheter: 11, 00, 10, 01 Tre bit gir åtte muligheter: 000, 001, 010, 100, 011, 101, 110, 111

EKSEMPEL

Binære tall til vanlige tall

Binære tall kalles totallsystemet.

Vanlige tall kalles titallsystemet.

Vi kan erstatte de forskjellige kombinasjonene av 0 og 1, altså de binære tallene, med vanlige tall. Har vi to bit for eksempel 11, gir vi ett-tallet på plassen lengst til venstre verdien 2, og plassen til høyre får verdien 1. Er de av, altså 0, får begge plassene verdien null. Med to utelamper kan vi da telle til tre med vanlige tall. Det gjør vi slik: 00 gir 0 + 0 = 0. Mens 01 gir 0 + 1 altså 1. Ser vi på 10, så har sifferet 1 verdien 2 siden det står først, og det gir 2 + 0 = 2. Tilsvarende blir 11 = 2 + 1 = 3, siden begge er slått på og den første har verdien 2 og den neste verdien 1.

TO BIT BINÆRT TALL

VERDI: 2

VERDI: 1

SUM, VANLIG TALL

00

0

0

0

01

0

1

1

10

1

0

2

11

1

1

3

< 03 Fysiske signaler i datautstyr >

Kode1_Informasjonsteknologi Kap03.indd 67

67

24.05.2017 15:46:04

Som du ser, kan du regne deg fram til den summen et binært tall har, ved å legge sammen verdiene ut fra om det står 1 eller 0, og hvilken plassering tallet da har. For tre bit får ett-tallet som står først, verdi 4, den i midten får verdien 2, og den siste får verdien 1. Null får alltid verdien 0. Med andre ord er: 101 = 4 + 0 + 1 = 5. Alle de forskjellige kombinasjonene til tre bit blir da slik: TRE BIT BINÆRT TALL

VERDI: 4

VERDI: 2

VERDI: 1

SUM, VANLIG TALL

000

0

0

0

0

001

0

0

1

1

010

0

1

0

2

011

0

1

1

3

100

1

0

0

4

101

1

0

1

5

110

1

1

0

6

111

1

1

1

7

Legg merke til at vi med tre bit har åtte ulike muligheter, men vi kan bare telle til sju. I dataverdenen tar vi stort sett alltid med 0 som en av mulighetene.

Dette kan virke litt forvirrende siden vi i dagligtale stort sett ikke regner med 0 når vi teller. Hvis det er 25 elever i en klasse, kan vi nummerere elevene fra 1 til 25. Elev nummer 25 får tallet 25. En datamaskin vil helst nummerere dem fra 0 til 24.

Antall muligheter

Vi nummererer fra 0 og oppover.

Antall muligheter ved tre bits finner vi slik: 23, eller 2 x 2 x 2 = 8

Fins det så noen enkel metode for å finne ut hvor mange muligheter vi har ved en gitt mengde av/ på-tilstander, eller en gitt mengde bits? Vi fant ut at to utelamper gir fire muligheter, og at tre utelamper gir åtte muligheter. Du kan regne ut hvor mange muligheter du har, ved å ta tallet 2 og opphøye det i antallet bit. Med 2 bit blir antallet muligheter 22. Det er det samme som 2 x 2, som altså gir 4. For 3 bits blir det da 23, eller 2 x 2 x 2 = 8. Fire bit gir 24 som er 16 muligheter. Fem bits gir 25 som er 32 muligheter, og slik fortsetter det. Disse tallene går ofte igjen i dataverdenen. Tabellen viser antall muligheter opp til 10 bit.

BIT

1

2

3

4

5

6

7

8

MULIGHETER

2

4

8

16

32

64

128

256

9

10

512 1024

68

Kode1_Informasjonsteknologi Kap03.indd 68

24.05.2017 15:46:04

8 bit er en byte Øker du til flere bit som du så skal finne tallet til, dobler du bare den verdien som hver bit har. I eksempelet ovenfor hadde vi tre bit, og den høyeste verdien er 4. Hvis vi har fire bit, vil den neste biten, som legges på lengst til venstre, få verdien 8. Hva blir da det binære tallet 1101 omregnet til vanlige tall? Jo, her får vi disse verdiene bortover: 8, 4, 2, 1. Tre av de fire bitene her er “slått på”, nemlig 8, 4 og 1. Så 1101= 8 + 4 + 0 + 1 = 13. Vi skal se litt nærmere på dette systemet og øker nå til 8 bit. Her får vi følgende verdier bortover: 128, 64, 32, 16, 8, 4, 2, 1. Hva blir da det binære tallet 1011 1101 omregnet til vanlige tall? Seks av de åtte bitene er “slått på”, så 1011 1101 = 128 + 0 + 32 + 16 + 8 + 4 + 0 + 1 = 189.

Verdiene finner vi slik: 2 7, 2 6, 2 5, 2 4, 2 3, 2 2, 2 1, 2 0

8 BIT BINÆRT TALL

VERDI: 128

VERDI: 64

VERDI: 32

VERDI: 16

VERDI: 8

VERDI: 4

VERDI: 2

VERDI: 1

SUM, VANLIG TALL

1011 1101

1

0

1

1

1

1

0

1

189

For å vise at det er et binært tall kan man skrive det slik: 1011 11012

Det du nå har regnet på, altså 8 bit, er det som ofte bare blir kalt 1 byte. I mange datamaskiner er 8 bit altså 1 byte, den minste plassen du kan sette av til bruk i minnet. Med 8 bit får vi 2 opphøyd i 8 (28) altså 256 muligheter. Og de 256 mulighetene som en byte gir, er et tall som ofte er stort nok til å beskrive en farge eller et lydnivå eller til å angi et tegn i et tegnsett.

8 bit blir kalt 1 byte. I mange datamaskiner er 1 byte den minste plassen du kan sette av til bruk i minnet. De 256 mulighetene som en byte gir, beskriver ofte en farge, et lydnivå eller et tegn i et tegnsett i en datamaskin.

EKSEMPEL

Vanlige tall til binære tall Når vi skal regne om fra et vanlig tall til et binært tall, må vi først finne den høyeste verdien som er i tallet. Vi har det vanlige tallet 112 og skal skrive det som 8 bit. Verdiene for plassen til 1 i 8 bit er: 128, 64, 32, 16, 8, 4, 2, 1.

Først finner vi ut hvor vi skal sette 1. I det vanlige tallet 112 er verdien 64 det største tallet og vi setter 1 her. Da har vi igjen 112 – 64 = 48. Tallet 48 er større enn 32 og da setter vi 1 på 32-plassen. Så har vi igjen 112 – 64 – 32 = 16. Da setter vi 1 på plassen til verdien til 16. Dermed har vi 0 igjen, og vi setter 0 på 8, 4, 2 og 1 plassene. Vi setter også 0 på plassen til verdien 128. Det binære tallet blir da: 0111 0000.

VERDI: 128

0

VERDI: 64

VERDI: 32

VERDI: 16

1

1

1

VERDI: 8

VERDI: 4

VERDI: 2

VERDI: 1

0

0

0

0

< 03 Fysiske signaler i datautstyr >

Kode1_Informasjonsteknologi Kap03.indd 69

69

24.05.2017 15:46:04

Lagringsplass

Binært tallsystem: 1 kilobyte = 210 byte = 1024 byte

Størrelsen på lagringsplassen i minnet og på en disk blir vanligvis oppgitt i byte, og da med et prefiks som angir hvor mange tusen eller millioner byte det er snakk om. Kilo, mega og giga er vanlige prefikser. En kilobyte er ca. 1000 byte (se margen). Når vi bruker betegnelsen bit og når vi bruker byte, er ikke alltid helt forutsigbart. Men en tommelfingerregel er at lagringsplass oppgir vi i byte, og hastigheten i nettverk oppgir vi i bit, dvs. antallet bit per sekund.

BYTE

BIT

BINÆRT TALL

En byte

8 bit

11001100

To byte

To 8 bit

11001100 11001111

Tre byte

Tre 8 bit

11001100 11001111 11001101

En kilobyte = 1000 byte

Tusen 8 bit

11001100 …999 ganger

En megabyte = 1000 000 byte

En million 8 bit

11001100 …999 999 ganger

En gigabyte = 1000 000 000 byte

En milliard 8 bit

11001100 …999 999 999 ganger

Lagringsplass oppgis i byte, mens hastigheten på nettverk oppgir vi i bit per sekund.

EKSTRASTOFF

Minne Tallene 2, 4, 8, 16, 32, 64, 128, 256, 512 og 1024 kjenner vi lett igjen fra tidligere digitale datamaskiner. I 1980-årene kom den legendariske hjemmedatamaskinen Commodore 64 på markedet. Tallet 64 forteller oss at den hadde 64 kB minne, nærmere bestemt 65 536 byte som utgjør 524 288 bit. Minnekortet hadde altså 524 288 små

transistorer som kunne ha to tilstander – strøm på – støm av. Og det er ikke tilfeldig at etterfølgeren het Commodore 128. I moderne mobiltelefoner er det heller ikke tilfeldig at de ofte kommer med et minne på 16, 32, 64 eller 128 gigabyte. Utgangspunktet er nå som før hvor mange bit det er tale om.

Commodore 64 hadde 64 kB minne.

70

Kode1_Informasjonsteknologi Kap03.indd 70

24.05.2017 15:46:05

PRØV SELV 1. Hvilke to tall er det som representerer tilstanden for strømmen av og strømmen på i en elektronisk datamaskin?

2. Hva kaller vi det tallsystemet som er basert på bruken av 0 og 1?

3. Hvor mange bit er det i de binære tallene a) 01, b) 110, c) 1100, d) 00110011?

4. Hvilken verdi har de ulike plassene i 8 bit?

5. a) Hvor mange muligheter har vi med 8 bit? b) Hva er en byte?

6. Hva er den minste lagringsenheten?

7. Kan du fylle ut det som mangler i tabellen nedenfor?

BINÆRT TALL

VERDI: VERDI: VERDI: VERDI: VERDI: VERDI: VERDI: VERDI: VANLIG 128 64 32 16 8 4 2 1 TALL

00001001

0

0

0

0

1

0

0

1

0

0

1

1

0

1

1

0

54 17

11111111

1

1

1

1

1

1

1

1

10100110

1

0

1

0

0

1

1

0 242

11001000

1

1

0

0

1

0

0

0 64

3.2 Bilder består av bildepunkter Bildepunkter

Et bilde som er digitalisert og består av mange piksler eller bildepunkter.

Et digitalt bilde er et godt utgangspunkt når vi skal se mer på hvordan en datamaskin fungerer. Selve bildet er tydelig og forståelig, selv om teknikken inne i maskinen kan virke komplisert. Som for det meste i en datamaskin gjelder det å bryte ting helt ned til 0 og 1. Derfor deler vi bildet inn i bitte små deler, jo flere dess bedre. Det er disse delene som kalles piksler eller bildepunkter. Disse bildepunktene har ikke noen fast eller standardisert størrelse. Det blir slik at jo flere punkter du deler et bilde inn i, desto høyere blir oppløsningen og dermed kvaliteten på bildet. Men da krever det også mer plass i minnet på datamaskinen.

< 03 Fysiske signaler i datautstyr >

Kode1_Informasjonsteknologi Kap03.indd 71

71

24.05.2017 15:46:06

For å vise hvordan vi kan gjøre bilder og illustrasjoner om til bildepunkter, og hvordan det foregår i en datamaskin, bruker vi en svært enkel figur av et smilefjes, se nedenfor. Smilefjeset har tydelige svarte streker. Det er to nivåer: svart og hvitt. Figuren av smilefjeset blir så digitalisert ved at et kamera eller en skanner leser den av og deler den inn i bildepunkter, figur 2 nedenfor. Vi bruker lav oppløsning i dette eksempelet. Maskinen plasserer de definerte bildepunktene så godt den kan. Når vi så tar bort det originale bildet, står vi igjen med en lavoppløst digital versjon, figur 3. Siden dette er et svært enkelt bilde med enten svart eller hvitt, er det ganske enkelt for datamaskinen å sette opp tall for hvert bildepunkt. Tallet 1 står for svart, og tallet 0 står for hvitt, figur 4.

1.

2.

3.

4.

0 0 1 1 1 1 0 0

Datamaskinen setter opp tall for hvert billdepunkt, 1 for svart og 0 for hvitt.

0 1 0 0 0 0 1 0

5.

1 0 1 0 1 0 0 1

1 0 0 0 0 1 0 1

1 0 0 0 0 1 0 1

1 0 1 0 1 0 0 1

0 1 0 0 0 0 1 0

0 0 1 1 1 1 0 0

0 0 1 1 1 1 0 0

0 1 0 0 0 0 1 0

1 0 1 0 1 0 0 1

1 0 0 0 0 1 0 1

1 0 0 0 0 1 0 1

1 0 1 0 1 0 0 1

0 1 0 0 0 0 1 0

0 0 1 1 1 1 0 0

Datamaskinen trenger bare tallene og litt informasjon om hvordan de er satt opp. I dette tilfellet er tallene satt opp i et mønster med 8 punkter horisontalt og 8 punkter vertikalt, figur 5. Og så lenge maskinen vet at de skal settes opp igjen i et rutenett som er på 8 x 8 punkter, klarer den fint å gjenskape bildet fra denne tallrekken: 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0.

EKSEMPEL

Et mønster Å gjøre bilder og illustrasjoner om til bildepunkter er det ikke bare datamaskiner som har gjort. Ett av områdene hvor dette var vanlig lenge før datamaskinene kom i bruk, er innenfor strikking, søm og broderi. Et mønster er på mange måter et digitalisert bilde.

72

Kode1_Informasjonsteknologi Kap03.indd 72

24.05.2017 15:46:06

Lagring og minne

grafikk = alle ulike visningsmåter av skrift og tegning

Et bilde av smilefjeset består altså av 8 x 8 bit, altså 64 bit til sammen. I en datamaskin er det en viss mengde plass til slike bit. Det gjelder både for minnet i selve maskinen og for minnet på en eventuell harddisk, eller for lagring på minnepinne eller CD-ROM. Dersom du vil overføre dette enkle bildet over bredbåndet ditt eller over mobilnettet, vil det legge beslag på 64 bit. I den store sammenhengen er det et svært lite bilde. Såpass enkel grafikk med så lav oppløsning krever lite både av minnet i maskinen og eventuelle linjer for overføring.

Men hvor mange ulike motiver på slike enkle bilder er det mulig å lage ved hjelp av disse 64 bitene? Svaret er: 2 opphøyd i 64, altså 264 = 18 446 744 073 709 551 616. Du kan med andre ord lage mange ulike enkle figurer innenfor disse rammene ganske lenge. Ett bilde med 64 bit krever lite plass, men kombinasjonsmulighetene innenfor 64 bit er enorme.

Punktmatrise = bitmap

Et bilde med de forskjellige kombinasjonsmulighetene kaller vi en punktmatrise, engelsk bitmap. Det er et slags kart over piksler.

EKSTRASTOFF

Riskorn på sjakkbrettet Noen kjenner kanskje til historien om mannen som i belønning ønsket seg ett riskorn i den første ruten på sjakkbrettet, så to i den neste, fire i den deretter, åtte i den neste osv. I den siste ruten alene ville det da måtte ligge 18 446 744 073 709 551 616 riskorn.

Farger – RGB Det er ikke så ofte vi klarer oss med så enkel grafikk med kun svart og hvitt, så vi bruker ofte farge på bildepunktene våre. Datamaskinen trenger da flere tall for å kunne beskrive hvert punkt. De to vanligste måtene å beskrive farger på er ved hjelp av RGB-verdier eller CMYK-verdier. Vi bruker RGB i eksempelet videre.

BRUK

FARGENE

RGB

Grafikk på skjerm

Rød, Grønn og Blå

CMYK

Trykk på papir

Cyan, Magenta, Yellow og blacK

< 03 Fysiske signaler i datautstyr >

Kode1_Informasjonsteknologi Kap03.indd 73

73

24.05.2017 15:46:08

RGB er altså vanligst når det gjelder grafikk på skjerm. Om vi tar for oss rødt alene, har vi mange muligheter når vi skal gjengi rødt – alt fra så mørkerødt at det ender i svart, til så knallrødt at det bare er helt rødt.

Bruker vi lav oppløsning her og sier at vi bare tar oss råd til å gjengi rødt med for eksempel 16 forskjellige nivåer, får vi en grov oppdeling. Øynene våre er såpass gode at vi trenger flere sjatteringer for å kunne se jevne overganger. En vanlig oppdeling er 256 nivåer for hver farge.

Rød 81 Grønn 27 Blå 21

RGB-verdiene er R = 81, G = 27 og B = 21.

0

16

0

256

Til venstre er rødt delt inn i 16 nivåer, til høyre i hele 256 nivåer.

EKSEMPEL

Farger

Smilefjesest får nå farger

Hvert bildepunkt trenger nå tre tall, ett for R, G og B.

FARGE

R, G, B

Hvit

255, 255, 255

Svart

0, 0, 0

Ansiktsfarge

255, 204, 153

Vi går tilbake til det enkle bildet av smilefjeset som vi nå har gitt litt farger.

Så setter vi på verdier for alle fargene. Hvert bildepunkt trenger nå tre tall – ett for rødt, ett for grønt og ett for blått. Vi velger å bruke systemet med 256 forskjellige sjatteringsmuligheter for hver farge. Hver farge får da et tall fra 0 til 255.

255 255 255 255 255 255 140 98 57 140 98 57 140 98 57 140 98 57 255 255 255 255 255 255

255 255 255 140 98 57 199 178 153 199 178 153 199 178 153 199 178 153 140 98 57 255 255 255

140 98 57 199 178 153 24 113 183 255 255 255 194 14 26 199 178 153 199 178 153 140 98 57

140 98 57 199 178 153 199 178 153 199 178 153 199 178 153 194 14 26 199 178 153 140 98 57

140 98 57 199 178 153 199 178 153 199 178 153 199 178 153 194 14 26 199 178 153 140 98 57

140 98 57 199 178 153 24 113 183 255 255 255 194 14 26 199 178 153 199 178 153 140 98 57

255 255 255 140 98 57 199 178 153 199 178 153 199 178 153 199 178 153 140 98 57 255 255 255

255 255 255 255 255 255 140 98 57 140 98 57 140 98 57 140 98 57 255 255 255 255 255 255

255 255 255 255 255 255 140 98 57 140 98 57 140 98 57 140 98 57 255 255 255 255 255 255

255 255 255 140 98 57 199 178 153 199 178 153 199 178 153 199 178 153 140 98 57 255 255 255

140 98 57 199 178 153 24 113 183 255 255 255 194 14 26 199 178 153 199 178 153 140 98 57

140 98 57 199 178 153 199 178 153 199 178 153 199 178 153 194 14 26 199 178 153 140 98 57

140 98 57 199 178 153 199 178 153 199 178 153 199 178 153 194 14 26 199 178 153 140 98 57

140 98 57 199 178 153 24 113 183 255 255 255 194 14 26 199 178 153 199 178 153 140 98 57

255 255 255 140 98 57 199 178 153 199 178 153 199 178 153 199 178 153 140 98 57 255 255 255

255 255 255 255 255 255 140 98 57 140 98 57 140 98 57 140 98 57 255 255 255 255 255 255

Du ser at de hvite punktene har de tre tallene 255, 255, 255. Det er full styrke på alle fargene RGB som gir helt hvitt. Nå er det ikke lenger helt svarte punkter i bildet, men de ville ha fått verdien 0, 0, 0. De helt røde punktene i munnen har 255, 0, 0, og så har ansiktsfargen en blanding av rødt, grønt og blått som er 255, 204, 153. Med litt trening kan du bare ut fra tallene si litt om hvilken farge det er. Denne siste her har ganske høye verdier på alle tre tallene. Det er altså en ganske lys farge. Den har mest rødt, litt grønt og enda mindre blått. Sannsynligvis er det da en farge i retning oransje, rosa eller lysebrun.

74

Kode1_Informasjonsteknologi Kap03.indd 74

24.05.2017 15:46:08

Lagring og overføring av fargebilder Uavhengig av hvilke farger det er snakk om, tar bildet vårt nå vesentlig mer plass enn da det var et enkelt punktmatrise med null og en. Hvert bildepunkt krever nå veldig mange flere bit. For å være nøyaktig trenger vi 8 bit for å beskrive rødt (256 mulige sjatteringer av rødt), 8 bit for grønt og 8 for blått. Hvert bildepunkt trenger da 24 bit. Det er en formidabel økning, fra én bit per bildepunkt i vår enkle punktmatrise til 24 bit per bildepunkt i fargebildet. Svart-hvitt-bildet av smilefjeset som måtte ha 64 av/på-tilstander, krever i farger 64 x 24 = 1536 slike lagringsplasser. Fargebildet vårt trenger altså 1536 bit.

En rask og moderne datamaskin har masse minneplass.

La oss si at du skal skrive opp og lagre disse to bildene som bit i en papirbok, for hånd. Du skal altså skrive alle bitene. For det enkle svarte og hvite bildet må du da skrive 64 null og en. Det er en overkommelig oppgave. Men for fargebildet må du sitte og skrive 1536 ulike tall. Det tar svært lang tid, og det krever mange ark. Eventuelt kan du få arbeidet til å gå fortere hvis du er en person som er ekstremt rask til å skrive. Og du får plass til flere bilder om du har en veldig tykk bunke med ark. Datamaskinen har det litt på samme måte. Den må bruke mer tid og mer plass på fargebilder. En rask og moderne datamaskin med masse minneplass vil ha mindre problemer med det store bildet enn en treg datamaskin med lite minne.

Du skal så overføre disse bildene til en venn i en annen by. Du tar opp telefonen og ringer, og så leser du alle tallene mens din venn noterer i den andre enden. Det blir den samme utfordringen her som tidligere. 64 tall går greit. Men 1536 tall tar svært lang tid. For å få det til å gå fortere kan du lese fortere. Da må din venn i den andre enden skrive fortere. Og til slutt hører han ikke hva du sier. For å øke hastigheten ytterligere kan du forbedre kvaliteten på linjen. Med bedre lyd vil du kunne lese enda fortere uten at din venn hører feil eller mister noen tall. Så mange null og en som du klarer å lese på ett sekund, blir da din datahastighet. Den måles i bit per sekund.

Leser du fortere, får du høyere datarate og flere bit per sekund.

Slik har datamaskinene det også. Når du skal overføre et bilde på nett, må alle tallene komme igjennom. Et bilde med mye data tar lengre tid enn et bilde med lite. Så kan du øke hastigheten ved å sørge for at selve datamaskinen kan sende fra seg enda flere tall per sekund. Men da må datalinjen ha god nok kvalitet til å formidle dem uten at sendingen blir unøyaktig. Og datamaskinen i den andre enden må være rask nok til å ta imot.

Datahastighet måles i bit per sekund.

< 03 Fysiske signaler i datautstyr >

Kode1_Informasjonsteknologi Kap03.indd 75

75

24.05.2017 15:46:10

Kompresjon av bilder Mediefiler tar stor plass i dataverdenen. Mediefiler er filer som inneholder bilder, lyd og video. De tar så stor plass at det er funnet måter å få datafilene til å ta mindre plass på uten at de blir ødelagt, og uten at vesentlig informasjon i for eksempel et bilde går tapt. Dette kalles kompresjon. Det fins to hovedtyper kompresjon. Den ene kalles tapsfri kompresjon (lossless). Det er den betegnelsen vi bruker når vi har gjort en fil mindre i størrelse, men likevel har nok data til å gjenskape en fil som er identisk med originalen. Den andre typen kalles destruktiv kompresjon (lossy). Den er svært utbredt når det gjelder mediefiler som for eksempel bilder.

Kompresjon gjør at datafilene tar mindre plass uten at de blir ødelagt, og uten at vesentlig informasjon i for eksempel et bilde går tapt.

TO TYPER KOMPRESJON

FORKLARING

Tapsfri kompresjon

Det er den betegnelsen vi bruker når vi har gjort en fil mindre i størrelse, men likevel har nok data til å gjenskape en fil som er identisk med originalen. Brukes ofte på illustrasjoner og figurer.

Destruktiv kompresjon

Den er svært utbredt når det gjelder mediefiler som for eksempel bilder. Kompresjonen forenkler bildet basert på kunnskapen om hva som er nødvendig å ta med.

Tapsfri kompresjon Hvordan er det mulig å fjerne masse data fra en fil og så likevel klare å gjenopprette den? For å forklare det skal vi nå gå tilbake til fargebildet av smilefjeset. Du sitter der med boken din og skal skrive inn alle tallene. Og siden du er et menneske og ikke en datamaskin, skriver du tallene for hvert bildepunkt. Det er tre tall per bildepunkt og 64 bildepunkter i alt. Så her er det totalt 192 ulike tall som skal skrives.

Smilefjeset består av 192 ulike tall.

255 255 255 255 255 255 140 98 57 140 98 57 140 98 57 140 98 57 255 255 255 255 255 255

255 255 255 140 98 57 199 178 153 199 178 153 199 178 153 199 178 153 140 98 57 255 255 255

140 98 57 199 178 153 24 113 183 255 255 255 194 14 26 199 178 153 199 178 153 140 98 57

140 98 57 199 178 153 199 178 153 199 178 153 199 178 153 194 14 26 199 178 153 140 98 57

140 98 57 199 178 153 199 178 153 199 178 153 199 178 153 194 14 26 199 178 153 140 98 57

140 98 57 199 178 153 24 113 183 255 255 255 194 14 26 199 178 153 199 178 153 140 98 57

255 255 255 140 98 57 199 178 153 199 178 153 199 178 153 199 178 153 140 98 57 255 255 255

255 255 255 255 255 255 140 98 57 140 98 57 140 98 57 140 98 57 255 255 255 255 255 255

255 255 255 255 255 255 140 98 57 140 98 57 140 98 57 140 98 57 255 255 255 255 255 255

255 255 255 140 98 57 199 178 153 199 178 153 199 178 153 199 178 153 140 98 57 255 255 255

140 98 57 199 178 153 24 113 183 255 255 255 194 14 26 199 178 153 199 178 153 140 98 57

140 98 57 199 178 153 199 178 153 199 178 153 199 178 153 194 14 26 199 178 153 140 98 57

140 98 57 199 178 153 199 178 153 199 178 153 199 178 153 194 14 26 199 178 153 140 98 57

140 98 57 199 178 153 24 113 183 255 255 255 194 14 26 199 178 153 199 178 153 140 98 57

255 255 255 140 98 57 199 178 153 199 178 153 199 178 153 199 178 153 140 98 57 255 255 255

255 255 255 255 255 255 140 98 57 140 98 57 140 98 57 140 98 57 255 255 255 255 255 255

Vi tar nå for oss kun den øverste linje av bildet. På papir blir denne tallrekken slik: (255, 255, 255), (255, 255, 255), (153, 102, 53), (153, 102, 53), (153, 102, 53), (153, 102, 53), (255, 255, 255), (255, 255, 255). Så langt har du skrevet 24 tall med to eller tre siffer i hvert av dem. I alt blir det 68 siffer. Men her er det rom for forbedring. Det er ikke nødvendig å drive

76

Kode1_Informasjonsteknologi Kap03.indd 76

24.05.2017 15:46:10

med all denne repetisjonen. I stedet for å skrive (255, 255, 255) to ganger og (153, 102, 53) fire ganger osv., kan du heller bare skrive slik: 2, (255, 255, 255), 4, (153, 102, 53), 2, (255, 255, 255). Og de hvite bildepunktene kan du forenkle enda mer ved å skrive bare (3, 255). Da blir resultatet slik: 2, (3, 255), 4, (153, 102, 53), 2, (3, 255). Vi har redusert det til 19 siffer. Dette er under en tredjedel av de opprinnelige 68 sifrene.

Tapsfri kompresjon brukes ofte til enkel grafikk og figurer.

Bildet vil nå bare kreve en tredjedel av plassen i boken din, og du kan lese det tre ganger raskere i telefonen. Likevel kan du siden gjenskape den opprinnelige tallrekken 100 % nøyaktig. Her snakker vi altså om en tapsfri kompresjon. Akkurat denne måten å gjøre det på kalles RLE, av Run Length Encoding. I datamaskinen må vi sende med litt informasjon om hvilken type kompresjon som er brukt, slik at maskinen som mottar filen, vet hva den skal gjøre for å gjenskape originalen. Dette tar litt plass, og begge maskinene må bruke noe maskinkraft på å stokke om på tallene. Det er det som kalles koding og dekoding. Selve systemet kalles en kodek.

Ved tapsfri kompresjon med RLE, kan vi gjenskape den opprinnelige tallrekken 100 % nøyaktig. Datamaskinen som sender filen legger ved informasjon om hvilke type kompresjon som er brukt, maskinen som mottar filen må gjenskape originalen. Dette kalles koding og dekoding.

Destruktiv kompresjon Destruktiv kompresjon brukes ofte på fotografier.

For enkel grafikk og figurer kan tapsfri kompresjon gi en svært effektiv komprimering. Men for fotografi er det ikke så ofte at mange bildepunkter etter hverandre er helt like. Da kommer destruktiv kompresjon inn. Et bilde inneholder som oftest en mengde detaljer som øyet vårt ikke kan se.

Hvis vi da forenkler bildet basert på kunnskapen om hva som er nødvendig å ta med, kan vi komprimere ganske kraftig.

Bildet til venstre er ukomprimert og krever 27 megabyte plass i datamaskinen. Bildet til høyre er kraftig komprimert og krever bare 220 kilobyte.

< 03 Fysiske signaler i datautstyr >

Kode1_Informasjonsteknologi Kap03.indd 77

77

24.05.2017 15:46:10

Forstørrer vi mer, er det lettere å se hva som er gjort. Vi ser at bildet til høyre mangler detaljer.

Bildet til venstre ovenfor er det som er ukomprimert. Til høyre kan du se at datamaskinen først har delt bildet inn i en serie med firkanter. Så har den prøvd å redusere antallet farger i hver rute og samtidig prøvd å tvinge så mange bildepunkter som mulig til å bli helt like. I dette eksempelet har vi komprimert så hardt at vi ikke bare reduserer størrelsen på filen, men det har også gått utover bildekvaliteten.

Forstørrer vi enda mer, ser vi tydeligere hva kompresjonen har ført til.

Hvis vi så ber algoritmen om å gå litt lettere til verks, har vi til slutt et bilde som det menneskelige øyet har vanskelig for å se problemer med. Men med tanke på lagring og overføring kan det likevel være problematisk.

Bildet til venstre er ukomprimert. Bildet til høyre er komprimert. Ser du forskjell på bildene?

78

Kode1_Informasjonsteknologi Kap03.indd 78

24.05.2017 15:46:10

EKSEMPEL

Filstørrelse Alle bildene du legger ut på nettsidene dine, må lastes ned av brukerne til brukernes datamaskin. Filstørrelsen til bildet er av betydning når det gjelder lagring av bildefiler og overføring av bilder via Internett. Enheten for filstørrelse er byte (B). Som regel oppgir vi filstørrelsen i kilobyte (kB) eller megabyte (MB). Et viktig punkt som endrer filstørrelsen, er valg av filformat og komprimering.

Du finner gratis bildebehandlings­ programmer på www.kode.cdu.no.

I et bilderedigeringsprogram kan vi lagre bildet i et filformat som komprimerer filstørrelsen slik at bildet passer det vi skal bruke det til. De vanligste filformatene er BMP, JPG, PNG og TIF. De ulike filformatene lagrer informasjon om bildene på forskjellige måter, og det er viktig å bruke riktig format i hvert tilfelle. En gyllen regel er at du bør bruke formatet JPG når du skal vise fotografier og GIF eller PNG til mindre webgrafikk som logoer og ikoner.

Tips for bruk av bilder på nettetsider 1. Bruk bildeformatet JPG til fotografier på nettsider.

2. Rediger kvaliteten i JPG-bildene i et bilderedigeringsprogram så mye som mulig uten at kvalitetstapet blir synlig.

3. Skaler bildene til den størrelsen (antall piksler i bredden og høyden) de skal ha på nettsiden i et bilderedigeringsprogram.

FILFORMAT

EGNER SEG TIL

KOMPRIMERING

JPG

Fotografier

destruktiv

PNG

Fotografier, ikoner, webgrafikk, logoer og grafikk til animasjoner og spill.

tapsfri

PNG-8

Samme som PNG. PNG-8 gir mindre filstørrelse.

tapsfri

GIF

Lite egnet. Bruk heller PNG eller PNG-8.

destruktiv eller tapsfri

PRØV SELV 1.

2.

3.

4.

5.

Hva består et bilde av?

Forklar hva RGB står for.

Hva er tapsfri kompresjon?

Hva er destruktiv kompresjon?

Bruk dine egne ord og forklar for en medelev hvordan overføring av et bilde foregår.

< 03 Fysiske signaler i datautstyr >

Kode1_Informasjonsteknologi Kap03.indd 79

79

24.05.2017 15:46:10

3.3 Tegnsett UTF-8 og ANSI Tegnsettet i en datamaskin avgjør hvordan bokstavene i alfabetet, tall og andre skrifttegn skal vises på skjermen. Som for bilder gjelder det å bryte ned ting til 0 og 1. Derfor har hver enkelt bokstav, tall og tegn sitt binære tall. Tidligere brukte de fleste datamaskiner tegnsettet ASCII. Det brukte 7 bit, og det ga 128 muligheter for ulike tegn (0 til 127). Programvarehuset Windows laget etter hvert sitt eget tegnsett som de kalte ANSI. De utvidet da tegnsettet til 8 bit slik at de blant annet fikk med bokstavene Æ, Ø og Å. I dag bruker datamaskiner tegnsettet Unicode, som har 8 bit og derfor 256 mulige tegn vi kan bruke.

Du har sikkert lagt merke til at du i begynnelsen av koden skriver <meta charset="UTF-8">. UTF-8 står for Unicode Transformation 8-bit og er et Unicode-tegnsett som kan vise alle ulike tegn fra alle språk. Det som kjennetegner UTF-8, er at det bruker ulike lengder på en byte, alt fra en til fire byte. Når du skriver HTML-kode, er UTF-8 det tegnsettet som automatisk blir brukt.

BINÆRT

HEKSADESIMALT

0000

0

0001

1

0010

2

0011

3

0100

4

0101

5

Det heksadesimale tallsystemet

0110

6

0111

7

1000

8

1001

9

1010

A

1011

B

1100

C

1101

D

1110

E

1111

F

Det heksadesimale tallsystemet har 16 ulike tegn. Tabellen i margen viser at det heksadesimale tallsystemet går fra sifrene 0 til 9, og så videre fra bokstaven A til F. På denne måten kan vi erstatte de fire binære tallene 0101 med tallet 5 fra det heksadesimale tallsystemet. Og vi kan erstatte 1010 med bokstaven A. Dette gjør at vi kan skrive det binære tallet 0101 1010 som 5A. En av fordelene med dette systemet er at det er lettere for oss mennesker å lese enn det binære tallet med masser av nuller og ett-tall.

Samtidig er det lettere for datamaskinen å oversette mellom det binære og det heksadesimale tallsystemet enn mellom det binære og det vanlige tallsystemet. Sammenhengen mellom det heksadesimale tallsystemet og det binære tallsystemet ser du i tabellen nedenfor.

Tegnsettet i en datamaskin avgjør hvordan bokstavene i alfabetet, tall og andre skrifttegn skal vises på skjermen. Forskjellige tegnsett har ulikt antall tegn: ASCII har tegn fra tallene 0 til 127, mens ANSI og UTF-8 har i tillegg fra tallene 128 til 255.

80

Kode1_Informasjonsteknologi Kap03.indd 80

24.05.2017 15:46:11

TALL I TITALL-

BINÆRT

HEKSADESIMALT

TEGN PÅ

SYSTEMET

TALL

TALL

TASTATURER

32

0010 0000

20

Mellomrom

33

0010 0001

21

!

34

0010 0010

22

”

35

0010 0011

23

#

48

0011 0000

30

1

49

0011 0001

31

2

50

0011 0010

32

3

64

0100 0000

40

@

65

0100 0001

41

A

66

0100 0010

42

B

67

0100 0011

43

C

68

0100 0100

44

D

97

0110 0001

61

a

98

0110 0010

62

b

99

0110 0011

63

c

100

0110 0100

64

d

106

0110 1010

6A

j

107

0110 1011

6B

k

108

0110 1100

6C

l

122

0111 1010

7A

z

197

1100 0101

C5

Å

198

1100 0110

C6

Æ

216

1101 1000

D8

Ø

Bruker du Notisblokk må du velge UTF-8 når du lagrer HTML-fila. Det er det samme tegnsettet som du har i meta-taggen i head-elementet. Ellers blir HTML-fila satt som ANSI. Glemmer du å lagre som UTF-8 vises ikke tegnene Æ, Ø og Å riktig når du åpner HTML-filen i en nettleser.

PRØV SELV Hva er et tegnsett?

Hvorfor skriver vi koden <meta charset=″ UTF-8″>?

Hva er Unicode og ANSI? Finn det heksadesimale tallet. a) 110 0001, b) 110 0100 og c) 0111 1010.

5. Hvilket tegn er a, b og c i oppgave 4?

1.

2.

3.

4.

< 03 Fysiske signaler i datautstyr >

Kode1_Informasjonsteknologi Kap03.indd 81

81

24.05.2017 15:46:11

3.4 Digitale lydopptak Opptak av lyd Lyd er hurtige endringer i trykk, også kalt lydbølger. Lyd kan spre seg i både vann og faste stoffer, men vanligvis er det lyd som sprer seg i luft vi har å gjøre med, den lyden vi kan høre. Helt siden slutten av 1800-tallet har vi mennesker vært i stand til å gjøre opptak av lyd. Først var det med mekaniske opptak på voksruller, så fikk vi elektroniske opptak på magnetbånd, og siden ble det digitale opptak ved hjelp av datamaskiner.

Vi kan gjøre digitale opptak av lyd.

Lydbølger i luft kan gjøres om til elektriske signaler.

En mikrofon kan gjøre lydbølger i luft om til elektriske signaler. Det skjer som oftest ved hjelp av en membran som setter en spole i bevegelse mot en magnet. Høyt lydvolum vil få membranen og dermed spolen til å svinge dypere. Da lages en høyere elektrisk spenning i spolen. Endringene i spenningen blir et elektrisk signal som samsvarer med lyden. Det gjør at vi får et elektrisk signal som svinger i takt med membranen og dermed med lyden i rommet. Dette signalet kan vi så sende videre gjennom en forsterker og ut i høyttalere, eller vi kan lagre det på for eksempel et magnetbånd. Da har vi et analogt lydopptak. Skal vi lagre og behandle lyd i en datamaskin, må det analoge lydsignalet digitaliseres. Det må altså gjøres om til tall.

Skal vi lagre og behandle lyd i en datamaskin, må lydsignalet digitaliseres. Det må altså gjøres om til tall.

Digitalisering av lyd Lydsignalet i et analogt lydopptak er endringer i spenning over tid. Spenningen kan vi måle. Du kan framstille den grafisk med tiden langs x-aksen og nivået på spenningen oppover langs y-aksen. Når som helst kan du gå inn og måle for å tallfeste spenningen. Når vi digitaliserer lyd, går vi inn med jevne mellomrom og måler spenningen. Hver gang tar vi vare på verdien og lagrer den i den samme rekkefølgen som målingene ble gjort i.

Hvor ofte og hvor nøyaktig vi måler, er med og avgjør kvaliteten på lyden.

Nivå (spenning)

Vi måler spenningsnivået 26 ganger i sekundet. En bølge i løpet av ett sekund gir oss en frekvens på 1Hz. Menneskets øre oppfatter lyd med frekvens mellom 20 Hz og 20 000 Hz.

15 14 13 12 11 10 9 8 7 6 5 4 3 2 1 0,5

1 Tid (sekund)

Illustrasjonen ovenfor viser at vi har målt spenningen 26 ganger i sekundet. Nivåene har vi plassert på en skala fra 0 til 15. Når vi skal rekonstruere denne lydbølgen, ser vi at dette ikke er nøyaktig nok. Resultatet blir hakkete, og ved avspilling ville lyden fått svært lav kvalitet.

82

Kode1_Informasjonsteknologi Kap03.indd 82

24.05.2017 15:46:13

Nivå (spenning) 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1 0,5

1 Tid (sekund)

Avspillingen ville blitt hakkete.

Hvor ofte vi gjør målingene, kalles samplingsfrekvensen, og nøyaktigheten på hver måling oppgir vi i antall bit. Dersom mikrofonen som brukes, er god, får vi en meget detaljert og glatt kurve på målingene. For å klare å få til en like fin kurve med digital teknologi må vi gjøre målinger svært ofte, og hver måling må ha en svært nøyaktig angivelse. Om vi gir hver måling en lav oppløsning slik som i eksempelet ovenfor, som var på 4 bit, må målingene våre passe inn i ett av 16 tilgjengelige nivåer, siden skalaen går fra 0-15.

Nivå (spenning) 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1 a)

b)

Tid (sekund)

I illustrasjonen treffer måling a) direkte på tallet 6. Da er alt vel. Måling b) treffer på 10,4. Siden skalaen vi sampler med har 16 (heltalls-)nivåer må vi da være fornøyd med at denne målingen blir rundet ned til får heltallsverdien 10, og vi kan dermed ikke gjenskape den opprinnelige kurven nøyaktig nok.

EKSTRASTOFF

Lydkvalitet Det viktige spørsmålet er nå hvor stor nøyaktighet vi trenger i lydmålingene. Både oppløsningen i måleresultatene (i antall bit) og hvor ofte vi måler (samplingsfrekvensen) er av betydning. Det første digitale lydproduktet som fikk stor utbredelse hos publikum, var CD-platen (Compact Disc). Da den standarden ble definert, ble samplingsfrekvensen satt til 44,1 kHz, altså 44 100 målinger per sekund.

For oppløsningen i måleresultatene ble det valgt 16 bit, altså 65 536 mulige nivåer. I systemet blir de delt inn fra –32 768 til +32 767.

Dette gir CD-platen en lydkvalitet som er god nok for de fleste typer lytting, men i situasjoner der det er ekstra krav til kvalitet, benyttes enda høyere

både samplingsfrekvens og oppløsning. Når vi gjør profesjonelle opptak, er det viktig å ta hensyn til at lyden skal gjennom mange ledd før den når lytteren. Derfor gjøres som oftest originalopptak med mye høyere kvalitet.

Det blir ganske store datamengder når vi gjør målinger mange tusen ganger per sekund og deler inn hver måling så nøyaktig. 16 bit tar vi vare på 44 100 ganger i sekundet. Det gir en datastrøm på 16 bit x 44 100 = 705 600 bit per sekund. Siden de fleste opptak gjøres i stereo, trengs to kanaler (høyttalere), så da ender vi på en bitfart på 704 600 x 2 = 1 411 200 bit/s, eller ca. 1,41 Mb/s.

< 03 Fysiske signaler i datautstyr >

Kode1_Informasjonsteknologi Kap03.indd 83

83

24.05.2017 15:46:13

Komprimering

Med kompresjon reduserer vi hvor mange tall som skal sendes.

Når vi skal lagre eller sende lyd, krever det mye plass. Derfor bruker vi komprimering av data litt på samme måte som for bilder. Vi finner måter til å redusere hvor mange tall som må lagres. Det gjelder både tapsfri kompresjon og kompresjon som ikke er helt tapsfri. Prinsippet med å ta målinger av et analogt lydsignal med jevne mellomrom kalles også pulskodemodulasjon, på engelsk pulse code modulation, forkortet til PCM. Om vi gjør 10 målinger av en PCM-lyd, kan målingene våre se slik ut: 24876, 23645, 23899, 24561, 25010, 24890, 24764, 24487, 23920, 23843. Her må vi ta vare på 10 ganske store tall. Hvis vi kunne ha funnet en måte å gjøre tallene mindre på, kunne vi ha spart plass. En av metodene som brukes til dette er at man lagrer en måling og deretter kun tar vare på forskjellene mellom målingene som følger. Altså starter vi på 24 876, deretter er det 1231 ned til 23 645, deretter 245 opp til 23899, osv: 24876, –1231, +254, +662, +449, –120, –126, –77, –567, –77. Dette kalles ADPCM og kan illustreres som i figuren nedenfor.

Nivå (spenning) PCM

Til venstre er signalet målt og lagret 12 ganger. Til høyre er nivået målt og lagret en gang og deretter måles og lagret kun endring de neste 11 gangene.

1 kHz (kilohertz) er 1000 bølgesvingninger per sekund.

ADPCM

Tid (sekund)

Med denne metoden kan vi minske datamengden ganske betydelig uten å få dårligere kvalitet. Dette er tapsfri kompresjon. De opprinnelige dataene kan rekonstrueres helt nøyaktig. For å klare å lage enda mindre lyd­ filer bruker vi mye mer avanserte metoder. Slik som i bildekompresjon tar vi utgangspunkt i hvordan vi mennesker faktisk fungerer. For hørselen vår er det slik at den målbare delen går fra ca. 20 Hz til 20 000 Hz. Etter hvert som vi blir eldre, mister vi mer og mer av detaljene, spesielt i de høye frekvensene.

Med tapsfri kompresjon kan vi minske datamengden ganske betydelig uten å få dårligere kvalitet. De opprinnelige dataene kan rekonstrueres helt nøyaktig.

84

Kode1_Informasjonsteknologi Kap03.indd 84

24.05.2017 15:46:13

EKSTRASTOFF

Høye frekvenser Det klassiske eksempelet her er den gamle mannen som er bekymret fordi det var så mye mer gresshopper før. Han mener at nå er de døde alle sammen. På blomsterengene der han tidligere hørte mange av dem, er det nå ingen. Sannheten er at de er der alle sammen, men når vi blir eldre, hører vi ikke lenger de høye frekvensene. Og lyden av gresshopper har stort sett svært høye frekvenser.

Gresshopper har høye frekvenser.

Hørsel og lydkvalitet Hørselen vår er aller best til å skille lyder mellom 2 kHz og 5 kHz. Det er ganske naturlig siden menneskelig tale i hovedsak foregår i dette frekvensområdet. Det er også slik at hvis du hører en høy lyd samtidig som du har en lavere lyd med nesten samme frekvens, så dekker hørselen over denne andre lyden. Slike detaljer kan utnyttes i kompresjonsalgoritmer som ikke er tapsfrie. MP3 og AAC er to slike lydformater. De bruker til tider svært avanserte matematiske funksjoner og modeller for å ta bort data slik at filene blir mindre. Dette skjer hele tiden i et kompromiss med lydkvaliteten. Det hele blir enda mer komplisert fordi forskjellige typer lyd reagerer ulikt på forskjellige typer kompresjon. En kompresjon som er god nok for én type filmlyd, kan være for dårlig for en annen type filmlyd.

Den opplevde lydkvaliteten vi da til slutt sitter igjen med, blir påvirket av mange faktorer. Og vi får diskusjonen om hva som virkelig er god lyd. På en gammel telefonlinje som holder seg mellom 2 og 5 kHz, hører du greit hva folk sier. Men det er ikke så flaut som du tror at du ikke hørte forskjell på mor og datter eller far og sønn. Det er ofte frekvensene under og over 2 kHz og 5 kHz som avslører forskjellene i ellers ganske like stemmer. Konklusjonen at vi kan høre lyd mellom 20 Hz og 20 kHz, baserer seg stort sett på tester der du får servert lyder og svarer på om du kan høre dem eller ikke. Det betyr ikke at vi ikke lar oss påvirke av frekvenser som er høyere eller lavere.

Menneskelig tale foregår mellom frekvensområdet 2 kHz og 5 kHz.

Begynn med så høy kvalitet som mulig og behold tapsfrie formater så lenge du kan.

Og hvis en lydfil skal gjennom flere ledd med komprimering og dekomprimering, kan en ellers god lyd få stygge feil fordi en kompresjon som i utgangspunktet var god, blir påvirket av nye komprimerte ledd. I lydproduksjon brukes både samplingsfrekvenser og oppløsninger som kan virke unødvendig høye. Når du skal arbeide med digital lyd, er det en grei grunnregel å begynne med så høy kvalitet som mulig og beholde tapsfrie formater så lenge det lar seg gjøre. Da blir lyden din mer robust og vil holde seg bedre når den så legger ut på en lang vei med kompresjon og dekompresjon før den når sitt publikum.

< 03 Fysiske signaler i datautstyr >

Kode1_Informasjonsteknologi Kap03.indd 85

85

24.05.2017 15:46:15

Heldigvis er teknologiutviklingen på lydkvalitetens side – med bedre nettverk og kraftigere datamaskiner med større minnekapasitet. Det blir stadig mer aktuelt å benytte tapsfri håndtering hele veien hjem til lytteren. Da unngår vi enkelt og greit det uforutsigbare med for hard kompresjon.

PRØV SELV 1. Hvor mye plass trenger vi for å lagre en time med ukomprimert lyd?

Ta da utgangspunkt i standarden som krever en samplingsfrekvens på 44,1 kHz og en oppløsning på 16 bit per sampel.

2. Fortell for en medelev det du vet om lydkvalitet.

3.5 Video og animasjon Levende bilder Levende bilder krever relativt mye av en datamaskin. Det er jo store mengder data som skal prosesseres (bearbeides) på kort tid. Veldig mange bit og byte som skal lagres, overføres og gjøres om til bilder. Og det må skje raskt, for her skal det vises mange bilder etter hverandre per sekund. For god gammeldags film vises 24 bilder per sekund. For fjernsyn og video i de landene som bruker PAL-systemet, er det 25 bilder per sekund, og for de landene som bruker NTSC-systemet, er det 30 bilder per sekund for fjernsyn og video.

Etter hvert som nye digitale standarder har tatt over for de gamle analoge, har det dukket opp formater med både 50, 60, 120 og enda flere bilder per sekund. Når du skal vise 25 flotte fargebilder med høy oppløsning hvert sekund, blir det store datamengder. Så hvis kompresjon er viktig for stillbilder, er det enda viktigere for video og animasjon. Og siden video og animasjon er mange stillbilder etter hverandre, kan vi benytte mye av de samme prinsippene for kompresjon av video som vi bruker for kompresjon av stillbilder.

En gammeldags film kunne vise 24 bilder per sekund. Nye digitale standarder kan ha over 120 bilder per sekund.

Video og animasjon er mange stillbilder etter hverandre. Vi kan benytte mye av de samme prinsippene for kompresjon av video som vi bruker for kompresjon av stillbilder.

Video er mange stillbilder etter hverandre.

86

Kode1_Informasjonsteknologi Kap03.indd 86

24.05.2017 15:46:16

EKSEMPEL

HD – datarate

Én datarate oppgis i bit per sekund.

Oppgi svaret på hvor stor plass ukompri­ mert video vil kreve i datamaskinen, i antall byte.

For å regne litt på datamengde kan vi ta utgangspunkt i det formatet som kalles HD. Det har en oppløsning på 1920 x 1080, altså er det 1920 bildepunkter bredt og 1080 bildepunkter høyt. Om vi gir alle bildepunktene en brukbar fargeoppløsning, får de 8 + 8 + 8 bit, altså 24 bit. Ganger vi dette opp, betyr det at et HD-videobilde krever 1920 x 1080 x 24 = 49 766 400 bit for å kunne lagres, altså ca. 50 megabit per bilde. Skal vi kjøre dette som jevn video, må vi ha 25 slike bilder per sekund. Da trenger vi 25 x 49 766 400 = 1 244 160 000 bit hvert sekund. Dette er det vi kaller en datarate. Ukomprimert HD-video krever altså en datarate på ca. 1,24 gigabit per sekund.

Skal vi lagre en time med ukomprimert HD-video, trenger vi altså 60 x 60 x 1 244 160 000 = 4 478 976 000 000 bit. Med andre ord er det ca. 4500 milliarder små brytere som skal være av eller på.

For den dataraten som vi nevnte i eksempelet ovenfor, overføring av data gjennom datalinjer, snakker vi om bit per sekund. En del overføringsmetoder baserer seg faktisk på overføring av en og en bit. Når vi lagrer filer i en datamaskin, snakker vi heller om byte. Så om noen spør deg hvor stor plass en time med ukomprimert video vil kreve i datamaskinen, er det mer fornuftig å gi svaret i antall byte. Det er åtte bit i en byte. Så da krever denne timen med video 4 478 976 000 000/8 = 559 872 000 000 byte.

Eller litt enklere sagt ca. 560 gigabyte med plass. Og det er bare for videodelen. Som oftest følger det med lyd også, gjerne stereolyd.

Komprimering av video Siden video krever så mye plass i datamaskinen og gjennom nettverksforbindelser, er det nyttig å få komprimert videofilene slik at de tar mindre plass. På samme måte som for bilder og lyd har vi både kompresjon som ikke gir kvalitetstap, og kompresjon som gir kvalitetstap for video. Hvert bilde kan behandles for seg med metoden vi kalte “run length encoding”. Da reduserer vi datamengden uten å tape kvalitet. I tillegg kan vi komprimere hvert bilde, f.eks. JPG-komprimering. Hvis vi gjør det med video, får vi en videofil som kalles MJPG, motion-­ JPG. Det er en rekke bilder som alle er komprimert med JPG-algoritmen.

Video krever mye plass og det er viktig å komprimere videofilene slik at de tar mindre plass. To metoder: • Run length encoding: hvert bilde behandles for seg, datamengden reduseres uten kvalitetstap • JPEG-komprimering (MJPG): hvert bilde komprimeres med JPG-­algoritme

< 03 Fysiske signaler i datautstyr >

Kode1_Informasjonsteknologi Kap03.indd 87

87

24.05.2017 15:46:16

Men videokomprimering blir mye mer effektiv om vi ser på mange av bildene i videoen samlet, siden det oftest er bare små forskjeller fra bilde til bilde. Filmer vi en person med 25 bilder per sekund, rekker ikke personen å gjøre store sprell mellom bildene. Dette utnytter vi i videokompresjon. Vi sammenligner bilde for bilde og tar bare vare på forskjellene. På en måte kan vi sammenligne dette litt med AD PCM-kodingen for lyd. Når vi bare lagrer forskjellene, analyserer videokompresjonsprogrammet bildene nøye. Når programmet kommer til et klipp, altså et sted der det plutselig er veldig stor forskjell i forhold til forrige bilde, lagrer videokompresjonsprogrammet hele bildet på nytt. Det kalles et nøkkelbilde. På engelsk kan du finne både begrepet keyframe og begrepet I-frame.

Nøkkelbilde (keyframe)

Videokompresjon basert på et nøkkelbilde. All informasjon i nøkkelbildet lagres, kun endringene i de neste bildene lagres, så lagres all informasjon igjen når det dukker opp et nytt nøkkelbilde.

Du finner gratis videoredigerings­ programmer på www.kode.cdu.no

Redigering av video De fleste kompresjonsalgoritmene baserer seg på et system der de tar utgangspunkt i et nøkkelbilde, lagrer bare endringene for det neste og noen flere bilder før de igjen tar jobben med å lagre et helt nøkkelbilde, uavhengig av om det er snakk om klipp eller ikke. For alle videoer som har slik kompresjon, blir det da litt mer komplisert for datamaskinen å la deg redigere innholdet. Når du går inn på et gitt bilde i sekvensen og vil gjøre et klipp der – og det da ikke er et nøkkelbilde, men et bilde som bare er lagret som en forskjell i forhold til bildet før og bildet etter, så må maskinen først regne seg fram til hvordan det bildet skulle ha sett ut, ved å se på bilder helt tilbake til forrige nøkkelbilde og noen ganger også fram til neste. De fleste redigeringsprogrammene gjør dette raskt slik at du ikke merker noe til det. Men du kan risikere at du ikke får klippe hvor du vil.

Eller at maskinen plutselig bruker tid på å gjøre noe som kanskje virket som en svært enkel jobb.

Innen profesjonell videoproduksjon benyttes ofte såkalte “I-frame only”-formater, altså komprimering som tar for seg hvert enkelt bilde.

Etter hvert som kameraene er blitt bedre, er det også mer og mer vanlig å arbeide med helt ukomprimerte filer så langt ut i produksjonen som mulig.

Dette gjøres på samme måte som med lyd for å bevare kvaliteten.

PRØV SELV 1.

2.

3.

4.

Hva er en video?

Hvordan regner vi oss fram til datamengden?

Forklar hvordan komprimering med nøkkelbilder fungerer.

Hvorfor er komprimering av video viktig?

88

Kode1_Informasjonsteknologi Kap03.indd 88

24.05.2017 15:46:17

SAMMENDRAG

< 03 Fysiske signaler i datautstyr >

Kode1_Informasjonsteknologi Kap03.indd 89

89

24.05.2017 15:46:17