Innføring i Dynamisk HTML
|
|
|
- Kjersti Tønnessen
- 8 år siden
- Visninger:
Transkript
1 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 over en setning el. et ord kan bakgrunnsfargen endres. Måten HTML koden kan endres på etter at siden er lastet inn i webleseren skyldes tre teknologier: Klient skript (JavaScript/VBScript) JavaScript er en velkjent metode for å endre en HTML side. JavaScript koden kan endre HTML elementene p.g.a.: "DOM Document Object Model" "Document Object Model" gjør hvert HTML element tilgjengelig for JavaScript. Alle elementene i en webside fra webleserens versjonsnummer til de enkelte HTML knagger er en del av DOM. Stilsett (Cascading Style Sheets CSS) Fordi CSS egenskapene er en del av DOM blir de tilgjengelige for JavaScript (og VBScript). Stilsett lar deg plassere elementer nøyaktig på siden, angi størrelse, farger osv. på HTML elementene. Vi kan si at CSS og HTML knaggene er det du endrer, DOM muliggjør endringene, og JavaScript er det som virkelig foretar endringene. Du må ha versjon 4 el. senere av webleseren (Internet Explorer el. Netscape Communicator) for at dette skal fungere. Internet Explorer ver. 3 har en viss støtte for DHTML. La oss se på noen eksempler: Sette for og bakgrunns farge I HTML kan du selvsagt endre fargen på teksten med å angi TEXT="blue" i BODY knaggen. Dersom du ønsker å ha ulike farger på ulike elementer, f.eks. svart tekst på hvit bakgrunn for et normalt avsnitt, og blå tekst med rød bord omkring for avsnitt som skal utheves, gjøres det enkelt med stilsett. Et stilsett kan plasseres i HEAD seksjonen på et vanlig HTML dokument, eller du kan skrive stilsettet i en egen fil (tekstfil), og lenke den inn i HTML dokumentet. Her skal vi bruke den første metoden, senere skal vi vise den andre metoden. Start en tekstbasert webeditor og skriv inn denne HTML koden: 1
2 <TITLE>DHTML 1</TITLE> P color:black; background color:white; margin left:15px DIV color:blue;background color:yellow; border color:red;border style:solid;border width:2px; <BODY> <H3>Bruke stilsett til å sette farger</h3> <P> Dette er en vanlig avsnitt som skrives med svart tekst på hvit bakgrunn. Venstre marg er rykket inn 15 pixel. <DIV> Dette er et uthevet avsnitt med blå tekst på gul bakgrunn, omgitt av en rød bord. </DIV> Vis denne HTML siden i Internet Explorer 4 (el. senere) eller Netscape Navigator 4 (el. senere). Det normale avsnittet bør være rykket litt inn i forhold til overskriften, og det uthevete avsnittet under. Det uthevete avsnittet bør ha gul bakgrunn med en rød bord omkring. Prøv å endre størrelsen på webleserens vindu. Det uthevete avsnittet vil automatisk endres slik at teksten alltid er innenfor den røde borden. La oss se på de ulike elementene i HEAD seksjonen. Linjen: angir at her begynner stilsettdefinisjonen, stilsettet avsluttes med koden Linjen: P color:black; background color:white; margin left:15px definerer stilreglene for avsnitt. Teksten skal være sort (black), bakgrunnen hvit, og venstre marg skal rykkes inn 15 billedpunkter (margin left:15px). Linjen: DIV color:blue;background color:yellow; border color:red;border style:solid;border width:2px; definerer stilreglene for DIV beholderen. All tekst som plasseres inni DIV beholderen får blå farge på gul bakgrunn. Teksten blir omgitt av en rød bord/kant (border color:red) med en hel strek (solid) som er to billedpunkter bred. I eksemplet over brukte vi P og DIV elementene for å lage ulike avsnitt, men hvordan få til flere ulike typer avsnitt? Det kan være at vi ønsker noen avsnitt med kursiv tekst, noen avsnitt med uthevet tekst osv. Løsningen er ulike klasser av f.eks. P elementet. De defineres i stilsettdelen med å føye til punktum og et navn, etter navnet på HTML elementet. Her er HTML koden som viser dette: 2
3 <TITLE>DHTML 2</TITLE> BODY font family: verdana, arial, helvetica, sans serif P color:black; background color:white; margin left:15px P.kursiv color:black; background color:white; margin left:15px; font style:italic P.uthev color:blue; background color:yellow; font weight:bold; border color:red; border style:ridge; border width:10 <BODY> <H3>Bruke stilsett til å sette farger</h3> <P> Dette er et vanlig avsnitt som skrives med svart tekst på hvit bakgrunn. Venstre marg er rykket inn 15 pixel. <P CLASS=kursiv> Dette avsnittet blir vist med kursiv tekst. <P CLASS=uthev> Dette er et uthevet avsnitt med uthevet blå tekst på gul bakgrunn, omgitt av en rød bord. Linjen: P.kursiv color:black; background color:white; margin left:15px; font style:italic definerer stilregel for klassen kursiv. I HTML teksten bruker vi denne klassen slik: <P CLASS=kursiv> Dette avsnittet blir vist med kursiv tekst. Sette marger og innrykk I vanlig HTML er det få muligheter til å lage ulike marger og innrykking av teksten. Med stilsettregler kan du endre margene for f.eks. et avsnitt med margin left osv. Tekstinnrykk kan lages med stilsettregelen text indent. La oss utvide eksmplet over, og legge til et avsnitt (foran alle de andre) med 15% mindre høyre og venstre marger enn de andre avsnittene. Teksten utheves med fet skrift ("bold"). La oss gi dette avsnittet klassenavnet Ingress. I tillegg lager vi et avsnitt for såkalte hengende innrykk (klassenavn Henge), der teksten i første linje er rykket til venstre i forhold til resten av avsnittet Det får vi til med å angi et negativt tekstinnrykk("text indent: 4%"). Hent inn eksemplet over og rediger det slik: <TITLE>DHTML 2b</TITLE> BODY font family: verdana, arial, helvetica, sans serif 3
4 P color:black; background color:white; margin left:15px P.Ingress color:black; background color:white; font weight:bold; margin left:15%; margin right:15%; P.kursiv color:black; background color:white; margin left:15px; font style:italic P.uthev color:blue; background color:yellow; font weight:bold; border color:red; border style:ridge; border width:10; margin left: 2px P.Henge color:black; background color:white; text indent: 4%; margin left:5%; margin right:1%; <BODY> <H3>Bruke stilsett til å sette farger</h3> <P CLASS=Ingress> Dette avsnittet har både venstre og høyre marg rykket inn 15% i forhold til overskriften. <P CLASS=Henge> Dette er et eksempel på et avsnitt med hengende innrykk. Det vil si at første linje er rykket til venstre i forhold til resten av avsnittet. <P> Dette er et vanlig avsnitt som skrives med svart tekst på hvit bakgrunn. Venstre marg er rykket inn 15 pixel. <P CLASS=kursiv> Dette avsnittet blir vist med kursiv tekst. <P CLASS=uthev> Dette er et uthevet avsnitt med blå tekst på gul bakgrunn, omgitt av en rød bord. Posisjonere elementer I HTML brukes IMG knaggen til å vise bilder. Med IMG knaggen kan du angi bildets størrelse, om det skal plasseres til venstre (ALIGN=left), til høre (ALIGN=right) osv. De som laster ned en webside kan ha en skjermoppløsning som er ulik den utvikleren av siden brukte. Det er også mulig å endre vindustørrelsen til webleseren. Alt dette kan influere på hvordan bildet blir vist. Med stilsett (CSS) kan bildets plassering angis nøyaktig: <! BODY font family: verdana, arial, helvetica, sans serif #Absolutt position:absolute; top:100px; left:50px; height:104; width:240px; z index:0 #Relativ position:relative; left: 50px; height: 50px; width: 300px; z index: 1 > 4
5 <BODY bgcolor="white" text="black" > <H3>Posisjonering med stilsett</h3> <DIV ID="Absolutt"> <IMG SRC="logo.gif"> </DIV> Bildet i dette eksemplet blir plassert 100 billedpunkter fra øvre kant, og 50 billedpunkter fra venstre kant. Legg merke til at bildet overlapper teksten slik at den blir vanskelig å lese. <DIV ID="Relativ">Mens denne teksten blir plassert oppå bildet og kan da leses.</div> Legg merke til at vi bruker DIV elementet som en "beholder" for de elementer som vi vil plassere med stilsett koder. Z index (pos. verdi el. 0) brukes til å angi hvilket element som skal være øverst. Linjene <! og > angir at det som ligger mellom dem er en kommentar. Eldre weblesere vil dermed ikke bry seg om stilsett koden. Linjen > avslutter kommentaren. Nyere weblesere (fra ver. 4) vil derimot ikke bry seg om <! og > linjene, men lese linjene som kommer imellom som et stilsett. På denne måten skjuler vi stilsettkoden for eldre weblesere, mens nyere weblesere vil finne stilsettet. Linjen #Absolutt angir at HTML elementet skal posisjoneres absolutt, 100 billedpunkter fra toppen, 50 billedpunkter fra venstre kant. Så uansett hvordan du endrer webleser vinduet sin størrelse, så vil bildet alltid plasseres 100 punkter ned fra øvre kant, 50 punkter fra venstre kant. Linjen #Relativ angir at HTML elementet skal plasseres i forhold til foregående element. Bruke JavaScript til å endre bilde som musepeker passerer over Mange websider bruker et bilde av en trykk knapp som peker (lenk) til en annen side, når musepekeren passerer over bildet endres bildet (f.eks. blir kantene røde). Denne effekten lages med de to JavaScript funksjonene onmouseover og onmouseout. Først har vi behov for to bilder av knappen, ett for knappens normale utseende, og ett for hvordan knappen skal se ut når musepekeren passerer over den: Start deretter opp web redigeringsverktøyet ditt og skriv inn denne HTML koden: <! BODY font family: verdana, arial, helvetica, sans serif > <SCRIPT language="javascript"> 5
6 var BtnArr=new Array(); /* Lag tabell med navn på btn.bilder*/ BtnArr["Normal"]='btna.gif'; /* 1. element; normal knapp. */ BtnArr["Over"]='btnb.gif'; /* 2. element; mus over knapp*/ function EndreBilde(Bilde) /* I IMG knagg må du bruke: NAME="Knapp1". */ document.knapp1.src=btnarr[bilde]; /* Sett navn på knapp bilde.*/ </SCRIPT> <BODY bgcolor="white" text="black" > <H3>Bruke JavaScript til å endre bilde</h3> Her brukes JavaScript funksjonen onmouseover og onmouseout til å endre bildet av trykk knappen når musepeker befinner seg over bildet av knappen. <DIV ID="M_Hover"> <a href="#" onmouseover="endrebilde('over')" OnMouseOut="EndreBilde('Normal')"> <Img src="btna.gif" NAME="Knapp1"></a> </DIV> I dette eksemplet setter vi stilsett som vi har gjort tidligere (BODY... ), men like under finner vi knaggen <SCRIPT LANGUAGE="javascript">. Denne knaggen angir at her starter et skript i språket JavaScript. Først opprettes en tabell BtnArr med new funksjonen. Deretter legger vi inn navnene på de to bildene av trykk knappene (btna.gif og btnb.gif) som elementer i tabellen. På denne måten kan vi i JavaScript lagre filnavnene til de knapper vi har behov for. Legg merke til den måten vi indekserer tabellen, med beskrivende ord som Normal og Over. Her vil Normal angi btna.gif det bildet som vises når musepeker ikke er over noen del av bildet, mens Over angir btnb.gif som vises når musepeker befinner seg over bildet. Dernest må vi ha en JavaScript funksjon som kan endre bildet når musepeker passerer over. Dette gjøres i funksjonen EndreBilde: function EndreBilde(Bilde) /* I IMG knagg må du bruke: NAME="Knapp1". */ document.knapp1.src=btnarr[bilde]; /*Endre navn på knappbilde*/ Funksjonen tar en parameter Bilde som må ha en av verdiene Normal eller Over. Objektet document.knapp1 vil angi et objekt i webdokumentet. Her har vi gitt det navnet Knapp1, og vi endrer egenskapen src. Navnet Knapp1 må vi bruke som attributt i knaggen <IMG SRC... NAME="Knapp1"> i webdokumentet. Selve pekeren (<A HREF=...>) plasseres inni en <DIV ID="M_Hover"> beholder. DIV er en beholder som (sammen med SPAN) brukes mye i CSS sammenheng til å plassere elementer som skal gis en spesiell posisjon el.l. Dersom du også ønsker å ha et eget bilde som vises når en knapp er trykket inn, lager du et eget bilde (f.eks. som vist til høyre over, og lagrer det som btnc.gif). Deretter redigerer du JavaScript koden under variabeldeklarasjonen, der du føyer til en ny linje: 6
7 BtnArr["Aktiv"]='btnc.gif'; I tillegg må du føye til en onclick referanse i selve peker referansen nede i BODY seksjonen : <DIV ID="M_Hover"> <a href="#" onmouseover="endrebilde('over')" onclick="endrebilde('aktiv')" onmouseout="endrebilde('normal')"> <Img src="btna.gif" NAME="Knapp1"></a> </DIV> Dermed vil knappen vises inntrykket nå du klikker på bildet med venstre museknapp. Bruke JavaScript og stilsett til å flytte bilder Stilsett brukt sammen med JavaScript kan gi dynamiske HTML sider. For å kalle opp JavaScript funksjonen som flytter bildet kan vi enten bruke en peker (link) slik som i dette eksemplet. Eller vi kan lage et HTML skjema (Form) med trykknapper. Dersom brukeren klikker på en peker (link) så beveger for eksempel et bilde seg på skjermen. La oss se på et eksempel som flytter dette dokumentets logo fram og tilbake på skjermen. I seksjonen må vi ha både et stilsett definisjon og et skript (JavaScript i vårt eksempel). I <BODY > seksjonen plasserer vi bildet som skal flyttes inni en <DIV ID="Bilde"> knagg. Start en tekstbasert HTML editor og skriv inn denne HTML koden: <TITLE>DHTML 5</TITLE> <! BODY background color: white ; color: black #Bilde position:absolute; top:50px; left:250px; height:104; width:240px; z index:0 > <SCRIPT LANGUAGE="JAVASCRIPT"> <! var StdPos = 250; // Standard plassering av bildet. function FlyttBilde(n) // Denne funksjonen flytter bildet. if (document.layers) // ** Dersom "layers" objektet finnes (NN) // alert("netscape Navigator"); if (document.bilde.left 640) // Ikke flytt for langt til V. document.bilde.left = document.bilde.left + n; else document.bilde.left = 640; if (document.bilde.left 0) // Dersom bildet flyttes forbi 0, document.bilde.left = StdPos; // flytt til Std.pos. else if (document.all) // ** Dersom "all" objektet finnes (IE) 7
8 // alert("internet Explorer"); if(parseint(bilde.style.left) 640) Bilde.style.left = parseint(bilde.style.left) + n; else Bilde.style.left = StdPos; if (parseint(bilde.style.left) 0) Bilde.style.left = StdPos; function V_Klikk() FlyttBilde( 5); function H_Klikk() FlyttBilde(5); // > </SCRIPT> // For å flytte bildet til venstre. // For å flytte bildet til høyre. <BODY> <H1>D HTML bevege bilde</h1> <DIV ID="Bilde"> <IMG SRC="logo.gif"> </DIV> <BR><BR> <BR><BR> <P> Demo av stilsett med absolutt posisjonering, og bruk av JavaScript til å flytte bildet fram og tilbake på skjermen. <! Bruk pekere til å registrere museklikk for bilde bevegelse > <a href="#" onclick="v_klikk()">flytt til venstre</a> <a href="#" onclick="h_klikk()">flytt til høyre</a> Her bruker vi #Bilde i stilsettdefinisjonen til å gi navn (ID) til det element (DIV) som skal inneholde bildet vi vil bevege omkring på skjermen. Vi angir at bildet skal posisjoneres absolutt, 250 billedpunkter fra venstre skjermkant, og 50 billedpunkter fra øvre kant. I tillegg angir vi bredde og høyde på elementet (her brukes bildets virkelige bredde/høyde). I tillegg til stilsettet må vi ha JavaScript kode som reagerer på brukerens museklikk. Problemet er at Netscape Navigator 4.x og Internet Explorer 4 (el. senere) ikke bruker samme syntaks for å angi elementene i et HTML dokument! I Netscape vil vi finne objektet "document.layers", mens i Internet Explorer vil vi finne objektet "document.all". I JavaScript koden må vi derfor bruke noen if setninger til å sjekke hvilken webleser som brukes, og ha et sett kodelinjer for hver webleser. Se <SCRIPT...> seksjonen. I <BODY> seksjonen av HTML dokumentet må vi bruke elementet DIV med ID="Bilde" og så plassere IMG knaggen inni DIV elementet: 8
9 <DIV ID="Bilde"> <IMG SRC="LOGO.GIF"> </DIV> Til slutt bruker vi JavaScript funksjonen onclick i hvert peker element til å kalle opp funksjonene V_Klikk el. H_Klikk som flytter bildet til respektive venstre el. høyre med 5 billedpunkter for hvert klikk med venstre museknapp. Lage websider for både Internet Explorer og Netscape Navigator Det faktum at Microsoft og Netscape har valgt litt ulike måter å implementere stilsett på lager problemer dersom vi ønsker å lage websider der stilsett og JavaScript fungerer med begge weblesere. En mulighet er å bruke if setninger i hver webside, slik at sidene vises korrekt med begge weblesere (slik vi gjorde i eksempelet over). En annen mulighet er å lage to ulike websider, den ene laget for Internet Explorer, og en annen (enklere?) laget for Netscape Navigator. Så lar vi index.htm filen inneholde en enkel test på hvilken webleser brukeren har, og så redirigeres brukeren til den rette versjonen. Index.htm blir da en side uten noe tekst i kroppen (BODY seksjonen), slik: <SCRIPT laguage="javascript"> function RedirectPage() if(document.layers) // If Netscape, load Navigator version of page parent.location.href = "indexns.htm"; else if (document.all) // IE, load IE version of page parent.location.href = "indexie.htm"; // else???? </SCRIPT> <BODY onload="redirectpage();"> Du må i tillegg lage indexns.htm og indexie.htm sidene. Stilsett i en ekstern fil I de eksemplene vi har sett på til nå har stilsett reglene blitt plassert i HEAD seksjonen mellom knaggene <STYLE...> og. Når hver side har ulike stilsettregler kan dette være en grei løsning. Men i mange tilfeller ønsker vi at alle websidene skal ha et noenlunde felles utseende. F.eks. at alle overskrifter skal vises med samme skriftsnitt (font) og størrelse, marger og navigasjonselementer skal se like ut osv. Dette oppnår vi enkelt med å skrive stilsettreglene inn i en vanlig tekstfil (uten <STYLE> knaggene) som vi lagrer med.css som etternavn. Deretter lenker vi inn den eksterne filen i webdokumentet 9
10 vårt. Her kommer et eksempel på et eksternt stilsett (lagre som test.css): /* Stilsett eksempel (CSS) */ /* Sett standard font, nullstill marger.*/ BODY font family: verdana, arial, helvetica, sans serif; margin left: 0pt; margin top: 0pt; margin right: 0pt /* Sett font for overskrifter, og innrykk(dvs. marg).*/ H1, H2, H3, H4, H5 font family: "times new roman", times, serif; text indent: 0.5em; Her kommer et eksempel som viser hvordan stilsettfilen over brukes i et HTML dokument: <! Hent inn et eksternt stilsett fra fila TEST.CSS > <LINK REL=STYLESHEET TYPE="text/css" HREF="test.css"> <BODY> <H2>Eksternt stilsett eksempel</h2> Tekst her... Linjen <LINK REL=...> henter inn stilsettet fra fila test.css. Dermed kan vi legge denne linja inn i alle websidene våre og dermed blir alle overskrifter like, og all brødteksten lik. Dersom vi senere ønsker et annet utseende på overskriftene, behøver vi kun gjøre endringene ett sted (i test.css). Bruke JavaScript til å kontrollere feltene i et skjema Dersom du ønsker at de som besøker hjemmesiden din skal kunne fortelle deg hva de synes, kan du enten opplyse e post adressen din, eller du kan f.eks. lage et skjema (HTML form) som brukerne fyller ut. Dette skjemaet kan så sendes til webserveren din med CGI (se innføring i CGI4VB). Men dersom bruker ikke har fyllt ut de nødvendige feltene kan det oppstå problemer. Selvsagt kan CGI skriptet lages slik at det sjekker om feltene er fyllt ut, men det enkleste er å lage en JavaScript funksjon som sjekker om inndatafeltene er tomme el. ikke. Et skjema kan f.eks. se slik ut: <FORM ACTION="cgi bin/mittcgiskript" NAME="MittSkjema"> Navn : <INPUT type="text" name="navn"><br> Alder : <INPUT type="text" name="alder"><br> E post: <INPUT type="text" name="epost"><br> <INPUT TYPE="SUBMIT" VALUE="Send"> </FORM> La oss si at vi vil kreve at feltet "Navn" må fylles ut. Vi må da gjøre to endringer, den første er å bytte ut "Submit" knappen med en vanlig, og den andre er å lage en JavaScript funksjon: Dvs. endre: til: <INPUT TYPE="SUBMIT" VALUE="Send"> 10
11 <INPUT TYPE="BUTTON" VALUE="Send" onclick="sjekkfelt();"> Grunnen til at vi ikke ønsker en "Submit" knapp er at vi får JavaScript til å utføre "submit" funksjonen (en "Submit" knapp ville også sende skjemaet selv om feltet Navn var tomt). Deretter lager vi en SCRIPT seksjon i HTML koden, og skriver inn funksjonen SjekkFelt(): <SCRIPT language="javascript"> function SjekkFelt() if (document.mittskjema.navn.value == "") alert("du må skrive inn et navn!"); return; document.mittskjema.submit(); </SCRIPT> Funksjonen starter med å kontrollere om verdien (value) til feltet Navn er tomt. Dersom feltet er tomt vises en beskjed (alert) på skjermen, og funksjonen returnerer. Dvs. at bruker får en ny sjanse til å skrive inn noe i feltet Navn. Dersom Navn er fyllt ut, sendes skjemaet med kallet: document.mittskjema.submit(); Slik fortsetter vi med å kontrollere de andre feltene. Først sjekker om feltet Alder inneholder fornuftige verdier. Funksjonen isnan sjekker at verdien til Alder ikke er et tall ("isnotanumber"), dermed elimineres tekst og et tomt felt. I e post feltet sjekker vi om bruker har tastet inn krøllalfa (@) ved hjelp av indexof metoden. Fullstendig utlisting av HTML koden: <TITLE>Bruke JavaScript til å kontrollere innnfelt</title> <META name="description" content="javascript til å kontrollere innnfelt"> <META name="keywords" content="javascript"> <META name="author" content="th"> <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080"> <H1>Bruke JavaScript til å kontrollere innnfelt</h1> <FORM ACTION="cgi bin/mittcgiskript" NAME="MittSkjema"> Navn : <INPUT type="text" name="navn"><br> Alder : <INPUT type="text" name="alder"><br> E post: <INPUT type="text" name="epost"><br> <INPUT TYPE="BUTTON" VALUE="Send" onclick="sjekkfelt();"> </FORM> <SCRIPT language="javascript"> <! function SjekkFelt() if (document.mittskjema.navn.value == "") alert("du må skrive inn et navn!"); return; var Alder = parseint(document.mittskjema.alder.value); if (isnan(alder) Alder < 1 Alder > 150) 11
12 alert("ikke gyldig alder (1 150)"); return; if == 1) alert("ikke korrekt e post adresse!"); return; document.mittskjema.submit(); > </SCRIPT> 12
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
Innføring i bruk av CGI4VB
Innføring i bruk av CGI4VB Her kommer en enkel innføring i bruk av modulen CGI4VB som kan benyttes for å lage CGI programmer i Visual Basic. CGI er en forkortelse for Common Gateway Interface den kommunikasjonsprotokollen
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
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 ;-)
En enkel innføring i HTML koding
En enkel innføring i HTML koding Både Internet Explorer og Netscape Navigator kommer med egne verktøy for å lage HTML sider (FrontPage Express og Netscape Composer). Disse verktøyene inneholder et såkalt
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
Innføring i bruk av CGI4VB
Innføring i bruk av CGI4VB Her kommer en enkel innføring i bruk av modulen CGI4VB som kan benyttes for å lage CGI programmer i Visual Basic. CGI er en forkortelse for Common Gateway Interface den kommunikasjonsprotokollen
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
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å
I denne oppgaven skal du lære hvordan du kan flytte rundt på elementer og gjemme elementene bak andre elementer ved hjelp av CSS.
CSS: Skjul ninjaene Skrevet av: Oversatt fra Code Club UK (//codeclub.org.uk) Oversatt av: Trude Martinsen Kurs: Web Tema: Tekstbasert, Nettside Fag: Matematikk, Programmering, Teknologi, Kunst og håndverk
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
WordPress. Brukerveiledning. Kjære kunde. Innlogging:
Brukerveiledning WordPress Sist oppdatert: 26.02.2014 Kjære kunde Her er en liten guide for å hjelpe deg gjennom det grunnleggende i Wordpress. Denne veilederen vil ta deg gjennom: Innlogging - s.1 Kontrollpanel
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
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,
<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
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
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
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
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...
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
Brukermanual. www.bygdekvinnelaget.no
Brukermanual www.bygdekvinnelaget.no Viktige endringer Nye Bygdekvinnelaget.no er lagt opp på en måte der brukere og redaktører står for innhold, mens systemet i enda større grad en tidligere står for
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
Tegneprogram Journeyman Scratch PDF
Tegneprogram Journeyman Scratch PDF Introduksjon I dette prosjektet lager vi et tegneprogram slik at du etterpå kan lage din egen kunst. Du kan tegne med forskjellige farger, bruke viskelær, lage stempler
Veiledning i administrering av egne loge-/leirsider i portalen www.oddfellow.no
Veiledning i administrering av egne loge-/leirsider i portalen www.oddfellow.no Innhold: Skjermbilde 3: Skjermbilde 4-8: Skjermbilde 9-13: Skjermbilde 14-17: Skjermbilde 18-20: Skjermbilde 21-24: Skjermbilde
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
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
Brukerveiledning WordPress. Innlogging:
Brukerveiledning WordPress Her er en liten guide for hjelpe deg gjennom det grunnleggende i Wordpress. Denne veilederen vil ta deg gjennom: Innlogging Lage en side Lage et innlegg Innlogging: For å logge
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
BRUKERMANUAL KOM I GANG... 2 BLOGGINNLEGG... 4 UNDERSIDER... 6 LAST OPP BILDER/VIDEO... 8 KOMMENTARER PÅ INNLEGG... 9 UTSEENDE...
BRUKERMANUAL KOM I GANG... 2 SKRIV ET INNLEGG... 2 LEGG TIL UNDERSIDE... 2 LAST OPP BILDER... 2 REDIGER MENYINNHOLD... 3 LEGG INN SIDEMENY ELLER BUNNTEKST... 3 TILPASS BLOGGENS DESIGN... 3 BLOGGINNLEGG...
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
Stilark Cascading Style Sheets - CSS
Stilark Cascading Style Sheets - CSS /* Eksempel på stilark */ h1 { text-align: center; color: blue; } Læreboka kapittel 5 12. september 2007 INF1040-CSS-1 Boks-modellen Et XHTML-dokument er satt sammen
Stilark Cascading Style Sheets - CSS
Stilark Cascading Style Sheets - CSS /* Eksempel på stilark */ h1 { text-align: center; color: blue; } Læreboka kapittel 5 12. september 2007 Boks-modellen Et XHTML-dokument er satt sammen av elementer
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
og bevegelse funksjoner som blir aktivert av hendelser Keyboard Informasjonsteknologi 2 Læreplansmål Gløer Olav Langslet Sandvika VGS
Keyboard og bevegelse Gløer Olav Langslet Sandvika VGS 12.09.2012 Informasjonsteknologi 2 funksjoner som blir aktivert av hendelser Læreplansmål Eleven skal kunne programmere med enkle og indekserte variabler
Steg 1: Felix har forsvunnet!
HTML: Forsvunnet katt Skrevet av: Arve Seljebu Kurs: Web Tema: Tekstbasert, Nettside Fag: Programmering, Teknologi, Norsk Klassetrinn: 5.-7. klasse, 8.-10. klasse, Videregående skole Introduksjon Katten
Manual for. 2.4 KALAS Sitemanager
Manual for 2.4 KALAS Sitemanager 1. Introduksjon Denne manualen skal hjelpe deg å komme igang, slik at du selv på en enkel måte kan legge til, redigere eller ta bort websider på din webplass. 1.1 Systemkrav
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
Halloweenimasjon Introduksjon Scratch PDF
Halloweenimasjon Introduksjon Scratch PDF Introduksjon Vi vil her se på hvordan vi kan lage forskjellige animasjoner med et Halloween-tema. Disse kan vi enten dele med vennene våre gjennom Scratch, eller
Lage klubbens webside i Rotary med verktøyet Webwiz 2.0
Lage klubbens webside i Rotary med verktøyet Webwiz 2.0 Versjon 1.0 av DICO 2250 25.04.2011 Det å lage en webside uten å ha kjennskap til dette fra før, kan virke vanskelig, men ikke fortvil. Det går alltid
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
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
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.
Sprettende ball Introduksjon Processing PDF
Sprettende ball Introduksjon Processing PDF Introduksjon: I denne modulen skal vi lære et programmeringsspråk som heter Processing. Det ble laget for å gjøre programmering lett for designere og andre som
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............................................
Hvordan redigere fotoblogg sider i Joomla 3.x
Hvordan redigere fotoblogg sider i Joomla 3.x Side 1/6 For å endre en side/artikkel i Joomla logger du inn. Velkomstskjermen er denne. Klikk på artikler. Eller velg artikler fra toppmenyen: Innhold >>
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
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
Slik lager du et web-område bestående av flere sammenhengende websider i. Frontpage 2003. Laget av Magnus Nohr Høgskolen i Østfold
Slik lager du et web-område bestående av flere sammenhengende websider i Frontpage 2003 Laget av Magnus Nohr Høgskolen i Østfold Innholdsfortegnelse 1 Opprett Web-område 3 2 Opprett en navigasjonsstruktur
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
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
Web-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:
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...
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
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
få en ny og og god hjemmeside på få minutter Quick guide
få en ny og og god hjemmeside på få minutter Quick guide 1 Få en profesjonell hjemmeside på få minutter GoMinisite nå: Sett deg foran PC en din, åpne nett-browseren din og skriv www.gominisite.no Fyll
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
ThinkPage CMS 2.0. Hurtigveiledning. Av ThinkPage AS
ThinkPage CMS 2.0 Hurtigveiledning Av ThinkPage AS ThinkPage CMS 2 Forord Dette er en midlertidig brukerveiledning tar for seg de viktigste basisfunksjonene i ThinkPage CMS og gir brukeren nødvendig innføring
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
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
Oblig 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ø
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
AUTOCAD 2008. Artikkelserie. Tabeller
Odd-Sverre Kolstad AUTOCAD 2008 Artikkelserie Tabeller Gyldendal Norsk Forlag AS 2007 Omslag Marianne Thrap Redaktør: Rune Kjelvik Formgiver: Rune Kjelvik 1. opplag ISBN 978-82-05-37108-8 Alle henvendelser
KOMME I GANG 2. Logge på 2. I redigeringsvinduet 3 OVERSIKT OVER KNAPPENE SOM LIGGER ØVERST I REDIGERINGSVINDUET 5
Innhold KOMME I GANG 2 Logge på 2 I redigeringsvinduet 3 OVERSIKT OVER KNAPPENE SOM LIGGER ØVERST I REDIGERINGSVINDUET 5 Lukk 6 Ny 6 Flytt opp/ Flytt ned 6 Klipp 7 Kopier 7 Lim inn (krysspubliser, ny,
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
(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
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.
Steg 1: En første animasjon
Halloweenimasjon Skrevet av: Torbjørn Skauli og Geir Arne Hjelle Kurs: Scratch Tema: Blokkbasert, Animasjon Fag: Programmering, Engelsk, Kunst og håndverk Klassetrinn: 1.-4. klasse, 5.-7. klasse, 8.-10.
Start et nytt Scratch-prosjekt. Slett kattefiguren, for eksempel ved å høyreklikke på den og velge slett.
Hvor i All Verden? Del 1 Introduksjon Hvor i All Verden? er et reise- og geografispill hvor man raskest mulig skal fly innom reisemål spredt rundt i Europa. I denne første leksjonen vil vi se på hvordan
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
Oppsummering - 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...
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
HR analysen. Ny versjon 2009. Brukermal. Administratorer
HR analysen Ny versjon 2009 Brukermal Administratorer 1) Som administrator Det første bildet en kommer inn på når en har logget seg inn er: A) Legg merke til den hvite boksen på høyre side der det står
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
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
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
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 å
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
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
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
Brukerveiledning http://www.hovikif.no/ Bruk av siden. Når du går inn på siden får du opp følgende bilde:
Brukerveiledning http://www.hovikif.no/ Bruk av siden Når du går inn på siden får du opp følgende bilde: Øverst i høyre hjørne kan du endre størrelsen på teksten og søke etter lagrede artikler. De enkelte
Hvordan redigere blogg sider i Joomla 3.x
Hvordan redigere blogg sider i Joomla 3.x Side 1/8 For å endre en side/artikkel i Joomla logger du inn. Velkomstskjermen er denne. Klikk på artikler. Eller velg artikler fra toppmenyen: Innhold >> Artikler
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
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
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...
Hvordan legge til et dokument/bilde på en eksisterende side:
Hvordan legge til et dokument/bilde på en eksisterende side: Først må filen (eller bildet) legges inn på filområdet til WebOrg. Velg «Filutforsker» som vist på bildet. Velg den mappen du vil bruke. Hver
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