runemikal.files.wordpress.com · Web viewHer ser vi at linken åpner seg i egen fane som nevnt...
8
Formidlingsoppgave 5. Jeg velger her å bruke den første oppgaven vi gjorde. Vi skal i oppgave1 starte med en overskrift, plassere inn et bilde. Under bilde skal det plasseres et par linker. Vi skal så gi siden en bakgrunnsfarge og midt stille overskrift, bilde og linker på siden. Vi starter med å opprette et html dokument og et css dokument. Vi lagrer så dette i en felles mappe, hvor html dokumentet lagres som en index.html fil. Vi oppretter så undermapper i denne mappen for css og bilde filene vi skal ha med i oppgaven. Går til fil og ny Lager et html fil 1
Transcript of runemikal.files.wordpress.com · Web viewHer ser vi at linken åpner seg i egen fane som nevnt...
Formidlingsoppgave 5.
Jeg velger her å bruke den første oppgaven vi gjorde.
Vi skal i oppgave1 starte med en overskrift, plassere inn et bilde. Under bilde skal det plasseres et par linker. Vi skal så gi siden en bakgrunnsfarge og midt stille overskrift, bilde og linker på siden.
Vi starter med å opprette et html dokument og et css dokument. Vi lagrer så dette i en felles mappe, hvor html dokumentet lagres som en index.html fil. Vi oppretter så undermapper i denne mappen for css og bilde filene vi skal ha med i oppgaven.
Går til fil og ny Lager et html fil
Lager en css fil Lagrer som nevnt over alt i en egen mappe,med egne mapper til css og bildefiler
I den øvre del under <head> setter vi vedsiden av <title> inn ”oppgave 1” som da vil vises på taben i nettleseren når siden er ferdig og åpnes. Dette sees til slutt i dette dokumentet hvor hele websiden vises.
Det som blir synlig i nettleseren som websiden er det som ligger mellom <body> og avslutningen av </body>
Vi starter med å legge inn en farge på bakgrunnen og bruker <h1> en standard for overskrifter til den første teksten. Mellom <h1> og </h> legger vi inn teksten som skal stå øverst.
1
Vi bruker en <div> til å legge inn og sentrere bildet på siden. Vi viser og til bildet som ligger i mappen bilder og tar med bildets navn. Vi skriver og inn størrelsen på bildet. Før vi avslutter med </div> og gir litt rom til linkene som skal komme under ved å sette inn to <br> mellomrom.
Vi går så inn i css og modellerer både h1 overskriften og linkene i forhold til farger, skriftfont, størrelse og understrekning. Under gies skriften en blåfarge og teksten blir understreket og midtsentrert.
2
Når vi kommer til linkene som skal legges inn så velger vi en annen font, farge (rød) og 24 px størrelse på fonten
Vi legger til slutt til en a:hover som gir linkene et fargeskift når vi setter pilpekeren over linken. Pilen forvandles og til en hånd når pilen holdes over linken.
3
For å få de endringene som er gjort i css til å knyttes til html filene, settes det inn en link til css filen i head delen i html filen. Vi ser at h1 overskriften får fargen, understrekingen og midtstillingen som css filen skal gi den.
Vi setter inn 2 <div som viser tilbake til fonter, størrelse, og farger i css filen. De har og adressen til de to aktuelle linkene vi ville ha på siden. Kodingen til linkene sees på de neste to bildene.
4
Det at linken har en endelse på target=”_blank”> gjør at den åpnes i et nytt vindu, noe som gjør at du ikke mister kontakten med kunden fra den siden som linken åpnes fra.
Vi ser av bildet under at ”oppgave 1” kommer opp i fanen. Jeg holder pekepilen over linken til lekebutikk og den skifter farge fra rød til blå. Hånden som kom fram når
5
pilen ble holdt over linken forsvant når jeg tok bilde. Den viste seg umulig å få med på bildet.
Her ser vi at linken åpner seg i egen fane som nevnt tidligere i forhold til kodingen.
6
