(X)HTML, CSS og JavaScript HTML. Det første dokumentet Grunnleggende programmering i Java Monica Strand 26.

Størrelse: px
Begynne med side:

Download "(X)HTML, CSS og JavaScript HTML. Det første dokumentet 26.11.2007. Grunnleggende programmering i Java Monica Strand 26."

Transkript

1 (X)HTML, CSS og JavaScript Grunnleggende programmering i Java Monica Strand 26. november 2007 Gr. leggende Java 26. november HTML HTML = Hyper Text Markup Language Strukturerer tekstinnhold HTML gjør ingenting, bare forteller hvordan dokumentet er satt sammen Statiske html dokumenter har filendingen.html Startsiden på en samling sider skal være filen index.html Gr. leggende Java 26. november Det første dokumentet Åpne Crimson Editor eller tilsvarende (enkel editor med fargemarkering av kode) Lagre en tom fil med navnet index.html Åpne filen i en nettleser (en helt blank side vises uten tittel eller annen informasjon) Gr. leggende Java 26. november

2 Tomt dokument lagret som index.html Nettleservinduet med dokumentet index.htmlåpnet Gr. leggende Java 26. november Teksten Hallo verden! skrives inn i editoren Oppdater nettsiden ved hjelp av F5 og teksten kommer frem Gr. leggende Java 26. november Hallo verden i HTML Html tager legges inn sammen med tittel Visningen er helt lik bortsett fra at vinduet har fått tittel Tittelen Gr. leggende Java 26. november

3 HTML tagger Start tag De grunnleggende html taggene. De forekommer alltid i par og pakker inn innholdet Slutt tag <html></html> Forteller nettleseren at det er et html dokument <head></head> Hodet på html fila. Inneholder én til flere tagger <title></title> Tittelen på skjermvinduet <body></body> Innenfor body taggene kommer alt innholdet som skal vises Gr. leggende Java 26. november Nå prøver vi å legge inn mer tekst inndelt i overskrifter Vi har kun fylt inn innhold, men ikke sagt noe om hvordan det skal se ut Gr. leggende Java 26. november Vi forteller nå hva som skal være overskrift nivå 1 og 2 Nettleseren vet nå hvordan den skal vise innholdet med overskrifter Gr. leggende Java 26. november

4 Tag er også resterende tekst Legg merke til hva <b></b>taggen gjorde med visningen Gr. leggende Java 26. november <! > brukes for kommentarer. Da leser ikke nettleseren teksten. Legg merke til at bortkommentert tekst ikke vises. Legg også merke til hva to p tagger etter hverandre gjør. Gr. leggende Java 26. november For å lage tabeller må hver del av tabellen defineres tabellen, raden og cellen Innholdet struktureres, men vi har ikke sagt noe om hvordan vi vil ha tabellen Gr. leggende Java 26. november

5 Ved å legge inn informasjon om at vi ønsker tabellrammer Får vi frem disse, men legg merke til avstand og tom celle Gr. leggende Java 26. november Nettlesere tolker forskjellig, men default er border, cellspacing og cellpadding satt til 1 Med definerer vi et mellomrom et tomt tegn. Mange mellomrom etter hverandre gjøres om til én i visningen Gr. leggende Java 26. november Man lærer ved å praktisere gjennomfør introduksjonskurset nedenfor htm Super ressursside: Gr. leggende Java 26. november

6 CSS Teksten som har blitt vist til nå er nettleserens default innstillinger Hvis vi ønsker å endre font, font størrelse, avstand mellom linjene, farger, sidebredde, tabellkanter, bildeplassering, linkfarger, hvordan innholdet plasseres på siden, etc må vi fortelle nettleseren dette CSS betyr Cascading Style Sheets og hjelper oss å styre layout og design. Gr. leggende Java 26. november Man kan legge stilene rett på de aktuelle elementene. Ikke en god måte, men for å vise prinsippet vises det her Legg merke til at fontstørrelsen ble generelt mindre styrt i body elementet og at første p tag har rød, midtstilt tekst Gr. leggende Java 26. november Flytter nå all tekstformatering ut i en egen style tag som legges i <head></head> Visningen er som før, bortsett fra at den andre p taggen også har fått rød, midtstilt formatering Gr. leggende Java 26. november

7 Legg merke til hvordan man kommenterer en i en cssfil/style tag. Formattering for tabellen er også lagt til Tabellformateringene høyrejusterer tabellen og gir den 12 px avstand til teksten under og over. Gr. leggende Java 26. november For å kontrollere enkeltelementer eller grupper elementer kan man definere egne klasseattributter til htmltaggene Og innholdet vises som det gjorde før vi la formateringen ut i egen style tag. Legg merke til den åpne klassen center Gr. leggende Java 26. november For å gjøre stilsetting enda mer fleksiblet bør formatteringen flyttes ut eget dokument. En egen fil lages, her kalt style.css Gr. leggende Java 26. november

8 Med css kan man styre alt som gjelder visningen av htmldokumentet. Her er det lagt noen hjerter fra tv shop som bakgrunn. Gr. leggende Java 26. november Pseudo elementet :first letter kan brukes til å lage første bokstav i et avsnitt annerledes enn de andre Og visningen blir ooops. Dette virket ikke i Firefox. Dessverre så er ikke dette det eneste som er nettleseravhengig. Det er viktig å teste. Gr. leggende Java 26. november Samme html fil og samme css Firefox (Vista) Internet Explorer 7.0 (Vista) Gr. leggende Java 26. november

9 Man lærer fortsatt ved å praktisere gjennomfør introduksjonskurset nedenfor tizag Supre ressurssider: Gr. leggende Java 26. november JavaScript Ble laget for å legge til interaktivitet til htmlsider Er et script språk, lettvekts programmeringsspråk Består av linjer med kjørbar kode Trenger ingen kompilering Java og JavaScript er IKKE det samme! Gr. leggende Java 26. november <script></script> som skal kjøres må legges inn i body. Her skrives teksten Hello world ut på toppen av dokumentet uten formatering som den aller første teksten vi skrev i html. Gr. leggende Java 26. november

10 Hvor legges JavaScript koden? JavaScript kan legges i head, body eller eksternt JavaScript i body vil kjøres MENS siden lastes JavaScript i head vil kjøres når den blir kll kallt For å koble til et eksternt script (som css filen) legges følgende tekst inn: <script src="xxx.js"></script> Gr. leggende Java 26. november Variable, funksjonskall og ifelse test også i JavaScript Skriver ut God morgen hvis klokka på datamaskina er før 10 Gr. leggende Java 26. november Man lærer fortsatt ved å praktisere gjennomfør introduksjonskurset nedenfor com/js/default asp Gr. leggende Java 26. november

Intro til WWW, HTML5 og CSS

Intro til WWW, HTML5 og CSS Intro til WWW, HTML5 og CSS Håkon Tolsby 20.08.2015 Håkon Tolsby 1 World Wide Web Webserver: Programvare som distribuerer websider og/eller maskin hvor programmet kjører Webbrowser (nettleser): Program

Detaljer

EKSAMEN Webpublisering

EKSAMEN Webpublisering Høgskolen i Telemark Fakultet for allmennvitenskapelige fag EKSAMEN 6101 Webpublisering 03.12.2015 Tid: Målform: Sidetal: 3 timer Bokmål 5 (inkludert denne) Hjelpemiddel: Ingen Merknader: Alle oppgavene

Detaljer

I denne oppgaven forventer vi at du har vært gjennom HTML- og CSS-oppgavene så langt og/eller er kjent med <div> - og HTML5-taggene.

I denne oppgaven forventer vi at du har vært gjennom HTML- og CSS-oppgavene så langt og/eller er kjent med <div> - og HTML5-taggene. CSS: Layout Ekspert Web Introduksjon Målet med oppgaven er å lære hvordan man lager en nettside med en meny og et innholdsfelt. I denne oppgaven forventer vi at du har vært gjennom HTML- og CSS-oppgavene

Detaljer

Steg 1: Vi starter fra toppen

Steg 1: Vi starter fra toppen CSS: Layout Skrevet av: Lars Klingenberg Kurs: Web Tema: Tekstbasert, Nettside Fag: Programmering, Teknologi Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon Målet med oppgaven er å lære hvordan

Detaljer

Grunnleggende om websider og HTML-kode

Grunnleggende om websider og HTML-kode Grunnleggende om websider og HTML-kode Html er et språk / en standard som brukes for å gi instrukser til nettlesere om hvordan ulike elementer på en webside skal fortolkes og presenteres for en sluttbruker.

Detaljer

HTML: Del inn nettsiden

HTML: Del inn nettsiden HTML: Del inn nettsiden Erfaren Web Introduksjon Målet med denne oppgaven er å lære hvordan man kan organisere en nettside ved å dele den inn med forskjellige tagger. Dersom du ikke er kjent med tagg-strukturen

Detaljer

Web fundamentals. Web design. Frontend vs. Backend 17.01.2008. Webdesign 17. januar 2008 3. Monica Strand

Web fundamentals. Web design. Frontend vs. Backend 17.01.2008. Webdesign 17. januar 2008 3. Monica Strand Web fundamentals Webdesign 17. januar 2008 Monica Strand Webdesign 17. januar 2008 1 Web design Fagområdet Web design inneholder flere disipliner Grafisk design Informasjonsdesign Brukergrensesnittdesign

Detaljer

CASCADING STYLESHEETS (CSS)

CASCADING STYLESHEETS (CSS) CASCADING STYLESHEETS (CSS) HVA ER CSS Stylesheets er en metode for å flytte selve formatteringen av et HTML dokument ut av selve dokumentet og over i et eksternt regelsett. Dette skyldes HTMLs manglende

Detaljer

Oppgavesamling til Webutvikling < >

Oppgavesamling til Webutvikling < > TOM HEINE NÄTT EVA M. HORNNES JOSTEIN NORDENGEN Oppgavesamling til Webutvikling Oppdatert 08.09.2016 < > 2 Kapittel 1 Introduksjon til webutvikling 1.1 Hva husker du? Teori: Gå sammen to og to og besvar

Detaljer

I denne oppgaven blir du introdusert for programmeringsspråket JavaScript. Du skal gjøre den klassiske oppgaven Hei verden, med en katt.

I denne oppgaven blir du introdusert for programmeringsspråket JavaScript. Du skal gjøre den klassiske oppgaven Hei verden, med en katt. JS: Hei JavaScript! Skrevet av: Arve Seljebu Kurs: Web Tema: Tekstbasert, Nettside Fag: Programmering Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon I denne oppgaven blir du introdusert for

Detaljer

Javascript. Mer om layout

Javascript. Mer om layout Javascript. Mer om layout Kirsten Ribu 04.10.04 Kirsten Ribu - Webpublisering - HiO -2004 1 Men først. Hvordan går det med klasser og blokker? Hjalp det med mailene? Litt mer om klasser og blokker ;-)

Detaljer

NCE TOURISM FJORD NORWAY. FJORDNETT INTERNETTFORUM 2012 Bergen, 12./13. juni 2012

NCE TOURISM FJORD NORWAY. FJORDNETT INTERNETTFORUM 2012 Bergen, 12./13. juni 2012 NCE TOURISM FJORD NORWAY FJORDNETT INTERNETTFORUM 2012 Bergen, 12./13. juni 2012 HACKERS HOUR Hvor langt kommer vi med FjordNett rammeverket? Html CSS Javascript Hva er bestanddelene av en nettside? Html

Detaljer

I denne oppgaven blir du introdusert for programmeringsspråket JavaScript. Du skal gjøre den klassiske oppgaven Hei verden, med en katt.

I denne oppgaven blir du introdusert for programmeringsspråket JavaScript. Du skal gjøre den klassiske oppgaven Hei verden, med en katt. JS: Hei JavaScript! Introduksjon Web Introduksjon I denne oppgaven blir du introdusert for programmeringsspråket JavaScript. Du skal gjøre den klassiske oppgaven Hei verden, med en katt. Steg 1: Bruke

Detaljer

I denne oppgaven skal du lære hvordan du kan flytte rundt på elementer og gjemme elementene bak andre elementer ved hjelp av CSS.

I denne oppgaven skal du lære hvordan du kan flytte rundt på elementer og gjemme elementene bak andre elementer ved hjelp av CSS. CSS: Skjul ninjaene Skrevet av: Oversatt fra Code Club UK (//codeclub.org.uk) Oversatt av: Trude Martinsen Kurs: Web Tema: Tekstbasert, Nettside Fag: Matematikk, Programmering, Teknologi, Kunst og håndverk

Detaljer

CSS: Style nettsider. Introduksjon. Skrevet av: Arve Seljebu

CSS: Style nettsider. Introduksjon. Skrevet av: Arve Seljebu CSS: Style nettsider Skrevet av: Arve Seljebu Kurs: Web Tema: Tekstbasert, Nettside Fag: Programmering, Teknologi Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon Nå skal vi lære å endre på

Detaljer

file:///c:/users/michaelp/sites/dkdm/dw6/dreamweaver6.html

file:///c:/users/michaelp/sites/dkdm/dw6/dreamweaver6.html 1 of 9 15.04.2015 14:15 Spry og behaviours Både Spry and Behaviours er basert på programmeringsspråket Javascript. Javascript kjører i nettleseren og ikke på webserver som PHP og Perl. På en lignende måte

Detaljer

Oblig 1. Oppgave 1. Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.

Oblig 1. Oppgave 1. Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Oblig 1 Oppgave 1 Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Problemer med arngren.net: 1. Nettsiden er SYKT uoversiktlig! 2. Det er

Detaljer

OBLIG 1 - WEBUTVIKLING

OBLIG 1 - WEBUTVIKLING OBLIG 1 WEBUTVIKLING Oppgave 1 Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Problemer med funksjonalitet / bruk Uoversiktlig side For

Detaljer

EKSAMEN Web-publisering

EKSAMEN Web-publisering EKSAMEN 6101 Web-publisering 02.06.2016 Tid: Målform: Sidetall: 3 timer Bokmål 5 (inkludert denne) Hjelpemiddel: Ingen Merknader: Vedlegg: Alle oppgavene er vektet, pass på å fordele tiden du bruker mellom

Detaljer

La oss gjøre nettsiden vår bedre med noen stiler. I denne og den neste leksjonen skal vi lære hvordan man endrer farge, tekst, størrelser og mer!

La oss gjøre nettsiden vår bedre med noen stiler. I denne og den neste leksjonen skal vi lære hvordan man endrer farge, tekst, størrelser og mer! Lesson 4 CSS All Code Clubs must be registered. Registered clubs appear on the map at codeclub.org.uk - if your club is not on the map then visit jumpto.cc/18cplpy to find out what to do. Introduksjon

Detaljer

Kursdokumentasjon for Dreamweaver

Kursdokumentasjon for Dreamweaver Kursdokumentasjon for Dreamweaver Skrevet av 2/13 1 Komme i gang med Dreamweaver... 3 2 Bruk av Dreamweaver... 4 2.1 Verktøylinja...5 2.2 Properties... 5 3 Sidens egenskaper... 6 4 Tekst... 7 4.1 Endre

Detaljer

CSS-formatering: stilark med kommentarer

CSS-formatering: stilark med kommentarer CSS-formatering: stilark med kommentarer /* Demonstrasjon av stilarkregler. Jeg har satt inn forslag til farger og fonter, men du setter inn dine egne valg selvfølgelig. */ /* Stilregler for html-taggen

Detaljer

the web Introduksjon Lesson

the web Introduksjon Lesson Lesson 1 the web All Code Clubs must be registered. Registered clubs appear on the map at codeclub.org.uk - if your club is not on the map then visit jumpto.cc/18cplpy to find out what to do. Introduksjon

Detaljer

EKSAMEN / 6101N WebPublisering

EKSAMEN / 6101N WebPublisering EKSAMEN 6101 / 6101N WebPublisering 09.12.2016 Tid: Målform: Antall sider: 3 timer Bokmål 8 (inkludert denne) Hjelpemidler: Ingen Merknader: Vedlegg: Alle oppgavene er vektet, pass på å fordele tiden du

Detaljer

CSS: Style nettsider Nybegynner

CSS: Style nettsider Nybegynner CSS: Style nettsider Nybegynner Web Introduksjon Nå skal vi lære å endre på stilen til nettsider. I denne oppgaven forventer vi at du har gjort HTML-oppgavene eller er litt kjent med HTML fra før av. I

Detaljer

datatyper Hva er programmering? Variabler og Informasjonsteknologi 2 Kompetansesemål

datatyper Hva er programmering? Variabler og Informasjonsteknologi 2 Kompetansesemål Variabler og datatyper Gløer Olav Langslet Sandvika VGS Høst 2012 Informasjonsteknologi 2 Hva er programmering? Når du skal bake en kake følger du gjerne en oppskrift. Først er det beskrevet hva kaken

Detaljer

Oblig 2: Oppgave 1. section { width: 50%; height: 30%; margin: 5% 0 0 0; } h1 { color:#000000; font-size:2em;

Oblig 2: Oppgave 1. section { width: 50%; height: 30%; margin: 5% 0 0 0; } h1 { color:#000000; font-size:2em; Oblig 2: Oppgave 1 Hva og hvorfor Jeg har valgt å lage et nettsted basert på relative målenheter. Det vil si at jeg tar i bruk prosent og em istedenfor pixler. For eksempel: section { width: 50%; height:

Detaljer

Oppgave 1 (Etter forelesning 31/8) Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.

Oppgave 1 (Etter forelesning 31/8) Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Oblig 1 Oppdatert: 10/09 Nye oppgaver Oppgave 1 (Etter forelesning 31/8) Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Oppgave 2 (Etter

Detaljer

HTML-del. 1. <!-- ikke slett min kode, vær så snill --> er a) en HTML stil-tag b) en CSS stil-tag c) en HTML kommentar-tag d) en CSS kommentar-tag

HTML-del. 1. <!-- ikke slett min kode, vær så snill --> er a) en HTML stil-tag b) en CSS stil-tag c) en HTML kommentar-tag d) en CSS kommentar-tag HTML-del 1. er a) en HTML stil-tag b) en CSS stil-tag c) en HTML kommentar-tag d) en CSS kommentar-tag 2. Grafisk elementer på web skal være a) 72 ppi b) 144

Detaljer

INF1040 Oppgavesett 4: CSS

INF1040 Oppgavesett 4: CSS INF1040 Oppgavesett 4: CSS (Kapittel 5) Fasitoppgaver Ingen fasitoppgaver denne gang. Se flervalgsoppgavene under. Flervalgsoppgaver I følgende oppgaver er det oppgitt fem alternativer der nøyaktig ett

Detaljer

Oblig 1 Webutvikling av Jon-Håkon Rabben

Oblig 1 Webutvikling av Jon-Håkon Rabben Oblig 1 Webutvikling av Jon-Håkon Rabben Oppgave 2 og 3) http://www.it-stud.hiof.no/~jhrabben/boxmodel.html Oppgave 6) http://www.it-stud.hiof.no/~jhrabben/oblig1oppg6.html Oppgave 1) Siden tar lang tid

Detaljer

Læringsmål og pensum. Hvordan virker webteknologi? (klient-tjener arkitektur) HTML - virkemåte. Nettleser: Firefox, Opera, Safari

Læringsmål og pensum. Hvordan virker webteknologi? (klient-tjener arkitektur) HTML - virkemåte. Nettleser: Firefox, Opera, Safari 1 2 Læringsmål og pensum TDT4105/4110 Informasjonsteknologi grunnkurs: Uke 35/36 HTML Førsteamanuensis Alf Inge Wang Læringsmål Lære å lage statiske hjemmesider Bilder Lenker Lister Tabeller Skjema for

Detaljer

I denne oppgaven blir du introdusert for programmeringsspråket JavaScript. Du skal gjøre den klassiske oppgaven Hei verden, med en katt.

I denne oppgaven blir du introdusert for programmeringsspråket JavaScript. Du skal gjøre den klassiske oppgaven Hei verden, med en katt. Hei JavaScript! Introduksjon Web Introduksjon I denne oppgaven blir du introdusert for programmeringsspråket JavaScript. Du skal gjøre den klassiske oppgaven Hei verden, med en katt. Steg 1: Bruke JS Bin

Detaljer

Manual for innlegging av standard sideinnhold og nyheter via «backend»

Manual for innlegging av standard sideinnhold og nyheter via «backend» Manual for innlegging av standard sideinnhold og nyheter via «backend» 23.3.2006 Utarbeidet av: 2 Innlogging og beskrivelse av hovedelement i «backend» For å få tilgang til redigeringsmodul velges følgende

Detaljer

Gruppe prosjekt del 3. INFO134 Klientprogrammering Vår 2017 Kandidatnummer: 304, 298

Gruppe prosjekt del 3. INFO134 Klientprogrammering Vår 2017 Kandidatnummer: 304, 298 Gruppe prosjekt del 3 INFO134 Klientprogrammering Vår 2017 Kandidatnummer: 304, 298 Del 1 Forholdet mellom HTML, JavaScript og MongoDB HTML, er et markeringsspråk for hypertekst. HTML benyttes for å strukturere

Detaljer

Et forsøk på definisjon

Et forsøk på definisjon Et forsøk på definisjon [Kurssidene] [ ABI - fagsider bibin ] Michael Preminger (michaelp@hio.no) 21/08-16 Engelsklignende språk, med rigid syntaks, som kan brukes til å skrive instruksjoner (eksempel

Detaljer

BRUKERMANUAL KOM I GANG... 2 BLOGGINNLEGG... 4 UNDERSIDER... 6 LAST OPP BILDER/VIDEO... 8 KOMMENTARER PÅ INNLEGG... 9 UTSEENDE...

BRUKERMANUAL KOM I GANG... 2 BLOGGINNLEGG... 4 UNDERSIDER... 6 LAST OPP BILDER/VIDEO... 8 KOMMENTARER PÅ INNLEGG... 9 UTSEENDE... BRUKERMANUAL KOM I GANG... 2 SKRIV ET INNLEGG... 2 LEGG TIL UNDERSIDE... 2 LAST OPP BILDER... 2 REDIGER MENYINNHOLD... 3 LEGG INN SIDEMENY ELLER BUNNTEKST... 3 TILPASS BLOGGENS DESIGN... 3 BLOGGINNLEGG...

Detaljer

Steg 1: Canvas-elementet

Steg 1: Canvas-elementet JS: Partikkel-animasjon Skrevet av: Lars Klingenberg Kurs: Web Tema: Tekstbasert, Nettside, Animasjon Fag: Matematikk, Programmering Klassetrinn: 5.-7. klasse, 8.-10. klasse, Videregående skole Introduction

Detaljer

Dobbelklikk på program-ikonet!

Dobbelklikk på program-ikonet! En hjemmeside kan lages i hvilket som helst enkelt tekstbehandlingsprogram (som f.eks. Notepad i Windows eller EnkelTekst på en Mac). Forutsetningen for å kunne gjøre dette er at man behersker html. Html

Detaljer

JSP - 2. Fra sist. Hvordan fungerer web? Tjenerside script HTML. Installasjon av Web-tjener Et enkelt JSP-script. Ønsker dynamiske nettsider:

JSP - 2. Fra sist. Hvordan fungerer web? Tjenerside script HTML. Installasjon av Web-tjener Et enkelt JSP-script. Ønsker dynamiske nettsider: Fra sist JSP - 2 Installasjon av Web-tjener Et enkelt JSP-script HTML statisk Forms Tags Ønsker dynamiske nettsider: Klientside-script/programmering Javascript, vbscript, applets Tjenerside-script/programmering

Detaljer

SUKKERGRIS. Anita og Silje DAT100

SUKKERGRIS. Anita og Silje DAT100 SUKKERGRIS Anita og Silje DAT100 I NNHOLD 1. Innledning... 2 2. Beskrivelse av Sukkergris... 3 2.1 Struktur og grafisk design... 3 2.1.1 Sidens oppbygning... 3 2.1.2 CSS og Grafisk design... 4 2.2 Oversikt

Detaljer

Oblig 1 Erlend Hannestad

Oblig 1 Erlend Hannestad Oblig 1 Erlend Hannestad Oppgave 1 Nettsiden er ustrukturert og uryddig når det kommer til layout og design, det er vanskelig å holde oversikt over alt som vises på siden, det er rett og slett for mye

Detaljer

Tilbakestille nettleser

Tilbakestille nettleser Tilbakestille nettleser Dersom nettbanken ikke vises eller fungerer som den skal, hjelper det ofte å slette midlertidige filer i din nettleser. Midlertidige filer er informasjon som lagres hver gang du

Detaljer

<HTML Koder> Enkle HTML koder for bruk til bl.a cachebeskrivelser. Ver. 2.01

<HTML Koder> Enkle HTML koder for bruk til bl.a cachebeskrivelser. Ver. 2.01 Enkle HTML koder for bruk til bl.a cachebeskrivelser. Ver. 2.01 Side 2 Ett HTML dokument inneholder både tekst som skal vises og instruksjoner om hvordan den skal vises av nettleseren. Instruksjonene

Detaljer

1. Lage og vise et enkelt XML-dokument

1. Lage og vise et enkelt XML-dokument Avdeling for informatikk og e-læring, Høgskolen i Sør-Trøndelag Lage og vise et enkelt XML-dokument Lene Hoff (revidert av Tore Mallaug) 1.9.2013 Lærestoffet er utviklet for faget XML Teknologi 1. Lage

Detaljer

Oppgave 1: Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.

Oppgave 1: Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Oppgave 1: Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Svar: Ved første øyekast har utvikleren av nestesiden plasser altfor mange div

Detaljer

TENK TECH SUMMERCAMP BYGG DIN EGEN NETTSIDE

TENK TECH SUMMERCAMP BYGG DIN EGEN NETTSIDE TENK TECH SUMMERCAMP BYGG DIN EGEN NETTSIDE JULIE HILL ROA MIRA THOEN FEIRING HVA ER WEBUTVIKLING? SERVER KLIENT HTTP request HTML, CSS, JavaScript HTTP response HTML Innhold CSS Utseende JAVASCRIPT Oppførsel

Detaljer

Steg 1: Animasjons-attributtet

Steg 1: Animasjons-attributtet CSS: Animasjon Skrevet av: Lars Klingenberg Kurs: Web Tema: Tekstbasert, Nettside, Animasjon Fag: Matematikk, Programmering, Kunst og håndverk Klassetrinn: 5.-7. klasse, 8.-10. klasse, Videregående skole

Detaljer

Utvikle en prototype for en digital versjon av helsekort for gravide. Programvareleverandør av ehelse-løsninger for helsevesenet

Utvikle en prototype for en digital versjon av helsekort for gravide. Programvareleverandør av ehelse-løsninger for helsevesenet Kravspesifikasjon Hovedprosjekt 2014 Institutt for informasjonsteknologi, Høgskolen i Oslo og Akershus Presentasjon Tittel: Oppgave: Gruppemedlemmer: Digitalt Helsekort for Gravide Utvikle en prototype

Detaljer

Et forsøk på definisjon. Eksempel 1

Et forsøk på definisjon. Eksempel 1 [Kurssidene] [ ABI - fagsider bibin ] Introduksjon Michael Preminger (michael.preminger@hioa.no) 13/12-13 I denne forelesningen: Utvikling av dynamiske nettsteder med PHP og databaser, våren 2014 Motivasjon:

Detaljer

Et forsøk på definisjon. Eksempel 1

Et forsøk på definisjon. Eksempel 1 Et forsøk på definisjon [Kurssidene] [ ABI - fagsider bibin ] Michael Preminger (michael.preminger@hioa.no) 19/08-15 Engelsklignende språk, med rigid syntaks, som kan brukes til å skrive instruksjoner

Detaljer

Utvikling av dynamiske nettsteder med PHP og databaser, høsten 2006

Utvikling av dynamiske nettsteder med PHP og databaser, høsten 2006 Page 1 Page 2 Utvikling av dynamiske nettsteder med PHP og databaser, høsten 2006 Introduksjon Michael Preminger (michaelp@hio.no) 23/08-06 I denne forelesningen: Motivasjon: Hvorfor vi lærer å programmere

Detaljer

Alle publiserte nyheter arkiveres i kategorier som du selv oppretter, Det gir deg en ryddig oversikt i arkivet senere.

Alle publiserte nyheter arkiveres i kategorier som du selv oppretter, Det gir deg en ryddig oversikt i arkivet senere. PUBLISERING Som innlogget bruker får du tilgang til publiseringsfunksjoner... ABC for publisering Overskrift Ingress Ingressbilde Hovedtekst Widget Visning Verktøy Annet Alle publiserte nyheter arkiveres

Detaljer

Et forsøk på definisjon

Et forsøk på definisjon Et forsøk på definisjon [Kurssidene] [ ABI - fagsider bibin ] Michael Preminger (michaelp@hio.no) 18/08-17 Engelsklignende språk, med rigid syntaks, som kan brukes til å skrive instruksjoner (eksempel

Detaljer

Oppgavesamling til Webutvikling < >

Oppgavesamling til Webutvikling < > TOM HEINE NÄTT EVA M. HORNNES JOSTEIN NORDENGEN Oppgavesamling til Webutvikling Oppdatert 25.11.2016 < > 2 Kapittel 1 Introduksjon til webutvikling 1.1 Hva husker du? Teori: Gå sammen to og to og besvar

Detaljer

Innstillinger. Endre Personalia

Innstillinger. Endre Personalia Innstillinger Endre Personalia: Her kan du endre personlige innstillinger. Tilpass it's:learning: Her kan du tilpasse utseende og endre f. eks språk. Varsling: Du kan få varslinger tilsendt både på e-post

Detaljer

CSS. Aud Marie Hauge ekspert i brukskvalitet og universell utforming i Epinova AS

CSS. Aud Marie Hauge ekspert i brukskvalitet og universell utforming i Epinova AS CSS Aud Marie Hauge ekspert i brukskvalitet og universell utforming i Epinova AS CSS står for Cascading Style Sheets CSS blir brukt til å bestemme hvordan HTML-elementene skal se ut (farge, størrelse,

Detaljer

Løsningsskisse prøve IT1

Løsningsskisse prøve IT1 Løsningsskisse prøve IT1 Etikk og regler Forklar disse begrepene åndsverk litterært, vitenskapelig eller kunstnerisk visst minimum av original, skapende innsats verkshøyde for å ha opphavsrettslig vern

Detaljer

Steg 1: Felix har forsvunnet!

Steg 1: Felix har forsvunnet! HTML: Forsvunnet katt Skrevet av: Arve Seljebu Kurs: Web Tema: Tekstbasert, Nettside Fag: Programmering, Teknologi, Norsk Klassetrinn: 5.-7. klasse, 8.-10. klasse, Videregående skole Introduksjon Katten

Detaljer

Google Chrome. Microsoft Edge. Mozilla Firefox. Internet Explorer. Opera. Safari

Google Chrome. Microsoft Edge. Mozilla Firefox. Internet Explorer. Opera. Safari Google Chrome Microsoft Edge Mozilla Firefox Internet Explorer Opera Safari Google Chrome Dersom nettbanken ikke vises eller fungerer som den skal, så hjelper det ofte å slette midlertidige filer i din

Detaljer

CSS: Animasjon Nybegynner

CSS: Animasjon Nybegynner CSS: Animasjon Nybegynner Web Introduksjon I denne oppgaven skal du lære å animerer HTML-objekter ved hjelp av CSS. Under ser du hvordan resultatet vil bli til slutt: Men før vi starter å lage animasjonen

Detaljer

Brukermanual. Itpays W3 Publish. Sette opp, logge inn og komme i gang. Redigert den 23. mai 2005. http://www.itpays.no/produkter/publisering/

Brukermanual. Itpays W3 Publish. Sette opp, logge inn og komme i gang. Redigert den 23. mai 2005. http://www.itpays.no/produkter/publisering/ Brukermanual Itpays W3 Publish Sette opp, logge inn og komme i gang Redigert den 23. mai 2005 http://www.itpays.no/produkter/publisering/ Innholdsoversikt: 1 Generelt om Itpays w3 publish Side 3 2 Sette

Detaljer

Dette er en demonstrasjonsside som vi skal bruke for å se litt nærmere på HTTP protokollen. Eksemplet vil også illustrere et par ting i PHP.

Dette er en demonstrasjonsside som vi skal bruke for å se litt nærmere på HTTP protokollen. Eksemplet vil også illustrere et par ting i PHP. 1 Dette er en demonstrasjonsside som vi skal bruke for å se litt nærmere på HTTP protokollen. Eksemplet vil også illustrere et par ting i PHP. (Læreboka kapittel 2-5) Legg merke til den første blokken,

Detaljer

notater Gule lapper Mine Et praktisk eksempel med objekter IT2 Læreplansmål Gløer Olav Langslet Sandvika VGS

notater Gule lapper Mine Et praktisk eksempel med objekter IT2 Læreplansmål Gløer Olav Langslet Sandvika VGS Mine notater Gløer Olav Langslet Sandvika VGS Et praktisk eksempel med objekter Vi kjenner alle til korktavlen med gule lapper. Vi henger opp en lapp for at vi selv eller andre skal huske eller bli minnet

Detaljer

Oppbygging av innhold på responsive nettsider.

Oppbygging av innhold på responsive nettsider. Oppbygging av innhold på responsive nettsider. HTML og CSS er koder som forteller nettleseren hvordan strukturen og utseende på en nettside skal vises på skjermen din. Selv om du ikke ser kildekoden når

Detaljer

InfoRed Publisering. - produktbeskrivelse. TalkPool WebServices Postboks Åneby

InfoRed Publisering. - produktbeskrivelse.  TalkPool WebServices Postboks Åneby InfoRed Publisering - produktbeskrivelse www.talkpool.no TalkPool WebServices Postboks 90 1484 Åneby InfoRed Produktbeskrivelse 2 Sammendrag InfoRed Publisering er produktet for å administrere en hel informasjonstjeneste,

Detaljer

OBLIG 2 WEBUTVIKLING

OBLIG 2 WEBUTVIKLING OBLIG 2 WEBUTVIKLING Oppgave 1 Design ved hjelp av skisser eller wireframes et nettsted med et "avansert" design. Lag spesifikke design for ulike skjermstørrelser og utskrift. Fokuser spesielt på å få

Detaljer

Steg 1: En første animasjon

Steg 1: En første animasjon Halloweenimasjon Skrevet av: Torbjørn Skauli og Geir Arne Hjelle Kurs: Scratch Tema: Blokkbasert, Animasjon Fag: Programmering, Engelsk, Kunst og håndverk Klassetrinn: 1.-4. klasse, 5.-7. klasse, 8.-10.

Detaljer

Oppgave 1. Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.

Oppgave 1. Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Oppgave 1 Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Når man tar pilen over fanene, dukker det opp utrolig mange tagger. Dvs alt er

Detaljer

Oblig 5 Webutvikling. Av Thomas Gitlevaag

Oblig 5 Webutvikling. Av Thomas Gitlevaag Oblig 5 Webutvikling Av Thomas Gitlevaag For oppgave 1 og 2 skal dere levere en funksjonell webside på deres hjemmeområde. Dere skal også levere alle phps-filene slik at man for en hver side kan slenge

Detaljer

med canvas Canvas Grafikk Læreplansmål Gløer Olav Langslet Sandvika VGS

med canvas Canvas Grafikk Læreplansmål Gløer Olav Langslet Sandvika VGS Grafikk med canvas Gløer Olav Langslet Sandvika VGS Høsten 2011 Informasjonsteknologi 2 Canvas Læreplansmål Eleven skal kunne bruke programmeringsspråk i multimedieapplikasjoner Med CSS3, HTML og JavaScript

Detaljer

Brukerveiledning WordPress. Innlogging:

Brukerveiledning WordPress. Innlogging: Brukerveiledning WordPress Her er en liten guide for hjelpe deg gjennom det grunnleggende i Wordpress. Denne veilederen vil ta deg gjennom: Innlogging Lage en side Lage et innlegg Innlogging: For å logge

Detaljer

Modell, meldinger og oppdatering

Modell, meldinger og oppdatering Input fra brukeren Skrevet av: Alexander Perry Kurs: Elm Tema: Tekstbasert, Nettside Fag: Programmering, Teknologi Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon Input-felter lar brukere skrive

Detaljer

Høgskoleni østfold EKSAMEN

Høgskoleni østfold EKSAMEN Høgskoleni østfold EKSAMEN Emnekode: Emne: ITF10511 Webutvikling Dato: Eksamenstid: 03/12-2014 09.00-13.00 Hjelpemidler: Faglærer: In en Tom Heine Nått Eksamensoppgaven: Oppgavesettet består av 6 sider

Detaljer

Om du allerede kjenner Scratch og har en Scratchbruker kan du gå videre til Steg 1.

Om du allerede kjenner Scratch og har en Scratchbruker kan du gå videre til Steg 1. Pingviner på tur Skrevet av: Geir Arne Hjelle Kurs: Scratch Tema: Blokkbasert, Spill Fag: Programmering Klassetrinn: 1.-4. klasse, 5.-7. klasse, 8.-10. klasse Introduksjon Velkommen til Scratch. Vi skal

Detaljer

Input fra brukeren. Hente tekst fra brukeren. Moduler og program. Modell, meldinger og oppdatering. Skriv ut teksten. Introduksjon

Input fra brukeren. Hente tekst fra brukeren. Moduler og program. Modell, meldinger og oppdatering. Skriv ut teksten. Introduksjon Input fra brukeren Erfaren Elm Introduksjon Input-felter lar brukere skrive inn tekst, tall, datoer og så videre i nettsiden vår. Informasjonen vi får fra brukerne kan vi endre, skrive ut, og kombinere

Detaljer

1. XHTML. Innhold Innledning

1. XHTML. Innhold Innledning Avdeling for informatikk og e-læring, Høgskolen i Sør-Trøndelag XHTML Lene Hoff 19.9.2006 Lærestoffet er utviklet for faget XML Teknologi 1. XHTML Resymé: I denne leksjonen skal vi ta for oss standarden

Detaljer

Forsvunnet katt webside

Forsvunnet katt webside Lesson 3 Forsvunnet katt webside All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/18cplpy to find out what

Detaljer

OBLIG 1 WEBUTVIKLING. Oppgave 1 Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.

OBLIG 1 WEBUTVIKLING. Oppgave 1 Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. OBLIG 1 WEBUTVIKLING Oppgave 1 Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Tar lang tid å laste inn siden: Mye bilder Mange animasjoner

Detaljer

Hvordan oppdatere Java.

Hvordan oppdatere Java. Hvordan oppdatere Java. Trykk på din nettleser under for veiledning til å oppdatere Java: Internet Explorer Mozilla Firefox Google Chrome Safari (Mac) Internet Explorer Skriv inn www.java.com i adressefeltet

Detaljer

Forkurs i informatikk Python. Andreas Færøvig Olsen

Forkurs i informatikk Python. Andreas Færøvig Olsen Andreas Færøvig Olsen andrefol@ifi.uio.no Mål Hvorfor Python? Gi en mykere start på INF1100 Komme i gang med programmering 2 3 Hva er Python? Hva er programmering? 4 Hva er Python? Hva er programmering?

Detaljer

praktiske eksempler DOM Document Object Model DOM og Høst 2013 Informasjonsteknologi 2 Læreplansmål Gløer Olav Langslet Sandvika VGS

praktiske eksempler DOM Document Object Model DOM og Høst 2013 Informasjonsteknologi 2 Læreplansmål Gløer Olav Langslet Sandvika VGS DOM og praktiske eksempler Gløer Olav Langslet Sandvika VGS Høst 2013 Informasjonsteknologi 2 DOM Document Object Model Læreplansmål Eleven skal kunne programmere med enkle og indekserte variabler eller

Detaljer

Webutvikling oblig 1 Marius Hanssen

Webutvikling oblig 1 Marius Hanssen Webutvikling oblig 1 Marius Hanssen Oppgave 1 arngren.net er en rotete nettside, enkelt sett forpestet med et uorganisert layout og en kode så grov at jeg ikke skjønner hvordan de klarte å finne en så

Detaljer

"Dette skjer når jeg trykker på denne knappen" "Når jeg skriver i dette feltet, ser jeg at det andre forandrer seg"

Dette skjer når jeg trykker på denne knappen Når jeg skriver i dette feltet, ser jeg at det andre forandrer seg Tegning med SVG Skrevet av: Teodor Heggelund Kurs: Elm Tema: Tekstbasert, Nettside Fag: Programmering, Teknologi Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon I denne oppagaven skal vi lære

Detaljer

Tilbakestill nettleser

Tilbakestill nettleser Tilbakestill nettleser Dersom nettbanken ikke vises eller fungerer som den skal, så hjelper det ofte å slette midlertidige filer i din nettleser. Midlertidige filer er filer som lagres hver gang du besøker

Detaljer

Bedrift Online. Komme i gang. Nå er det enklere enn noensinne å redigere nettstedet ditt.

Bedrift Online. Komme i gang. Nå er det enklere enn noensinne å redigere nettstedet ditt. Bedrift Online Komme i gang Nå er det enklere enn noensinne å redigere nettstedet ditt. oktober 2008 Bedrift Online 2008 Nidelven IT and WOW webdesign. All rights reserved. Under the copyright laws, this

Detaljer

Forelesning 23/9-08 Webprog 1. Tom Heine Nätt

Forelesning 23/9-08 Webprog 1. Tom Heine Nätt Forelesning 23/9-08 Webprog 1 Tom Heine Nätt Kursinfo Tom Heine Nätt E-post: tom.h.natt@hiof.no Mobil: 92012120 MSN: thnatt@hotmail.com All nødvendig info (forhåpentligvis) finnes på kursets webside: http://www.it.hiof.no/webprog1

Detaljer

Bruk av OpenOffice.org 3 Writer

Bruk av OpenOffice.org 3 Writer Bruk av OpenOffice.org 3 Writer OpenOffice.org 3 er et gratis og bra alternativ til Microsoft Office (Word, Excel, Power Point osv.). 1 Oppstart av OpenOffice.org Trykk på Start etterfulgt av Programmer

Detaljer

HTML5. Skjemaer på nettsider. Skjemaer med. Informasjonsteknologi 1 og 2. Gløer Olav Langslet Sandvika VGS

HTML5. Skjemaer på nettsider. Skjemaer med. Informasjonsteknologi 1 og 2. Gløer Olav Langslet Sandvika VGS Skjemaer med HTML5 Gløer Olav Langslet Sandvika VGS Leksjon 10 Informasjonsteknologi 1 og 2 Skjemaer på nettsider I denne leksjonen skal vi se litt nærmere på bruk av skjemaer på nettsider. Du har sett

Detaljer

CSS: Endre utseende og stil på tekst Nybegynner

CSS: Endre utseende og stil på tekst Nybegynner CSS: Endre utseende og stil på tekst Nybegynner Web Introduksjon I denne oppgaven skal vi jobbe videre med skrift, størrelser og farger. Vi skal utforske forskjellige skrifttyper, se på bakgrunnsfarger

Detaljer

JS: Grunnleggende JavaScript

JS: Grunnleggende JavaScript JS: Grunnleggende JavaScript Skrevet av: Lars Klingenberg Kurs: Web Tema: Tekstbasert, Nettside Fag: Matematikk, Programmering, Teknologi Klassetrinn: 5.-7. klasse, 8.-10. klasse, Videregående skole Introduksjon

Detaljer

GoOnline Site Search

GoOnline Site Search GoOnline Site Search Beskrivelse Innhold 1. Generelt a. Informasjon om dette dokumentet b. Versjon 2. Indeksering 3. Søk a. Indeksering av produkt b. Indeksering av ordinær side c. Indeksering mot 3.parts

Detaljer

MMT105 Internettprogrammering Uke 44, høst 2007

MMT105 Internettprogrammering Uke 44, høst 2007 MMT105 Internettprogrammering Uke 44, høst 2007 Introduksjon til CSS MMT105 HiNT 2007 1 HTML-elementenes strukturerende egenskaper HTML-elementene skal markere strukturen i et webdokument, dvs. at de forskjellige

Detaljer

Husk at du skal ha to vinduer åpne. Det ene er 'Python Shell' og det andre er for å skrive kode i.

Husk at du skal ha to vinduer åpne. Det ene er 'Python Shell' og det andre er for å skrive kode i. Skilpaddeskolen Skrevet av: Oversatt fra Code Club UK (//codeclub.org.uk) Oversatt av: Bjørn Einar Bjartnes Kurs: Python Tema: Tekstbasert Fag: Programmering, Kunst og håndverk Klassetrinn: 8.-10. klasse

Detaljer

Halloweenimasjon Introduksjon Scratch PDF

Halloweenimasjon Introduksjon Scratch PDF Halloweenimasjon Introduksjon Scratch PDF Introduksjon Vi vil her se på hvordan vi kan lage forskjellige animasjoner med et Halloween-tema. Disse kan vi enten dele med vennene våre gjennom Scratch, eller

Detaljer

Bilder, tabeller. Kirsten Ribu 26.09

Bilder, tabeller. Kirsten Ribu 26.09 Bilder, tabeller Kirsten Ribu 26.09 1 Repetisjon: div taggen Blokker () Et (X)HTML-dokument kan deles inn i blokker med og hver blokk må avsluttes med . Blokker benyttes i dokumenter der

Detaljer

Håkon Tolsby. 25.08.2014 Håkon Tolsby

Håkon Tolsby. 25.08.2014 Håkon Tolsby HTML5 og CSS Håkon Tolsby 25.08.2014 Håkon Tolsby 1 En webside min webside en html5 side dett er min første

Detaljer

Brukerveiledning. for student hjemmeeksamen

Brukerveiledning. for student hjemmeeksamen Brukerveiledning for student hjemmeeksamen Oppdatert 27. mars 2015 1 Innhold Innledning Pålogging Godkjente nettlesere Din oversikt over prøver og eksamener Gjennomføre eksamen Navigere i eksamensoppgaven

Detaljer

JS: Grunnleggende JavaScript Nybegynner

JS: Grunnleggende JavaScript Nybegynner JS: Grunnleggende JavaScript Nybegynner Web Introduksjon I denne oppgaven skal du lære helt enkle og grunnleggende elementer av JavaScript. Du vil lære om variabler, if-setninger, funksjoner og løkker.

Detaljer

Denne rapporten er beregnet for dataansvarlig på Grefsenhjemmet, den som skal installere, vedlikeholde og modifisere systemet.

Denne rapporten er beregnet for dataansvarlig på Grefsenhjemmet, den som skal installere, vedlikeholde og modifisere systemet. Produktrapport Forord Denne rapporten er beregnet for dataansvarlig på Grefsenhjemmet, den som skal installere, vedlikeholde og modifisere systemet. Dataansvarlig eller supporter trenger informasjon om

Detaljer