HTML5 og CSS3. - Fremtiden på web: struktur, semantikk og styling. christine.lund@evita.no. Yggdrasil, Tønsberg
|
|
|
- Oddbjørg Enoksen
- 8 år siden
- Visninger:
Transkript
1 HTML5 og CSS3 - Fremtiden på web: struktur, semantikk og styling christine.lund@evita.no Yggdrasil, Tønsberg
2 Christine Lund Enterprise 2.0: konsulent, teamleder, fagansvarlig
3
4 Kort introduksjon til dagens WEB TEKNOLOGIER
5
6 1991: HTML 1994: HTML : CSS 1 + JavaScript 1997: HTML : HTML : CSS : XHTML : Tableless Web Design 2005: Ajax 2005: CSS3 2009: HTML 5 6
7 <innhold> HTML5 </innhold>
8 HTML5 NYE ELEMENTER <header>, <nav>, <article>, <section>, <aside>, <footer> <figure> <canvas> <audio> & <video> FORMS JS APIs DRAG & DROP GEOLOCATION STORAGE 8
9 HTML5: NYE ELEMENTER
10 <header>, <nav>, <article>, <section>, <aside>, <footer> Nye elementer som lar oss bygge opp siden på en enklere måte en tidligere Før HTML5 brukte man <div> tags for å strukturere opp siden, nå har man egne logiske elementer Søkemotoroptimalisering Tilgjengelighet <body> <header>...</header> <nav>...</nav> <article> <section>... </section> </article> <aside>...</aside> <footer>...</footer> </body> <hgroup>, <time>, <mark> 10
11 <body> <header>...</header> <nav>...</nav> <article> <section>... </section> </article> <aside>...</aside> <footer>...</footer> </body> <section> <h1>level 1</h1> <section> <h1>level 2</h1> <section> <h1>level 3</h1> </section> </section> </section> 11
12 <figure> <figure> <img src="shocked_woman.jpg" /><br /> <figcaption>this woman is shocked or maybe surprised.</figcaption> </figure> 12
13 <canvas> iphone Android API for å kunne tegne grafiske elementer rett i nettleseren Canvas er et rektangel i nettsiden hvor du kan benytte JavaScript for å tegne det du måtte ønske i siden WebGL IE7+: explorercanvas library DEMO <canvas id="canvas" width="150" height="150"></canvas> <script type="application/x-javascript"> function draw() { var canvas = document.getelementbyid("canvas"); if (canvas.getcontext) { var ctx = canvas.getcontext("2d"); ctx.fillstyle = "rgb(40,0,0)"; ctx.fillrect (20, 20, 65, 60); ctx.fillstyle = "rgba(0, 0, 160, 0.5)"; ctx.fillrect (40, 40, 65, 60); } } </script>... moveto(x,y) lineto(x,y) stroke();... 13
14 <audio> & <video> iphone Android Enklere bruk av multimedia elementer i nettsidene Opera, Chrome og Firefox støtter Ogg Theora video formatet, mens Safari, Chrome, iphone og Android støtter H.264. I fremtiden vil de fleste nettlesere støtte WebM <audio src='sound.mp3' controls /> <video width='600px' src='video.mp4' id='my_video' loop autoplay controls /> Opera, Chrome og Firefox støtter Vorbis audio formatet, mens Safari, Chrome, iphone og Android støtter AAC+MP4 For å kunne vise video på tvers av alle plattformer må man ha video på flere format! DEMO 14
15 HTML5: FORMS
16 FORMS placeholder tekst Kunne foreslå tekst i et inputfelt autofocus Sette fokus på et gitt felt i skjemaet Sjekk på om feltet er en gyldig e-post adresse url Sjekk på om feltet er en gyldig url range Sjekk på at verdien er innenfor et gitt intervall color Komponent som lar brukeren velge en farge og returnerer hex-verdien til fargen datetime Komponent som lar brukeren velge dato og tid DEMO 16
17 HTML5: JS APIs
18 JS APIs Drag & Drop Geolocation Storage 18
19 DRAG & DROP We need: Something to drag A drop target JavaScript event handlers on the target to tell the browser it can drop DEMO 19
20 GEOLOCATION Lar brukeren dele sin lokasjon med nettsteder man stoler på iphone Android Basert på IP adresse, trådløs nettverksforbindelse, basestasjon for telefon, GPS (mobil) Lengdegrad og breddegrad er tilgjengelig for JavaScript i siden altitude, accuracy, altitudeaccuracy, heading, speed User Agents must not send location information to Web sites without the express permission of the user DEMO 20
21 STORAGE Local storage (Web storage, DOM storage) Session storage (variant of Local storage) Database storage (SQL storage) DEMO 21
22 SESSION STORAGE iphone Android Mer plass å lagre data på enn 4KB (hvor mye er nettleser spesifikt) Data sende ikke automatisk på hvert HTTP request, men man kan styre hvilke key/value par som skal sendes Data er knyttet til vindu/tab hvor disse ble opprettet, dvs. hvert vindu/tab har sitt eget sesjonsobjekt Benyttes for å lagre data viktig for denne sesjonen, siden data fjernes når man lukker vinduet SESSION STORAGE sessionstorage.setitem('fullname', 'Chris Lund'); // defining the session variable alert("your name is: " + sessionstorage.getitem('fullname')); // accessing it alert("hello " + sessionstorage.fullname); // another way of accessing the variable sessionstorage.removeitem('fullname'); // finally unset it 22
23 LOCAL STORAGE iphone Android Funksjonelt sett lik session storage, men forskjellig persistence og scope Persistence: benyttes for å lagre data over lang tid (dvs. utover denne sesjonen), data lagres selv om vindu/tab lukkes Scope: data er tilgjengelig i alle åpne vindu/tabs LOCAL STORAGE localstorage.setitem('fullname', 'Chris Lund'); // defining the localstorage variable alert("your name is: " + localstorage.getitem('fullname')); // accessing it alert("hello " + localstorage.fullname); // another way of accessing the variable localstorage.removeitem('fullname'); // finally unset it 23
24 DATABASE STORAGE iphone Benytter SQLite database Ikke key/value, men en faktisk database Benyttes dersom man har store mengder data som må lagres var database = opendatabase("database Name", "Database Version"); database.executesql("select * FROM test", function(result1) { // do something with the results database.executesql("drop TABLE test", function(result2) { // do some more stuff alert("my second database query finished executing!"); }); }); 24
25 <presentasjon> CSS3 </presentasjon>
26 CSS3 COLOR BACKGROUNDS BORDERS TEXT & SPEECH TRANSFORMATION 26
27 CSS3: COLOR, BACKGROUNDS & BORDERS
28 COLOR Opacity Kunne justere opacity for presentasjonen av et gitt element Parameteret tar en verdi fra 0.0 til 1.0 (0.0 er helt transparent, 1.0 er ikke transparent) RGBA Color Lik RGB definisjonen, men tar et fjerde parameter som definerer alpha verdien til fargen Parameteret tar en verdi fra 0.0 til 1.0 HSL/A Color HSL står for hue (kulør), saturation (fargemetning), lightness (valør). Kulør er en grad/punkt i en fargesirkel, fargemetning er et tall angitt i prosent og valør er et tall angitt i prosent HSL/A er lik HSL definisjonen, men tar et fjerde parameter som definerer alpha verdien til fargen Parameteret tar en verdi fra 0.0 til 1.0 DEMO (gradients) 28
29 BACKGROUNDS background-size Definerer størrelsen på bakgrunnsbildet som benyttes background-image (multiple bakckground images) Tillater at man kan spesifisere flere bilder som en del av bakgrunnsbildet på et element background-clip Avgjør om bakgrunnsbildet legger seg under border eller inntil border background-clip: border-box; (under) background-clip: padding-box; (inntil) background-origin Avgjør hvordan background-position kalkuleres border-box, padding-box, content-box DEMO (multiple background images) 29
30 BORDERS border-color (kun Firefox) Gjør at man kan spesifisere flere farger på kantene (borders) til et element border-image Tillater oss å benytte bilder som borders på et element Man definerer hvilken del av bildet som skal brukes på kantene, og hvilken del av bildet som skal repeteres over innholdet i elementet 30
31 BORDERS border-radius Gir runde hjørner på elementet basert på oppgitt radius (piksler) Runde hjørner kan benyttes på alle hjørnene eller man kan spesifisere enkelte hjørner box-shadow Viser elementet med en «drop-shadow» Første parameter er horisontal offset, andre parameter er vertikal offset, tredje parameter er blur radius og fjerde parameter er fargen som skal benyttes 31
32 CSS3: TEXT & SPEECH
33 TEXT text-shadow Viser teksten med en «drop-shadow» Første parameter er horisontal offset, andre parameter er vertikal offset, tredje parameter er blur radius og fjerde parameter er fargen som skal benyttes text-overflow Definerer presentasjonen av teksten dersom teksten går utenfor det definerte området text-overflow: ellipsis; text-overflow: clip; text-overflow: word; word-wrap Tillater at vi kan bryte lange ord slik at deler av ordet vises på neste linje word-wrap: break-word; 33
34 Gir oss muligheten til å importere forskjellige fonter som vi deretter kan bruke i font-family deklarasjonen <style type="text/css"> } body {font-family: Courier New; font-size: { font-family: "Kimberley"; src: url(kimberle.ttf) format("truetype"); h1 { font-family: "Kimberley", sans-serif } </style> Eksempel: 34
35 TEXT column-width Definerer width på hver kolonne column-gap Definerer padding mellom kolonnene column-count Definerer antall kolonner column-rule Definerer en border mellom kolonnene 35
36 TEXT 36
37 TEXT -webkit-column-count: 3; -webkit-column-rule: 1px solid black; -webkit-column-gap: 2em; -webkit-column-width: 14em; -moz-column-count: 3; -moz-column-rule: 1px solid black; -moz-column-gap: 2em; -moz-column-width: 14em; 37
38 SPEECH voice-volume silent x-soft soft medium loud x-loud voice-balance left center right leftwards rightwards voice-rate x-slow slow medium fast x-fast voice-family male female voice-pitch x-low low medium high x-high speak normal spell-out digits cue-after dong.wav DEMO 38
39 CSS3: TRANSFORMATION
40 2D TRANSFORMATION translate Flytter elementet angitt lengde langs hver av aksene Verdiene kan angis i px, em, prosent osv. skew Skrå elementet rundt x- og y-aksen basert på angitte grader Dersom det kun oppgis en verdi antas det at verdien for y- aksen er 0 scale Skalerer elementet ihht. angitte verdier for x- og y-aksen Dersom kun en verdi oppgis, benyttes verdien for begge aksene rotate Roterer elementet et antall definerte grader Rotasjonen påvirker ikke layout på siden, elementet handteres på samme måte som ved position: relative; 40
41 3D TRANSFORMATION & ANIMATIONS Støttes kun av Webkit 3D TRANSFORMATION: ANIMATIONS:
42 BROWSER PREFIXES Firefox: -moz-box-shadow Safari: -webkit-box-shadow Opera: -o-box-shadow IE: -ms-box-shadow 42
43 ... så, hva nå? 43
44 KAN VI BRUKE HTML5 OG CSS3 IDAG? JA, og nei... Dersom du ønsker å lage websider som har rik funksjonalitet og som er tilgjengelig, ta i bruk HTML5 + CSS3 + JavaScript idag Men det å bruke en standard som er under utvikling krever at man følger med på spesifikasjonen fra W3C og hva som til enhver tid støttes i de forskjellige nettlesere (og husk at ting kan endre seg etterhvert) Regn med å måtte implementere fallback rutiner for nettlesere som ikke støtter ønsket funksjonalitet 44
45 FLERE EKSEMPLER OG NYTTIGE LENKER Lego Star Wars ( Sports Illustrated ( Tweetdeck
46 SPØRSMÅL? SVAR! 46
47 TAKK FOR OPPMERKSOMHETEN Ha en fortsatt fin dag! 47
Innovative intranett sosialt, mobilt, brukervennlig og funksjonelt
Innovative intranett sosialt, mobilt, brukervennlig og funksjonelt christine.lund@evita.no http://twitter.com/christinelund76 http://no.linkedin.com/in/christinelund Yggdrasil, Tønsberg - 18.10.2011 Christine
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,
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
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
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
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:
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
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
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
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
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
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)
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
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
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
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
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
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
- 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
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
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
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å
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
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
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
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
Håkon Tolsby Håkon Tolsby
HTML5 og CSS Håkon Tolsby 27.08.2018 Håkon Tolsby 1 En webside min webside en html5 side dett er min første
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
Dynamiske websider med JavaScript og CSS3
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
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
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
Høgskolen i Telemark EKSAMEN Webpublisering (inkludert denne) Hjelpemiddel: Ingen
Høgskolen i Telemark Fakultet for allmennvitenskapelige fag EKSAMEN 6101 Webpublisering 05.12.2013 Tid: Målform: Sidetal: 3 timer Bokmål 7 (inkludert denne) Hjelpemiddel: Ingen Merknader: Alle oppgavene
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.
Bildebehandling i GIMP
Bildebehandling i GIMP 9.1 Opprette et dokument & 9.2 Bildestørrelse For å opprette et nytt dokument velger du File > New (Fil > Ny...) Da vil følgende vindu dukke opp: Her er bildets oppløsning satt til
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
(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
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
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
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 ;-)
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
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
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å
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
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
Lyd og video på nettsider
Lesson 8 Lyd og video på nettsider 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
SENSORVEILEDNING. Dato: Eventuelt:
SENSORVEILEDNING Emnekode: ITF10511 Emnenavn: Eksamensform: Webutvikling Digital Dato: 03.12.2018 Faglærer(e): Michael A. Lundsveen Eventuelt: Læringsutbytte for emnet KUNNSKAP: Studenten kan forstå nettsteders
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
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
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
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
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
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
Oblig 3 Webutvikling
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 SEO-konsulent for disse i én uke. På denne uken skulle du gjennomført
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
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
"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
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
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
Agenda. Data og grenser Kontekster XSS XSS og kompliserende kontekster Injection attacks Beskyttelse OWASP
Når data krysser grenser Erlend Oftedal, BEKK Knut Vidar Siem, Objectware Communities in Action 10. mai 2010 Copyright The OWASP Foundation Permission is granted to copy, distribute and/or modify this
Oppsummering - Kurset (10/11-2015)
Oppsummering - Kurset (10/11-2015) Grunnleggende HTML... 1 Basic JavaScript... 2 Variabler:... 3 Operatorer:... 4 Klikkhendelser... 5 Kontrollstrukturer... 5 Valgsetninger... 5 Betingelser/påstander...
Compello Invoice Approval
Compello Invoice Approval Godkjenning Webmodul brukerdokumentasjon Nettbrett og desktop via nettleser Index 1 Innledning... 3 2 Funksjonalitet... 4 Nettbrett og desktop via nettleser... 4 2.1.1 Desktop
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
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
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
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
Om LifeVision CMS. Enklere og mer profesjonelt enn dette blir det ikke!
Om LifeVision CMS Med LifeVisions brukervennlige og intuitive drag and drop CMS løsning er du ett steg inn i fremtiden. Det er ikke lenger nødvendig å kunne programmere og kode for å bygge mobilsider.
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
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
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
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
Web-tjenester for presentasjon av sportsdata (fotball). v. 3.0, 23/2/2014
BRUKERVEILEDNING Web-tjenester for presentasjon av sportsdata (fotball). v. 3.0, 23/2/2014 Innholdsfortegnelse 1 Innledning... 3 1.1 Abonnement... 3 1.2 Begrensninger i bruk av tjenestene... 3 1.3 Tekniske
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.
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
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
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
Skrevet av: Oppgaven er laget av GDG Bergen ( AU/GDGBergen/), og tilpasset Kodeklubbens format på oppgaver.
Space invaders Skrevet av: Oppgaven er laget av GDG Bergen (https://www.meetup.com/en- AU/GDGBergen/), og tilpasset Kodeklubbens format på oppgaver. Oversatt av: Teodor Heggelund og Stein Olav Romslo Kurs:
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
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
<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
FluentAutomation. Et automatiserings-rammeverk for regresjonstesting (og mye annet! )
FluentAutomation Et automatiserings-rammeverk for regresjonstesting (og mye annet! ) Om meg Thomas Fjelde Krog, thomas.fjelde.krog@bouvet.no Bor på Jørpeland Ansatt i Bouvet siden mars 2012 Utvikler i
HTML5 og CSS. Webdesign med Dreamweaver. Glemmen vgs - Medier og kommunikasjon 1. januar Arly Dale 2013 Side 1
Webdesign med Dreamweaver Glemmen vgs - Medier og kommunikasjon 1. januar 2013 Arly Dale 2013 Side 1 Strukturere layout på en webside Layouten på en webside kan organiseres på forskjellige måter. Tidligere
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
INF1040 Oppgavesett 2: Nettsider og XHTML
INF1040 Oppgavesett 2: Nettsider og XHTML (Kapittel 4) Fasitoppgaver Ingen fasitoppgaver denne gang. Se flervalgsoppgavene under. Flervalgsoppgaver I følgende oppgaver er det oppgitt fem alternativer der
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
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
JS: Trykkomania Nybegynner Web Lærerveiledning
JS: Trykkomania Nybegynner Web Lærerveiledning Introduksjon Denne oppgaven viser deg hvordan du kan lage et spill med JavaScript og dele det med vennene dine. Spillet kalles Trykkomania fordi det handler
www.slektshistorielaget.no og Java
www.slektshistorielaget.no og Java Versjon 3, 6 september 2015 G. Thorud Her beskrives konfigurering av Java på Windows 7, 8.0 og 8.1 for å bruke databaser på www.slektshistorielaget.no Windows 10 Oppskriften
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
Web Accessibility Toolbar. Struktur. Funksjonene. Headinger. Mer om tilgjengelighet og Flash.
Web Accessibility Toolbar Mer om tilgjengelighet og Flash. Kirsten Ribu 16.10.2007 HiO Virker bare i Internet Explorer for Windows Alternativ: Web Developer Toolbar for Firefox har lignende funksjonalitet
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
Klask-en-Muldvarp. Steg 1: Gjøre klart spillbrettet. Sjekkliste. Introduksjon
Klask-en-Muldvarp Introduksjon App Inventor Introduksjon I denne oppgaven skal vi lage et veldig enkelt spill med litt animasjon. Det som skal skje er at en muldvarp hopper rundt på spillbrettet mens du
HTML: Legg til lyd og video
HTML: Legg til lyd og video Skrevet av: Oversatt fra Code Club UK (//codeclub.org.uk) Oversatt av: Trude Martinsen Kurs: Web Tema: Tekstbasert, Nettside Fag: Programmering, Teknologi, Norsk Klassetrinn:
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
Sikkerhet og internett
Sikkerhet og internett Kan vi være vi trygge? Kan vi beskytte oss? Bør vi slå av nettet Stoler du på denne mannen? 25.01.2008 Om sikkerhet på Internettet ved Hans Nordhaug 2 1 Nei? Og likevel er du på
Tema Guide for PHP-Fusion v6.01.
1 av 12 18.08.2007 20:47 Tema Guide for PHP-Fusion v6.01 Publisert av sveinungs den 18. august 2007 13:29 Tema Guide for PHP-Fusion v6.01. Sist oppdatert: 18-08-2007 Innhold: Innledning Theme.php Endre
EKSAMEN. Noen spørsmål kan besvares som punktlister. Prøv her å strukturere svaret slik at hvert punkt omhandler ett tema/element.
EKSAMEN Høgskoleni østfold Emnekode: Emnenavn: ITF10511 Webutvikling Dato: Eksamenstid: 29/11-2016 09.00 13.00 Hjelpemidler: Faglærer: Ingen Michael A. Lundsveen Om eksamensoppgaven og poengberegning:
TELEMARKSPORTENS KALDE KRIG HAUTE COUTURE I LONDON GLOBAL TRENDETTERRETNING. 26. oktober 2007
26. oktober 2007 TELEMARKSPORTENS KALDE KRIG HAUTE COUTURE I LONDON GLOBAL TRENDETTERRETNING D2 PRISER OG FORMATER FOR 2008 1. Oppslag (560mm x 350mm ) Kr. 200.000,- eks. mva. 2. Oppslag (560mm x 350mm)
BEDRIFTENS NETTSIDE 24. NOVEMBER 2016
BEDRIFTENS NETTSIDE 24. NOVEMBER 2016 Introduksjon Del 1: En liten ordbok Del 2: Planlegg nettsiden Del 3: Publisering av nettsiden Del 4: Markedsføring av nettsiden MUNCH DESIGN Munch design Christine
EKSAMEN. Elektronisk publisering. INNFØRING MED PENN, evt. trykkblyant som gir gjennomslag
Høgskolen i Gjøvik KANDIDATNUMMER: EKSAMEN FAGNAVN: FAGNUMMER: Elektronisk publisering L101G EKSAMENSDATO: 04.01.01 KLASSE: TID: FAGLÆRER: ANTALL SIDER UTLEVERT: TILLATTE HJELPEMIDLER: 99hinga/b, 99hdmua/b
Labquality/NKK ELEKTRONISK RESULTATSKJEMA VIA INTERNET. Åpning av skjemaet. Logg inn på Participant services. Velg resultatskjemaet
ELEKTRONISK RESULTATSKJEMA VIA INTERNET Åpning av skjemaet Logg inn på Participant services 1. Åpne internett leseren din (IE7 eller senere er den mest egnede nettleseren) 2. Skriv i adressefeltet: http://www.labquality.fi