Kode 1 Informasjonsteknologi 1 (kap. 1 og 7) by Cappelen Damm

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

<kode 1> Informasjonsteknologi 1 HTML5, CSS og Firebase Bokmål Cappelen Damm

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 multimedier 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

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ære planen. 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 stikkord registeret bak i boka.

Her lærer du om: в

variabler

ulike datatyper

tegne med canvas

Variabel

Gunhild

Variabler

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

3.1 Definere og bruke variabler Variabler, variabelnavn og variabelverdi

tilordne uttrykk til variabler

fornavn

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

Teoristoff

Her lærer du om

<03>

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

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

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

Skjermen ovenfor viser bruk av variabelen forvarsel. Brev…

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

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

<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

Halvfet

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.

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

Eksempel

Informasjonsteknologi 1T00 book.indb 4

12.04.2016 11:23:57

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

INNHOLD <01> Lage nettsider med HTML 8 1.1 1.2 1.3 1.4 1.5 1.6 Sammendrag 27 <02> Utseende til nettsider med CSS 28 2.1 2.2 2.3 2.4 2.5 Sammendrag 45 <03> Multimedier 3.1 3.3 3.4 3.5 3.6 Sammendrag

<04> Internett og digitalt utstyr 74 4.1 4.2 4.3 4.4 4.5 4.6 Sammendrag <05> Planlegging og design av nettsider 96 5.1 5.2 5.3 5.4 5.5 Sammendrag <06> Animasjoner 119 6.1 6.2 6.3 6.4 Sammendrag <07> Sosiale medier…155 7.1 Sosiale medier 155 7.2 Konsekvenser og muligheter 158 7.3 Etiske normer – forventet oppførsel på nett 161 7.4 Din risiko på nett 165 6

Sammendrag 172 <08> Sikkerhet og trusler…173 8.1 8.2 8.3 8.4 Sammendrag 245 <09> Databaser 246 9.1 9.2 9.3 9.4 Sammendrag <10> Modellering 285 10.1 10.2 10.3 Sammendrag <11> Dynamiske nettsider…310 11.1 11.2 11.3 11.4 11.5 Sammendrag Stikkordregister 366

<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 = HyperTekst 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 av 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.04.2017 12:47:02

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 for eksempel være minside. html. Vi kan bruke egne programmer som er utviklet spesielt for skriving av HTML-kode. Men du kan for eksempel bruke et skriveprogram som Notisblokk. Følg oppskriften på neste side, så lager du din første nettside.

< 01 Lage nettsider med HTML >

Kode1_Informasjonsteknologi Kap01.indd 9

24.04.2017 12:47:02

<!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

Slutt-tagg

HTML-element

En start-tagg og en slutt-tagg med innhold imellom kalles et HTML-element. Dette HTMLelementet kalles h1-elementet.

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 Kap1. Skriv inn filnavn: minside.html. Hvis du bruker Notisblokk, 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 brukt markert med 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 tegnet < i tekst på nettsiden kan vi bruke koden &lt;.

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å min første nettside.</p> </body>

Bruk tabulatortast til å lage innrykk.

Kode1_Informasjonsteknologi Kap01.indd 10

24.04.2017 12:47:03

PRØV SELV 1. Åpne programmet Notisblokk eller last ned et gratis utviklerverktøy. Lenke til utviklerverktøy finner du 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 minside.html i mappen Kapittel1. 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>

overskrift på nivå 1

heading 1

<h2>

overskrift på nivå 2

heading 2

<p>

avsnitt

paragraph

<b>

fet

bold

<i>

kursiv

italic

<mark>

markert tekst

marked

<br>

bryter linja, har ingen slutt-tagg

break

<span>

grupperer innhold uten linjeskift

span

<ul>

unummerert liste

unordered list

<ol>

nummerert liste

ordered list

<li>

listepunkt

list item

<!-->

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

Kode1_Informasjonsteknologi Kap01.indd 11

24.04.2017 12:47:03

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 på «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 <ol> = ordered list = nummerert liste <ul> = unordered list = bombepunkt liste

Vi kan med HTML-kode sette opp teksten på en nettside i en liste. En liste kan være med bombepunkter eller med nummer. Taggene <ul>…</ul> gir en liste med bombepunkter, 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.

Kode1_Informasjonsteknologi Kap01.indd 12

24.04.2017 12:47:05

En nummerert liste <ol> <li>…</li> <li>…</li> <li>…</li> </ol>

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 bombepunkter. 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 bombepunkter. <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 vi endre listen med bombepunkter 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

24.04.2017 12:47:05

Skriver vi inn to tekstavsnitt på nettsiden vår kan vi skille de fra hverandre ved å legge de 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 program 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 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 liste om hva du liker med det å ha ferie, skal være unummerert, og en liste med dine favorittsteder å reise på ferie til skal være nummerert. 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.

Kode1_Informasjonsteknologi Kap01.indd 14

24.04.2017 12:47:05

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 har vi et img-element som vi bruker 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å den 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 hver sin <img> tagg, slik: <body> <img src=”filnavnA.jpg”> <img src=”filnavnB.jpg”> </body> < 01 Lage nettsider med HTML >

Kode1_Informasjonsteknologi Kap01.indd 15

24.04.2017 12:47:06

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 som er nødvendig 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” straks 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

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 skulle vises ordentlig eller for nettlesere tilpasset svaksynte

Sette bredden og høyden med HTML-koden Piksler = bildepunkter

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>

Kode1_Informasjonsteknologi Kap01.indd 16

24.04.2017 12:47:06

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

24.04.2017 12:47:07

Image Size W: 1000

H: 667

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 attributtet alt. 2. Lag en nettside der du setter inn tre bilder og skriver en tittel og tekst til hver av bildene. 3. Hva bruker vi attributtet width til i img-elementet. 4. Sett bredden og høyden på et bilde med HTML-kode. 5. Undersøk hvor mange piksler skjermen din har. Prøv ut ulike bredder og høyder på et bilde satt med HTML-koden. 6. 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.

Kode1_Informasjonsteknologi Kap01.indd 18

24.04.2017 12:47:08

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 må være lagret på samme sted på datamaskinen som HTML-filen for at dette skal virke. 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

24.04.2017 12:47:09

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

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 audio- elementet 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 src=”filnavn.jpg”

width

bredden på visningen i piksler

Kode1_Informasjonsteknologi Kap01.indd 20

24.04.2017 12:47:10

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.

< 01 Lage nettsider med HTML >

Kode1_Informasjonsteknologi Kap01.indd 21

24.04.2017 12:47:10

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. 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, 22

Kode1_Informasjonsteknologi Kap01.indd 22

24.04.2017 12:47:10

bruker vi innrykk i teksten for å markere hvor langt inn i strukturen vi er kommet. Slike innrykk gjør det enklere for oss å holde oversikt over koden vår. 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. Pass på at URL-adressen avsluttes med en /. 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.

<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

24.04.2017 12:47:11

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

Pinnsvin

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

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. Opprett en ny mappe på datamaskinen din og kall den dyrenett. 2. Opprett tre HTML-filer og lagre dem i mappen dyrenett. 3. I den samme mappen lagrer du tre bilder av dyrene. 4. I hvert av HTML-dokumentene skriver du en kort tekst og legger inn bilde. 5. 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.

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

Ekorn Pinnsvin Kanin

Kanin

En kanin kan leve i 8–10 år.

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>

Kode1_Informasjonsteknologi Kap01.indd 24

24.04.2017 12:47:11

Interne og eksterne lenker

Webserver

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.

EKSTRASTOFF

Filer lagret i ulike mapper 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 <html>-taggen viser hvor nivå 1 i nøsting starter. Nevn tre elementer som er typiske på nivå 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. 3. Lag en nettside med et bilde. Når bildet klikkes på skal en ny fane med nettsiden til kode.cdu.no åpne seg. 4. 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

24.04.2017 12:47:12

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 lager vi i HTML ved å lage flere rader 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 border> <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>

Kode1_Informasjonsteknologi Kap01.indd 26

24.04.2017 12:47:13

TAGG

BRUK

FORKLARING

STÅR FOR

<table>

En tabell

table

<tr>

En rad bortover

table row

<td>

<td>innhold</td>

Innhold i en celle

table data

<th>

<th>overskrift</th>

Overskrift

table head

Vi pleier å ha kantlinjer i tabeller. Da skriver vi attributtet border i taggen <table> slik: <table border>. Du kan også justere tykkelsen til kantlinja rundt tabellen ved å sette en verdi til border slik: <table border=”2”>

EKSTRASTOFF

Legge inn kommentarer i HTML-koden Når vi skriver HTML-kode hender det at vi trenger å notere forklaringer til oss selv 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 .

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. 6. Gå inn på noen nettsider du liker. Trykk CTRL + U for å se HTML- koden til nettstedet. Se om du kjenner igjen noen av HTML-elementene du har jobbet med til nå.

< 01 Lage nettsider med HTML >

Kode1_Informasjonsteknologi Kap01.indd 27

24.04.2017 12:47:13

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>…</input> <button>…</button> </form> </body>

Input-element og button-element Skjemaer brukes til å samle informasjon av forskjellig slag. Input-elementet <input>…</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 innskriv ingsfelt 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

Attributtet name i et input-element brukes av den 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”>.

Kode1_Informasjonsteknologi Kap01.indd 28

24.04.2017 12:47:14

<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 opprette en egen mappe og lag to HTML-filer. 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

24.04.2017 12:47:14

type

Utseendet til skjemaet, kan være text, number osv.

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

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.

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.

Kode1_Informasjonsteknologi Kap01.indd 30

24.04.2017 12:47:14

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

Innskrivingsfelt for tekst

Innskrivingsfelt for tall

Fargevelger - velge en farge

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

Kalender - velge en dato

FIGUR

dd.mm.åååå februar 2019 ma

Passordfelt - skrive inn passord

lø

sø

••••••••••• 18 19

Radioknapper - velge ett alternativ

Avkrysningsbokser - velge ett eller flere alternativer

Liker

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 select- element 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 option- elementet setter vi inn attributtet value slik at når dataene samles inn kan man se hvor de ulike svarene hører til. Dette lærer du mer om i kapittel 9.

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

24.04.2017 12:47:14

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”> <option value=”overskrift”>Hva ønsker du å spise?</option> <option value=”pizza”>Pizza</option> <option value=”torsk”>Torsk</option> <option value=”taco”>Taco</option> </select> </form> </body>

PRØV SELV 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 en placeholder i innskrivingsfeltet som viser «Fornavn Etternavn». 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.

Kode1_Informasjonsteknologi Kap01.indd 32

24.04.2017 12:47:14

<07> Sosiale medier Her lærer du om: вв

вв

informasjonsteknologiens muligheter og konsekvenser etiske normer for bruk av informasjonsteknologi nødvendigheten av regelverk tiltak mot trusler i den digitale verden

Sosiale medier er ofte organisert i nettverk der påloggede brukere kan kommunisere med hverandre. Det er i høy grad brukerne selv som lager innholdet.

7.1 Sosiale medier Et teknologibasert samfunn I løpet av et tiår har smarttelefonen og sosiale medier forandret hvordan vi kommuniserer med hverandre. Med Facebook har de fleste fått en offentlig identitet på nettet, og samtaler og sosiale opplevelser har endret form. «Teknologien gjør ikke bare ting for oss, den gjør noe med oss», hevder professor Sherry Turkle ved Massachusetts Institute of Technology. Internett tar en større og større del av livet vårt. Med smarttelefonen som vi kan ha med oss i lomma, har vi lett tilgang til Internett. Mange er konstant koplet på, uavhengig av tid og sted. Det å være online er ikke lenger noe vi bare gjør for å finne nødvendig informasjon eller spille et spill. Teknologien som vi nå omgir oss med, bidrar hele tiden til nye former for regler og sosial samhandling mellom mennesker. Dermed forandrer teknologien både samfunnet og oss. Vi går i retning av et mer teknologibasert samfunn, og Norge blir ofte omtalt som ett av de mest digitale samfunn i verden. Barn og medier-undersøkelsen fra Medietilsynet i 2016 viste at ungdom mellom 14 og 16 år i gjennomsnitt bruker 5–6 timer på nettet daglig. Tallet på smarttelefoner i Norge har snart nådd et metningspunkt. Nesten alle har nå sin egen smarttelefon.

Informasjonsteknologi er noe befolkningen i Norge og den vestlige delen av verden har nytte av hver eneste dag. Teknologien er ikke bare et sentralt bindeledd mellom mennesker, men en viktig del av livet generelt.

En samtale er ikke lenger hva den var. Sosiale medier har endret vår måte å kommunisere på. < 07 Sosiale medier > 155

Kode1_Informasjonsteknologi Kap7.indd 155

16.03.2017 15:04:25

Et sosialt eksperiment? Facebook er i dag det største og mest populære sosiale mediet i Norge med 3,2 millioner brukere totalt, og 2,7 millioner daglige brukere. På verdensbasis er det Norge og Island som har flest Facebook-brukere i forhold til innbyggertallet. Apper som Snapchat, Twitter, LinkedIn, Tinder og Instagram er viktige måter å holde kontakt på. Spill, blogger og YouTube er andre medier som også brukes mye. Møtepunktene på nettet blir altså mange. Men hvordan påvirker det oss, og hvordan knyttes vi mennesker sammen, når mye av vår hverdag foregår på nettet? Hvordan håndterer vi en ubegrenset flom av relasjoner, inntrykk og statusoppdateringer?

Bruk av sosiale medier gjør at vi kan ha et mye større sosialt nettverk. Samtidig sier én av ti ungdommer at de ikke har en eneste nær venn.

I boken The Village Effect hevder Susan Pinker at folk i alle aldre bruker mer tid på digitale skjermer enn noen annen aktivitet bortsett fra det å sove. Vi står derfor på mange måter midt oppe i et sosialt eksperiment der smarttelefoner og sosiale medier endrer oss. Ungdata 2016-rapporten fra Nova viser at ungdom bruker mindre tid sammen med venner ansikt-til-ansikt, og mer tid på Internett og sosiale medier. Bruk av sosiale medier gjør at vi kan ha et mye større sosialt nettverk enn det som var vanlig tidligere. Samtidig sier én av ti ungdommer at de ikke har en eneste nær venn, og flere jenter i dag mangler fortrolige venner enn det som var vanlig tidligere. Spørsmålet blir da om nettet er med og ødelegger for nære vennskapsforhold. Det vi gjør og liker på netter sier ofte noe om det vi liker i det virkelige liv. Et eksempel er hvordan vi bruker sosiale medier til å organisere aktiviteter vi skal delta på, f.eks. planlegge klassefester, invitere til arrangementer som konserter eller avtale kjøring til trening og hytteturer. De sosiale nettverkene på for eksempel Facebook gjenspeiler i høy grad de nettverkene vi har i det virkelige liv.

Kjennetegn på kommunikasjon i sosiale medier

På nettet har vi liten kontroll med hvem som følger med på hva vi gjør.

På nettet kan vi treffe mange flere mennesker, og vi har fått en økning i møtepunkter mellom mennesker. Møtene skjer ofte i kortere tidsintervaller, de er hastige og fragmenterte. Mange av dem foregår i en mange-til-mange-situasjon, til forskjell fra samvær i en liten gruppe eller en-til-enmøter. I det virkelige livet har vi også ganske god oversikt over hvem som ser og hører oss. På nettet har vi lite kontroll med hvem det er som følger med på hva vi gjør, og studerer hvordan vi er. Kommunikasjon i sosiale medier har i tillegg noen andre kjennetegn, se tabellen på neste side.

156

Kode1_Informasjonsteknologi Kap7.indd 156

16.03.2017 15:04:27

Sosiale medier: • flere møtepunkter • store sosiale nettverk • kortere tidsintervaller • mange-til-mange situasjon

VARIG LAGRING

Til forskjell fra samtaler mellom personer som møtes fysisk, blir kommunikasjonen i sosiale medier lagret på nettet for all framtid.

SØKING

Digitale identiteter er søkbare gjennom “søk” i Google eller i sosiale medier.

GJENBRUK

På nettet kan vi kopiere, manipulere, klippe og lime et budskap på en slik måte at det kan være vanskelig å skille “originalen” fra “kopien”.

USYNLIGE

I det virkelige livet kan vi ha ganske god oversikt over hvem som ser og hører oss. På nettet har vi ingen kontroll med hvem det er som følger med på hva vi gjør, og studerer hvordan vi er.

TILSKUERE

Kilde: Danah Boyd

EKSTRASTOFF

Gjenbruk og Creative Commons

På nettet kan vi kopiere, manipulere, klippe og lime et budskap på en slik måte at det tilslutt kan være vanskelig å skille det som var «originalen» fra «kopien». Lett tilgjengelig materiale gir gode muligheter for videreutvikling av andres ideer, men det gir også rom for å stjele andres materiale eller å endre noe til en «falsk nyhet». I 2001 ble det i USA utviklet det som kalles for Creative Commons (CC). CC består av fire lisenser man bruker for å merke eget materiale, eller for å vite hva man har lov til å gjøre med andres materiale. De fire lisensene kan vi kombinere slik vi ønsker. Vil vi for eksempel ha med navnet vårt, og at det ikke skal brukes kommersielt bruker vi lisensene på materialet vårt. Ønsker vi i tillegg at materialet vårt ikke skal bli bearbeidet av andre bruker vi disse tre lisensene: .

Kilde: creativecommons.no

LISENS

FORKLARING

Navngivelse: materialet kan deles slik det er eller det kan bearbeides. Kan brukes til kommersielle formål. Det må opplyses om navnet på opphavspersonen, dvs. den personen som har laget «originalen». Ingen bearbeidelse: materialet skal brukes identisk slik det er, og man kan ikke endre på «originalen». Ikke kommersiell: materialet kan kun brukes hvis det ikke er til reklame eller annen bruk som gir en økonomisk gevinst. Del på samme vilkår: materialet kan bearbeides, men kan kun deles videre under samme lisens som «originalen».

PRØV SELV 1. Hvor mange timer bruker du daglig på Internett? 2. Hvilke apper og sosiale medier bruker du daglig? 3. Forsøk å finne ut hvor mange i Norge i dag som bruker Facebook og SnapChat daglig. 4. Forsøk å finne ut hvor mange i Norge som ikke bruker Internett. 5. Hvordan kan økningen i ensomhet som Ungdata-undersøkelsen viser, skyldes den digitale måten vi kommuniserer på? 6. Hvilke fire punkter kjennetegner kommunikasjon på sosiale medier?

< 07 Sosiale medier > 157

Kode1_Informasjonsteknologi Kap7.indd 157

16.03.2017 15:04:27

7.2 Konsekvenser og muligheter Vertikale og horisontale sosiale systemer For å kunne forstå hvordan sosiale medier påvirker oss, skiller vi mellom vertikale og horisontale sosiale systemer. I det vertikale sosiale systemet er vi fysisk sammen i større eller mindre grupper. Dette kan for eksempel være på skolen, i håndballaget, hos familie eller med russe-gjengen. Det horisontale sosiale systemet er for eksempel online-spill eller sosiale medier som Facebook, YouTube, Twitter og Instagram, dessuten i blogger. I det horisontale sosiale systemet kan vi ofte forme vårt eget sosiale nettverk, og vi kan på den måten skape vår egen sosiale verden. I de vertikale sosiale systemene er de sosiale normene og strukturene ofte gitt på forhånd. Vi kan ikke bestemme hvem vi går i klassen med, men vi kan selv bestemme hvem vi vil kommunisere med på SnapChat. De sosiale mediene gjør det også mulig å være sosial på en mer effektiv måte.

Vertikale systemer er skole, venner, familie eller treninggruppa.

Horisontale systemer er facebook, YouTube, Wikipedia, Twitter, Instagram og blogger.

Noen for alle

På nettet er det lett å få kontakt med andre som snakker samme språk.

I det vertikale sosiale systemet er det mindre vi kan bestemme selv. Vi kan ikke bestemme hvem vi skal gå på skolen med, men vi kan bestemme hvem vi vil ha som Facebook-venn. I de horisontale systemene har vi ofte derfor mer frihet til å skaffe venner og nye kontakter som går bedre sammen med våre egne interesser og behov. Man kan finne andre som har samme hobbyer og samme interesser som en selv. For fremmedspråklige eller for seksuelle minoriteter er det nå lettere å få kontakt med andre som har samme språk eller seksuelle legning. Dette var ikke så lett tidligere hvis du for eksempel vokste opp i ei bygd og bare hadde skoleklassen som ditt sosiale nettverk. I horisontale systemer er vi mer løsrevet fra lokale forhold og ikke så avhengige av de menneskene vi omgås i den fysiske verden.

158

Kode1_Informasjonsteknologi Kap7.indd 158

16.03.2017 15:04:31

Mens man før i større grad måtte holde seg til lokalsamfunnet, er vi i dag i de horisontale sosiale systemene blitt mer fleksible når det gjelder hvem vi omgås og lærer av.

www.ung.no www.mentalhelse.no

Nettbruk kan føre til mer digital kontakt med venner og familie. Mange finner også sosial støtte på Internett og sier at det er lettere for dem å diskutere personlige problemer gjennom tekst på nettet enn i ansikt-til-ansiktrelasjoner. Nettbaserte diskusjonsfora for mental helse har vist seg å ha god virkning, og mange hjelpesider på nett opplever en økning i antallet som tar kontakt. Det å ikke være ansikt-til-ansikt vil for noen gjøre det lettere å kommunisere, enten fordi de er sjenerte i sosiale sammenhenger, eller fordi de synes det er lettere å kommunisere skriftlig med den avstanden det medfører. Samtidig gjør tilgangen til hjelp døgnet rundt via smarttelefon eller Internett det enkelt å ta kontakt og få hjelp. Internett kan også bidra til en utvikling av for eksempel ekstreme religiøse eller politiske holdninger. På internett er det er lett å treffe på noen som mener det samme.

Internett kan gjøre at personer som har noe til felles, lettere finner sammen.

Vi sjonglerer mellom en vertikal og en horisontal virkelighet Den horisontale formen for sosial interaksjon bidrar til å fortrenge mange av de vertikale sosiale mønstrene. Vi blogger, facebooker, tvitrer, tekster, skyper, snapchatter og tindrer. Vi handler og gjør banktjenestene på nett, vi finner kjærester på nett. Vi snakker med venner på SnapChat, diskuterer på Twitter og gjør avtaler på Facebook. Alt dette skjer i et stadig raskere tempo med smarttelefonen i hånden. Smarttelefonen er en forlengelse av mennesket – en protese inn i den virtuelle og globale verdenen. Den er blitt et verktøy som gjør at vi kan leve parallelle liv og sjonglere mellom en vertikal og en horisontal virkelighet. Vi kan sitte i en samtale på en kafé og samtidig ha en nettsamtale med noen på Facebook. Vi kan stå i en butikkø og samtidig diskutere politikk på Twitter.

< 07 Sosiale medier > 159

Kode1_Informasjonsteknologi Kap7.indd 159

16.03.2017 15:04:32

60 % av nettbruken foregår når vi er alene.

Kartlegging av tidsbruk og brukermønster viser at hele 60 prosent av ungdommers databruk foregår når de er alene i det private rom. Noen mener derfor at vårt sosiale liv og vår fritid blir forflyttet fra det offentlige rom, som gata og nærområdene, til det private rom – og da ofte med soverommet som hovedbase, der datamaskin, nettbrett, fjernsyn, spillkonsoller o.l. mer og mer dominerer. Samtidig kan vi ha kontakt med mennesker som vi ikke har mulighet til å se i det daglige. Vi kan for eksempel nettprate og dele bilder med venner som har flyttet til utlandet. Eller vi kan snakke med slekt og venner på Skype flere ganger i uka. Og vi kan reise på ferie til Afrika og USA, men med Internett og sosiale medier forblir vi likevel hjemme selv om vi er borte. Vi er overalt og ingen steder på én gang, og teknologien hjelper oss til å holde god kontakt med folk.

Noe av forskningen viser tydelig at bruk av sosiale medier går på bekostning av tiden vi tilbringer ansikt til ansikt med venner og familie.

Mer selvhjulpne og selvstendige

Uber

Gjennom bruk av teknologi kan vi være mer selvhjulpne og selvstendige. Vi kan for eksempel lære nye fag og språk ved å følge forelesninger på nettskoler og YouTube. Og vi kan lage vår egen blogg og avis på nettet, bruke Google Maps til å orientere oss i en fremmed by eller be folk om hjelp på Facebook. Uber og AirBnb er er eksempler på nye tjenester som viser hvordan vi er blitt mer individualisert. Ved hjelp av en smarttelefon og apper kan vi nå få tilgang til nødvendig informasjon og forskjellige nettverk som gjør det mulig å få til forretninger uavhengig av en organisasjon. Noen vil si at slike nettverk og muligheter hadde vi allerede før Internett. Likevel har bruken av smarttelefoner og sosiale medier revolusjonert tilgangen til disse ressursene. Det gir nye vilkår for hvordan folk effektivt kan komme i gang med egen næringsdrift, enten det skjer ved hjelp av ny kunnskap eller gjennom det å starte egen bedrift. Med en smarttelefon i lommen er jo mulighetene grenseløse, og på mange måter er dette overveldende. Som en mulig reaksjon på alle valgene bygges det nå opp tjenester som tar valgene for oss. Et praktisk eksempel: I de store byene i Norge setter tjenester som Godt Levert og Adams matkasse sammen noen ferdige menyer for kundene, slik at de slipper å ta de daglige valgene i butikken. Teknologien gir oss tallrike valgmuligheter.

160

Kode1_Informasjonsteknologi Kap7.indd 160

16.03.2017 15:04:35

PRØV SELV 1. Hva er forskjellen på vertikale og horisontale sosiale systemer? 2. Hvordan kan teknologi brukes til å styrke kommunikasjon og sosial tilhørighet? 3. Hvordan kan språklige og kulturelle minoriteter bruke sosiale nettverk? 4. Kartlegg din egen hverdag. Hvor mange timer bruker du på skole, trening, henge med venner, familie, alene på rommet og timer til å sove? Hvor brukte du sosiale medier mest? 5. Gå 24 timer uten at du er på sosiale medier. Hva opplevde du?

7.3 E tiske normer – forventet oppførsel på nett Ulike identiteter Sosiale medier gjør det mulig å framstille oss slik vi helst vil være, og vi kan trekke oss ut og dermed unngå pinlige pauser og ugreie situasjoner som vi noen ganger opplever i virkelige samtaler. Sosiale medier gjør derfor at vi opplever å ha større kontroll i kommunikasjonen med andre enn i virkelige samtaler.

På sosiale medier kan vi framstille oss selv slik vi helst vil være. Nick er et oppdiktet navn

De sosiale reglene som praktiseres på nett i dag, står i sterk kontrast til det vi gjorde på nettet for bare ti år siden. Da var det uvanlig å legge ut sitt eget navn og bilde. De fleste nettbrukerne var anonyme og noen trodde at nettforum og nettdating var farlig, for i så fall la vi jo ut personlig informasjon på Internett, opplysninger som noen kunne misbruke. Før visste vi ikke hvem som skjulte seg bak nicket, det kallenavnet vi brukte på nett i stedet for vårt eget navn. Anonymitet og bruken av nick skapte usikkerhet og mistillit i den sosiale kontakten, for avsenderen og mottakeren var ukjente for hverandre. Vi visste ikke alltid hvem vi var i dialog med. Forandringene siden den gang er i høy grad drevet fram av nye bruksmønstre og funksjoner i sosiale medier. Etter at Facebook kom i 2006, er vi blitt vant til å dele private bilder og personlige opplysninger på nettet. Siden vi nå bruker mer ekte identiteter, har vi fått økt synlighet på nettet og det har skapt bedre betingelser for tillit mellom mennesker på nett. Bruken av ekte identiteter på nett, har bidratt til å bygge bro mellom det som skjer på nettet, og det som skjer i virkelige samtaler. Det er dermed ikke to adskilte univers som ikke har noe med hverandre å gjøre. Et eksempel her er at både politikere og vi andre bruker sosiale medier for å diskutere og fremme den politikken vi er interessert i. På den andre siden opplever vi kanskje mindre kontroll og mer usikkerhet enn før, for vi vet ikke om identiteten til den vi kommuniserer med, er en korrekt eller en falsk identitet.

< 07 Sosiale medier > 161

Kode1_Informasjonsteknologi Kap7.indd 161

16.03.2017 15:04:36

EKSTRASTOFF

En virtuell verden

I noen spill, f.eks. World of Warcraft, kan vi ha store sosiale nettverk der vi samarbeider i en virtuell verden. «Virtuell» står her for det ikke-virkelige som samtidig har innhold og egenskaper fra det virkelige livet. Enkelte brukere av virtuelle krigsspill vil for eksempel hevde at den virtuelle opplevelsen er bedre enn virkeligheten, fordi farene knyttet til den virkelige opplevelsen blir fjernet.

I spill kan man ha store sosiale nettverk. Den virtuelle opplevelsen tar bort det som ellers er farene.

Vi viser det beste ved oss selv

En selfie er et fotografisk selvportrett.

Det å vise ansikt på nettet er den nye normen, noe selfiekulturen er et eksempel på. En selfie er et fotografisk selvportrett – et øyeblikksbilde typisk tatt ved hjelp av en smarttelefon og lagt ut på sosiale medier. Oftest viser vi da det beste og mest attraktive ved oss selv, og deretter bruker vi dette bildet enten som et slags profilbilde eller som en generell oppdatering av vårt sosiale nettverk gjennom en egen Instagram-feed eller en Facebook-feed. En selfie er en måte å si «se på meg», og vi sier det høyt, i en offentlig eller en halvoffentlig sammenheng. Forskning viser at vi legger ut mer positiv enn negativ informasjon om oss selv. Vi forsøker å framstå som mer vellykket enn vi egentlig er. Når vi samtidig ser andres «velykkede liv» på Internett, kan resultatet bli at vi sitter igjen med dårlig selvfølelse.

Elektronisk kommunikasjon Mennesker har et grunnleggende behov for nærhet – den nærheten det for eksempel er å oppleve lukt, bli tatt på, ha øyekontakt med og å høre stemmer. Derfor må vi spørre om de opplevelsene og følelsene som har med nærhet å gjøre, blir borte i datateknologien.

Den digitale og skriftlige kommunikasjonen har begrensninger. Derfor bruker vi emojier, bilder og video for å vise hva vi mener.

Sosiale medier og datingtjenester kan føre til mange nye kontakter og til nye former for nærhet, men også til misforståelser, ensomhet, skam, skuffelser, brutale avvisninger og avhengighet.

162

Kode1_Informasjonsteknologi Kap7.indd 162

16.03.2017 15:04:38

Kommunikasjonen i sosiale medier er høyst virkelig, men samtidig elektronisk. Mye av det «virkelige» blir borte fordi elektronikken lager avstand mellom dem som snakker sammen. Ironisk nok handler ikke Facebook så mye om «face» eller kommunikasjon ansikt til ansikt. Når vi er sammen med andre og snakker med andre på vanlig måte, bruker vi ordløse signaler som ansiktsuttrykk, tonefall, gester, kroppsspråk og øyekontakt. Disse ordløse eller ikke-verbale signalene er sentrale i sosial samhandling mellom mennesker. De gir dybde og følelsesmessig nærhet i kommunikasjonen. Fraværet av «face» på Facebook kan derfor gjøre det lettere å skjule våre følelser bak skjermen. Facebook og tilsvarende sosiale medier kan derfor hjelpe folk til å skape et bilde av det de ønsker å være der og da. De gir oss på en måte mer kontroll også over hvordan vi sosialiserer. Men blir vi mer overfladiske? Og vil det føre til mer mobbing og trakassering? Dette kan du lese mer om i delkapittel 7.4.

Forskning viser at ansikttil-ansikt-kommunikasjon er gunstig på flere måter. Men ansiktsuttrykk, tonefall og kroppsspråk blir borte i den elektroniske kommunikasjonen.

I de sosiale mediene går vi mer og mer bort fra skrift og over til visuell kommunikasjon med bilder og video. De sosiale nettverkene er også blitt mer emne-sentrerte med hashtags/emneknagger. Vi bruker også mindre og mindre tid på kommentarer og foretrekker raske visuelle tilbakemeldinger og ikoner som likes, hjerter og korte utrykk. Det visuelle har stor betydning og påvirker den kontakten vi har med andre.

Finne kjærligheten

Finner vi andre mennesker mer attraktive online enn det vi gjør når vi møter dem ansikt til ansikt?

Mulighetene for å treffe nye partnere er nå større enn noensinne. 12 milliarder globale Tinder-swipes genererer 12 millioner nye matcher hver dag. En teori hevder at vi finner andre mennesker mer attraktive online enn det vi gjør ansikt til ansikt. På nettet mangler vi tilgang til den bredden av informasjon som vi får ansikt til ansikt. Signaler som lukt, stemme og øyekontakt er fraværende. Det gjør det lett å forvrenge fakta og feiltolke opplevelsen av et annet menneske. De som bruker nettdatingssteder kan lyve om vekt, høyde, alder, utseende, inntekt, hobby og livsstil. I tillegg har vi også en tendens til å skape idealiserte bilder av de menneskene vi snakker med på nettet.

< 07 Sosiale medier > 163

Kode1_Informasjonsteknologi Kap7.indd 163

16.03.2017 15:04:40

I sosiale medier kan vi lettere bli presset til å bli mer personlige, og det kan skape kunstig tillit til folk vi egentlig ikke vet hvem er.

Bak en skjerm kan man lettere bli «revet med», og fortere bli mer personlige. Det skaper en kunstig opplevelse av tillit og tiltrekning til samtalepartneren. Farlige situasjoner kan oppstå hvis man ikke kjenner mottakeren, og avslører personlige ting man aldri ville ha gjort ansikt-til-ansikt. Men avstanden bak skjermen kan også skape kunstig tillit til folk vi kjenner, men kanskje kjenner dårlig, og det kan også bety risiko. Når et forhold ikke utvikler seg gradvis ansikt-til-ansikt, men isteden skyter fart og blir personlig i virtuelle omgivelser, kan det føre til tap av kontroll. I sosiale medier kan intimitet og det private blir «presset på oss». En altfor tett og umiddelbar relasjon eller mye avslørende informasjon tidlig i et forhold kan virke negativt.

EKSTRASTOFF

Datingapplikasjoner

Tinder og Happn er eksempler på datingapplikasjoner som benytter GPS på smarttelefonen til å lokalisere og kople deg til mennesker med en profil i nærheten av deg. Appene sammenligner profiler som passer sammen ut fra det som brukerne har lagt inn i sin egen profil, og hvilke ønsker de har for andres profiler. Slik kan du komme i direkte kontakt med andre som er innenfor en viss radius, og som passer med dine ønsker. Man antar at flere hundre tusen bruker Tinder i Norge, mens Happn hadde over 50 000 brukere i 2015. Vi kan velge mellom profiler som befinner seg i nærområdet. Du sveiper til høyre om du liker noen, til venstre om ikke. Hvis to personer liker hverandres profil, kan de avtale å møtes for å bli bedre kjent.

PRØV SELV 1. Har du venner som du bare kjenner via Internett, som du aldri har møtt ansikt-til-ansikt? 2. Er det store forskjeller på hvordan mennesker under 20 år bruker Internett, sammenlignet med dem som er pensjonister? Hva består forskjell ene i? 3. Blir vi mer kalde og overfladiske i forholdet til våre medmennesker når vi bruker sosiale medier? 4. Se en episode av serien Catfish på MTV (mtv.ca/shows/catfish). Hvorfor tror du vi knytter oss så tett til mennesker som vi ikke har møtt i virkeligheten?

164

Kode1_Informasjonsteknologi Kap7.indd 164

16.03.2017 15:04:42

7.4 Din risiko på Internett

Sosiale medier kan oppleves som sterkt sosialt konsentrert, for vi må forholde oss til så mange mennesker på én gang. Livet på skjermen kan dess uten virke mer altoppslukende enn virkeligheten. Teknologien presser ikke bare fram tallrike muligheter, vi blir også konfrontert med mange flere mennesker og nettverk enn det vi gjorde før Internett, med de risikoene det medfører.

Er vi trygge på nett? Vi i Norge er storbrukere av digitale medier sammenlignet med mange andre land i Europa. Den britiske medieforskeren Sonia Livingstone har beskrevet denne utviklingen som en «bedroom culture», der vårt sosiale liv og vår fritid flyttes fra det offentlige rom, fra gata og nærområdene, til det private rom med soverommet og digital teknologi som hovedbase. Med den økende bruken av sosiale medier som Facebook, Instagram, Twitter og SnapChat kan vi jo kalle det en «hjemmekjær» digitalkultur. Da er det viktig å undersøke hvor trygge vi er i våre egne hjem - på sosiale medier. Risiko eller utrygghet på nett er ofte forbundet med personvernproblematikk, digital mobbing, trusler og spredning av nakenbilder på Internett. Kommunikasjonen på Internett er preget av anonymitet, og det kan øke sannsynligheten for både mer vågal atferd og økt aggresjon i oppførselen mot andre. Dette er det viktig å være klar over, så vi kan unngå eller takle farer knyttet til Internett og digital kommunikasjon.

I Digital agenda for Norge er det et mål at befolkningen skal ha tilstrekkelig kompetanse til å kunne bruke Internett på en sikker og trygg måte.

Personvern: vi har alle rett til å bestemme selv hvor mye informasjon som kan spres om oss på nett. < 07 Sosiale medier > 165

Kode1_Informasjonsteknologi Kap7.indd 165

16.03.2017 15:04:43

EKSEMPEL

Konfliktrådet Konfliktrådet er en statlig tjeneste som tilbyr megling for å håndtere konflikter. Det finnes 22 konfliktråd over hele landet. Her er noen eksempler på saker som er behandlet i Konfliktrådet: • En person sendte et nakenbilde til kjæresten. Kjæresten sendte det videre, bildet ble så sendte videre til flere, og slik kom situasjonen ut av kontroll. • Et par som hadde sex på en fest, ble filmet, og filmen ble lagt ut på nettet. • En person fikk følgende tekstmelding: «Alle guttene i klassen synes du er feit og jævlig. Ingen som liker deg.» • En elev ble tatt bilde av i dusjen etter gymtimen. Bildet ble spredd på nett. • Facebook-identiteten er overtatt av andre og misbrukt.

Digital mobbing, trusler og krenkelser Politiet får stadig flere henvendelser som gjelder krenkelser på nettet. Antallet saker i konfliktrådene om mobbing, trusler og krenkelse økte med over 17 % fra 2006 til 2007. Tallene var da mer enn doblet siden 2002. Senere har konfliktrådene rapportert at mengden av denne typen konflikter (mobbing, trusler og krenkelser) øker for hvert år, og at økningen nok skyldes utbredelsen og bruken av digitale medier. Både digital mobbing, trusler og krenkelser på nett kan være straffbart. Digital mobbing skiller seg fra tradisjonell mobbing. www.slettmeg.no

Med digital mobbing og trusler på nett mener vi her mobbing eller trusler via Internett og ved hjelp av digitale verktøy. Slik mobbing skiller seg fra tradisjonell mobbing på noen sentrale punkter, se tabellen nedenfor. ALLTID TILGJENGELIG

De som blir utsatt for trusler eller digital mobbing, har liten mulighet til å gjemme seg, for de er alltid tilgjengelige på Internett og på mobil. Dermed er de alltid tilgjengelige for mobberne eller dem som kommer med trusler.

ANONYM

Digitale mobbere eller de som kommer med faktiske trusler, er ofte anonyme. Anonym mobbing kan også gjøre at mobbere bruker sterkere virkemidler enn ved ansikt-tilansikt mobbing.

STOR SPREDNING

Digital mobbing og trusler kan lett bli spredt i det sosiale nettverket på nettet, dermed blir offeret for mobbingen rammet enda hardere.

LAGRET OG SØKBART

Digital mobbing og trusler kan bli liggende lagret og søkbart på nettet i all framtid. Da kan det også bli oppfattet som misbruk av personlig informasjon.

166

Kode1_Informasjonsteknologi Kap7.indd 166

16.03.2017 15:04:44

Tabellen nedenfor er hentet fra undersøkelsen Barn og medier 2014. Den viser at 13 % av alle i alderen 9–16 år selv har opplevd at noen har vært slemme mot dem eller mobbet dem på Internett. Det er færre som sier at de selv har vært slemme mot noen eller mobbet noen (6 %). Det er også færre som sier at de har truet andre (4 %), enn de som sier de faktisk er blitt truet av andre (7 %). Det å true noen på Internett er alvorlig. Det er også alvorlig at flere tusen opplever dette. FRA UNDERSØKELSEN BARN

HAR SELV OPPLEVD

HAR SELV UTFØRT

Vært slemme eller mobbet

13 %

Truet

Publisert bilder som har gjort personen lei/sint

11 %

OG MEDIER 2014 (9–16 ÅR)

EKSEMPEL

Åndsverkloven Åndsverkloven sier at den som har skapt en tekst, bilde, video eller musikk (et åndsverk) har retten (opphavsretten) til å bestemme hvordan det brukes. Copyright-symbolet viser hvem som har opphavsretten. I åndsverkloven står det også at vi ikke kan dele på nett et bilde vi har tatt, som viser en person som er gjenkjennelig, uten at vi spør denne personen om tillatelse. Hvis du har tatt et bilde der noen personer kan identifiseres, må du spørre alle. Dette gjelder for eksempel klassebilder og bilder du har tatt på skolen eller på trening. Åndsverkloven gjelder så lenge personen på bildet lever, og 15 år etter at personen er død. Hvis hovedmotivet er en aktivitet eller en situasjon og personene på bildet er mindre viktige og ikke blir krenket, sier åndsverkloven at vi kan bruke bildet uten å spørre om tillatelse. Har du for eksempel tatt et bilde av en bygning og noen ugjenkjennelige personer vises i bakgrunnen, behøver du ikke å spørre disse om lov. Er du derimot usikker, bør du alltid spørre om tillatelse før du deler et bilde på nett, slik at du alltid er på den sikre siden. Hvis personen er under 15 år, må du også spørre foreldrene om lov.

Uønskede seksuelle kommentarer I 2014 opplevde 18 % i alderen 13–16 år at de fikk uønskede seksuelle kommentarer på Internett. Til sammenligning ble 22 % utsatt for uønskede seksuelle kommentarer i 2010, og i 2012 var tallet 21%. Det tyder på en liten nedgang alt i alt.

< 07 Sosiale medier > 167

Kode1_Informasjonsteknologi Kap7.indd 167

16.03.2017 15:04:44

22 % av guttene har vist seg fram på webkamera.

ÅR

2010

2012

2014

Uønskede seksuelle kommentarer på nettet (13–16 år)

22 %

21 %

18 %

Omtrent like mange jenter som gutter har opplevd dette, men det skjer litt hyppigere blant guttene. Det kan tyde på at gutter oftere er inne på nettsteder hvor de blir utsatt for uønskede seksuelle kommentarer. Den slags kommer som regel på anonyme og utseendeorienterte nettsteder, og da er det ofte unge jenter som rapporterer at eldre gutter med seksuelle baktanker forsøker å få kontakt med dem. Undersøkelsen Barn og medier mener imidlertid at vi her må legge mest vekt på gutter og deres risikoatferd.

18 % i alderen 13–16 år oppgir at de har fått uønskede seksuelle kommentarer på Internett. Omtrent like mange jenter som gutter har opplevd det.

Det er stor variasjon i hvordan denne typen kommentarer oppleves, men guttene har et mye tydeligere risikomønster. 22 % av guttene, mot 12 % av jentene, sier at de har vist seg fram på webkamera. Bare 3 % forteller til en voksen (foreldre/foresatt) at de har mottatt uønskede seksuelle kommentarer. Uønskede seksuelle kommentarer på nett kan også være lokking av barn på nett, såkalt grooming, som er straffbart. Grooming er at en voksen blir venner med et barn og opparbeider tillit hos barnet på Internett. Så avtaler de et møte slik at det blir mulig for den voksne å ha seksuell omgang med barnet. Slike seksuelle kommentarer kan også forekomme blant barn og unge som eksperimenterer med seksualitet.

EKSTRASTOFF

EU Kids Online

De fleste opplever ingen utrygg tilværelse på nettet. Det melder det store EU-prosjektet EU Kids Online, som vurderer barns risiko på nettet i Europa. Norge er et land med høybruk/høy-risiko for barn på nettet, fordi høy nettbruk øker faren for uønskede opplevelser. Barna som bruker Internett hyppigst, gjør også oftest negative erfaringer. Men de er samtidig den gruppen som sannsynligvis blir minst plaget eller opprørt over de problemene de møter. Det er antagelig fordi de har erfaringer og kan takle risiko på en annen måte enn de barna som bruker nettet mye mindre.

EU Kids Online kom til at barn mellom 9 og 12 år i snitt ikke så ofte gjør negative erfaringer på Internett som det ungdom gjør. De bruker også mindre tid på Internett enn ungdom mellom 13 og 16 år. Men når de yngste først gjør negative erfaringer, er de mer utsatt. Slike hendelser plager eller stresser yngre barn mer enn eldre barn. EU Kids Online viser at det er enkelte grupper av barn og unge som har økt risiko for negative erfaringer på Internett. Dette er oftest barn som i utgangspunktet har psykologiske og sosiale problemer. Barn som har problemer i den virkelige verden, har økt sannsynlighet for å oppleve problemer også på nettet.

168

Kode1_Informasjonsteknologi Kap7.indd 168

16.03.2017 15:04:44

Nakenbilder via mobil eller Internett Deling av nakenbilder på nett og mobil kalles sexting. Det er ofte liten avstand mellom digital mobbing og sexting, og denne typen bilder er ofte et resultat av gruppepress. Ofte blir personen oppfordret og presset av andre til å dele nakenbilder av seg selv på nett og mobil. Jenter er mest sårbare her, for ofte handler det om sextrakassering fra jevnaldrende gutter. Sosialt press for å dele nakenbilder av seg selv på mobil og Internett kan altså være et alvorlig problem. I 2014 sendte 7 % i alderen 13–16 år nakenbilde av seg selv. Det vil si 20 000 personer i Norge. Til sammenligning var det 4 % som sendte nakenbilde av seg selv i 2010 og 5 % i 2012. Det er derfor en økning i denne aktiviteten. Dette skyldes antagelig økt tilgang til smarttelefoner og bildedelingsapplikasjoner som SnapChat og Instagram. De har gjort det lettere å dele bilder på denne måten. I 2014 var det 3 % som sendte nakenbilder av seg selv flere ganger i uka, og det er guttene som er de mest risikoorienterte også når det gjelder dette ÅR

2010

2012

2014

Har sendt nakenbilder av seg selv (13–16 år)

Sexting, deling av nakenbilder via Internett og mobiltelefon, er en del av en internasjonal trend blant unge nettbrukere. Dette øker i omfang også i Norge. Deling og publisering av nakenbilder av mindreårige på nettet kan få alvorlige konsekvenser. Enkelte nakenbilder av barn under 16 år vil kunne anses som barnepornografi og kan i verste fall være i strid med § 311 i straffeloven.

• 7 % i alderen 13–16 år oppgir at de det siste året har sendt nakenbilder av seg selv via mobil eller Internett. Dette utgjør totalt 20 000 personer. • 25 % i alderen 13–16 år oppgir at de i 2014 har sendt videre bilder og videoer av andre uten at disse andre har sagt ja til det. Dette er en dobling sammenlignet med i 2012. (Kilde: Barn og medier, 2014)

< 07 Sosiale medier > 169

Kode1_Informasjonsteknologi Kap7.indd 169

16.03.2017 15:04:44

EKSTRASTOFF

Straffbare forhold på Internett

Det er de samme lovene og reglene som gjelder på nett som i samfunnet ellers. § 311 i den norske straffeloven handler om framstilling av seksuelle overgrep mot barn eller fremstilling som seksualiserer barn. Med barn menes personer som er under 18 år. Straffen er bot eller fengsel i inntil 3 år. Det er denne loven Noora i TV-serien Skam fra 2016 refererer til. I straffelovens § 263 om trusler står det: «Den som i ord eller handling truer med straffbar atferd under slike omstendigheter at trusselen er egnet til å fremkalle alvorlig frykt, straffes med bot eller fengsel inntil 1 år.»

Straffelovens § 202 handler om identitetskrenkelse og identitetstyveri. Den sier blant annet at den som opptrer med en annens identitet, med forsett om å påføre en annen tap eller ulempe, straffes med bot eller fengsel inntil 2 år. § 204 i straffeloven handler om hacking og innbrudd i datasystemer: «Med bot eller fengsel inntil 2 år straffes den som ved å bryte en beskyttelse eller ved annen urettelig framgangsmåte skaffer seg tilgang til datasystemer eller del av det.» Kilde: www.lovdata.no

Trygg internettbruk

www.tryggbruk.no Personopplysningsloven (se side 000): lov om publisering av opplysninger på nett som kan knyttes til en enkeltperson.

En viktig faktor i kampen for trygg bruk av digitale medier er at Norge har et nettverk som arbeider for tryggere Internett-bruk. «Trygg-bruk»nettverket koordineres av Medietilsynet. De som er med i dette nettverket, er politi (Kripos), skole, Redd Barna, Barnevakten og forskere og andre som arbeider med slike saker. Trygg-bruk har nettsider der vi kan få hjelp, og de tilbyr rådgivning om digitale medier til kommuner, skoler og privatpersoner. Nettverket har jevnlige møter og samarbeider om tiltak og kampanjer.

23 % har delt passordet sitt med venner.

Sikker og trygg bruk av digitale medier har med godt personvern å gjøre. Sikkerhetshullene på nett har med nettstedenes sikkerhet å gjøre (se kapittel 8), men også med brukernes evne til å ta forholdsregler, altså beskytte seg selv. Et godt personvern er en viktig forutsetning for at det digitale informasjonssamfunnet skal fungere. Samtidig legger vi igjen stadig flere opplysninger om oss selv på nettet. Det øker risikoen for misbruk av personinformasjon og for identitetstyveri. Til tross for økende personvernrisiko mangler 2 av 10 grunnleggende ferdigheter i å beskytte sin person på nett. Hele 30 % kjenner til andres passord, og over 23 % har delt passordet sitt med venner.

Tiltak for å beskytte seg på nett Selv om de fleste beskytter passordet sitt, er det urovekkende at flere av oss er uforsiktige med passordet. Det er derfor fortsatt altfor mange som trenger å lære grunnleggende og enkle tiltak for å beskytte seg, slik at identitetstyveri kan forebygges.

170

Kode1_Informasjonsteknologi Kap7.indd 170

16.03.2017 15:04:45

Kjenner du til en eller flere av dine venners passord på sosiale nettsteder?

30 %

Har du delt ditt passord på sosiale nettsteder med en eller flerer av dine venner?

23 %

Har du delt ditt passord på sosiale nettsteder med mor og eller far?

18 %

Har du vært inne og endret personverninnstillingene dine på Facebook? F.eks. at dine statusoppdateringer og bilder ikke skal vises offentlig?

74 %

Evnen til å beskytte seg selv på nettet – mot uønskede seksuelle kommentarer, sending av nakenbilder, digital mobbing og trusler – er en ferdighet som vi i framtiden virkelig trenger, og da særlig i Norge, hvor nettbruken er spesielt høy sammenlignet med andre europeiske land. Personvern, med trygg og sikker nettbruk, er viktig for både enkeltmennesker og samfunnet. Det viktig å forebygge slik vi ikke blir offer for lovbrudd eller uforvarende begår lovbrudd på nett selv.

Nettregler: • Vær mot andre på nettet som du vil at andre skal være mot deg. • Beskytt navnet ditt, lag et kallenavn. • Gi ALDRI ut passordet ditt. • Vær forsiktig med å gi opplysninger om deg selv. • Spør om lov før du legger ut opplysninger om eller bilder av andre. • Skal du møte noen du har chattet med? Ta med en voksen eller en venn. • Sjekk alltid hvem som har laget den informasjonen du finner – husk at alle kan legge ut noe på nett. • Tenk deg om før du laster ned gratis filer og innhold. Det kan ligge virus og spionprogrammer sammen med de filene du laster ned. • Snakk med en voksen hvis du opplever noe ubehagelig på nett. Kilde: Trygg bruk, Medietilsynet

PRØV SELV 1. Hvordan har de sosiale relasjonene endret seg med teknologi som smarttelefon og sosiale medier? 2. Hva er forskjellen på digital mobbing og annen mobbing? 3. Hvordan har mobbing endret seg med teknologi som smarttelefon og sosiale medier? 4. Nevn noen tiltak som kan gjøre din digitale hverdag tryggere. 5. Finn aldersgrensen i brukervilkårene til noen sosiale medier. Har du tidligere løyet på alderen for å kunne registrere deg på et nettsted?

< 07 Sosiale medier > 171

Kode1_Informasjonsteknologi Kap7.indd 171

16.03.2017 15:04:45