Dynamiske websider med JavaScript og CSS3

Størrelse: px
Begynne med side:

Download "Dynamiske websider med JavaScript og CSS3"

Transkript

1 Dynamiske websider med JavaScript og CSS3 Skrevet av Atle Nes Avdeling for informatikk og e-læring Høgskolen i Sør-Trøndelag Denne leksjonen handler om å bruke JavaScript og ny funksjonalitet i CSS3 til å lage dynamiske og tilpasningsdyktige websider. Vi tar i denne leksjonen også utgangspunkt i at du har grunnleggende kjennskap til HTML sin DOM (Document Object Model), programmering av dynamiske websider med JavaScript, design med CSS (Cascading Style Sheets) og forstår samspillet mellom disse teknologiene. HTML5 og JavaScript JavaScript, eller ECMAScript som det formelt kalles, gjør at vi kan kjøre små biter programkode på websidene for å gjøre de mer levende. I den nye HTML5-standarden er JavaScript blitt definert som standard scriptspråk, dvs. det scriptspråket vi skal bruke for å få laget dynamiske websider på klientsiden. Når vi sier på klientsiden mener vi at websiden lastes ned til nettleseren (klienten) før JavaScript-koden blir utført. Det finnes også scriptspråk som utføres på tjeneren (PHP, ASP, JSP etc.), men de blir ikke omtalt i denne leksjonen. Det at JavaScript er blitt standard scriptspråk i HTML5 betyr i alle fall at vi ikke lenger behøver å ha med attributtet type i syntaksen for å definere hvilket språk som er benyttet. Nettleseren skal nå forstå dette automatisk. Selv om det ikke har vært standardisert har nok endel nettlesere hatt denne funksjonaliteten lenge. Tidligere skrev vi altså <script type="text/javascript">...</script> Dette kan nå forkortes til <script>...</script> CSS3 (Cascading Style Sheets versjon 3) CSS brukes som kjent til å definere layout og utseendet til elementene på websiden. CSS3 er tredje versjon og er av W3C delt opp i mange ulike dokumenter som kalles moduler. Hver modul legger til helt nye funksjoner eller bygger på funksjonalitet fra CSS2 (og sørger for at CSS3 er bakoverkopatibel med denne). Det er lansert over 50 ulike moduler, men pga. modulariseringen er både stabilitet og status på disse svært forskjellig. Tre av modulene, om Selectors, Namespaces og Color, fikk imidlertid status som W3C anbefaling i

2 JavaScript Selectors API Når skal få JavaScript til å manipulere et element i DOM-treet kan man bruke attrubuttene id, name og class for å finne fram til riktig element(er) på websiden. Da har du kanskje brukt noen innebygde funksjoner som heter getelementbyid() eller getelementsbytagname(), men du har muligens savnet en getelementsbyclassname()? getelementsbyclassname() Det nye JavaScript-API-et løser dette ved å innføre nettopp getelementsbyclassname() slik at du nå også kan skrive: var innlegg = document.getelementsbyclassname('mine_innlegg'); Dette vil legge en referanse til alle elementer med klasseattributtet (class="mine_innlegg") til i variabelen innlegg. Den videre JavaScript-koden vil kunne manipulere elementene på websiden som hører til disse innleggene. Du kan selvfølgelig også inkludere flere klasser i en og samme funksjon ved å skille klassenavnene med mellomrom: var innlegg = document.getelementsbyclassname('klasse1 klasse2'); Dette vil legge referanser til både elementer med klasse1 og klasse2 til variabelen innlegg. Eller du kan utføre nøsting av ulike funksjoner: var forste_innlegg = getelementbyid('hoved').getelementsbyclassname('mine_innlegg'); Dette vil lage en referanse til alle elementer med class=mine_innlegg i likhet med øverste eksempel, men til forskjell bare innenfor elementet på websiden som har id=hoved (dvs. ikke hele websiden). queryselectorall() og queryselector() Annen ny funksjonalitet i JavaScript-API-et gjør at vi nå også enkelt har mulighet til å referere til elementer som stemmer overens med en bestemt syntaks i CSS. Dersom vi vil lage en referanse til alle avsnitt på websiden med klassen warning og error kan vi bruke funksjonen queryselectorall() til å skrive det kommaseparert på følgende måte: var alerts = document.queryselectorall("p.warning, p.error"); Et annen mer avansert eksempel kan være dersom vi ønsker å manipulere en punktliste (uordnet liste). La oss tenke oss at vi skal gjøre en operasjon på annethvert element i listen. Da kan vi med bruk av queryselectorall() skrive: var elements = document.queryselectorall("ul li:nth-child(odd)"); 2

3 Legg merke til at vi har skrevet CSS-syntaks for å referere til oddetallselementene (første, tredje, femte osv.) i punktlisten. Om man bytter ut odd med even vil det naturligvis bli partallselementene som blir referert til i stedet for oddetallselementene. Eller dersom det holder å referere til første enkelttreff i dokumentet kan vi bruke queryselector() i stedet for queryselectorall(). Dersom man vil manipulere første element i dokumentet med id=minid kan man skrive: var el = document.queryselector("#minid"); Vi kan ta et mer avansert eksempel. Tenk deg at du ønsker å manipulere første celle i tabellen som har name=test. Følgende syntaks vil gjøre nettopp dette. var first_td = document.queryselector("table.test > tr > td"); Legg også merke til bruken av hakeparanteser (>) for å traversere DOM-treet ned til riktig element. Hovedforskjellen på queryselector() og queryselectorall() er altså om du skal referere til et eller flere elementer. CSS3 Selectors En selector i CSS fungerer på lignende måte som for JavaScript. Den definerer kriterier for å velge ut et eller flere elementer på websiden som en eller flere CSS-regler skal gjelde for. CSS1 Første versjon av CSS hadde bare noen få selectors. Dette ga blant annet mulighet for å velge elementer (E), underelementer av elementer (E F), elementer som tilhører en bestemt klasse (E.klassenavn), elementer med en bestemt id (E.idnavn), hyperlenker med ulik status (E:link og E:visited), elementer som blir manipulert av brukeren (E:active, E:hover og E:focus) og første linje eller bokstav i elementet (E::first-line og E::first-letter) Om vi for eksempel ønsker at teksten i alle div elementer med klassen «advarsel» skal være rød kan vi definere dette som en CSS-regel på følgende måte: CSS2 div.advarsel { color: red; CSS2 introduserte mange nye selectors. Vi fikk mulighet til å velge alle elementer (*), elementer basert på attributtverdi (E[foo], E[foo="bar"], E[foo~="bar"] og E[foo ="bar"]), første underelement (E:first-child), elementer i et bestemt språk (for eksempel fransk - E.lang(fr)), innhold før og etter et element (E::before og E::after), underelement direkte under et element (E > F) og elementet direkte etter et element (E + F). Du husker kanskje at vi har brukt en av disse i avsnittet om JavaScript, nemlig muligheten for å velge et underelement direkte under et annet element. Om vi for eksempel ønsker å fargelegge bakgrunnen i den første cella i alle tabeller blå kan vi skrive en CSS-regel på følgende måte: table.test > tr > td { background-color: #0000ff; 3

4 CSS3 CSS3 introduserer også mange nye selectors. Dette gir tre nye muligheter for å velge elementer basert på attributtverdi i tillegg til (E[foo], E[foo="bar"], E[foo~="bar"] og E[foo ="bar"] fra CSS2) E[foo^="bar"] E[foo$="bar"] E[foo*="bar"] Velger alle elementer hvor attributtet foo har attributtverdi som starter med tekststrengen «bar». Velger alle elementer hvor attributtet foo har attributtverdi som avsluttes med tekststrengen «bar». Velger alle elementer hvor attributtet foo har attributtverdi som inneholder tekststrengen «bar». CSS3 gir også mange nye muligheter for å velger elementer basert på strukturelle egenskaper (i tillegg til E:first-child fra CSS2) E:root E:nth-child(n) E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:last-of-type E:only-child E:only-of-type E:empty Velger rotelementet til dokumentet. Velger det n te underelementet direkte under et element. Velger det n te siste underelementet direkte under et element. Velger det n te elementet av en bestemt type. Velger det n te siste elementet av en bestemt type. Velger det siste underelementet direkte under et element. Velger det første elementet av en bestemt type. Velger det siste elementet av en bestemt type. Velger det eneste underelementet direkte under et element. Velger det eneste elementet av en bestemt type. Velger elementet som ikke har noen underelementer. De siste nye variantene av selectors er E:target Elementet som er målet for URI en. E:enabled og E:disabled UI-element som kan være slått på eller slått av. E:checked UI-element som kan være valgt (checkbox eller radiobutton). E:not(s) Velger elementet som ikke samsvarer med selector s. E ~ F Velger elementet etter et element (ikke nødvendigvis like etter). 4

5 Eksempel på bruk av nth-child På tide med et lite eksempel. Vi kan lage oss en liten tabell med oversikt over leksjonene i faget HTML5. Tabellen har to kolonner og 9 rader. Å fargelegge annenhver rad i en større tabell kan dramatisk heve lesbarheten til tabellen. Dette kalles sebrafargelegging og har tidligere blitt løst med class="alternate" eller tilsvarende. Med den nye nthchild-selectoren kan tabellen bli helt fri for bruk av klasser. Det holder faktisk å legge til følgende CSS-kode: tr:nth-child(2n+1) { background-color: lightgrey; 2n+1 vil gi bety rad 1 (=2*0+1), rad 3 (=2*1+1), rad 5 (=2*2+1), rad 7 (=2*3+1) etc. Om du vil fargelegge motsatt kan du skrive 2n i stedet. Om du vil slippe unna matematikken går det også an å skrive de mer folkelige ordene odd eller even i stedet for 2n+1 og 2n. tr:nth-child(odd) { background-color: lightgrey; Dersom du vil ha annen fargelegging enn sebrastriper må du bruke matematikken. Legg også merke til at Internet Explorer versjon 7 og 8 ikke støtter CSS3 nth-child. En vanlig løsning på dette er å bruke jquery-biblioteket sin nth-child som fungerer også på IE-platformen. 5

6 CSS3 Farger Modulen om farger var den første som ble en CSS3 anbefaling av W3C - 7. juni For å se hva som er nytt om farger tar vi først en titt på hvordan verden så ut før CSS3. CSS2.1 lot oss definere farger på seks ulike måter: 17 uilke fargenavn aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white og yellow. p { color: aqua; Fargekode bestående av 6 heksadesimale tegn To tegn for rødt, to for grønt og to for blått i intervallet 00 til FF. p { color: #AE03FF; p { color: #663399; Fargekode bestående av 3 heksadesimale tegn Et tegn for rødt, et for grønt og et for blått i intervallet 0 til F. Dette er en forenkling av fargekoden ovenfor som kan brukes dersom man har de to tegnene er like som i siste eksempel ovenfor. p { color: #639; RGB-kode med 3 numeriske verdier En verdi for rødt, en for grønt og en for blått i intervallet 0 til 255. p { color: rgb(109, 22, 255); RGB-kode med 3 prosentverdier Prosentverdier mellom 0% og 100% i stedet for numeriske verdier. p { color: rgb(0%, 10%, 100%); Systemfarger Farger i henhold til operativsystemet. p { color: ButtonFace; OBS! Denne siste kategorien bør du ikke lenger bruke siden den er uønsket i CSS3. 6

7 CSS3 lar oss definere farger på hele åtte ulike måter. Fargenavn Antallet er økt fra 17 til 147! Du kan finne en oversikt over alle fargene på CSS3 løser også problemet med gray/grey ved at begge skrivemåtene er tillatt. p { color: peru; Opacity Mulighet for å definere transparens med verdier fra fullt transparent 0 (eller 0.0) til fullt ugjennomsiktig 1 (eller 1.0). Legg merke til at regelen gjelder for elementet og alle underelementer! p { opacity: 0.3; RGBA-notasjon med numeriske eller prosentverdier Samme som CSS2.1, men med transparens som egen parameter. Man bør inkludere begge formuleringene for å støtte også gamle nettlesere. p { color: rgb(100,66,255); color: rgba(100,66,255,0.5); p { color: rgb(10%,6%,20%); color: rgba(10%,6%,20%,1); HSL eller HSLA-notasjon Dette er en ny fargemodell som blir brukt av designere. For nettleserne hard et ingen betydning om du definerer fargen med RGB eller med HSL. Hue har numerisk verdi mellom 0 og 359, saturation og lightness har prosentverdi mellom 0% og 100%. Også her er det lurt å inkludere formulering for å støtte gamle nettlesere. p { color: rgb(85,0,128); color: hsl(280,100%,50%); p { color: rgb(85,0,128); color: hsla(280,100%,50%,0.5); 7

8 Media Queries I dag finner vi nettlesere i mobiltelefoner, nettbrett, fjernsynsapparater, spillkonsoller og sikkert mange andre forskjellige enheter. Det antas at surfing på andre enheter enn den personlige datamaskinen vil overta i løpet av noen få år. I dag utvikles nettsteder stort sett for bruk med mus og tastatur, men etterhvert vil det kanskje være mer aktuelt med touch-grensesnitt, støtte for håndholdte spillkontrollere etc. Oppsummert stilles vi ovenfor et problem der vi har mange ulike enheter med ulike egenskaper (for eksempel skjermstørrelse) og ulike grensesnitt for inndata. Mange selskaper i dag velger å utvikle et eget iphone-nettsted. Nettstedet tilpasses enheten perfekt med tanke på iphone sine egenskaper til skjermstørrelse, men hva om man besøker nettstedet med en annen mobiltelefon med annen skjermstørrelse? Hva om det dukker opp en ny populær enhet? Skal vi utvikle et nettsted for iphone, en for ipad, en for Android, en for Windows Phone, en for Symbian, og en for personlige datamaskiner etc. På et tidspunkt kan man spørre seg om ikke dette blir for alt for mye arbeid. Ville det ikke heller være lurere å lage et nettsted og la designet endre seg basert på enhetens egenskaper? CSS2.1 ga oss noen spinkle muligheter til å velge mellom ulike stilark ved å spesifisere medietype. Hvis du har kodet stilark for utskrift kjenner du nok til denne syntaksen fra head i HTML: <link rel="stylesheet" type="text/css" href="skjerm.css" media="screen" /> <link rel="stylesheet" type="text/css" href="utskrift.css" media="print" /> Selv om standarden definerer mange ulike medietyper har nettlesere og enheter aldri omfavnet denne delen av spesifikasjonen. Det gjør at vi stort sett bare finner igjen denne syntaksen når det er snakk om utskrift. I CSS3 har vi fått noe som heter Media Queries som tar dette et steg videre. Dette lar oss lage stilark ikke for en bestemt type enhet slik vi gjorde med media-attributtet, men for en enhet som har visse egenskaper. Vi kan skrive: <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobil.css" /> Vi ser at dette inneholder to deler; først en mediatype som før og deretter en spesifikasjon av egenskap (mediafeature). Den horisontale bredden til enheten blir sjekket (max-device-width) og dersom den er mindre eller lik 480 piksler vil enheten benytte stilarket mobil.css. Utviklere har eksperimentert med websider som har sjekket skjermoppløsning tidligere ved å bruke JavaScript. Media Queries tilbyr imidlertid mer enn bare skjermoppløsning. Det er til og med mulig å teste flere egenskaper på samme linje: <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="mobil.css" /> 8

9 Vi er faktisk heller ikke lenger bare begrenset til bare å definere dette som links. Dette kan gjøres direkte i CSS-filen ved screen and (max-device-width: 480px) {.column { float: none; eller ved url("mobil.css") screen and (max-device-width: 480px); Uansett alternativ vil resultatet bli det samme. Hvis test av egenskapen går gjennom vil den relevante CSS-koden bli utført på HTML-koden. I stedet for å tilpasse seg hver enkelt enhet som finnes lager man CSS som tilpasser seg egenskapene til enheten. Modulen om Media Queries er ikke ansett som ferdig av W3C, men fungerer på de fleste moderne nettlesere unntatt Internet Explorer. Det finnes et JavaScript bibliotek som du finner på som du kan bruke for å få støtte også på IEplattformen. Web ble lansert i CSS2 og har vært implementert på Internet Explorer siden versjon 5 (utrolig!). Implementasjonen i IE baserte seg på det proprietære formatet Embedded Open Type (.eot) og ingen andre nettlesere valgte å bruke dette formatet. Med lanseringen av Safari 3.1 kunne webutviklere begynne å bruke alle de lisensierte TrueType fontene (.ttf) og OpenType fontene (.otf) på sidene sine. For å bruke egne fonter på websiden må de deklareres { font-family: DeliciousRoman; src: url(http://www.font-face.com/fonts/delicious/delicious-roman.otf); font-weight: 400; Og vi kan bruke denne fonten i et avsnitt på siden: p { font-family: DeliciousRoman, Helvetica, Arial, sans-serif; Den største grunnen til at webfonter ikke har tatt webben med storm er lisensspørsmål. Eierne av disse skrifttypene tillater rett og slett ikke slik bruk. Vi kan si at dette på sett og vis litt gammeldags tankegang. På sikt kan man kanskje tenke seg et felles lager der skrifttypene ligger gratis tilgjengelig på samme måte som Google sitt AJAX-bibliotek - 9

10 Mulighet for flere bakgrunner CSS3 tillater webutviklere å ha flere bakgrunner samtidig ved å definere de som en kommaseparert liste. La oss se på et enkelt eksempel med to bakgrunner: #eksempel { width: 500px; height: 250px; background-image: url(sheep.png), url(betweengrassandsky.png); background-position: center bottom, left top; background-repeat: no-repeat; Vi har definert høyde og bredde (height og width), to bilder for bakgrunn (background-image), plassering av bakgrunnsbildene (background-position) og om de skal gjentas eller ikke (backgroundrepeat). Dette vil stilsette og transformere følgende HTML-kode: <div id="eksempel">this box has background images, the first a sheep (aligned to the bottom and center) and the second is a grass and sky background (aligned to the top-left corner).</div> Til en ganske stilig boks på websiden: 10

11 Andre JavaScript-funksjoner JavaScript har også fått ny funksjonalitet knyttet til blant annet: Lokal lagring (web storage) En utvidelse av dagens cookies (informasjonskapsler). Cookies kan bare brukes til å lagre små tekststrenger, mens lokal lagring kan brukes til å lagre flere MB med data. Canvas Det introduseres et eget API for å tegne på et område på websiden enten i 2D eller 3D (WebGL). Device access Mulighet for å bruke JavaScript til å kommunisere med GPS, akselerometer og annen maskinvare på enheten. Webskjema Dette er temaer som vi tar opp i andre leksjoner senere i kurset. Andre CSS3-funksjoner Det finnes flere andre CSS3-moduler som tilbyr annen funksjonalitet enn den som er beskrevet her. En full oversikt over de viktigste modulene og deres status i forhold til å oppnå W3C anbefaling finner du på CSS3 er i likhet med HTML5 ikke ferdigutviklet og det gjelder derfor å teste funksjonaliteten du ønsker å bruke opp mot de plattformer, enheter og nettlesere du vil at websiden skal fungere på. 11

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

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

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

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

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

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

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

- reklamebannere mobil og tablet

- reklamebannere mobil og tablet Spesifikasjoner - reklamebannere mobil og tablet FINN.no Versjon 2.4 Sist oppdatert 16.08.2013 1. Innhold Innhold Introduksjon Målsetning Spesifikasjoner HTML Fysisk størrelse 225 px* Eksempler Størrelser

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

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

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

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

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

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

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

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

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

(X)HTML, CSS og JavaScript HTML. Det første dokumentet 26.11.2007. Grunnleggende programmering i Java Monica Strand 26. (X)HTML, CSS og JavaScript Grunnleggende programmering i Java Monica Strand 26. november 2007 Gr. leggende Java 26. november 2007 1 HTML HTML = Hyper Text Markup Language Strukturerer tekstinnhold HTML

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

1. Cascading Style Sheet (CSS)

1. Cascading Style Sheet (CSS) Avdeling for informatikk og e-læring, Høgskolen i Sør-Trøndelag Lene Hoff 18.7.2007 Lærestoffet er utviklet for faget LN515D XML Teknologi 1. Resymé: I denne leksjonen skal vi ta for oss CSS (Cascading

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

Mer om stiler og stilark. Layout. Litt Design

Mer om stiler og stilark. Layout. Litt Design Mer om stiler og stilark. Layout. Litt Design Webpublisering 13.09.2004 Webpublisering - HiO - Kirsten Ribu - 2004 1 I dag Struktur på hjemmesiden Mer om stiler Stiler og layout Litt om design og farger

Detaljer

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

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

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

1. Intro om SharePoint 2013

1. Intro om SharePoint 2013 Avdeling for informatikk og e-læring, Høgskolen i Sør-Trøndelag Intro om SharePoint 2013 Stein Meisingseth 09.08.2013 Lærestoffet er utviklet for faget LO205D Microsoft SharePoint 1. Intro om SharePoint

Detaljer

Oppsummering fra forelesning 2

Oppsummering fra forelesning 2 1 of 16 02.04.2015 15:42 Oppsummering fra forelesning 2 Lenker Lenker er, historisk sett, webens første eksistensberettigelse Lenker kan være relative (går til sider innenfor samme nettsted) eller absolutte

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

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

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

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

og bevegelse funksjoner som blir aktivert av hendelser Keyboard Informasjonsteknologi 2 Læreplansmål Gløer Olav Langslet Sandvika VGS

og bevegelse funksjoner som blir aktivert av hendelser Keyboard Informasjonsteknologi 2 Læreplansmål Gløer Olav Langslet Sandvika VGS Keyboard og bevegelse Gløer Olav Langslet Sandvika VGS 12.09.2012 Informasjonsteknologi 2 funksjoner som blir aktivert av hendelser Læreplansmål Eleven skal kunne programmere med enkle og indekserte variabler

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

Innføring i Dynamisk HTML

Innføring i Dynamisk HTML Innføring i Dynamisk HTML Her kommer en enkel innføring i dynamisk HTML (DHTML). DHTML er en webside (et web dokument) som kan endres etter at den er lastet inn i webleseren. Når brukeren fører musepekeren

Detaljer

Brukermanual til Domenia Norges adminløsning

Brukermanual til Domenia Norges adminløsning Brukermanual til Domenia Norges adminløsning 1. Login For å logge inn på løsningen din skriver du inn domenenavnet ditt og /siteadmin (f.eks www.domenia.no/siteadmin ). Skriv inn brukernavn og passord

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

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

Tilpassning av Wordpress - Enterprise Theme

Tilpassning av Wordpress - Enterprise Theme Del 2 - Tilpassning Tilpassning av Wordpress - Enterprise Theme Del 1 var en gjennomgang av hvordan man setter opp det tekniske som kreves for å kjøre en Wordpress webside/blogg. Installere webserver (Apache)

Detaljer

Stilark Cascading Style Sheets - CSS

Stilark Cascading Style Sheets - CSS Stilark Cascading Style Sheets - CSS /* Eksempel på stilark */ h1 { text-align: center; color: blue; } Læreboka kapittel 5 12. september 2007 INF1040-CSS-1 Boks-modellen Et XHTML-dokument er satt sammen

Detaljer

GEO2311. Obligatorisk Innlevering 1

GEO2311. Obligatorisk Innlevering 1 GEO2311 Obligatorisk Innlevering 1 STUDENTER: Kia Simonsen Morten Kappelslåen Gjøvik, 14.10.2015 Side 1 av 11 Innholdsfortegnelse Introduksjon... 3 Del 2 - HTML delen... 4 Del 2 - CSS delen... 9 Del 3

Detaljer

JS: Partikkel-animasjon Nybegynner

JS: Partikkel-animasjon Nybegynner JS: Partikkel-animasjon Nybegynner Web Introduction I denne oppgaven skal vi bruke JavaScript til å få figurer vi å bevege seg. Vi skal altså lære å animere ved hjelp av JavaScript og noe som heter Canvas.

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

file:///c:/users/michaelp/sites/dkdm/dw5/dreamweaver5_1.html

file:///c:/users/michaelp/sites/dkdm/dw5/dreamweaver5_1.html 1 of 10 09.04.2015 15:49 Fra forrige gang: Om tabeller Tabeller er i utgangspunktet en måte å presentere data på. Skal ikke brukes for å legge ut sider Dreamweaver har fasiliteter for å opprette, redigere

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

lagring med HTML5 Offline lagring Offline Informasjonsteknologi 2 Gløer Olav Langslet Sandvika VGS

lagring med HTML5 Offline lagring Offline Informasjonsteknologi 2 Gløer Olav Langslet Sandvika VGS Offline lagring med HTML5 Gløer Olav Langslet Sandvika VGS Leksjon 8 Informasjonsteknologi 2 Offline lagring I IT1 brukte vi databaser til å lagre data. Der kunne vi bygge tabeller og fylle dem med innhold

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

HTML5 og CSS3. - Fremtiden på web: struktur, semantikk og styling. christine.lund@evita.no. Yggdrasil, Tønsberg - 12.10.2010

HTML5 og CSS3. - Fremtiden på web: struktur, semantikk og styling. christine.lund@evita.no. Yggdrasil, Tønsberg - 12.10.2010 HTML5 og CSS3 - Fremtiden på web: struktur, semantikk og styling christine.lund@evita.no Yggdrasil, Tønsberg - 12.10.2010 Christine Lund Enterprise 2.0: konsulent, teamleder, fagansvarlig Kort introduksjon

Detaljer

Forprosjekt gruppe 13

Forprosjekt gruppe 13 Forprosjekt gruppe 13 Presentasjon Tittel: Oppgave: Periode: Gruppemedlemmer: Veileder: Oppdragsgiver: Kontaktperson: Mobilbillett i HTML5 Utvikle en mobil billettautomat innenfor kategorien dedikert web

Detaljer

Brukerdokumentasjon for LabOra portal - forfattere

Brukerdokumentasjon for LabOra portal - forfattere Brukerdokumentasjon for LabOra portal - forfattere Skin: Dnnbest-Grey-Skin1024 Skin: Metro7 Custom LabOra web-portal er et web-basert publiseringsprogram for publisering av informasjon på hjemmesider.

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

Farger Introduksjon Processing PDF

Farger Introduksjon Processing PDF Farger Introduksjon Processing PDF Introduksjon På skolen lærer man om farger og hvordan man kan blande dem for å få andre farger. Slik er det med farger i datamaskinen også; vi blander primærfarger og

Detaljer

Her er en enkel bruksanvisning på administrasjonspanelet til hjemmesiden din på QTSystems.

Her er en enkel bruksanvisning på administrasjonspanelet til hjemmesiden din på QTSystems. Her er en enkel bruksanvisning på administrasjonspanelet til hjemmesiden din på QTSystems. Redigert 10.februar 2010. For at det skal bli lettere å lese denne manualen kan du justere størrelsen på dette

Detaljer

Oblig 3 Webutvikling. Oppgave 1

Oblig 3 Webutvikling. Oppgave 1 Oblig 3 Webutvikling Oppgave 1 Ta for deg en selvvalgt bedrift (gjerne lokal/mindre) og tenk deg at du hadde fått i oppgave å være en SEOkonsulent for disse i én uke. På denne uken skulle du gjennomført

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

Li-Bjørk A/S på Web !" # $% $&"!' Studentoppgave. SY 241 Elektronisk Publisering. Prosjektrapport 2002. Avdeling for samfunn, næring og natur

Li-Bjørk A/S på Web ! # $% $&!' Studentoppgave. SY 241 Elektronisk Publisering. Prosjektrapport 2002. Avdeling for samfunn, næring og natur !" # $% $&"!' Studentoppgave SY 241 Elektronisk Publisering Prosjektrapport 2002 Avdeling for samfunn, næring og natur 0 Innholdsfortegnelse 1 FORMÅL OG BRUKSOMRÅDE...2 2 LOVER OG AVTALER...3 2.1 SAMARBEIDSAVTALE...3

Detaljer

www.lakselvdal.no Brukerkurs 16.februar 2012

www.lakselvdal.no Brukerkurs 16.februar 2012 Brukerkurs 16.februar 2012 Kort introduksjon til world wide web og struktur der. Forskjellige måter å lage seg en hjemmeside på. Hvordan vi i Lakselvdal gjør det. Og viktigst av alt, utdanne flere til

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

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

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

Styling og formatering av tekst

Styling og formatering av tekst Lesson 5 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. Styling og formatering

Detaljer

KRAVSPESIFIKASJON FORORD

KRAVSPESIFIKASJON FORORD KRAVSPESIFIKASJON FORORD Hensikten med kravspesifikasjonen er å gi oppdragsgiver og utviklere en enighet og forståelse av funksjonaliteten til applikasjonen som skal produseres. en definerer i tillegg

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

Administrering av SafariSøk

Administrering av SafariSøk Administrering av SafariSøk Administrering av SafariSøk Revisjonshistorie Revisjon $Revision: 1.6 $ $Date: 2003/08/05 12:44:02 $ Innholdsfortegnelse 1. Om programmet... 1 Generelt... 1 2. Fremgangsmåter...

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

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

En bedre verden med AJAX

En bedre verden med AJAX En bedre verden med AJAX Frode Eika Sandnes Hva er AJAX Har ikke noe med rengjøringsmidler å gjøre AJAX er et (morsomt) akronym Asynchronous Javascript And XML Henskikt: lage interaktive webapplikasjoner

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

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

Løpende strekmann Erfaren Videregående Python PDF

Løpende strekmann Erfaren Videregående Python PDF Løpende strekmann Erfaren Videregående Python PDF Introduksjon I denne oppgaven skal du lage et spill der du styrer en strekmann som hopper over hindringer. Steg 1: Ny fil Begynn med å lage en fil som

Detaljer

Presentasjon av hovedprosjekt ved HIST Nettbutikk www.midt-svartdal.no

Presentasjon av hovedprosjekt ved HIST Nettbutikk www.midt-svartdal.no Presentasjon av hovedprosjekt ved HIST Nettbutikk www.midt-svartdal.no Hovedprosjekt 2008 av Audun M. Solheim, student HIST/BAIN, audun@c2i.net Oppdragsgiver:Bjørg Minnesjord Solheim, bjorg@midt-svartdal.no

Detaljer

Tips og triks nettbrett (ios og Android) Kristiansand folkebibliotek

Tips og triks nettbrett (ios og Android) Kristiansand folkebibliotek Tips og triks nettbrett (ios og ) Kristiansand folkebibliotek Hva er nettbrett?... 2 ipad... 3... 3 App er... 4 Sikkerhet... 9 Tilpassing...10 Oppdatering...10 Praktiske ting...10 Sikkerhetskopiering...12

Detaljer

Tell sekunder. Steg 0: Hva er forskjellig fra før? Introduksjon. I denne oppgaven skal vi lage vårt eget spill!

Tell sekunder. Steg 0: Hva er forskjellig fra før? Introduksjon. I denne oppgaven skal vi lage vårt eget spill! Tell sekunder Erfaren Elm Introduksjon I denne oppgaven skal vi lage vårt eget spill! Vi lært mye allerede! Her er en oppsummering: Verktøy til Elm-utvikling: Bruke Try Elm til å lage programmer Bruke

Detaljer

Denne brukerguiden beskriver hvordan man går frem for å spille simuleringen T2 - Bli Kjent i nettleser.

Denne brukerguiden beskriver hvordan man går frem for å spille simuleringen T2 - Bli Kjent i nettleser. Brukerguide T2 - Bli Kjent Denne brukerguiden beskriver hvordan man går frem for å spille simuleringen T2 - Bli Kjent i nettleser. Innhold Spille simuleringen i nettleser (PC og MAC)...2 Spille simuleringen

Detaljer

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

CSS. Animasjon med css. Animasjon med. Informasjonsteknologi 1 og 2. Gløer Olav Langslet Sandvika VGS

CSS. Animasjon med css. Animasjon med. Informasjonsteknologi 1 og 2. Gløer Olav Langslet Sandvika VGS Animasjon med CSS Gløer Olav Langslet Sandvika VGS Leksjon 11 Informasjonsteknologi 1 og 2 Animasjon med css Vi har tidligere sett at vi kan programmere bevegelse ved å bruke JavaScript, enten ved å bruke

Detaljer

HØGSKOLEN I SØR-TRØNDELAG

HØGSKOLEN I SØR-TRØNDELAG HØGSKOLEN I SØR-TRØNDELAG Avdeling for informatikk og e-læring - AITeL Kandidatnr: Eksamensdato: 11. mai 2004 Varighet: Fagnummer: Fagnavn: Klasse(r): 3 timer LV197D Webprogrammering med PHP FU Studiepoeng:

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

Innstallasjon og oppsett av Wordpress

Innstallasjon og oppsett av Wordpress Del 1 - Installasjon og oppsett Innstallasjon og oppsett av Wordpress Wordpress har blitt en veldig populær publiseringsplattform for websider. Uten særlige tekniske ferdigheter kan man sette opp profesjonelle

Detaljer

Artist webside. Gruppe medlemmer Joakim Kartveit. Oppdragsgiver Tetriz Event & Management. Frode Mathiesen. Gry Anita Nilsen.

Artist webside. Gruppe medlemmer Joakim Kartveit. Oppdragsgiver Tetriz Event & Management. Frode Mathiesen. Gry Anita Nilsen. Artist webside Innhold Artist webside...1 Gruppe medlemmer...1 Oppdragsgiver...1 Kontaktperson...2 Veileder...2 Oppgaven...2 Muligheter...2 Sammendrag...2 Dagens situasjon...2 Mål og rammebetingelser...3

Detaljer

KOM I GANG MED WORDPRESS En enkel guide for å hjelpe deg gjennom det grunnleggende i Wordpress

KOM I GANG MED WORDPRESS En enkel guide for å hjelpe deg gjennom det grunnleggende i Wordpress KOM I GANG MED WORDPRESS En enkel guide for å hjelpe deg gjennom det grunnleggende i Wordpress Sist oppdatert 05.06.2015 Innholdsfortegnelse 1. Hva er Wordpress?... 3 2. Hvordan logger jeg inn i kontrollpanelet?...

Detaljer

GUI/ SYSTEM DESIGNHÅNDBOK. Versjon 1.0 December 2014

GUI/ SYSTEM DESIGNHÅNDBOK. Versjon 1.0 December 2014 GUI/ SYSTEM DESIGNHÅNDBOK Versjon 1.0 December 2014 GUI designmanual Innhold Her beskrives layout og grafisk profil for systemer og tjenester i Landbruksdirektoratet. Designmanualen er utarbeidet av Ciber

Detaljer

Produktdokumentasjon. Madison Møbler Administrasjonsside og Nettbutikk

Produktdokumentasjon. Madison Møbler Administrasjonsside og Nettbutikk Produktdokumentasjon Madison Møbler Administrasjonsside og Nettbutikk 1 1. Forord 1.1 Dokumentasjonen Dette er en teknisk dokumentasjon på produktet som er utviklet. Denne er tiltenkt personer med teknisk

Detaljer

BORRENYTT. Dette er en innføringsguide om hvordan man kan legge til nye poster, og hvordan disse bør settes opp.

BORRENYTT. Dette er en innføringsguide om hvordan man kan legge til nye poster, og hvordan disse bør settes opp. Dette er en innføringsguide om hvordan man kan legge til nye poster, og hvordan disse bør settes opp. I denne guiden skal jeg ta for meg hvordan man kan legge til eller endre tekst, opprette nyheter og

Detaljer

Installasjon av Nett-TV-meter Trinn for trinn

Installasjon av Nett-TV-meter Trinn for trinn Installasjon av Nett-TV-meter Trinn for trinn Nett-TV-meter tilpasset for Windows og OS X (Mac). I dette dokumentet finner du fremgangsmåten for installasjonen av Nett-TV-meter. I e-posten du/dere har

Detaljer

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

Utseende. Lauri Watts Oversettelse: Bjørn Steensrud

Utseende. Lauri Watts Oversettelse: Bjørn Steensrud Lauri Watts Oversettelse: Bjørn Steensrud 2 Contents 1 Utseende 4 1.1 Generelt........................................... 4 1.2 Skrifter............................................ 4 1.3 Stilsett............................................

Detaljer

S y s t e m d o k u m e n t a s j o n

S y s t e m d o k u m e n t a s j o n S y s t e m d o k u m e n t a s j o n Monitorering av produksjonsløyper ved Nasjonalbiblioteket - Project BAKE Utarbeidet av: Einar Wågan Kristian Akerhei Studium: Informasjonssystemer Innlevert: 26.5.2015

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

Komme igang med App Inventor Introduksjon App Inventor PDF

Komme igang med App Inventor Introduksjon App Inventor PDF Komme igang med App Inventor Introduksjon App Inventor PDF Introduksjon Dette er en introduksjon til MIT App Inventor, hvor du skal lære å lage applikasjoner til Android. Å lage apps i App Inventor er

Detaljer

EKSAMEN. Webutvikling Dato: ITF10511. Eksamenstid: 25/11-2013. 09.00-13.00 Hjelpemidler: Faglærer: Ingen. Tom Heine Nätt

EKSAMEN. Webutvikling Dato: ITF10511. Eksamenstid: 25/11-2013. 09.00-13.00 Hjelpemidler: Faglærer: Ingen. Tom Heine Nätt EKSAMEN Emnekode: Emne: ITF10511 Webutvikling Dato: Eksamenstid: 25/11-2013 09.00-13.00 Hjelpemidler: Faglærer: Ingen Tom Heine Nätt Eksamensoppgaven: Oppgavesettet består av 7 sider inkludert denne forsiden,

Detaljer

Mange nye og kule tips til utvikling av dine E-Site websider!

Mange nye og kule tips til utvikling av dine E-Site websider! Interkodex AS, Ravnsborgveien 33, 1395 Hvalstad, Norway Nyhetsbrev E-Site mai 2011 Mange nye og kule tips til utvikling av dine E-Site websider! jquery, CSS 3 + HTML5, E-Site 3.2.4, E-Site 4.0 Side 1 av

Detaljer

Vanlige spørsmål om EndNote (april 2013)

Vanlige spørsmål om EndNote (april 2013) Vanlige spørsmål om EndNote (april 2013) Her er svar på en del vanlig spørsmål og problemer som kan dukke opp når du arbeider med EndNote. Innhold Import av referanser... 1 Hvis EndNote låser seg:... 2

Detaljer

Rammer. Mer om Javascript

Rammer. Mer om Javascript Rammer. Mer om Javascript LO130A Kirsten Ribu 11.10.2004 Kirsten Ribu - HiO - LO 130 A 1 I dag Om rammer (Frames) Mer om Javascript Kirsten Ribu - HiO - LO 130 A 2 Innledende om rammer (Frames) Med rammer

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

Side 1. Sniggabo CMS brukermanual rev. 2

Side 1. Sniggabo CMS brukermanual rev. 2 Side 1 Sniggabo CMS brukermanual rev. 2 INNHOLDSFORTEGNELSE Logg inn... 3 Menylinje... 3 Artikkelliste... 4 Ny artikkel... 5 Aktiviteter... 8 Rediger aktivitet... 9 Dokumenter... 9 Nytt dokument... 10

Detaljer

Installasjon InfoMediaPlayer:

Installasjon InfoMediaPlayer: Installasjon InfoMediaPlayer: InfoMediaPlayer lastes ned fra: https://dl.dropboxusercontent.com/u/81046462/5.5.42.exe Dette er en executable RAR fil, så kjør filen og sett C:\InfoMedia som bane for utpakking.

Detaljer

Importere referanser fra databaser

Importere referanser fra databaser Importere referanser fra databaser Databaser EndNote Sist oppdatert 19. november 2014 1 Innhold 1. Importere referanser... 3 1.1. Apple/IOS... 3 2. Importere referanser fra Oria... 4 3. Importere referanser

Detaljer

Antall oppgaver: 6. Alle trykte og skrevne hjelpemidler

Antall oppgaver: 6. Alle trykte og skrevne hjelpemidler "..{ ~ høgskolen i oslo t:mne:--dtstribuerte informasjonssystemer Emnekode:SO I 34A ~,6ruppe(r):3AA.3AB,3AC,3AD,3AE,3Af I Dato:08. I 2.2003 Faglig veileder: Frode Eika Sandnes Eksamenstid:9-14 Eksamensoppgaven

Detaljer

Hvordan bruke Hageselskapets muligheter for levende bokmerker (RSS)?

Hvordan bruke Hageselskapets muligheter for levende bokmerker (RSS)? Hvordan bruke Hageselskapets muligheter for levende bokmerker (RSS)? Av Ole Petter Vik, Asker Versjon 2.3-24.02.2012 RSS (Really Simple Syndication, på norsk Levende bokmerker) er en metode informasjonsutgivere

Detaljer

Oblig 4 Webutvikling. Oppgave

Oblig 4 Webutvikling. Oppgave Oblig 4 Webutvikling Oppgave Lag din egen Wordpress- site der du tester ut CMS- systemet. Det å lage egne templates fra bunnen kan være noe komplisert, så det holder for dette prosjektet om dere modifiserer

Detaljer