Fakultet for informasjonsteknologi, EKSAMEN I EMNENE TDT4110/TDT4115 SIF8008/SIF8009 INFORMASJONSTEKNOLOGI GK 5. AUGUST 2004 KL. 09.00 13.



Like dokumenter
CASCADING STYLESHEETS (CSS)

CSS-formatering: stilark med kommentarer

AVSLUTTENDE EKSAMEN TDT 4105 Informasjonsteknologi, grunnkurs En vakker dag i August 2007,

Avsluttende eksamen i TDT4110 Informasjonsteknologi, grunnkurs En vakker dag i august :00 13:00

AVSLUTTENDE EKSAMEN TDT 4105 Informasjonsteknologi, grunnkurs Torsdag 6. desember 2007,

Mer om stiler og stilark. Layout. Litt Design

AVSLUTTENDE EKSAMEN I. TDT4160 Datamaskiner Grunnkurs. Torsdag 29. November 2007 Kl

EKSAMENSOPPGAVE I TDT4110

1. Cascading Style Sheet (CSS)

Håkon Tolsby Håkon Tolsby

OBLIG 1 - WEBUTVIKLING

AVSLUTTENDE EKSAMEN TDT 4105 Informasjonsteknologi, grunnkurs Tirsdag 19. desember 2006,

Styling og formatering av tekst

KONTINUASJONSEKSAMEN TDT 4105 Informasjonsteknologi, grunnkurs 15. August 2008,

praktiske eksempler DOM Document Object Model DOM og Høst 2013 Informasjonsteknologi 2 Læreplansmål Gløer Olav Langslet Sandvika VGS

MMT105 Internettprogrammering Uke 44, høst 2007

Intro til WWW, HTML5 og CSS

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.

TENK TECH SUMMERCAMP BYGG DIN EGEN NETTSIDE

Kursdokumentasjon for Dreamweaver

Oblig 1 Erlend Hannestad

Javascript. Mer om layout

Eksamen i Internetteknologi Fagkode: IVA1379

BOKMÅL Side 1 av 7. KONTINUASJONSEKSAMEN I FAG TDT4100 Objektorientert programmering / IT1104 Programmering, videregående kurs

PUBLISERING AV INNHOLD TIL KVAMSSIDA.NO

AVSLUTTENDE EKSAMEN TDT 4105 Informasjonsteknologi, grunnkurs Mandag 19. desember,

CSS: Style nettsider Nybegynner

Løsningsforslag: Avsluttende eksamen i TDT4110 Informasjonsteknologi, grunnkurs Torsdag 6. desember :00 13:00

EKSAMEN / 6101N WebPublisering

KONTINUASJONSEKSAMEN TDT 4105 Informasjonsteknologi, grunnkurs Tirsdag 8. august,

SUKKERGRIS. Anita og Silje DAT100

Kontinuasjonseksamen i TDT4110 Informasjonsteknologi, grunnkurs ONSDAG 10. august

LØSNINGSFORSLAG AVSLUTTENDE EKSAMEN TDT 4105 Informasjonsteknologi, grunnkurs Torsdag 6. desember 2007,

CSS. Aud Marie Hauge ekspert i brukskvalitet og universell utforming i Epinova AS

Håkon Tolsby Håkon Tolsby

CSS: Endre utseende og stil på tekst Nybegynner

Læringsmål og pensum. Hvordan virker webteknologi? (klient-tjener arkitektur) HTML - virkemåte. Nettleser: Firefox, Opera, Safari

EKSAMEN Webpublisering

LØSNINGSFORSLAG AVSLUTTENDE EKSAMEN TDT 4105 Informasjonsteknologi, grunnkurs En vakker dag i August 2007,

EKSAMEN (Konvertert fra en gammel PHP-eksamen)

Steg 1: Vi starter fra toppen

I denne oppgaven skal du lære hvordan du kan flytte rundt på elementer og gjemme elementene bak andre elementer ved hjelp av CSS.

Oppgave 1. Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.

Tilpassning av Wordpress - Enterprise Theme

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!

Avsluttende eksamen i TDT4110 og TDT4115 Informasjonsteknologi, grunnkurs 8. august :00 13:00

LØSNINGSFORSLAG KONTINUASJONSEKSAMEN TDT 4105 Informasjonsteknologi, grunnkurs 15. August 2008,

INF1040 Oppgavesett 4: CSS

Eksempeleksamenssett for Informasjons og publiseringsteknologi faget høsten 2005.

Administrering av SafariSøk

ALGORITMER OG DATASTRUKTURER

Tema Guide for PHP-Fusion v6.01.

LØSNINGSFORSLAG Kontinuasjonseksamen i TDT4110 Informasjonsteknologi, grunnkurs Onsdag 10. august

Avsluttende eksamen i TDT4110/IT1102 Informasjonsteknologi, grunnkurs Tirsdag 21. desember

Læringsmål og pensum. v=nkiu9yen5nc

CSS: Style nettsider. Introduksjon. Skrevet av: Arve Seljebu

<HTML Koder> Enkle HTML koder for bruk til bl.a cachebeskrivelser. Ver. 2.01

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

HTML5. Skjemaer på nettsider. Skjemaer med. Informasjonsteknologi 1 og 2. Gløer Olav Langslet Sandvika VGS

AVSLUTTENDE EKSAMEN I. TDT4160 Datamaskiner Grunnkurs Løsningsforslag. Torsdag 29. November 2007 Kl

Forsvunnet katt webside

datatyper Hva er programmering? Variabler og Informasjonsteknologi 2 Kompetansesemål

(X)HTML, CSS og JavaScript HTML. Det første dokumentet Grunnleggende programmering i Java Monica Strand 26.

EKSAMEN Web-publisering

TDT4110 Informasjonsteknologi grunnkurs: Kapittel 1 Introduksjon til Programmering og Python. Professor Alf Inge Wang

TDT4102 Prosedyre og Objektorientert programmering Vår 2015

UNIVERSITETET I OSLO

Løsningsskisse til kontinuasjonseksamen i TDT4105 Informasjonsteknologi, grunnkurs Onsdag 10. august

og bevegelse funksjoner som blir aktivert av hendelser Keyboard Informasjonsteknologi 2 Læreplansmål Gløer Olav Langslet Sandvika VGS

HTML: Del inn nettsiden

KONTINUASJONSEKSAMEN TDT 4105 Informasjonsteknologi, grunnkurs 5. august 2009,

ITGK - H2010, Matlab. Dagens tema : Teori - Databaser

NCE TOURISM FJORD NORWAY. FJORDNETT INTERNETTFORUM 2012 Bergen, 12./13. juni 2012

ALGORITMER OG DATASTRUKTURER

EKSAMEN. Emne: Webprogrammering med PHP (kont.) Webprogrammering 1 (kont.) Eksamenstid:

file:///c:/users/michaelp/sites/dkdm/dw5/dreamweaver5_1.html

TDT4105 Informasjonsteknologi, grunnkurs (ITGK)

BOKMÅL Side 1 av 5. KONTERINGSEKSAMEN I FAG TDT4102 Prosedyre og objektorientert programmering. Onsdag 6. august 2008 Kl

EKSAMEN. Emne: Innføring i informasjons- og kommunikasjonsteknologi

Fakultet for informasjonsteknologi, Oppgave 1 Flervalgsspørsmål ( multiple choice ) 15 %

Oppgave 1: Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.

Brukermanual til Domenia Norges adminløsning

TDT4105 Informasjonsteknologi, grunnkurs (ITGK)

Fakultet for informasjonsteknologi,

LØSNINGSFORSLAG AVSLUTTENDE EKSAMEN TDT 4105 Informasjonsteknologi, grunnkurs Tirsdag 19. desember 2006,

Avsluttende eksamen i TDT4110 Informasjonsteknologi, grunnkurs Mandag 8. desember :00 13:00

BRUK AV GMAIL SOM KLUBBADRESSE

Brukerveiledning digital eksamen via FLOWlock

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

UNIVERSITETET I OSLO

TDT4110 IT Grunnkurs Høst 2014

Steg 1: Animasjons-attributtet

TDT4110 Informasjonsteknologi, grunnkurs Uke 35 Introduksjon til programmering i Python

CSS: Animasjon Nybegynner

UNIVERSITETET I OSLO

JavaScriptbibliotek. Introduksjon MVVC. Informasjonsteknologi 2. Gløer Olav Langslet Sandvika VGS

ALGORITMER OG DATASTRUKTURER

Kontinuasjonseksamen i TDT4105 Informasjonsteknologi, grunnkurs XXXdag XX. august

Avsluttende eksamen i TDT4105 Informasjonsteknologi, grunnkurs Tirsdag 21. desember

81,9(56,7(7(7,26/2 'HWPDWHPDWLVNQDWXUYLWHQVNDSHOLJHIDNXOWHW

Transkript:

Side 1 av 13 NTNU Norges teknisk-naturvitenskapelige universitet BOKMÅL Fakultet for informasjonsteknologi, matematikk og elektroteknikk Institutt for datateknikk og informasjonsvitenskap EKSAMEN I EMNENE TDT4110/TDT4115 SIF8008/SIF8009 INFORMASJONSTEKNOLOGI GK 5. AUGUST 2004 KL. 09.00 13.00 Faglig kontakt under eksamen: Universitetslektor Karl Morten Dahl, Institutt for Datateknikk og Informasjonsvitenskap (IDI) tlf (735)94481/92425571 Tillatte hjelpemidler: Typegodkjent kalkulator HP30S Tilleggshefte I til Innføring i IT, HTML, JSP & MySQL Sensurdato: 15. september 2004. Resultater gjøres kjent på http://studweb.ntnu.no/ og sensurtelefon 81548014. Oppgavesettet inneholder 5 oppgaver. Det er angitt i prosent hvor mye hver oppgave teller ved sensur. Gjør de nødvendige antagelser. Disponer tiden godt! Lykke til!

Side 2 av 13 Oppgave 1 Flervalgsoppgaver, teori (30%) Bruk svararket bakerst i oppgaveteksten for å svare på denne oppgaven. Du kan få nytt ark av eksamensvaktene dersom du trenger dette. Hver korrekte avkryssing gir 2 poeng. Gal avkrysning gir -0.6 og blankt svar på et spørsmål gir 0 poeng. NB! Det er ikke mulig å gardere ved å krysse av flere alternativer. Dette gir i så fall 0 poeng. Ved negativ totalsum på denne oppgaven gis 0 poeng. Kun ett svar er helt rett på hvert spørsmål. 1. Hva er usant om kommunikasjonsmodellen som er beskrevet i boka a) Et lag i modellen kan byttes ut uten at lagene over og under påvirkes av dette. b) Mottaker og avsender på samme lag/nivå må være enige om kjøreregler (protokoll) for kommunikasjonen c) Dersom et lag skiftes ut må laget over også skiftes ut. d) Protokoll-samlingen TCP/IP som all kommunkasjon over Internett er basert på er bygd opp på samme måte som på den generelle kommunikasjonsmodellen 2. Hva er sant om adresser på Internett? a) En IP-adresse kan representeres vha det vanlige tallsystemet som 4 tall fra og med 0 og til og med 522 adskilt med punktum. b) En IP-adresse er på 32 bit, noe som betyr at det finnes 32 2 unike IP-adresser c) Et system som heter DNS (Domain Name System) holder orden på koblingen mellom en tekstlig adresse (for eksempel www.vg.no) og den tilhørende IP-adressen d) En IP-adresse er kun unik innenfor landet den står i. 3. Hva er sant om datamaskiner a) Prosessoren består av en kontrollenhet, www-enhet og en aritmetisk logisk enhet. b) Primærminnet kan utføre enkle operasjoner som addisjon og substraksjon, men må ha hjelp av prosessoren til å utføre mer avanserte operasjoner som multiplikasjon og divisjon. c) Sekundærminne (for eksempel harddisk) kjennetegnes av å ha stor lagringskapasitet, å være billig, men ha langsom aksess i forhold til primærminne. d) Minnecellene i prosessoren kalles kompilatorer. 4. Hva er en prosessor god til a) Lagre store mengder data b) Løse problemer som krever kreativ tenkning c) Skrive vitenskapelige artikler siden en prosessor er det samme som en professor d) Gjøre mange regneoperasjoner og sammenligninger på kort tid 5. Hva er usant om prosessorer a) Aritmetisk Logisk enhet (ALU) i prosessoren utfører regneoperasjonene b) Kontrollenheten holder orden på hvor neste instruksjon som skal utføre ligger i primærminnet c) Dersom et program inneholder en while-løkke vil ofte prosessoren utføre samme operasjonen gjentatte ganger. d) Når et program starter å kjøre henter kontrollenheten umiddelbart alle instruksjonene som programmet består av fra primærminnet og inn i prosessor, og ikke èn og èn instruksjon etter hvert som de utføres. 6. Det binære tallet 1110 2 representerer en kvantitet (et antall), hvilken? a) 8+4+2=14 b) 4+2+1=7 c) 1+1+1=3 d) 8+4+1=13 7. Et program som oversetter et program skrevet i et høynivå programmeringsspråk (for eksempel JSP eller Matlab) til maskinkode som kan utføres av en datamaskin kalles a) Komp ilator b) Registrerer c) Forbereder d) Dynamisk håndterer

Side 3 av 13 8. Gitt at vi skal søke etter tallet 3 tre i den sorterte datamengden 2,4,8,10,11,14,23. Hvilke tall vil bli sjekket dersom vi anvender algoritmen binærsøk (ved partall antall elementer rund nedover)? a) 2,4 b) 2,8,4 c) 10,4,2 d) 10,4 9. Gitt at vi skal sortere tallene 4,1,2,7 vha algoritmen sortering ved innsetting. Hvilken av sekvensene under viser hvordan sortering vil fremskride? a) 4,1,2,7 1,4,2,7 1,2,4,7 1,2,4,7 b) 4,1,2,7 4,1,2,7 1,2,4,7 c) 4,1,2,7 1,2,4,7 d) 4,1,2,7 1,2,7,4 1,2,4,7 10. Hvilket av utsagnene er usant a) Bruk av binærsøk forutsetter at datamengden er sortert b) For inntil 64 elementer (som skal søkes i) er sekvensielt søk raskere enn binært søk. c) Ordet algoritme kan uformelt oversettes til fremgangsmåte og oppskrift. d) Elementene i en tabell ligger fysisk sett etter hverandre i primærminnet slik at vi kan beregne oss frem til hvor for eksempel element 119 ligger (hvilken minnecelle) dersom vi vet hvor første element i tabellen ligger. 11. Hvilket av følgende utsagn er usant? a) Entitetsklassers navn er som regel substantiver b) Relasjonsklassers navn er som regel verb c) Entitetsklassene Student og Fag ved et universitet er et eksempel på en 1-til-N relasjon d) Gitt entitetsklassen Person så er relasjonen er venn med et eksempel på en egenrelasjon 12. Hvilket av følgende utsagn er sant? a) News kan sies å være Internetts svar på avisenes Lederspalte b) FTP passer ypperlig til diskusjoner c) Videokonferanser er ikke godt egnet for alle typer møter d) SMS er en asynkron kommunikasjonsform 13. Hvilket av følgende utsagn er usant? a) Data og metadata gir til sammen informasjon b) Metadata beskriver/forklarer annen data c) Følgende er eksempel på metadata: 3, 2, 1 d) WWW er basert på klient/tjener-arkitekturen 14. Hvilket av følgende utsagn er usant? a) En datamaskin innebygd feks i en vaskemaskin eller en mikrobølgeovn kalles en embedded computer b) Internt lagrer datamaskiner all type informasjon som tall c) Filer på harddisk organiseres i et hierarkisk system d) Lov om opphavsrett forbyr urettmessig innsyn i og bruk av data 15. Hvilket av følgende utsagn er usant? a) Når man mottar e-post som advarer mot et nytt virus bør man videresende meldingen til sine venner slik at flest mulig er advart mot det aktuelle viruset b) Virus kan spres i såkalte makro-program som kan ligge i Word og Excel-filer. c) IRC er et synkront kommunikasjonsmiddel d) Man må i mange spørsmål gjøre en avveining mellom personverninteresser og samfunnets sikkerhetsinteresser

Side 4 av 13 Oppgave 2 Metoder i JSP (20%) a) Lag en metode antoverangitt som tar inn en heltallstabell og et angitt tall og returnerer antall tall i tabellen som er større eller lik det angitte tallet. b) Lag et skript som oppretter en heltallstabell med tallene 1,2,5,6,4 og 2 og som gjør et kall på metoden antoverangitt og til slutt skriver ut antall tall som er større eller lik 4. Dermed skal skriptet med denne tabellen skrive ut følgende: Antall tall i heltallstabellen som er større eller lik 4 er 3. c) Gitt at en students øvingsgodkjenninger i faget IT GK er lagret i en tabell med boolske verdier (tabell av datatype boolean), lag en metode faartaeksamen som tar denne tabellen inn som parameter, sjekker om øvingsopplegg er godkjent (5 av de 6 første øvingene, fire av øving 7-12 samt minst èn av øvingene 11-12). Metoden returnerer true om øvingsopplegg godkjent (får ta eksamen) og false hvis ikke. d) Robert Pollard har gjort øvingene 2,3,4,5,6,8,9 og 10. Lag et skript som oppretter den boolske tabell som representerer disse godkjenningene og deretter kaller metoden faartaeksamen for å sjekke om han får ta eksamen. Skriv ut informasjon til skjerm ( Robert Pollard får ta eksamen / Robert Pollard får ikke ta eksamen avhengig om øvingsopplegg ok.) Oppgave 3 HTML og CSS (10%) a) Hva er hovedfordelen med relative hyperlenker? Forklar. b) Lag HTML-kode for tabellen under. Sted Tromsø Oslo Trondheim Bergen Sommervær Pent Kan hende med regnbyger Skiftende Kan hende med sol c) Du skal ha likt utseende på alle H2-overskrifter på alle dine websider. Konkret skal de være rød skrift og sentrert. Forklar og vis med HTML/CSS-kode hvordan du vil få til dette. Oppgave 4 Database : ER/relasjonsmodellen (15 %) En meget sosial dame-på-byen har bedt deg lage et database som kan hjelpe henne holde oversikt over hennes venner og bekjente (personer), over avtaler hun har gjort og over fester og andre evenementer hun vil huske. For hver person ønsker hun å kunne registrere vedkommendes venner, bekjente og uvenner; stedet hvor vedkommende bor og steder hvor vedkommende ofte vanker. For hvert sted skal hun kunne registrere et kort navn, en lengre beskrivelse, adresse og eventuell åpningstid. For hver avtale (fremtid), fest o.l. (fortid); altså for hver hendelse, skal hun kunne registrere en kort identifikasjon, eventuell ansvarlig person, andre deltagere, tid og sted evt. flere steder og en lengre beskrivelse. a) (10%) Tegn en ER-modell for en slik database. Gjør gjerne egne antagelser der du føler oppgaveteksten er uklar, men skriv i så fall hva du har antatt. ER-modellen skal omfatte alle attributter samt riktig kardinalitet mellom entitetene.

Side 5 av 13 b) (5%) Lag en relasjonsmodell basert på ER-modellen du nettopp har laget. Husk å oppgi nøkler og fremmednøkler. Relasjonsmodellen skal skrives som SQL CREATE-setninger. Oppgave 5 Database : SQL (10 %) Et bo-kollektiv har laget et databasesystem for å holde orden på oppskrifter, hvem som liker hvilke av disse rettene, hvem som kan lage dem, ingredienser og innkjøp av disse. En grovt skissert ER-modell (uten innlagte attributter) for denne er: person gjør innkjøp liker kan lage omfatter oppskrift inneholder matvare En skisse av tabellene i denne databasen: Person(nr, navn) Liker(person, oppskrift) KanLage(person, oppskrift) Oppskrift(nr, tekst) Innhold(oppskrift, matvare, mengde) Matvare(nr, beskrivelse, beholdning, pris) DelKjøp(innkjøp, matvare, mengde) Innkjøp(id, person, tid, beskrivelse) (Tid måles i antall hele timer etter kollektivets opprettelse. Beholdning og mengde måles i kg.) For denne databasen, skriv SQL-spørringer som: a) (2%) finner navnene på personene som har gjort innkjøp etter tidspunkt 4711. b) (4%) finner vektene alle matvarene innkjøpt av person nr. 7 før tidspunkt 4711 (ikke summen, men en liste vekter). c) (4%) finner numrene på alle oppskriftene som personene kan lage og som man råvarer nok til å lage.

Side 6 av 13 Oppgave 6 JSP (15 %) Du skal nå lage en enkel nettbutikk. Tanta di Kim Deal er særs klesinteressert og har drevet klesbutikk i mange år. Nå ønsker hun å komme seg på Internett for å selge mer klær. Kim har hørt rykter om at du har blitt så flink med data (som hun sier - du har forgjeves prøvd å lære henne at det heter informasjonsteknologi,) det siste året at han har spurt deg om du kan hjelpe ham med å lage websidene for klessjappa hennes, FiltAndDrop Kims shop. I denne oppgaven kan der du trenger tilkobling mot database inkludere en allerede ferdig laget fil database.jsp som ser slik ut: <% Class.forName("org.gjt.mm.mysql.Driver").newInstance(); java.sql.connection db = java.sql.drivermanager.getconnection( "jdbc:mysql://mysql.stud.ntnu.no/tante","tante_admin","skinn"); java.sql.statement st = db.createstatement(); java.sql.resultset rs; %> Inkludering av database.jsp gjøres med JSP-merkelappen include: <%@include file= database.jsp %> a) Lag en JSP-side nettbutikk.jsp som ser ut som figuren nedenfor og fungerer som beskrevet nedenfor. Kategoriene som listes ut i venstre celle av HTML-tabellen skal hentes ut fra kategori-tabellen i en database som du har laget klar i forkant. Kategori-tabellen er opprettet med følgende spørring: create table kategori (id int primary key auto_increment, not null, navn varchar(40) not null); Hver kategori skal være en valgbar opsjon i en rullegardin. Når kategori er valgt og submit-knappen Vis kategori trykkes så sendes id en til den valgte kategorien med til nettbutikk.jsp (samme skript) som en parameter katid som er satt lik den valgte kategoriens id-verdi. Se hvordan katid skal tas imot i deloppgave b). Hvis ikke katid er oppgitt som parameter til siden skal Velg en kategori i rullegardinen... skrives ut. b) Denne deloppgaven går ut på å skrive programkode for funksjonaliteten i høyre celle av HTML-tabellen angitt på bildet nedenfor (dvs. Klesplagg fra kategorien ). Besvarelsen på denne deloppgaven skal derfor begynne med <td valign= top > og avsluttes med </td>.

Side 7 av 13 Du skal nå undersøke om parameteren katid er sendt til scriptet nettbutikk.jsp. Hvis katid er oppgitt skal denne kategoriens navn (formatert med <h 3>) og klesplagg tilhørende kategorien listes ut slik b ildet nedenfor viser. Klesplagg finnes i tabellen klesplagg som er opprettet med følgende spørring: create table klesplagg (id int primary key auto_increment, not null, navn varchar(40) not null, kategori int not null ); Feltet kategori er fremmednøkkel fra kategori-tabellen. Hvert klespagg skal være et element i en vanlig uordnet HTML-liste (<ul>). Under er det vist hvordan siden skal se ut dersom kateogiren Bukser velges (id=1).

Side 8 av 13 Vedegg: Tutorial i Cascading Style Sheets (CSS) I tre øvinger har dere nå brukt html til å formatere tekst. CSS er skrittet videre, et språk for å formatere html. Ved hjelp av CSS kan man redefinere egenskapene til en html-tag, alle tagger av en type eller en hel gruppe av tagger i slengen. På grunn av dette kan man unngå å forsøple htmlkoden med alskens formateringstagger og i stedet konsentrere seg om å faktisk lage innhold. Tatt hele veien ut er CSS et verktøy som kompletterer html på en utmerket måte, og gjør det mulig å totalt forandre utseendet på en webside uten å skrive hele sulamitten på nytt. Inline og predefinert CSS CSS kan brukes på en del måter. I sin enkleste og mest meningsløse form kan man gå rett inn i html-koden og deklarere styles på hver individuell html-tag. Eksempelet under vil gjøre tekstfargen i cellene i tabellen blå. <table border=1> <td style=" color: #0000FF"> Zevs </td> </tr> <td style=" color: #0000FF"> Poseidon </td> </tr> </table> Zevs Poseidon Dette er som sagt litt meningsløst da en font-tag kunne gjort samme nytten. Det man kan gjøre er å redefinere utseendet til ALLE td-taggene. Da bruker man style-taggen. Style-taggen legges i head-taggen på html-dokumentet, for eksempel kan det ende opp slik: <html> <head> <style type="text/css"> td { color: #0000ff; } </style> </head> <body> En (uferdig) liste over de greske guder. <table border=1> <td> Zevs </td> </tr> <td> Poseidon </td> </tr> </table> <body> <html> Og resultatet vil være det samme. Om listen så inneholder to, femten eller femtitusen elementer kan man med et håndgrep endre tekstfargen til grønn, lilla eller hva som helst, uten å editere hver htmltag. Ulempen er jo at vi nå har redefinert utseendet på ALLE td-taggene. Kanskje ikke det var helt ønskelig, muligens har vi en tabell til der skriften i alle fall ikke skal være blå. Løsningen er grupperinger av html-tags... hvilket leder opp til neste delkapittel.

Side 9 av 13 Gruppering og navngiving av tags I html kan hver tag tilordnes en gruppe, også kalt en class. En hvilken som helst htmltag kan tilhøre en class, uavhengig av type. Man kan så deklarere utseendet på alle tagger av en class - beskrevet ved følgende eksempel. <html> <head> <style type="text/css">.greskgud { color: #0000ff; }.tittel { font-weight: bold; font-size: 16pt; background: #f0f0f0;} </style> </head> <body> <table border=1> <td class="tittel"> En (uferdig) liste over de greske guder </td> <td class="greskgud"> Zevs </td> </tr> <td class="greskgud"> Poseidon </td> </tr> </table> <body> <html> Legg merke til attributten class i td-taggene her. Stylesheet-oppsettet (merk punktum) vil gjøre tekstfargen i alle tagger med class="greskgud" til blå, og gjøre mye rart med alle som har class="tittel". Lek litt med dette hvis det virker vanskelig. Det finnes også en html-attributt kalt id, som brukes til å navngi enkelt-tagger. I motsetning til class er id-attributten er ment å være unik slik at et navn kun er koblet til en tag, eks <table id="gudetabell">. Selvsagt kan man også sette styles på en tag med id, det gjøres på følgende måte: <style type="text/css"> #idnavn { css-kode } </style> DIV og SPAN Av og til trenger du en merkelapp som ikke har noen predefinert formatering. I eksempelet over var jo TD en grei tag å bruke siden ikke hadde noen slik, men plutselig har du ikke en tabell og skal lage noen formateringer allikevel. Da har man taggene DIV og SPAN. I utgangspunktet er det to helt meningsløse tagger, de gjør ingen verdens ting. Nettopp derfor er de et yndet mål for css-formatering. Mer intressant er forskjellen mellom de to. DIV er en "blokk" tag, mens SPAN er en "inline" tag. Forskjellen mellom disse to typene tagger er litt utenfor pensum: blokk-tagger er typisk de fleste tagger som har innhold som går over flere linjer (eks <table> og <p>) inline-tagger er de som typisk bare endrer på tekstatributter (eks <I> og <B>). <DIV> En blokk-tag vil bruke hele linja den er på </DIV> og liker dermed ikke å ha ting ved siden av seg, mens en <SPAN> inline-tag </SPAN> ikke bryr seg om slikt. Stort sett kan man bruke de to om hverandre.

Side 10 av 13 Egenskaper ved CSS Til nå har jeg brukt en del eksempler på css, for eksempel color: #0000ff; og font-size: 18pt. Det er en god del flere, men i beste standardiseringsforvirring fungerer ikke alle på alle browsere. CSS har hittil kommet ut i to standarder (hhv CSS-1 og CSS-2), hvor sistnevnte er en utvidelse av førstnevnte. De fleste browsere støtter CSS-1, men ingen støtter CSS-2 fullt ut (selv om Opera og Mozilla er veldig nesten i mål). Av den grunn (samt at det tar usannsynlig lang tid å lage disse tabellene) gjengis bare de viktigste parameterene i CSS-1 her. Egenskaper til CSS-1 Font-egenskaper font-size: 18pt; // setter skriftstørrelse. font-size: large; // alternativt: small, medium, larger, x-large, xx-large... font-style: italic; // setter kursiv skrift font-weight: bold; // setter fet skrift font-family: "Times new Roman"; // setter skrifttype font: 18pt "Times new Roman" italic; // setter alt du vil på en gang Farge og bakgrunns-egenskaper color: #18ffae; // skriftfarge, som i html. Kan og bruke eks, red background-color: cyan; // bakgrunnsfarge i taggen. Forsøk på body ;) background-image: url(bilde.jpg); // url kan være relativ el. absolutt. background-repeat: no-repeat; // setter bakgrunnsbilde til å ikke repeteres. background-position: 0% 100% // setter bakgrunnsbilde i top-høyre hjørne. background-position: 100% 50% // setter bakgrunnsbilde i midten av bunnen. background: white url(bg.jpg) no-repeat; // setter alt du vil på en gang. Text og type-egenskaper word-spacing: 0.3em; // setter avstanden mellom ord letter-spacing: 0.2em; // setter avstanden mellom bokstaver text-decoration: underline; // samme som <u>-taggen. text-transform: Capitalize; // Setter store bokstaver etter hvert mellomrom text-transform: UPPERCASE; // setter hele innholdet i store bokstaver. alt lowercase. text-align: center; // sentrerer teksten, alternativt right. text-indent: 4 em; // dytter inn første linje litt i forhold til resten. line-height: 200%; // dobbel linjeavstand Ramme og boks-egenskaper width: 450px; // setter bredde på en tag, f.eks TD height: 50px; // setter høyde på en tag, men ikke mindre enn innholdets høyde margin-top: 5px; // setter 5 pixler yttermarg i toppen. alternativt margin-left etc. margin: 5px; // setter 5 px yttermarg i alle retninger. padding-top: 5px; // setter 5 pixler innermarg i toppen. alternativt padding-left etc. padding: 5px; // setter 5 px innermarg i alle retninger. border-width: 2px; // setter border-bredde border-color: #ffee00; // setter border-farge border-style: solid; // border-type; alternativt dashed, dotted, ridge, inset... border: 2px solid blue; // setter alt på en gang white-space: pre; // samme som en pre-tag white-space: nowrap; // forsøker å holde alt på en linje, kjekt til td-tagger Måleenheter Det er en del måleenheter i CSS. Når det står "px" betyr dette "pixler", altså punkter på skjermen. Denne er helt trygg å bruke i alle tilfeller, f.eks kan man oppgi en border til 1 px og du vil få en tynn ramme, eller du kan oppgi en font-size til 4 px- og du vil få en veldig liten skrift.

Side 11 av 13 Andre intressante enheter er "em", som er definert som fonthøyden til taggen. Dette er en fin måleenhet å bruke da den by default er omtrent like stor på alle browsere uavhengig av oppløsning. På den andre siden er den avhengig av skriftetørrelsen i tagen din. Av bruksområder kan man f.eks sette line-height til 2 em, og du vil få ca dobbel linjeavstand (1 em er jo høyden på en linje tekst, da må 2 em være dobbelt så stort). Font-størrelser er oppgitt i "pt", som er punkter tilsvarende fontstørrelsene i word eller hvorsomhelst. Denne brukes typisk kun i sammenheng med font-attributtene, men det er ingenting i veien for å sette line-height lik 40pt. da får du en linjeavstand som tilsvarer en 40 punkts font. Prosent er brukt litt rundtomkring, stort sett er 100% gitt som maksimum og 0% gitt som minimum, men det er litt opp til attributten når det kommer til prosent av hva. Typisk er det dog snakk om prosentvis størrelse av foreldretagen. For eksempel i tilfellet med bakgrunnsbildeposisjonering - man kunne oppgitt denne i pixelavstand, men da vil ting se forskjellig ut på hver enkelt browser. Prosent av maksimum er et godt alternativ. Egentlig kan man bruke mange av måleenhetene om hverandre, eks vil font-size: 1.5em; gi en font-size 1.5 ganger større enn normalt, hvor normalt er hva enn foreldretaggen har, mens en border-width: 2 em vil sette en ganske så bred ramme. Lek litt med det :) Eksterne stylesheets Før du vet ordet av det er du i en situasjon hvor du har 80 websider med mer eller mindre samme utseende. Hvis du da finner ut at det trengs en liten endring i designen vil du i praksis måtte redigere style-taggen på alle 80 websidene. Dette er jo litt dumt, da css skulle våre et tidsbesparende verktøy. Derfor har man konseptet med sentralisert CSS. Tenk deg at du kunne legge css-koden ut i en egen fil og si til alle websidene "herifra skal dere hente stylesheetene deres". Den tanken slo i alle fall folkene bak html-standarden, og eksterne stylesheets ble født. I praksis tar du bare innholdet i mellom style-taggene i dokumentet ditt og skviser det inn i en egen fil, etellerannet.css. Så kan du la alle de 80 websidene benytte seg av denne samme css-fila ved hjelp av link-taggen. Bare sett inn denne taggen i stedet for styletaggen i <head> på sidene dine. <head> <link rel="stylesheet" type="text/css" href="etellerannet.css"> </head> Et eksempel på dette er etterlyst; anta følgende tilfelle: <html> <head> <style type="text/css"> h1 {color: darkblue; background: #f0f0f0; } a:hover {color: yellow; font-weight: bold; } </style> </head> <body> <h1>et lite eksempel</h1> Dette er en <a href="http://www.vg.no">link</a> </body> </html> Denne html-fila kan man dele i to, en fil som holder på css-informasjonen: mystylesheet.css h1 {color: darkblue; background: #f0f0f0; } a:hover {color: yellow; font-weight: bold; } HTML-fila vil da se slik ut: myhtmlfile.html

<html> <head> <link rel="stylesheet" type="text/css" href="mystylesheet.css"> </head> <body> <h1>et lite eksempel</h1> Dette er en <a href="http://www.vg.no">link</a> </body> </html> Side 12 av 13

Powered by TCPDF (www.tcpdf.org) Side 13 av 13 Svarark for oppgave 1 Studentnr: Emnenummer: Eksamensdato: Side av 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Oppgave 1 a b c d NB! Ikke glem å levere dette arket! Bla igjennom den papirbunken du gir fra deg til slutt, for å sjekke at svar på avkrysningsoppgaven er med.