Javascript. Mer om layout
|
|
- Noah Johansen
- 7 år siden
- Visninger:
Transkript
1 Javascript. Mer om layout Kirsten Ribu Kirsten Ribu - Webpublisering - HiO
2 Men først. Hvordan går det med klasser og blokker? Hjalp det med mailene? Litt mer om klasser og blokker ;-) Kirsten Ribu - Webpublisering - HiO
3 Klasser Hvorfor bruke egendefinerte klasser (class): Ofte vil man angi en stil som bare skal brukes på utvalgte steder i dokumentet. Det kan også være at man vil angi et bestemt utseende på en spesiell del av teksten. Da kan man bruke egendefinerte klasser. Eksempel:.min-tekst { color: #909000; backgroundcolor: #000000; font-weight: bold; fontfamily: Arial; } Kirsten Ribu - Webpublisering - HiO
4 Klasser forts. Klassen angis med et selvvalgt navn, her 'min-tekst', og innledes med punktum. Så skriver man stilene inn i parantesene som vanlig Når klassen skal brukes, angir man dette inne i en eksisterende tagg. Feks slik: <p class="min-tekst"> Her kommer teksten</p> Legg merke til at her brukes ikke punktumet! Kirsten Ribu - Webpublisering - HiO
5 Eksempel sering2004/eksempler/klasser.htm Kirsten Ribu - Webpublisering - HiO
6 Blokker Blokker = Egendefinerte inndelinger. Man angir formattering på en del av dokumentet med taggene <div>... </div> div = forkortelse for division, eller del, som avgrenser et rektangulært område av dokumentet. Inne i dette kan man da ha avsnitt, overskrifter, bilder osv. Kirsten Ribu - Webpublisering - HiO
7 Div Man _må _ ikke sette et klassenavn på alle blokker, (div), men bruken av class (og id) er et kraftigere virkemiddel Det holder å skrive <div> for å dele opp siden i avsnitt (deler = blokker) <div> sørger da for at innholdet starter på en ny linje (som <p>) ellers ingenting Kirsten Ribu - Webpublisering - HiO
8 Eksempler: Enkel blokk med bare <div>.. </div> Større blokker med klasser: Kirsten Ribu - Webpublisering - HiO
9 Med bruk av klasser i <div>: div.tittel1 {font-size: 100pt; background: green; color: #ccccdd; font-family: "Times New Roman"; text-align: center} div.tittel2 {font-weight: bold; font-size: 36pt; color: #000066; font-style: italic; font-family: "Courier New"; background-color: red; textalign: center} Kirsten Ribu - Webpublisering - HiO
10 Koden forts. <body> <h1>blokk-eksempler</h1> <!-- Her kommer blokken tittel1 --> <div class=tittel1>min første blokk</div> Her plasseres tekst inne i den første blokken, tittel1. <!-- Her kommer blokken tittel2 --> <div class=tittel2>min andre blokk</div> Her plasseres tekst inne i den andre blokken, tittel2. </body> Kirsten Ribu - Webpublisering - HiO
11 Fonter på web Man kan ikke være sikker på at fontene man velger er de som alltid blir vist Nettlesere viser fonter forskjellig, dvs. ikke alle fonter vil kunne vises i alle nettlesere Kirsten Ribu - Webpublisering - HiO
12 Font-familer For å være på den sikre siden spesifiserer man flere fonter Da velger man en gruppe fonter, slik at nettleseren har noe å velge mellom Disse fontene ligner hverandre For å prøve å styre nettleseren kan man legge til en generell font-stil, for eksempel: serif, sans-serif, fantasy Kirsten Ribu - Webpublisering - HiO
13 Eksempel på stil med fonter h1,h2 {font-family: Arial Black, Helvetica Bold, sans-serif} p {font-family: Verdana, Helvetica, sansserif} Font-familien må skrives i anførselstegn : Arial Black Verdana Times New Roman Kirsten Ribu - Webpublisering - HiO
14 Skriftutseende - Fet skrift Font-weight: bold Eller bolder / lighter for å gjøre enda fetere / mindre fet enn bold Ta bort fet: skriv: font-weight: normal Kirsten Ribu - Webpublisering - HiO
15 Kursiv og understreket Font-style: italic Text-decoration: underline, linethrough Eksempel Kirsten Ribu - Webpublisering - HiO
16 Font-størrelse font-size: 16px, 16 pt Eller Small, medium, large xx-small, x-small, small, medium, large, x-large, xx-large Kirsten Ribu - Webpublisering - HiO
17 Linjeavstand line-height: 150% Betyr avstand mellom linjene Å øke denne kan bety at det er lettere å lese teksten på siden Kirsten Ribu - Webpublisering - HiO
18 Tekstfargen Flere muligheter: color: red color: #rrggbb color: rgb(r%,g%,b%) Eksempel h1,h2{font: 20pt Arial Black ; color: red} p{font: 12pt Verdana ; color: #00cccd} Kirsten Ribu - Webpublisering - HiO
19 Plassere tekst Venstre, høyre eller i midten Text-align: center Plasserer teksten i midten Justify: både høyre og venstre Kirsten Ribu - Webpublisering - HiO
20 Innledende om Javascript Eksempel Kirsten Ribu - Webpublisering - HiO
21 Generelt om script Script er programkode som har til hensikt å gjøre en web-side dynamisk (mer attraktiv, bevegelig) + håndtere informasjon som utveksles mellom server og klient. Script deles inn i to hovedklasser: serverscript og klient-script. Vi skal snakke om klient-script Serverscript kommer i senere kurst Kirsten Ribu - Webpublisering - HiO
22 Klient-script Klient-script (normalt Javascript) er programkode som bruker ressurser hos klienten = kjører på klientens maskin. Programkoden sendes med web-siden ((X)HTML-koden) fra server til klient Scriptet starter ikke før den er lastet ned hos klienten. Kirsten Ribu - Webpublisering - HiO
23 Bruk av script De mest brukte anvendelsene av klientscript er Validering (sjekking) av data gitt i et skjema før det sendes tilbake til server dynamikk som skifte av bilder, statusmeldinger, og objekter som beveger seg over web-siden. Begrepet DHMTL (Dynamisk (X)HTML) er ikke et nytt web-språk, men standard (X)HTML-kode der dynamikken er ivaretatt med Javascript. Kirsten Ribu - Webpublisering - HiO
24 Komponenter i JavaScript JavaScript er et eget programmeringsspråk som ikke må forveksles med Java. Som i andre språk har det strukturer som tilordningssetninger, kontrollstrukturer som if else, løkkestrukturer som for og while og tabellstrukturer. Kirsten Ribu - Webpublisering - HiO
25 Funksjoner Programsetninger for et bestemt formål feks: document.write() Skriver setningen på websiden For eksempel document.write( Hei på deg! ) skriver Hei på deg! på skjermen. Kirsten Ribu - Webpublisering - HiO
26 Javascript -koden Kirsten Ribu - Webpublisering - HiO
27 Eksempelet Kirsten Ribu - Webpublisering - HiO
28 Hvordan legge inn JavaScript Et JavaScript kan legges inn på 3 måter i et (X)HTML-dokument: Programkoden kan legges direkte inn i en (X)HTML-tag knyttet til en hendelse. Denne metoden er vanlig dersom programkoden består av en til to setninger. Eksempel: <img src="bilde.gif" alt="bilde" onmouseover="window.status='fint bilde?'; return true" onmouseout="window.status=''; return true"> Kirsten Ribu - Webpublisering - HiO
29 Måte 2 Programkoden kan legges samlet inn mellom <head> og </head>. <script type="text/javascript"> <! /* Her kommer script-koden */ //--> </script> Noen ganger legges det i <body> Kirsten Ribu - Webpublisering - HiO
30 Måte 3 Programkoden kan legges på en egen fil: <script type="text/javascript" src="kode.js"> </script> Kirsten Ribu - Webpublisering - HiO
31 Generelt om JavaScript <script type="text/javascript"> <!-- /*Her kommer script-koden*/ //--> </script> Legg merke til at script-koden står mellom standard (X)HTML kommentar-taggene <!-- og -->. Kirsten Ribu - Webpublisering - HiO
32 forts Legg også merke til // foran -->. Dette er nødvendig forat script-kompilatoren ikke skal tolke linjen som en del av scriptet. Script-kompilatoren ignorerer nemlig resten av en linje etter //. Kommentarer som ikke skal være en del av programkoden må stå mellom /* og */. Slike kommentarer kan strekke seg over flere linjer. Kirsten Ribu - Webpublisering - HiO
33 Window.document.write() window.document.write("<h1>hei på deg etc..</h1>") er et eksempel på hvordan man henter objekter (adresserer objekter). Objektet window er selve web-leseren og underobjektet document refererer til selve (X)HTML-siden som vises. write() er en metode som skriver til htmlsiden (fyller ut html-siden). Kirsten Ribu - Webpublisering - HiO
34 Fra window til document Window Document Kirsten Ribu - Webpublisering - HiO
35 alert() alert ("Hei på deg") er en standard funksjon for å gi en melding på skjermen i et eget lite vindu. Veldig nyttig når du skal teste ut et script for feil! Kirsten Ribu - Webpublisering - HiO
36 alert Kirsten Ribu - Webpublisering - HiO
37 Koden for alert() Kirsten Ribu - Webpublisering - HiO
38 Prompt() Kirsten Ribu - Webpublisering - HiO
39 Eksempelet: prompt() Kirsten Ribu - Webpublisering - HiO
40 Objekter En "ting" i web-sammenheng som skjemafelter, bilder, stilark, (X)HTMLdokumenter, vinduer etc. Disse "tingene" er organisert hierarkisk i det som kalles Document Object Model (DOM). Mer om DOM senere. Kirsten Ribu - Webpublisering - HiO
41 DOM Kirsten Ribu - Webpublisering - HiO
42 Ukeoppgaver uke 41 Dersom du ikke har fått til blokker før: Prøv igjen. Begynn med <div> for å lage avsnitt (blokk), utvid med en klasse for å påvirke det som er inni avsnittet (blokken). Utvid stilarket med font-size, font-weight, font-style der det passer. Prøv med ulike fonter og størrelser. Lag noen javascript som vist i dag på forelesningen lek med mulighetene Besvar: Hva er javascript? Finn ressurser på web. Kirsten Ribu - Webpublisering - HiO
43 Neste gang Rammer Mer javascript Kirsten Ribu - Webpublisering - HiO
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
DetaljerCSS-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
DetaljerMer 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
DetaljerBilder, 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
DetaljerStilark 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
DetaljerStilark 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 Boks-modellen Et XHTML-dokument er satt sammen av elementer
DetaljerMMT105 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
DetaljerEKSAMEN / 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
DetaljerCSS: 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(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
DetaljerStyling 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
DetaljerTENK 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
DetaljerInnfø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
DetaljerHø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
DetaljerEKSAMEN 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
DetaljerCASCADING 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
DetaljerRammer. 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
DetaljerHTML-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
DetaljerCSS: 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
DetaljerEKSAMEN. 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
DetaljerSteg 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
Detaljerfile:///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
DetaljerKursdokumentasjon 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
DetaljerOBLIG 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
DetaljerHå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
DetaljerCSS. 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,
DetaljerHå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
DetaljerINF1040 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
DetaljerI 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
DetaljerSUKKERGRIS. 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<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
DetaljerOblig 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
DetaljerWeb 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
DetaljerHTML: 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
DetaljerOppgave 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
DetaljerEKSAMEN 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
DetaljerI 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
DetaljerINF1040 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
DetaljerNCE 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
DetaljerStilark - lenker. Mer om (X)HTML Kap. 7, 8 og 9. Webpublisering Kisten Ribu HiO 1
Stilark - lenker Mer om (X)HTML Kap. 7, 8 og 9 Webpublisering 2004 - Kisten Ribu HiO 1 I dag Noen flere tagger Stilark Selektorer Stiltyper og stilverdier Stiltyper for skriftutseende Stiltyper for tekstorganisering
Detaljerfile:///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
DetaljerGUI/ 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
DetaljerSteg 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
DetaljerCSS: 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
DetaljerOppgave 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
DetaljerOblig 4 Undervisningshefte i grunnleggende JavaScript programmering
Oblig 4 Undervisningshefte i grunnleggende JavaScript programmering Innhold: Variabler Boolske verdier Kontrollstrukturer Datastrukturer Løkker Funksjoner Events DOM behandling av Christine Skjønhaug Færø
DetaljerSteg 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
DetaljerIntroduksjon til programmering og programmeringsspråk. Henrik Lieng Høgskolen i Oslo og Akershus
Introduksjon til programmering og programmeringsspråk Henrik Lieng Høgskolen i Oslo og Akershus Kategorisering av programmeringsspråk? Deklarativ vs. imperativ Lav nivå vs. høy nivå Kompilert vs. tolket
DetaljerOppgave 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
DetaljerGrunnleggende 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.
DetaljerEn 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
DetaljerMultimedia. Kirsten Ribu Hio Webpublisering LO130A 18.10.04
Multimedia Kirsten Ribu Hio Webpublisering LO130A 18.10.04 1 I dag Om lyd, animasjon og video og (X)HTML koden som trengs på sidene for å legge inn multimediafiler 2 Multimedia Gjør websidene dine mer
DetaljerLa 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
DetaljerWebutvikling 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å
DetaljerOppsummering - Til nå... (1/ )
Oppsummering - Til nå... (1/10-2015) Grunnleggende HTML... 1 Basic JavaScript... 1 Variabler:... 2 Operatorer:... 3 Klikkhendelser... 4 Kontrollstrukturer... 5 Valgsetninger... 5 Betingelser/påstander...
DetaljerJSP - 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
DetaljerRetningslinjer for bruk av logo. Norsk Jernbaneklubb
Retningslinjer for bruk av logo Norsk Versjon 2a 24. mars 2004 1. Formålet med dette dokumentet Norsk har mange avdelinger og fora som benytter klubbens profil. For å ha en helhetlig profil og virke som
DetaljerUtseende. 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............................................
DetaljerWeb-programmering med JSP Løsningsforslag leksjon 3
Web-programmering med JSP Løsningsforslag leksjon 3 Oppgave 1 Denne siden viser inneholder en oversikt over biler:
DetaljerOppbygging 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
DetaljerI 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
DetaljerRAPPORT WEBP MAGNE SILJAN
RAPPORT WEBP MAGNE SILJAN -12.12.13 INNLEDNING TOLKNING AV OPPGAVEN Tolkingen av oppgaven var at det skulle utvikles en webside for en klient (firma, organisasjon eller et annet prosjektområde). Websiden
DetaljerForsvunnet 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
Detaljerpraktiske 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
DetaljerWebutvikling Oblig 5. Oppg 1. Her ser du sidebar og widgets som er tilgjengelig.
Webutvikling Oblig 5 Oppg 1 Her ser du sidebar og widgets som er tilgjengelig. Dette er contact form plugins, funker som kontaktskjema i nettsida, må bruke text fra widgets og kopiere kode blir generert
DetaljerGEO2311. 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
Detaljer1. 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
DetaljerStilark "Cascading Style Sheets" CSS
Stilark "Cascading Style Sheets" CSS /* Eksempel på stilark */ h1 { font-size:18pt; text-align: center; color: blue; } Vær oppmerksom på at enkelte nettlesere kan henge litt etter med implementering av
Detaljerwww.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
Detaljerthe 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
DetaljerDigital representasjon
Digital representasjon Om biter og bytes, tekst og tall Litt mer XHTML 30.08.2004 Webpublisering 2004 - Kirsten Ribu - HiO I dag Tallsystemer Om biter og bytes: hvordan tall og tekst er representert i
DetaljerOppsummering - Til nå... (1/ )
Oppsummering - Til nå... (1/10-2015) Grunnleggende HTML... 1 Basic JavaScript... 2 Variabler:... 3 Operatorer:... 4 Klikkhendelser... 5 Kontrollstrukturer... 5 Valgsetninger... 5 Betingelser/påstander...
DetaljerAlle 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
DetaljerOBLIG 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
DetaljerI 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
DetaljerKodetime for Nordstrand barneskole
Kodetime for Nordstrand barneskole av Veronika Heimsbakk og Lars Erik Realfsen 1 Hva er Processing? Processing er et programmeringsspråk som er gratis, og tilgjengelig for alle! Man kan programmere i Processing
DetaljerLæ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
DetaljerLO130A Webpublisering. Forelesning 1 23.08.04
LO130A Webpublisering Forelesning 1 23.08.04 1 I dag Leksjon 1: Internett, webservere og nettlesere. Leksjon 2: Innledende om (X)HTML. 2 Kort om historien til INTERNETT ARPA-net (Advanced Research Project
DetaljerInstallasjon 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.
DetaljerHTML5 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
DetaljerOppsummering - 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...
DetaljerHø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
DetaljerUNIVERSITETET I OSLO
UNIVERSITETET I OSLO BOKMÅL Det matematisk-naturvitenskapelige fakultet Eksamen i : Eksamensdag : Torsdag 2. desember 2004 Tid for eksamen : 09.00 12.00 Oppgavesettet er på : Vedlegg : Tillatte hjelpemidler
DetaljerOblig 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
DetaljerBrukermanual 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
DetaljerOblig 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
DetaljerKap. 1 Logo. Kap. 2 Farger
Profilhåndboka Innhold Kap. 1 Logo Kap. 2 Farger Kap. 3 Typografi Kap. 4 Grafiske elementer Kap. 5 Trykksaker Kap. 6 Powerpoint/lysark Kap. 7 Annonser Kap. 8 Internett Logoen Levanger kommune sin grafiske
DetaljerINF109 - Uke 1a
INF109 - Uke 1a 19.01.16 NOTE: Download the latest version of python: 3.5.1. 1 Introduksjon 1.1 Goodbye world! For å komme i gang, start IDLE fra Start Programs Python3.5.1 IDLE. (Varierer litt fra datamaskin
DetaljerFølgende «tommelfinger-regler» bør (må) følges:
Notat Denne «oppskriften» er basert på erfaringer om hva som går bra når en benytter Word til å lage navigasjonsdiagrammer. Det finnes sikkert andre måter som også gir et brukbart resultat. Det er bare
DetaljerSteg 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
DetaljerTema 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
Detaljerdatatyper 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
DetaljerMed Svarforslag UNIVERSITETET I OSLO. Det matematisk-naturvitenskapelige fakultet. 3 sider (side 6, 7 og 8, rives ut, fylles ut og leveres)
Eksamen i : Med Svarforslag UNIVERSITETET I OSLO Det matematisk-naturvitenskapelige fakultet INF5110 - Kompilatorteknikk Eksamensdag : Onsdag 3. juni 2009 Tid for eksamen : 14.30-17.30 Oppgavesettet er
DetaljerForelesning 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
DetaljerIntroduksjon til programmering og programmeringsspråk
Introduksjon til programmering og programmeringsspråk Henrik Lieng Høgskolen i Oslo og Akershus https://code.org/ Veldig høy-nivå programmering med Scratch End-user programming Overtone, Tidal, etc., bygger
DetaljerBrukermanual Prosjekt nr Det Norske Veritas
Prosjekt nr. 2011 22 Brukermanual Hovedprosjektets tittel Implementering av plugin og utvikling av wizard for Det Norske Veritas Prosjektdeltakere Magnus Strand Nekstad s156159 Jørgen Rønbeck s135779 Dato
DetaljerJavaServer Pages (JSP)
JavaServer Pages (JSP) Forelesning 1 Klient/tjener-systemer, installasjon av tjener, og intro til JSP. Statisk Web = HTML Overskrift
DetaljerEt 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