CASCADING STYLESHEETS (CSS)

Størrelse: px
Begynne med side:

Download "CASCADING STYLESHEETS (CSS)"

Transkript

1 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 evne til å beskrive utseende, HTML ble i utgangspunktet laget for å beskrive en struktur. De som fant opp HTML var opptatt av at overskriften skulle være større en brødteksten, men selve størrelsen var uvesentlig. Bare det var forskjell. Cascading Style Sheets ble utviklet i 1996 som en ny måte å beskrive utseendet av et HTML dokument på, og nettleser-produsentene har vært raske med å implementere dette språket. CSS skrives også i klartekst slik som HTML, men det er en noe annen syntaks. I CSS kan du gjøre to ting, du kan enten bestemme hvordan en eksisterende HTML tag skal vises i en nettleser eller du kan finne på dine egne regler, de såkalte classes. Dersom du i HTML dokument ønsker å bruke Verdana som din hovedtype kan du gi en instruksjon som endrer tagen tilsvarende. Denne instruksjonen skal skrives sånn: body {font-family: Verdana;} Denne instruksjonen vil, dersom den blir lest inn i HTML dokumentet gi nettleseren beskjed om at alt som ligger mellom og skal være Verdana. Hva da om Verdana ikke er installert på vertsmaskinen? Jo, da føyer vi til et par andre navn og til slutt en henvsning til en generell familie. Altså slik: Legg merke til skrivemåten (syntaksen); først tag-navnet, deretter curly-bracket deretter hva skal formatteres deretter kolon deretter hvordan skal det formatteres deretter semikolon og curly-bracket til slutt. Sett mellomrom etter tagen og mellomrom etter kolon for å fremme lesbarheten. Det beste er om du setter hver instruksjon på en egen linje, slik: body {font-family: Verdana, arial, helvetica, sans-serif; color: #999999; } Mer om disse reglene finner du på Hvor skal jeg skrive disse reglene da slik at nettleseren finner de? Det er selvfølgelig viktig at du gir nettleseren instruksjon om hvordan du ønsker stylesheetet ditt benyttet, og ikke minst når. Det er to hovedmåter å tenke på, enten å legge selve stylesheetet rett inn i et HTML dokument, såkalt embedding. Du kan enten gjøre dette i elementet, da vil det gjelde for hele siden, eller du kan legge det rett inn som en attributt til en tag, da vil det gjelde for bare den tagen. Den andre metoden er å ha et eksternt stylesheet som du laster inn i siden når den åpnes, gjennom en link. Den store fordelen med dette er at dersom du baserer mange sider på det samme stylesheetet trenger du bare gjøre endringer ett sted dersom du f.eks. ønsker å endre skrifttypen på hele siten din. Noen ganger

2 vil du kanskje at én av sidene dine skal ha en avvikende stil fra resten av stylesheetet ditt. Da kan du bruke en embed på den siden. EMBEDDED STYLES: For å legge inn et stylesheet på én side setter du inn følgende i området på dokumentet ditt: <style> <!-- --> </style> </head> Velkommen til Svens Side. Her vil all teksten mellom være Verdana. Dette gjelder uansett om den kommer inni et annet element som f.eks. <table> fordi er moderelementet til alle de andre tagene på siden arver <table> egenskapene. Dersom jeg nå hadde en tabell på siden min og jeg ville at den skulle ha Times New Roman skrift kunne jeg gjort det på følgende måte: <style> <!-- --> </style> </head> <h1>velkommen til Svens Side</h1> <table style= font-family:times new roman, times, serif; > <td>velkommen til Svens tabell! Dette vil gi en side med en tabell og en overskrift. Tabllen med tekst Times New Roman og overskrift med Verdana. Å sette style instruksjoner direkte inn slik som dette kalles inline styles, og bruker ikke curly-brackets. LINKED Å linke til et stylesheet er enda enklere i HTML dokumentet, men vi må da skrive selve stylesheetet i et eksternt dokument. Først selve linken: <link rel= stylesheet href= style.css type= text/css >

3 </head> <h1>velkommen til Svens Side</h1> Her er det altså bare en enkel link til et stylesheet som forteller nettleseren først hva det er (rel= stylesheet ) Hvor det finnes (href= style.css ), der style.css er navnet på stylesheet og tilslutt en erklæring om hvordan det er skrevet, i dette tilfellet i klartekst. Det neste vi må gjøre er å lage selve stylesheetet. Åpne opp en vanlig teksteditor som f.eks. Notepad. Bruk ikke word eller andre tekstbehandlingsprogrammer til dette dersom du ikke er helt sikker på hvordan du lagrer dokumentet som et uformattert tekstdokument. Det er nemlig svært viktig å ha full kontroll på hva som blir skrevet inn i dette dokumentet. Det første du kan gjøre er å lagre dokumentet ditt som style.css. Hvorfor det? Jo, det var det vi kalte det i linken over, ikke sant? Pass på at du lagrer det i samme mappe som HTML filen. Det betyr ingenting hvor du lagrer filen, men i linken over har vi ikke sagt noe om mappe, derfor må de ligge i samme mappe slik at HTML filen finner stylesheetet. Pass også på at velger all files i filtype boksen under navnet. Vi ønsker nemlig ikke at Notepad skal legge til.txt etter filnavnet vårt. OK, nå er vi klar til å skrive inn selve styleinstruksjonene: Skriv i style.css: Lagre filen din via File > Save. That s it! Du har nå skrevet et korrekt stylesheet og linket til det i filen din. Dersom du nå har dokumentet åpent i f.eks. IE kan du skrive endringer inn i stylesheetet og se hvordan disse arter seg ved å lagre stylesheetet og oppdatere siden din i IE. KONTROLLERE LINKER MED STYLESHEET En av de mest populære tingene å benytte stylesheets til er å kontrollere utseendet på linker. Legg til følgende i stylesheetet ditt: a {text-decoration: none;} Denne instruksjonen sier til alle a-elementer at de skal vises uten understrekning. Linker er a- elementer. En link kan være i fire forskjellige tilstander: link Vanlig, en link som ikke har vært besøkt eller er engasjert på annen måte visited Besøkt, en link du ha klikket på hoved I det musen går over linken active Den linken som er aktiv nå, dvs. er trykket på.

4 For å kontrollere hvordan hver og en av disse opptrer må vi sette de inn i stylesheetet vårt i denne rekkefølgen, på denne måten med a: foran: a:link, a:visited, a:hover, a:active Dersom vi nå ønsker grå linker som blir blå i det musen føres over kan vi skrive følgende i stylesheetet vårt: a {text-decoration: none; color: #999999;} a:link {} a:visited{} a:hover{color: #0000FF} a:active{} Som du ser har jeg definert fargene på linken i a-tagen og ikke i hver av de påfølgende a:link og så videre. Dette har jeg gjort fordi det er enklest slik, ved å si at a-tagen alltid skal være grå trenger jeg kun si fra når den ikke skal være det. Altså i a:hover. CUSTOM CLASSES Vi har nå sett på hvordan vi kan omdefinere html-tager til å vises annerledes enn nettleseren pleier. I tillegg kan vi lage såkalte custom classes. Tenk deg at du bruker en tabell med Times New Roman og en tabell med Verdana, da kan du ikke omdefinere HTML tagen <table>, fordi begge er jo et <table> element. Det vil også være tungvint å benytte inline styles på begge dersom du trenger å bruke samme utseende tabell flere steder, og vi har også argumentet om at dersom du kan linke til et eksternt dokument gjør dette livet lettere dersom du må endre f.eks. skriftstørrelsen. Vi bruker custom classes: Du mø gjøre nettleseren oppmerksom på at dette er en custom class ved å sette punktum foran navnet. Du må heller aldri bruke tall, mellomrom eller navn på HTML tager som custom class navn. Skriv inn i style.css.mattabell {font-family: times new roman, times, serif;}.drikketabell {font-family: Verdana, arial, helvetica, sans-serif;} I et HTML dokument bruker du disse slik:... <table class= mattabell > <td>denne tabellen skrives med Times New Roman......

5 <table class= drikketabell > <td>denne tabellen skrives med Verdana... TIL SLUTT: De aller fleste HTML-editorer kan skrive stylesheets for deg. Det er mange instruksjoner du kan legge inn i et stylesheet for å utforme dokumentene dine slik du vil, og det kan være vanskelig å huske alle sammen og ikke minst hvordan de skrives. I en HTML editor vil du få endel hjelp til dette. (Notepad heter notisblokk i norske versjoner av Windows) (IE er Internet Explorer)

INF1040 Oppgavesett 4: CSS

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

Detaljer

OBLIG 1 - WEBUTVIKLING

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

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

(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

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

Hvordan legge ut en melding i Fronter

Hvordan legge ut en melding i Fronter OPPDATERT 1. sept 2008 Hvordan legge ut en melding i Fronter Vi skal her lære å legge ut meldinger. De vil være noe kjedelige av utseende fordi vi har lagt vekt på at det skal være rask å bruke, lett å

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

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

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

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

Innstillinger. Endre Personalia

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

Detaljer

the web Introduksjon Lesson

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

Detaljer

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

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

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

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

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

NY PÅ NETT. Enkel tekstbehandling

NY PÅ NETT. Enkel tekstbehandling NY PÅ NETT Enkel tekstbehandling Innholdsfortegnelse Tekstbehandling... 3 Noen tips for tekstbehandling...3 Hvordan starte WordPad?... 4 Wordpad...4 Wordpad...5 Forflytte deg i dokumentet... 7 Skrive og

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

Lagring av EndNote stil fra EndNotes hjemmeside når du bruker Mac

Lagring av EndNote stil fra EndNotes hjemmeside når du bruker Mac Lagring av EndNote stil fra EndNotes hjemmeside når du bruker Mac EndNote leveres kun et begrenset antall populære stiler. Finner du ikke tidsskriftstilen du trenger, må du gå til EndNote s hjemmeside

Detaljer

Brukermanual for NROFs lokalavdelinger - hvordan redigere egne hjemmesider

Brukermanual for NROFs lokalavdelinger - hvordan redigere egne hjemmesider Brukermanual for NROFs lokalavdelinger - hvordan redigere egne hjemmesider 1. Logg deg inn på www.nrof.no/admin: 2. Da er du inne. Velg rediger side/artikkel follo@nrof.no Brukernavn = e-postadressen til

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

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

Revidert 05.02.2009_fg. Bruksanvisning for innlegging av nyheter på Tana kommunes nettsted

Revidert 05.02.2009_fg. Bruksanvisning for innlegging av nyheter på Tana kommunes nettsted Bruksanvisning for innlegging av nyheter på Tana kommunes nettsted 1 Gå til http://www.tana.kommune.no/admin/ Det enkleste er å lage en snarvei til skrivebordet. Når du har kommet til Login siden, dra

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

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

Hvordan hente ut listen over et hagelags medlemmer fra Hageselskapets nye portal

Hvordan hente ut listen over et hagelags medlemmer fra Hageselskapets nye portal Hvordan hente ut listen over et hagelags medlemmer fra Hageselskapets nye portal Av Ole Petter Vik, Asker Versjon 2.3 20.03.2012 Beskrivelsene for hvert enkelt skritt er over hvert skjermbilde. Via Hageselskapets

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

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

Revidert 08.10.2009_fg. Bruksanvisning for innlegging av nyheter på Tana kommunes nettsted. www.tana.kommune.no

Revidert 08.10.2009_fg. Bruksanvisning for innlegging av nyheter på Tana kommunes nettsted. www.tana.kommune.no Bruksanvisning for innlegging av nyheter på Tana kommunes nettsted www.tana.kommune.no 1 Gå til http://www.tana.kommune.no/admin/ Det enkleste er å lage en snarvei til skrivebordet. Når du har kommet til

Detaljer

Hvordan man kobler til printeren, laster ned CardPresso, installerer skrifttypen og får kommet i gang med produktet.

Hvordan man kobler til printeren, laster ned CardPresso, installerer skrifttypen og får kommet i gang med produktet. Komme i gang med printeren Hvordan man kobler til printeren, laster ned CardPresso, installerer skrifttypen og får kommet i gang med produktet. Innholdsfortegnelse Komme i gang med printeren... 1 Laste

Detaljer

Vis filer fra banken Filoverføring forenklet

Vis filer fra banken Filoverføring forenklet Vis filer fra banken gir deg en oversikt over de filer som kan hentes fra banken. Dette forutsetter som regel at du tidligere har opprettet en filbestilling. Bestillingen opprettes via Bestill fil fra

Detaljer

Publiseringsveiledning for www.tromsfylke.no

Publiseringsveiledning for www.tromsfylke.no Publiseringsveiledning for www.tromsfylke.no Sist oppdatert 09.07.2013 av Khalil Dahbi Innholdsliste 1. Side:... 3 a. Lage en ny side:... 3 b. Endre innstilling til en side:... 3 c. Slette en side:...

Detaljer

Eksempeleksamenssett for Informasjons og publiseringsteknologi faget høsten 2005.

Eksempeleksamenssett for Informasjons og publiseringsteknologi faget høsten 2005. Eksempeleksamenssett for Informasjons og publiseringsteknologi faget høsten 2005. NB, det er flere oppgaver her enn det ville vært på et reelt eksamenssett, dette for at dere skal kunne få se eksempler

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

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

en hjemmeside Lesson Introduksjon Du kjenner en del HTML tagger, så nå er det på tide å lage din første hjemmeside! La oss begynne med en gang.

en hjemmeside Lesson Introduksjon Du kjenner en del HTML tagger, så nå er det på tide å lage din første hjemmeside! La oss begynne med en gang. Lesson 2 en hjemmeside 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

Hvordan å lage og publisere ditt personlige visittkort

Hvordan å lage og publisere ditt personlige visittkort Hvordan å lage og publisere ditt personlige visittkort Av Asle Skauge Dette skal være en bruksanvisning som alle kan følge for å få lagt ut sitt personlige visittkort på internett. Hensikten med et slikt

Detaljer

Installasjons veiledning for QuickNG SuperService integrasjon

Installasjons veiledning for QuickNG SuperService integrasjon Installasjons veiledning for QuickNG SuperService integrasjon OKTOBER 2012 REV 0.3 Oppsett av SuperService Log på SuperService online: https://login.ifmsystems.com/default.aspx Du må ha en bruker fra SuperService

Detaljer

Gå til Nedlastninger på menylinjen for Visma Skolelisens og velg Visma Lønn versjon 9.5.

Gå til Nedlastninger på menylinjen for Visma Skolelisens og velg Visma Lønn versjon 9.5. 1 Før du starter I Windows må du sørge for at tekst og andre elementer er satt til å vises normalt 100%. Visma Lønn støtter ikke zooming, da vil noen elementer forsvinne fra programmet og ikke fungere.

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

Bruksanvisning for innlegging av nyheter på Tana kommunes nettsted

Bruksanvisning for innlegging av nyheter på Tana kommunes nettsted Bruksanvisning for innlegging av nyheter på Tana kommunes nettsted 1 Åpne Internett explorer. Gå til http://www.tana.kommune.no/admin/ Det enkleste er å lage en snarvei til skrivebordet. Når du har kommet

Detaljer

Oppbygging av innhold på responsive nettsider.

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

Detaljer

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

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

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

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

Dobbelklikk på program-ikonet!

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

Detaljer

HTML5 og CSS. Webdesign med Dreamweaver. Glemmen vgs - Medier og kommunikasjon 1. januar Arly Dale 2013 Side 1

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

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

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

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

Velkommen som ny bruker av Uni Økonomi!

Velkommen som ny bruker av Uni Økonomi! Velkommen som ny bruker av Uni Økonomi! Som ny kunde har du fått tilsendt tilsendt epost som vist under, hvor du starter installasjonen av Uni Økonomi - ved å klikke på lenken som står etter "Gå til:"

Detaljer

BRUK AV TEKSTEDITOREN

BRUK AV TEKSTEDITOREN Dynamisk Internett-publisering med DM Web BRUK AV TEKSTEDITOREN BRUKERVEILEDNING 2007 Datamann AS er Brukermanualen er utarbeidet av Datamann AS Postboks 74 9551 ØKSFJORD Telefon 78 45 95 00 Telefaks 78

Detaljer

AUTOCAD 2008. Artikkelserie. Fra Color til Named og omvendt

AUTOCAD 2008. Artikkelserie. Fra Color til Named og omvendt Odd-Sverre Kolstad AUTOCAD 2008 Artikkelserie Fra Color til Named og omvendt Gyldendal Norsk Forlag AS 2007 Omslag Marianne Thrap Redaktør: Rune Kjelvik Formgiver: Rune Kjelvik 1. opplag ISBN 978-82-05-37108-8

Detaljer

KF Lokal personalhåndbok - brukerveiledning for redaktør

KF Lokal personalhåndbok - brukerveiledning for redaktør KF Lokal personalhåndbok - brukerveiledning for redaktør Innhold 1. KF Lokal personalhåndbok og KF Infoserie... 2 2 Din rolle - Redaktør... 4 3 Skriv lokal tekst... 4 4 Lag lenker i lokal tekst... 6 5.

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

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

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

Presentasjon. Datakortets modul 6 avgrenser ferdigheter i praktisk bruk av presentasjonsverktøy. Stadig flere ser mulighetene som ligger i

Presentasjon. Datakortets modul 6 avgrenser ferdigheter i praktisk bruk av presentasjonsverktøy. Stadig flere ser mulighetene som ligger i 92 Datakortets modul 6 avgrenser ferdigheter i praktisk bruk av presentasjonsverktøy. Stadig flere ser mulighetene som ligger i Presentasjon presentasjonsverktøyet PowerPoint når det gjelder presentasjon

Detaljer

som blanker skjermen (clear screen). Du får en oversikt over alle kommandoene ved å skrive,

som blanker skjermen (clear screen). Du får en oversikt over alle kommandoene ved å skrive, 1. Last ned og installer XAMPP. 2. Sjekk at alt fungerer. 3. MySQL. Vi begynner med databaseserveren, MySQL. Gå til DOS klarmelding eller ledetekst (finnes under tilbehør på startmenyen om du ikke som

Detaljer

Tema Guide for PHP-Fusion v6.01.

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

Detaljer

Kom i gang med programmering i Java

Kom i gang med programmering i Java Kom i gang med programmering i Java Dette dokumentet forteller hvordan du skal komme i gang med programmering inkludert nedlasting av den programvare du trenger samt oppsett av disse samt en del innstillinger

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

Forberedelser; De sidene vi nå skal lage har etternavnet.htm eller.html. HypertextMarkupLanguage

Forberedelser; De sidene vi nå skal lage har etternavnet.htm eller.html. HypertextMarkupLanguage Vi lager hjemmeside Forberedelser; 1) Start med Utforskeren. Still deg i C: 2) Lag ei ny mappe som du døper det navnet du vil legge alle filene og mappene du vil legge ut på internett i. 3) Hvis du ikke

Detaljer

Brukermanual for Quizbuilder

Brukermanual for Quizbuilder Brukermanual for Quizbuilder 1. juni 2010 Innhold 1 Installasjon av Quizbuilder 2 1.1 Installasjon fra Kildekode........................ 2 1.2 Installasjon fra Zip-fil.......................... 2 2 Quizbuilder

Detaljer

Før du starter, del 2

Før du starter, del 2 1 Før du starter I Windows må du sørge for at tekst og andre elementer er satt til å vises normalt 100%. Visma Global støtter ikke zooming, da vil noen elementer forsvinne fra programmet og ikke fungere.

Detaljer

Inspiration-Norge. Kom i gang med Inspiration 2

Inspiration-Norge. Kom i gang med Inspiration 2 NORSK VERSJON Inspiration-Norge. Kom i gang med Inspiration 2 Innhold INNHOLD... 3 KAPITTEL 1: ALLER FØRST... 4 INSTALLASJON OG MASKINKRAV... 4 OPPGRADERING OG KOPIERING AV GAMLE FILER... 4 REGISTRERING

Detaljer

Kom i gang med. Dette dokumentet gir deg en kort innføring i hvordan du selv kan oppdatere ditt eget nettsted ved bruk av i-tools.

Kom i gang med. Dette dokumentet gir deg en kort innføring i hvordan du selv kan oppdatere ditt eget nettsted ved bruk av i-tools. Kom i gang med Dette dokumentet gir deg en kort innføring i hvordan du selv kan oppdatere ditt eget nettsted ved bruk av i-tools. i-tools er et produkt fra Innhold Innhold... 2 Om i-tools... 3 Om InBusiness...

Detaljer

Nedlastning og installasjon av Visma Lønn Gå til Visma Community og logg inn:

Nedlastning og installasjon av Visma Lønn Gå til Visma Community og logg inn: 1 Før du starter I Windows må du sørge for at tekst og andre elementer er satt til å vises normalt 100%. Visma Lønn støtter ikke zooming, da vil noen elementer forsvinne fra programmet og ikke fungere.

Detaljer

NETTSIDEKURS. NORILCO -Norsk forening for personer med stomi, reservoar og mage-/tarmkreft.

NETTSIDEKURS. NORILCO -Norsk forening for personer med stomi, reservoar og mage-/tarmkreft. NETTSIDEKURS NORILCO -Norsk forening for personer med stomi, reservoar og mage-/tarmkreft. Innføring i bruk av distriktsavdelingens nettside 17.-19. April 2015 Innhold Innlogging... 3 Lag ny artikkel/nyhet....

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

www.eidsvold-turn.no/handball www.eidsvold-turn.no/handball www.eidsvold-turn.no/handball www.eidsvold-turn.no/handball www.eidsvold-turn.

www.eidsvold-turn.no/handball www.eidsvold-turn.no/handball www.eidsvold-turn.no/handball www.eidsvold-turn.no/handball www.eidsvold-turn. Webansvarlig ETF håndball Ver.02 / 2012 Geir Vold-webredaktør http://www.eidsvold-turn.no Hvordan formatere et bilde som skal inn på websiden.... 3 Hvordan beskjære et bilde... 3 Ingressbilder... 5 Brødtekstbilder...

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

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

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

Retningslinjer for bruk av logo. Norsk Jernbaneklubb

Retningslinjer 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

Detaljer

INF1040 Oppgavesett 2: Nettsider og XHTML

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

Detaljer

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

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

Detaljer

Office 2013. Kort oversikt over de viktigste nyhetene

Office 2013. Kort oversikt over de viktigste nyhetene Office 2013 Kort oversikt over de viktigste nyhetene For oversikt over alle nyhetene i et program, klikk? på tittellinjen og velg emnet «Hva er nytt» fra Hjelp-vinduet Generelt Office 2013 har fått et

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

Her prøver vi å gi en enkel introduksjon til Venstres publiseringssystem for nettsider (Venstre Publish):

Her prøver vi å gi en enkel introduksjon til Venstres publiseringssystem for nettsider (Venstre Publish): 9 IT i lokallaget 9.1 Hjemmesider Redigering av lokallagets hjemmesider skjer via et publiseringsverktøy som du finner på https://publish.venstre.no. Brukernavn og passord får du ved å henvende deg til

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

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

BRUKE ONEDRIVE OG SHAREPOINT

BRUKE ONEDRIVE OG SHAREPOINT Viste du dette om OneDrive og SharePoint: BRUKE ONEDRIVE OG SHAREPOINT Office 365 for bedrifter gir deg 2 muligheter for å lagre og dele dokumenter, OneDrive for Business og SharePoint Nettsteder. Her

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

INSPERA - brukerveiledning for student skoleeksamen

INSPERA - brukerveiledning for student skoleeksamen INSPERA - brukerveiledning for student skoleeksamen Pålogging Du logger deg på via himolde.inspera.no (med vanlig Feide-pålogging): 1 Din oversikt over prøver og eksamener Så snart du har logget på, kommer

Detaljer

Oppgavesamling til Webutvikling < >

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

Detaljer

Følgende «tommelfinger-regler» bør (må) følges:

Fø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

Detaljer

PUBLISERING AV INNHOLD TIL KVAMSSIDA.NO

PUBLISERING AV INNHOLD TIL KVAMSSIDA.NO PUBLISERING AV INNHOLD TIL KVAMSSIDA.NO Innhold Kapitel 1 - Registrering og innlogging... 2 Kapitel 2 - Lage ny artikkel uten bruk av bilder eller annen grafikk... 3 Kapitel 2a - Ingress... 4 Kapitel 3

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

Innholdsfortegnelse. Side 1 av 33

Innholdsfortegnelse. Side 1 av 33 Innholdsfortegnelse Viktige begrepsforklaringer... 2 Innlogging... 3 Lage en artikkel... 4 Redigere en artikkel... 7 Fjerne en artikkel... 7 Sette inn et bilde i en artikkel... 8 Bytte bilde i en artikkel...

Detaljer

Kort innføring i timeplan og romsystemet

Kort innføring i timeplan og romsystemet 1 Versjon 14.07.2011 Kort innføring i timeplan og romsystemet HSF har innført et nytt rom og timeplansystem. Målet er at dette systemet skal gjøre det enklere for deg som student og for dem som skal legge

Detaljer

Forsvunnet katt webside

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

Detaljer

Installasjonsveiledning. DDS-CAD ByggMester

Installasjonsveiledning. DDS-CAD ByggMester Installasjonsveiledning DDS-CAD ByggMester Installasjonsveiledning versjon 7 Vær oppmerksom på: USB-dongler ikke skal plugges i maskinen før programmet er installert. Før installasjonen: Dette hefte beskriver

Detaljer

Hvordan installere Java og easyio på Windows

Hvordan installere Java og easyio på Windows Hvordan installere Java og easyio på Windows Denne veiledningen forklarer en enkel måte å installere Java og easyio på din egen Windows-datamaskin. Du kan finne veiledninger for andre operativsystemer

Detaljer

Installering og bruk av Hot Potatoes 6

Installering og bruk av Hot Potatoes 6 Installering og bruk av Hot Potatoes 6 Av Kjetil Østereng, allmennlærerstudent Avdeling for lærerutdanning Høgskolen i Østfold Sist revidert 1. oktober 2006 1 Innholdsfortegnelse Installering og bruk av

Detaljer

Generell brukerveiledning for Elevportalen

Generell brukerveiledning for Elevportalen Generell brukerveiledning for Elevportalen Denne elevportalen er best egnet i nettleseren Internett Explorer. Dersom du opplever kompatibilitets-problemer kan det skyldes at du bruker en annen nettleser.

Detaljer

https://nhh.itslearning.com/

https://nhh.itslearning.com/ e-læringssystemet https://nhh.itslearning.com/ Sist oppdatert 08.09.2009 10:07 1 1. Hva er It s Learning? It's Learning er et e-læringssystem hvor du finner elektronisk informasjon om alle våre kurs/studier,

Detaljer

Filoverføring med Corporate Netbank Innhold klikk på aktuelle kapittel

Filoverføring med Corporate Netbank Innhold klikk på aktuelle kapittel Filoverføring med Corporate Netbank Innhold klikk på aktuelle kapittel Filoverføring... 2 Sende fil med Java web start... 3 Hente returfil... 5 Hent lesbar returfil... 8 Godkjenning av filer... 13 Mer

Detaljer