1. Cascading Style Sheet (CSS)
|
|
- Josef Nordli
- 8 år siden
- Visninger:
Transkript
1 Avdeling for informatikk og e-læring, Høgskolen i Sør-Trøndelag Lene Hoff Lærestoffet er utviklet for faget LN515D XML Teknologi 1. Resymé: I denne leksjonen skal vi ta for oss CSS (Cascading StyleSheet). Dette er en standard som brukes for å sette stiler/formateringer på et XHTML/XML-dokument. Vi kommer til å ta for oss oppbygningen av et CSSdokument, sette stilsetting på tekst og legge inn luft mellom tekstblokker. Innhold 1.1. INNLEDNING GRUNNLEGGENDE OPPBYGNING LENKE CSS-FILEN TIL ET DOKUMENT DISPLAY-EGENSKAPER FLERE SYNTAKSREGLER FOR SELEKTOR ARV I CSS VERDIER FARGE OG SKRIFT Farge Skrift SPACE-EGENSKAPER Margin Border Padding Size POSISJONERING SETTE INN BILDER Innledning I denne leksjonen skal vi legge til stiler på XML-dokumenter. Til dette skal vi brukes CSS (Cascading Style Sheet). Leksjonen tar for seg oppbygningen av et CSS-dokument, hvordan det kan knyttes opp mot et XML-dokument og gjennomgang av en rekke egenskaper til CSS. Ved bruk av CSS kan man skille stilen fra semantikken og strukturen til XHTML- og XMLdokumenter. Dette gjør man ved å legge stil-informasjoner i en CSS-fil og så lage en lenke til denne filen i XHTML/XML-dokumentet. Når det gjelder XML-dokumenter kan man også bruke en teknologi som heter XSL (Extensible Style Language) for å legge på stiler. Dette er mye mer avansert enn CSS med flere muligheter og vi vil komme tilbake til det senere i kurset. Fordelen med CSS er at det er støttet av de fleste nettlesere, men vær klar over at noen nettlesere har sin egen måte å vise dem på. En del av dere har kanskje vært borti CSS tidligere i tilknytning til HTML-filer. Tidligere ble formateringer lagt rett inn i HTML-filen, men World Wide Web Consortium (W3C) anbefaler Opphavsrett: Forfatter og Stiftelsen TISIP
2 nå å skille formateringene ut i en egen CSS-fil. Dermed er oppgaven til CSS å fortelle nettlesere hvordan dataene i et HTML/XHTML/XML-dokument skal vises. I HTML/XHTML har vi som kjent et fastsatt sett med elementer som brukes, og nettleseren som viser dokumentet vet hvordan de enkelte elementene skal vises frem. Dette gjelder ikke for XML. Nettleseren aner ikke hva et navn-element vil si eller hvordan det skal vises. Av den grunn er det enda viktigere å få knyttet stilark til XML-dokumenter. Det er viktig å være klar over at CSS er case-insensitivt og skiller ikke mellom store og små bokstaver. I læreboken er alt skrevet med små bokstaver, dette for å gjøre det likt som i XHTML/XML-dokumenter (XML er case-sensitivt). I denne leksjonen vil de ulike egenskapene til CSS få et standardoppsett hvor det står navn på egenskapen, mulig verdier og defaultverdi. For enkelte egenskaper er det veldig mange ulike verdier, og det vil derfor være noen steder hvor ikke alle verdiene settes opp. Da tas bare de vanligste verdiene med Grunnleggende oppbygning CSS-stilarket består av et sett med regler. Reglene spesifiseres for de ulike elementene i XHTML/XML-dokumentet og er bygd opp på følgende måte: Regel (Rule) Selector Deklarasjon navn { color: red; font-size: 15pt Deklarasjonsblokk Egenskap Verdi I eksemplet over er reglen vist med rød skrift og består av en selector som refererer til det elementet reglen gjelder for. Her setter vi formateringer til elementet navn. Videre har vi en deklarasjonsblokk med selve formateringene. Deklarasjonsblokken starter med { før selve deklarasjonene kommer og slutter med. En deklarasjon består av en egenskap (f.eks. color) og den tilhørende verdien med kolon som skiller mellom dem. Her sier vi at teksten til navnelementet skal være rød og ha 15 pt som skriftstørrelse. Det kan være alt fra ingen til mange deklarasjoner i en deklarasjonsblokk. De ulike deklarasjonene skilles fra hverandre med semikolon (;). Det er valgfritt om en vil bruke semikolon etter den siste deklarasjonen. I figuren over har vi en regel som gjelder for et element. Men regelen kan også brukes på flere elementer og vil da se slik ut: adresse, postnr { color: blue; Det går også an å legge til kommentarer i CSS-filer. Kommentarer starter med /* og slutter med */. Her er et eksempel: /* Her kan en for eksempel skrive relevante kommentarer til programmet */ side 2 av 20
3 Eksempel Vi skal nå se på et eksempel som vil bli brukt gjennom hele leksjonen. Det tar for seg en konkurranse i roing med flere lag, og to deltagere på hvert lag. Vi skal legge til et stilark på for å formatere teksten i dokumentet. Her er XML-dokumentet (konkurranse.xml): <?xml version="1.0" encoding="iso "?> <?xml-stylesheet type="text/css" href="konkurranse.css"?> <konkurranse> <gren>roing</gren> <dato> </dato> <arrangør> <klubb>ski Roklubb</klubb> <kontakt> <navn>anders Moen</navn> <telefon> </telefon> </kontakt> </arrangør> <lag id="10"> <klubb>sandes Roklubb</klubb> <deltager> <navn>marius Olsen</navn> <alder>23</alder> </deltager> <deltager> <navn>torgeir Tvett</navn> <alder>22</alder> </deltager> </lag> <!--Flere lag--> </konkurranse> Vi har lagt til et enkelt stilark, konkurranse.css: gren{ font-size: 20pt; font-weight: bold; dato{ display: block; arrangør{ display: block; lag{ deltager{ font-style: italic; side 3 av 20
4 Når vi åpner konkurranse.xml i en nettleser vil det se ut som: Hvis du ikke får opp formateringene som vist her, kan det skyldes at du har skrevet en feil i selve CSS-filen. Det blir ikke vist noen feilmeldinger når du skriver feil. Det eneste som skjer når nettleseren ikke skjønner hva som står i CSS-filen (fordi du har skrevet feil), er at regelen ignoreres. De vanligste feilene er feil med store og små bokstaver, feil bruk av semikolon, ;, og kolon, :, bruker parentes () istedenfor klamme {, eller feil med selve CSS-lenken i dokumentet. Sjekk derfor dette først hvis du får problemer. I fortsettelsen tas det utgangspunkt i dette eksemplet med stilark Lenke CSS-filen til et dokument På linje 2 i eksemplet over hadde vi en prosessorinstruksjon til stilarket konkurranse.css: <?xml-stylesheet type="text/css" href="konkurranse.css"?> Denne linjen skal stå i prologen, altså før selve rotelementet. Som vi husker fra forrige leksjon betydde xml-stylesheet at et stilark skulle kobles til XML-dokumentet. Dette kan enten være et CSS-dokument eller et XSLT-dokument, noe som angis av attributtet type. Her har type-attributtet verdien text/css. Det siste attributtet, href, angir filnavnet til stilarket. I eksemplet står det bare et filnavn, noe som betyr at CSS-filen må ligge i samme mappe som XML-dokumentet. Hvis stilarket ligger i en annen mappe må du spesifisere hvilken mappe dette er, da med enten en relativ eller en absolutt URL Display-egenskaper For å bestemme hvordan teksten i de ulike elementene skal vises kan blant annet displayegenskapen brukes: display block, inline, none (med flere) inline Egenskapen kontrollerer hvordan nettleseren viser en elementtekst. Gis egenskapen verdien block, vil det settes inn et linjeskift før og etter elementteksten. Det kan sammenlignes med p-elementet i XHTML. Verdien inline gir all teksten på en og en linje, som vil skje hvis egenskapen ikke benyttes. For å skjule hele elementteksten kan verdien none brukes. side 4 av 20
5 1.5. Flere syntaksregler for selektor Over så vi at en selektor var det som står foran selve reglen. Her vises selektoren navn: navn { color: blue; I dette kapitlet skal vi se nærmere på en del andre syntakser i forbindelse med selektorer. Vær oppmerksom på at det kan forekomme forskjeller ved bruk av ulike nettleserne. Under vil konkurranse-eksemplet beskrevet i kap 1.2 benyttes. Universal selektor Vi har en selektor som kalles universal selektor, nemlig; *. Denne kan brukes alene, eller foran andre selektorer. Her er benytter vi selektoren til å sette all tekst til blå: * { color: blue; Da vil skriftfargen på hele dokumentet endres til blå. Etterkommer selektor Etterkommer (decendant) selektor er en selektor hvor du kan angi nærmere hvor et element er plassert i dokumentet. Vi kan tenke oss at tekstfargen til deltagerens navn skal skrives med rødt. Nå finnes det flere navn-elementer i XML-dokumentet. Både navn for en deltager og navn på kontaktperson for arrangør. Derfor må vi bruke vår etterkommer selektor for å bare fargelegge teksten til deltagerens navn. Da skrives foreldreelementet og barneelementet på følgende form: foreldre barn { Her vil barn være et barnelement av foreldre, og det må ikke være et direkte barneelement av foreldre. Deltageren kan dermed få ny farge slik: lag navn { color: blue; Isteden for lag kunne du også skrevet deltager her. I nettleseren vil dette se ut som: Barneselektor Dersom vi ønsker å sette en stil på en bestemt elementtype som er direkte barn av et annet element brukes > symbolet: foreldre > barn { Istedenfor linjen i eksemplet over kunne vi da skrevet: deltager > navn { color: blue; Nå får vi samme resultat som nettleservinduet over viser. side 5 av 20
6 Søskenselektor En annen selektor er nærliggende søskenelement (adjacent sibling) selektor. Denne selektor skrives på formen: element1 + element2 { Her vil element1 og element2 være søskenelementer, med det menes at de har samme foreldreelement og element1 blir umiddelbart fulgt av element2. Følgende illustrerer dette: <p>norske <b>marit Bjørgen</b> var den store helten i <i>val di Fiemme</i> da hun vant gull. Les mer <a href= >her</a>.</p> Her er det tre ulike elementer innenfor det samme p-elementet, og det er søskenelementene b-, i-, og a-elementene. Da kan vi si at: - Elementene b og i er nærliggende søskenelement - Elementene i og a er nærliggende søskenelement - Elementene b og a er ikke nærliggende søskenelement Et eksempel hvor barneselektor er nyttig er blant annet ved overskrifter. Vi setter ofte inn ekstra mellomrom før og etter overskrift elementer. Men dette kan bli litt mye i tilfeller hvor XHTML s h2 element umiddelbart følger etter et h1 element og vi vil redusere dette mellomrommet: h1 + h2 { margin-top: -3mm; Vi vil senere i leksjonen komme nærmere inn på selve egenskapen i dette eksemplet. Attributtselektor Det finnes også attributtselektorer for å velge de elementene med et bestemt attributt eller verdi på et attributt. Vil her ta med to av dem som er ført opp i boken, og kun disse to inngår i pensum: - Selektor hvor et bestemt attributt må matche. Altså en CSS-regel for de elementene som har et bestemt attributt: selektor [attributt] { egenskap: verdi; Eksempel hvor vi vil at alle lag som har registrert id i lag-elementet skal vises med rødt: lag [id] { color: red; - Selektor hvor en bestemt verdi til et bestemt attributt må matche: selektor [attributt= verdi ] { egenskap: verdi; Eksempel her er at alle mobilnr til en person skal skrives med grønt. Da kan vi tenke oss at vi har et telefon-element og et attributt som heter type. Attributtet kan blant annet ha verdien mobil: telefon [type= mobil ] { color: green; Hvis du vil lese mer om ulike selektorer, kan du gå inn på følgende hjemmeside: side 6 av 20
7 1.6. Arv i CSS Når en lager stilark kan et stilark lenkes til et annet stilark. En kan også lenke flere stilark til samme dokument. Da kan det hende at flere stilark for det samme XML-dokumentet spesifiserer stiler til samme element. En må derfor ha regler for hvilke stiler som gjelder foran andre. Det viktigste er at spesifikke regler gjelder foran generelle regler. Med oppretting av CSS-stilark brukes en funksjon som kalles arv. Det vil si at egenskaper som tilegnes et gitt element, arves til alle underliggende elementer (barneelementer). Dette kan illustreres ved å sette lag-elementet i konkurranse-eksemplet til skriftstørrelsen 14 pt: lag { font-size: 14pt; Nå vil alle barnelementer til lag-elementet, som f.eks. alder-elementet, få skriftstørrelse 14pt og dette kalles arv. Dersom en ønsker at alder-elementene ikke skal ha skriftstørrelse 14pt, men kanskje 12pt, må dette spesifiseres for dette spesifikke elementet: alder { font-size: 12pt; Dermed vil alder-elementet ha en annen skriftstørrelse enn resten av barneelementene til lag. Dette illustrerer at spesifikke regler gjelder foran mer generelle regler. De fleste egenskaper arves, men ikke alle. Her er noen av egenskapene som ikke arves: - Display - Background - Vertical align side 7 av 20
8 1.7. Verdier Av eksemplet over ser en at benevnelsen pt spesifiserer skriftstørrelsen. Det er flere måter å spesifisere verdien til egenskapene. Før vi går inn på de ulike typer egenskaper i CSS må en kjenne til noen ulike benevnelser og hva disse betyr. Normalt deler en spesifiserte verdier inn i absolutte og relative verdier. - Absolutte verdier. Her settes en bestemt verdi uavhengig av hvilke verdier som gjelder for resten av dokumentet. En behøver altså ikke å beregnes noen verdier ut i fra de andre elementenes verdi. Eksempel på dette kan være å sette en bestemt farge. Sier vi at teksten skal være blå er det ikke noen tvil rundt fargevalget. Andre eksempler kan være absolutte verdier på lengdeenheter. Det er da viktig å være klar over hva resten av systemet bruker, så det ikke oppstår noen rare størrelser på enkelte elementer. Her er en liste over ulike enheter: in: inches cm: centimeter mm: millimeter pt: points (i CSS2 er dette lik 1/72 av en in) pc: picas (1 pi = 12 pt) px: pixel - Relative verdier. Spesifiserer en verdi i forhold til andre verdier. Et eksempel her kan være at en type skrift skal være 15% større enn en annen. Et annet eksempel er verdier hvor vi kan skrive bolder (tykkere). Da vil teksten bli et hakk tykkere enn den verdien som allerede finnes. Under er det gitt noen enheter som er relative: em: skriftstørrelsen til den relevante skriften der 1em er skriftstørrelsen som foreldreelementet har. Denne kan endres relativt ved å skrive henholdsvis 2em (større) eller 0.5em (mindre). ex: brukes på samme måte som em, men gjelder for høyden - Verdiene kan være både heltall og desimaltall. Ønskes desimaltall må punktum (.) brukes som separator, f.eks Prosent kan også brukes i flere tilfeller. Dette vil være en relativ verdi som må beregnes i forhold til verdien denne egenskapen ellers ville hatt. I dette kurset bruker vi som regel benevnelsen points (pt) bak størrelser på skrift. Hvis ingen benevnelsen føres opp brukes pixler (px) i CSS. Det vil vises som en mindre størrelse på skriften. side 8 av 20
9 1.8. Farge og skrift Vi vil nå se på 2 typer egenskaper som gjelder i CSS. Det er farge på tekst og bakgrunn, og ulike skrifttyper og størrelser Farge Det er to typer fargegiving vi skal se på, nemlig farge på tekst og farge på bakgrunnen. Her er spesifikasjonene for hver av dem: color angis som navn på farge, RGB- eller heksadesimalt tall avhengig av nettleser background angis som navn på farge, RGB- eller heksadesimalt tall, transparent transparent Selve fargen kan angis på flere måter. Mange farger er navngitte og kan brukes direkte med navn. Eksempel på dette så vi over da vi gav teksten fargen blå (blue). Alternativt kan vi benytte RGB-verdier eller heksadesimale verdier, hvor det angis en verdi for hver av fargene rød, grønn og blå. Hvis du ikke har brukt dette før kan du lese om det i læreboka 1 side 534. Eksempel på heksadesimal verdi er #FF0000 (rød, husk å bruk # foran verdi), og for RGBverdi; rgb(50,50,150). Tabell 12.1 læreboka viser noen eksempler på farge med RGBverdier og Heksadesimale verdier. Vi kan nå gjøre bakgrunnsfargen i eksemplet over til gul og teksten til blå: konkurranse{ color: #0000FF; background: yellow I nettleserne: Internet Explorer Opera 1 "XML Primer Plus" av Nicholas Chase (2003). side 9 av 20
10 Her ser du et typisk eksempel på at nettlesere behandler egenskapene ulikt. I Internet Explorer ble det ikke helt slik vi hadde tenkt. For å få hele bakgrunnen til å bli gul kan vi sette display:block sammen med resten av egenskapene over: konkurranse{ display: block; color: #0000FF; background: yellow Nå vil Internet Explorer bli mer likt Opera, men du vil fortsatt få en hvit kant rundt Skrift Det er flere egenskaper som justerer selve skriften. Fra tekstbehandlingsprogram vet du at det kan angis skrifttype, størrelse, stil og tykkelse. Dette er også mulig i CSS. Her er spesifikasjonene for dem: font-family serif, sans-serif, cursive, fantasy, monospace eller navn på skrifttype som f.eks Times New Roman Times New Roman (som regel) font-size i punkter (pt), piksler (px) eller en av verdiene: small, large, x-large, xx-small eller medium 12pt font-weight bold, normal eller bolder, lighter. Tallverdier fra normal font-style italic, normal, oblique normal Det er flere måter å bruke disse egenskapene på (med unntak av font-style). For størrelse (font-size) og tykkelse (font-weight) er det mulig å bruke både relative og absolutte verdier. Vi kan endre på tre a v reglene i vårt stilark. Vi vil angi at lagene skal skrives med skriftty pe sans-serif og i størrelse medium. Videre har vi fra tidligere deltagerne i italic. Her skal det utvides slik at deltagerens navn også blir i bold. Reglene som er endret vises her: side 10 av 20
11 lag{ font-family: sans-serif; font-size: medium; deltager{ font-style: italic; navn{ font-weight: bolder; Alle disse egenskapene er enkle å endre. Vær klar over at for font-family må alle verdier lengre enn et ord, slik som Times New Roman, ha hermetegn rundt seg: Times New Roman ;). Sentrere tekst For å sentrere tekst brukes en egenskap som heter text-align. Den spesifiserer hvordan teksten fra et element skal plasseres i horisontal retning: gren{ font-size: 20pt; font-weight: bold; text-align: center; I nettleseren: text-align left, right, center, justify, string left Vi kan sette grenen det konkurreres i, i senter på skjermen: Bruk tid på å prøve deg frem med disse egenskapene hvis du ikke er kjent med dem. side 11 av 20
12 1.9. Space-egenskaper Når nettleseren viser et XML-dokument, plasseres teksten fra de ulike elementene over en eller flere sider. Teksten på hver side er organisert i nøstede bokser. Man kan si at hver paragraf er en boks og at hver linje i paragrafen er en boks. Så vi har altså flere bokser som igjen er delt inn i mindre bokser. Elementet ligger i en boks. Den totale bredde er lik bredde av elementet, bredde til padding, bredde til border og bredde til margin. Det samme med høyde. Margin Border Padding Elementet La oss se på en del egenskaper til en boks: Margin - setter en transparent kant rundt boksen Border - angir en synlig ramme (kan fjernes) Padding - legger til et tomt område utenfor et elements innhold og innenfor en synlig ramme (border) Size - angir høyde og bredde (både innholdsområde og tomme områder) Relative og absolute positioning - angir plassering av et element på en side Margin Margin er mellomrommet mellom et elements bounding box 2 og et nærliggende elements bounding box. Den består av fem egenskaper margin, margin-top, margin-bottom, margin-left, margin-right px, em eller % 0 Som du ser kan denne egenskapen både ha en absolutt verdi eller en relativ verdi (em). 2 Bounding box består altså av mellomrommet mellom elementteksten, padding og border. side 12 av 20
13 Vi kan legge til egenskapen margin-left til lag-elementet for å flytte teksten noe mot høyre: lag{ I nettleseren: font-family: sans-serif; font-size: medium; margin-left: 12px; Eventuelt kan vi bruke en relativ verdi: lag{ font-family: sans-serif; font-size: medium; margin-left: 2em; Over gav vi bare verdi til en av sidene. Det er også gang ved å bruke egenskapen margin: lag{ font-family: sans-serif; font-size: medium; margin: 20px; Nå vil alle margene få den samme størrelsen: mulig å gi en verdi til alle sidene på en side 13 av 20
14 I noen tilfeller vil du ha ulik størrelse på margene og kan skrive: lag{ font-family: sans-serif; font-size: medium; margin: 20px 12px; Her er det angitt to verdier for egenskapen margin. I disse tilfeller er det spesielle regler for hvilke marger som får de ulike verdiene: - Når en verdi er satt; verdien gjelder for alle margene - Når to verdier er satt; verdien til den første gjelder for topp og bunn, mens den andre verdien gjelder for høyre og venstre marg - Når tre verdier er satt; første verdi gjelde for topp, den andre verdien gjelder for høyre og venstre marg, mens den siste verdien gjelder for bunn - Når fire verdier er satt; gjelder de i rekkefølgen: topp, høyre, bunn og venstre Disse reglene gjelder også for egenskapene padding og border (med flere). Det er viktig å vite hva man gjør når margin brukes. Hvis vi nå legger til en marg for deltagerinformasjonen i tillegg vil du få dobbelt med marg: lag{ font-family: sans-serif; font-size: medium; margin: 20px; deltager{ font-style: italic; margin: 14px; Nå har vi lagt til marg rundt hele lag-elementet og hele deltager-elementet. Det gjør at deltagernavnene får for eksempel 34px med venstremarg: side 14 av 20
15 Border Border brukes til å sette en ramme rundt hele innholdet til et element. De ulike egenskapene vi har for border er: border-width px, em, pt eller en av verdiene thin, medium, thick medium border-style none, solid, dotted, dashed, hidden, double, groove, ridge, inset, outset none border-color angis som navn på farge, RGB- eller heksadesimalt tall samme som fargen til elementet border kan ha en verdi for hver av de tre egenskapene over 0 For å illustrere de ulike egenskapene har vi følgende XML-dokument (ramme.xml): <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="ramme.css"?> <test> <vitester>rammetype</vitester> </test> Videre har vi CSS-filen ramme.css: vitester { font-size:24px; border-style:solid Her har vi lagt inn en stil på border; border-style: solid. I det følgende skal vi endre på denne egenskapen for å se hvordan dette vil påvirke visningen av XML-dokumentet. { border-style: solid ser slik ut i nettleseren: { border-style: dotted ser slik ut i nettleseren: { border-style: inset ser slik ut i nettleseren: side 15 av 20
16 Ved å bruke egenskapen border-width kan vi endre på tykkelsen til rammen. Hvis vi videre kombinerer dette med border-color (fargen til borderen) og border-style, kan du blant annet få frem følgende eksempler: vitester { font-size: 24px; border-style: solid; border-width: thick; border-color: red; Hvis du vil øke tykkelsen, kan denne også angis i piksler: vitester { font-size: 24px; border-style: solid; border-width: 10px; border-color: red; Som med margin, kan også border settes til flere verdier på samme egenskap. Rekkefølgen vil være: border: border-width border-style border-color Eksemplet rett over kan derrmed skrives som: vitester { font-size: 24px; border: 10px solid red; Padding Paddingfunksjonen gir mellomrom egenskaper: mellom elementteksten og rammen. Padding har følgende padding, padding-top, padding-bottom, padding-left, padding-right px, em eller % 0 Funksjonene til padding brukes på samme måte som for margin. Det er samme regler for hvordan egenskapene settes opp og verdier kan angis i px eller em. Vi fortsetter med eksemplet vist under border og vil ha mer luft mellom rammen og teksten. Da må vi tilføye en egenskap i selve reglen (vises med uthevet skrift): vitester { font-size: 24px; border-style: solid; border-width: thick; border-color: red; padding: 8px; side 16 av 20
17 Den siste linjen i eksemplet gir mer avstand rundt elementteksten. På samme måte som for margin kan paddingfunksjonen angi ulik størrelse for de ulike kantene. Dette kan du selv prøve ut Size Vi kan sette bredden og høyden ved å bruke egenskapene: width og height cm, in, auto eller % 0 Vi fortsetter med det samme eksempelet og legger til en bredde på 8 cm: vitester { font-size: 24px; border-style: solid; border-width: thick; border-color: red; padding: 8px; width: 8 cm; Posisjonering Vi har til nå brukt margin, border og padding egenskaper for å bestemme avstand mellom de ulike elementene. Alternativt kan en posisjon for de ulike elementene settes, og vi kan da bruke følgende: - Relativ posisjon: Kan korrigere på posisjonen til en bestemt boks (da menes et element med padding, border og margin), uten at det går ut over posisjonen til de andre boksene som vises. - Absolutt posisjon: Her tas elementet ut av sekvensen av bokser og gir det en egen posisjon, uavhengig av hvordan andre bokser er plassert. Man kan lett få flere elementer som ligger oppå hverandre hvis man ikke er forsiktig. Fordelen er at boksen vil være plassert på samme plass uavhengig av hvordan brukeren forstørrer/forminsker vinduet eller scroller. - Fixed posisjon: Her får boksen sin egen posisjon som vil være fast uavhengig av hvordan brukeren scroller og hvordan innholdet endres. Dette kan typisk brukes ved logoer som skal være på samme posisjon på alle filer. Denne form for posisjonering brukes ikke så ofte. Som regel bruker man margin, border og padding for å bestemme posisjon. For å bruke disse posisjoneringene settes følgende egenskap: position static, relative, absolute, fixed static Verdien static vil si vanlig posisjon, mens de andre er forklart over. Egenskapen over setter bare hvilken type posisjonering som skal brukes. I tillegg må det også settes verdi på selve posisjonen: side 17 av 20
18 top, right, bottom, left lengdeverdi 0 Vi fortsetter nå med konkurranse-eksemplet før egenskapene margin ble brukt. Vi vil nå sette en absolutt posisjon på klubb-elementet til lag som skal spille: lag klubb{ text-align: center; position: absolute; left: 250px; I en nettleser ser dette ut som: Legg merke til at nå er klubb-elementet tatt ut av rekken av elementer, slik at teksten i deltager-elementene er flyttet opp Sette inn bilder Ofte vil man ha med bilder i visning av XML-dokumenter. Dette kan enten være et bakgrunnsbilde, eller et vanlig bilde som skal vises i sin helhet. background-image url, none none Først kan vi prøve å legge til et bakgrunnsbilde. Vi fortsetter å bruke konkurranse-eksemplet (tar bort gul bakgrunnsfarge). Der hadde vi et lag-element som gjelder for hvert lag som skal delta. Vi vil at dette bakgrunnsbilde (Leaf.bmp) skal legges som bakgrunn til selve teksten om laget: For å få til dette legger vi til en ny egenskap som bare gjelder for lag-elementet i CSS-filen: lag { font-family: sans-serif; font-size: medium; background-image:url(leaf.bmp) side 18 av 20
19 Hvis vi nå ser på dokum entet i nettleseren: Som du ser gjentar bildet seg slik at all teksten i lag-elementet har et bakgrunnsbilde. Nå kan vi istedenfor prøve å legge til bildet til høyre for teksten i lag-elementet. Den enkleste måten å gjøre det på er å sette inn et tomt element i XML-dokumentet, og legge til egenskaper i CSS-dokumentet. Vi legger til elementet image som første barneelement til lag-elementet i XML-dokumentet. Deretter oppdaterer vi CSS-filen med følgende regel: image{background-image: url(leaf.bmp); width:101px; height: 52px; Vi velger å fjerne bildet fra lag-elementet. Over ser du at vi angir en størrelse som bildet skal vises på. Dette er den nøyaktige størrelsen til bildet. I nettleseren vil dette bli: Som du ser blir bildet plassert ved siden av klubb-elementet for et lag fordi det ikke er angitt noe display:block for verken image- eller klubb-elementet. Vi vil istedenfor plassere bilde til høyre for hele lag-elementet. Teksten skal altså flyte på venstresiden av bilde. Da brukes denne egenskapen: float left, right side 19 av 20
20 Vi prøver dette i eksemplet over: image{ background-image: url(leaf.bmp); width:101px; height: 52px; float:right; Nå vil vi få det korrekt: Float-egenskapen brukes til å si at innholdet til et element skal flyte ved siden av et annet elementinnhold. Dette kan både være bilder eller tekstelementer. side 20 av 20
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
DetaljerMMT105 Internettprogrammering Uke 44, høst 2007
MMT105 Internettprogrammering Uke 44, høst 2007 Introduksjon til CSS MMT105 HiNT 2007 1 HTML-elementenes strukturerende egenskaper HTML-elementene skal markere strukturen i et webdokument, dvs. at de forskjellige
DetaljerStyling og formatering av tekst
Lesson 5 All Code Clubs must be registered. Registered clubs appear on the map at codeclub.org.uk - if your club is not on the map then visit jumpto.cc/18cplpy to find out what to do. Styling og formatering
DetaljerI denne oppgaven forventer vi at du har vært gjennom HTML- og CSS-oppgavene så langt og/eller er kjent med <div> - og HTML5-taggene.
CSS: Layout Ekspert Web Introduksjon Målet med oppgaven er å lære hvordan man lager en nettside med en meny og et innholdsfelt. I denne oppgaven forventer vi at du har vært gjennom HTML- og CSS-oppgavene
DetaljerStilark Cascading Style Sheets - CSS
Stilark Cascading Style Sheets - CSS /* Eksempel på stilark */ h1 { text-align: center; color: blue; } Læreboka kapittel 5 12. september 2007 INF1040-CSS-1 Boks-modellen Et XHTML-dokument er satt sammen
DetaljerStilark Cascading Style Sheets - CSS
Stilark Cascading Style Sheets - CSS /* Eksempel på stilark */ h1 { text-align: center; color: blue; } Læreboka kapittel 5 12. september 2007 Boks-modellen Et XHTML-dokument er satt sammen av elementer
Detaljer1. 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
DetaljerSteg 1: Vi starter fra toppen
CSS: Layout Skrevet av: Lars Klingenberg Kurs: Web Tema: Tekstbasert, Nettside Fag: Programmering, Teknologi Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon Målet med oppgaven er å lære hvordan
DetaljerCASCADING STYLESHEETS (CSS)
CASCADING STYLESHEETS (CSS) HVA ER CSS Stylesheets er en metode for å flytte selve formatteringen av et HTML dokument ut av selve dokumentet og over i et eksternt regelsett. Dette skyldes HTMLs manglende
DetaljerTENK TECH SUMMERCAMP BYGG DIN EGEN NETTSIDE
TENK TECH SUMMERCAMP BYGG DIN EGEN NETTSIDE JULIE HILL ROA MIRA THOEN FEIRING HVA ER WEBUTVIKLING? SERVER KLIENT HTTP request HTML, CSS, JavaScript HTTP response HTML Innhold CSS Utseende JAVASCRIPT Oppførsel
DetaljerMer om stiler og stilark. Layout. Litt Design
Mer om stiler og stilark. Layout. Litt Design Webpublisering 13.09.2004 Webpublisering - HiO - Kirsten Ribu - 2004 1 I dag Struktur på hjemmesiden Mer om stiler Stiler og layout Litt om design og farger
DetaljerCSS. Aud Marie Hauge ekspert i brukskvalitet og universell utforming i Epinova AS
CSS Aud Marie Hauge ekspert i brukskvalitet og universell utforming i Epinova AS CSS står for Cascading Style Sheets CSS blir brukt til å bestemme hvordan HTML-elementene skal se ut (farge, størrelse,
DetaljerCSS: Style nettsider Nybegynner
CSS: Style nettsider Nybegynner Web Introduksjon Nå skal vi lære å endre på stilen til nettsider. I denne oppgaven forventer vi at du har gjort HTML-oppgavene eller er litt kjent med HTML fra før av. I
DetaljerCSS: 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
DetaljerHåkon Tolsby. 25.08.2014 Håkon Tolsby
HTML5 og CSS Håkon Tolsby 25.08.2014 Håkon Tolsby 1 En webside min webside en html5 side dett er min første
Detaljer1. 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
DetaljerLa oss gjøre nettsiden vår bedre med noen stiler. I denne og den neste leksjonen skal vi lære hvordan man endrer farge, tekst, størrelser og mer!
Lesson 4 CSS All Code Clubs must be registered. Registered clubs appear on the map at codeclub.org.uk - if your club is not on the map then visit jumpto.cc/18cplpy to find out what to do. Introduksjon
DetaljerINF1040 Oppgavesett 4: CSS
INF1040 Oppgavesett 4: CSS (Kapittel 5) Fasitoppgaver Ingen fasitoppgaver denne gang. Se flervalgsoppgavene under. Flervalgsoppgaver I følgende oppgaver er det oppgitt fem alternativer der nøyaktig ett
DetaljerCSS: Style nettsider. Introduksjon. Skrevet av: Arve Seljebu
CSS: Style nettsider Skrevet av: Arve Seljebu Kurs: Web Tema: Tekstbasert, Nettside Fag: Programmering, Teknologi Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon Nå skal vi lære å endre på
Detaljer1. Mer om oppbyning av XML-dokument
Avdeling for informatikk og e-læring, Høgskolen i Sør-Trøndelag Mer om oppbyning av XML-dokument Lene Hoff 2.9.2013 Lærestoffet er utviklet for faget XML Teknologi 1. Mer om oppbyning av XML-dokument Resymé:
DetaljerI denne oppgaven skal du lære hvordan du kan flytte rundt på elementer og gjemme elementene bak andre elementer ved hjelp av CSS.
CSS: Skjul ninjaene Skrevet av: Oversatt fra Code Club UK (//codeclub.org.uk) Oversatt av: Trude Martinsen Kurs: Web Tema: Tekstbasert, Nettside Fag: Matematikk, Programmering, Teknologi, Kunst og håndverk
DetaljerOBLIG 1 - WEBUTVIKLING
OBLIG 1 WEBUTVIKLING Oppgave 1 Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Problemer med funksjonalitet / bruk Uoversiktlig side For
DetaljerOblig 1 Erlend Hannestad
Oblig 1 Erlend Hannestad Oppgave 1 Nettsiden er ustrukturert og uryddig når det kommer til layout og design, det er vanskelig å holde oversikt over alt som vises på siden, det er rett og slett for mye
DetaljerKursdokumentasjon for Dreamweaver
Kursdokumentasjon for Dreamweaver Skrevet av 2/13 1 Komme i gang med Dreamweaver... 3 2 Bruk av Dreamweaver... 4 2.1 Verktøylinja...5 2.2 Properties... 5 3 Sidens egenskaper... 6 4 Tekst... 7 4.1 Endre
DetaljerJavascript. 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 ;-)
DetaljerBilder, tabeller. Kirsten Ribu 26.09
Bilder, tabeller Kirsten Ribu 26.09 1 Repetisjon: div taggen Blokker () Et (X)HTML-dokument kan deles inn i blokker med og hver blokk må avsluttes med . Blokker benyttes i dokumenter der
DetaljerSUKKERGRIS. Anita og Silje DAT100
SUKKERGRIS Anita og Silje DAT100 I NNHOLD 1. Innledning... 2 2. Beskrivelse av Sukkergris... 3 2.1 Struktur og grafisk design... 3 2.1.1 Sidens oppbygning... 3 2.1.2 CSS og Grafisk design... 4 2.2 Oversikt
DetaljerEKSAMEN Web-publisering
EKSAMEN 6101 Web-publisering 02.06.2016 Tid: Målform: Sidetall: 3 timer Bokmål 5 (inkludert denne) Hjelpemiddel: Ingen Merknader: Vedlegg: Alle oppgavene er vektet, pass på å fordele tiden du bruker mellom
DetaljerBildebehandling 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
DetaljerOppgave 1. Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.
Oppgave 1 Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Når man tar pilen over fanene, dukker det opp utrolig mange tagger. Dvs alt er
DetaljerHåkon Tolsby Håkon Tolsby
HTML5 og CSS Håkon Tolsby 27.08.2018 Håkon Tolsby 1 En webside min webside en html5 side dett er min første
DetaljerCSS: 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
DetaljerDet du skal gjøre i denne oppgava er først å sette opp bakgrunnen til spillet og så rett og slett å få firkanter til å falle over skjermen.
Tetris Introduksjon Processing Introduksjon Lag starten på ditt eget tetris spill! Det du skal gjøre i denne oppgava er først å sette opp bakgrunnen til spillet og så rett og slett å få firkanter til å
DetaljerOppsummering 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
DetaljerSteg 1: Animasjons-attributtet
CSS: Animasjon Skrevet av: Lars Klingenberg Kurs: Web Tema: Tekstbasert, Nettside, Animasjon Fag: Matematikk, Programmering, Kunst og håndverk Klassetrinn: 5.-7. klasse, 8.-10. klasse, Videregående skole
DetaljerTilpassning 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)
Detaljer4. Dynamisk skjemaer (GUI)
4. Dynamisk skjemaer (GUI) I drofus kan flere skjermbilder selv defineres av prosjektet. Disse skjermbildene kan redigeres av en med administratortilgang til prosjektet. For tiden kan følgende skjemaer
DetaljerTetris. Introduksjon. Skrevet av: Kine Gjerstad Eide. Lag starten på ditt eget tetris spill!
Tetris Skrevet av: Kine Gjerstad Eide Kurs: Processing Introduksjon Lag starten på ditt eget tetris spill! Det du skal gjøre i denne oppgava er først å sette opp bakgrunnen til spillet og så rett og slett
Detaljerfile:///c:/users/michaelp/sites/dkdm/dw6/dreamweaver6.html
1 of 9 15.04.2015 14:15 Spry og behaviours Både Spry and Behaviours er basert på programmeringsspråket Javascript. Javascript kjører i nettleseren og ikke på webserver som PHP og Perl. På en lignende måte
DetaljerWebutvikling oblig 1 Marius Hanssen
Webutvikling oblig 1 Marius Hanssen Oppgave 1 arngren.net er en rotete nettside, enkelt sett forpestet med et uorganisert layout og en kode så grov at jeg ikke skjønner hvordan de klarte å finne en så
DetaljerEKSAMEN Webpublisering
Høgskolen i Telemark Fakultet for allmennvitenskapelige fag EKSAMEN 6101 Webpublisering 03.12.2015 Tid: Målform: Sidetal: 3 timer Bokmål 5 (inkludert denne) Hjelpemiddel: Ingen Merknader: Alle oppgavene
DetaljerHTML-del. 1. <!-- ikke slett min kode, vær så snill --> er a) en HTML stil-tag b) en CSS stil-tag c) en HTML kommentar-tag d) en CSS kommentar-tag
HTML-del 1. er a) en HTML stil-tag b) en CSS stil-tag c) en HTML kommentar-tag d) en CSS kommentar-tag 2. Grafisk elementer på web skal være a) 72 ppi b) 144
DetaljerKanter, kanter, mange mangekanter
Kanter, kanter, mange mangekanter Nybegynner Processing PDF Introduksjon: Her skal vi se på litt mer avansert opptegning og bevegelse. Vi skal ta utgangspunkt i oppgaven om den sprettende ballen, men bytte
DetaljerBRUK 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
DetaljerOppgave 1: Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.
Oppgave 1: Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Svar: Ved første øyekast har utvikleren av nestesiden plasser altfor mange div
DetaljerAdministrering 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...
DetaljerStilark - lenker. Mer om (X)HTML Kap. 7, 8 og 9. Webpublisering Kisten Ribu HiO 1
Stilark - lenker Mer om (X)HTML Kap. 7, 8 og 9 Webpublisering 2004 - Kisten Ribu HiO 1 I dag Noen flere tagger Stilark Selektorer Stiltyper og stilverdier Stiltyper for skriftutseende Stiltyper for tekstorganisering
Detaljerfile:///c:/users/michaelp/sites/dkdm/dw5/dreamweaver5_1.html
1 of 10 09.04.2015 15:49 Fra forrige gang: Om tabeller Tabeller er i utgangspunktet en måte å presentere data på. Skal ikke brukes for å legge ut sider Dreamweaver har fasiliteter for å opprette, redigere
DetaljerHØGSKOLEN I SØR-TRØNDELAG
HØGSKOLEN I SØR-TRØNDELAG Avdeling for informatikk og e-læring Kandidat nr: Eksamensdato: 13. mai 2005 Varighet: 3 timer (9:00 12:00) Fagnummer: LO515D Fagnavn: Klasser: NETT2005V Studiepoeng: 6 Faglærer:
DetaljerSprettende 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
DetaljerOppgave 1 (Etter forelesning 31/8) Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.
Oblig 1 Oppdatert: 10/09 Nye oppgaver Oppgave 1 (Etter forelesning 31/8) Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Oppgave 2 (Etter
DetaljerBruksanvisning for publisering på www.fysio.no
EZ Publish Bruksanvisning for publisering på www.fysio.no Gå til http://admin.fysio.no. OBS: Legg merke til at du ikke skal ha med www. Skriv inn brukernavn og passord. Nå er du klar til å redigere artiklene:
DetaljerHøgskolen i Telemark EKSAMEN Webpublisering (inkludert denne) Hjelpemiddel: Ingen
Høgskolen i Telemark Fakultet for allmennvitenskapelige fag EKSAMEN 6101 Webpublisering 05.12.2013 Tid: Målform: Sidetal: 3 timer Bokmål 7 (inkludert denne) Hjelpemiddel: Ingen Merknader: Alle oppgavene
DetaljerINNHOLD INTRODUKSJON...3 LOGO... 4 TYPOGRAFI...6 FARGER...8 DESIGNELEMENTER...9 POSTALIA... 10
PROFILHÅNDBOK INNHOLD INTRODUKSJON....3 LOGO....................... 4 TYPOGRAFI....6 FARGER....8 DESIGNELEMENTER....9 POSTALIA.................. 10 2 INTRODUKSJON Denne profilhåndboken angir retningslinjer
Detaljer(X)HTML, CSS og JavaScript HTML. Det første dokumentet 26.11.2007. Grunnleggende programmering i Java Monica Strand 26.
(X)HTML, CSS og JavaScript Grunnleggende programmering i Java Monica Strand 26. november 2007 Gr. leggende Java 26. november 2007 1 HTML HTML = Hyper Text Markup Language Strukturerer tekstinnhold HTML
DetaljerKom i gang med emedia
Kom i gang med emedia Rev. 1 IG Solutions, www.ig-solutions.com 1 Innholdsfortegnelse: Fremside 1 Innholdsfortegnelse 2 Hvordan lage plastkort 3 Legg til bakgrunnsbilde 4 Legg til foto 4 Legg til tekst
DetaljerKodetime for Nordstrand barneskole
Kodetime for Nordstrand barneskole av Veronika Heimsbakk og Lars Erik Realfsen 1 Hva er Processing? Processing er et programmeringsspråk som er gratis, og tilgjengelig for alle! Man kan programmere i Processing
DetaljerIntro 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
DetaljerLæringsmål og pensum. Hvordan virker webteknologi? (klient-tjener arkitektur) HTML - virkemåte. Nettleser: Firefox, Opera, Safari
1 2 Læringsmål og pensum TDT4105/4110 Informasjonsteknologi grunnkurs: Uke 35/36 HTML Førsteamanuensis Alf Inge Wang Læringsmål Lære å lage statiske hjemmesider Bilder Lenker Lister Tabeller Skjema for
DetaljerStilark "Cascading Style Sheets" CSS
Stilark "Cascading Style Sheets" CSS /* Eksempel på stilark */ h1 { font-size:18pt; text-align: center; color: blue; } Vær oppmerksom på at enkelte nettlesere kan henge litt etter med implementering av
DetaljerGUI/ SYSTEM DESIGNHÅNDBOK. Versjon 1.0 December 2014
GUI/ SYSTEM DESIGNHÅNDBOK Versjon 1.0 December 2014 GUI designmanual Innhold Her beskrives layout og grafisk profil for systemer og tjenester i Landbruksdirektoratet. Designmanualen er utarbeidet av Ciber
DetaljerEKSAMEN / 6101N WebPublisering
EKSAMEN 6101 / 6101N WebPublisering 09.12.2016 Tid: Målform: Antall sider: 3 timer Bokmål 8 (inkludert denne) Hjelpemidler: Ingen Merknader: Vedlegg: Alle oppgavene er vektet, pass på å fordele tiden du
DetaljerEKSAMEN. Elektronisk publisering. INNFØRING MED PENN, evt. trykkblyant som gir gjennomslag
Høgskolen i Gjøvik KANDIDATNUMMER: EKSAMEN FAGNAVN: FAGNUMMER: Elektronisk publisering L101G EKSAMENSDATO: 04.01.01 KLASSE: TID: FAGLÆRER: ANTALL SIDER UTLEVERT: TILLATTE HJELPEMIDLER: 99hinga/b, 99hdmua/b
DetaljerSlik 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
DetaljerOblig 1. Oppgave 1. Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.
Oblig 1 Oppgave 1 Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Problemer med arngren.net: 1. Nettsiden er SYKT uoversiktlig! 2. Det er
DetaljerGrunnleggende om websider og HTML-kode
Grunnleggende om websider og HTML-kode Html er et språk / en standard som brukes for å gi instrukser til nettlesere om hvordan ulike elementer på en webside skal fortolkes og presenteres for en sluttbruker.
DetaljerOblig 2: Oppgave 1. section { width: 50%; height: 30%; margin: 5% 0 0 0; } h1 { color:#000000; font-size:2em;
Oblig 2: Oppgave 1 Hva og hvorfor Jeg har valgt å lage et nettsted basert på relative målenheter. Det vil si at jeg tar i bruk prosent og em istedenfor pixler. For eksempel: section { width: 50%; height:
DetaljerFarger Introduksjon Processing PDF
Farger Introduksjon Processing PDF Introduksjon På skolen lærer man om farger og hvordan man kan blande dem for å få andre farger. Slik er det med farger i datamaskinen også; vi blander primærfarger og
DetaljerStilark "Cascading Style Sheets" CSS
Boks-modellen Et XHTML-dokument er satt sammen av elementer i bokser Stilark "Cascading Style Sheets" CSS /* Eksempel på stilark */ h1 { font-size:18pt; text-align: center; color: blue; Vær oppmerksom
DetaljerCSS. 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
DetaljerBrukermanual til Domenia Norges adminløsning
Brukermanual til Domenia Norges adminløsning 1. Login For å logge inn på løsningen din skriver du inn domenenavnet ditt og /siteadmin (f.eks www.domenia.no/siteadmin ). Skriv inn brukernavn og passord
DetaljerINF1040 Oppgavesett 5: XML
INF1040 Oppgavesett 5: XML (Kapittel 3) Husk: De viktigste oppgavetypene i oppgavesettet er Tenk selv - og Prøv selv - oppgavene. Fasitoppgaver Ingen fasitoppgaver denne gang. Se flervalgsoppgavene under.
DetaljerInf109 Programmering for realister Uke 5. I denne leksjonen skal vi se på hvordan vi kan lage våre egne vinduer og hvordan vi bruker disse.
Inf109 Programmering for realister Uke 5 I denne leksjonen skal vi se på hvordan vi kan lage våre egne vinduer og hvordan vi bruker disse. Før du starter må du kopiere filen graphics.py fra http://www.ii.uib.no/~matthew/inf1092014
DetaljerHvordan 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
Detaljer1. Profiler og variabler
Avdeling for informatikk og e-læring, Høgskolen i Sør-Trøndelag Profiler og variabler Stein Meisingseth 26.05.2014 Lærestoffet er utviklet for faget IDRI3005 PowerShell 1. Profiler og variabler Resymé:
DetaljerLøpende strekmann Erfaren Videregående Python PDF
Løpende strekmann Erfaren Videregående Python PDF Introduksjon I denne oppgaven skal du lage et spill der du styrer en strekmann som hopper over hindringer. Steg 1: Ny fil Begynn med å lage en fil som
DetaljerBrukerveiledning 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
DetaljerForsvunnet katt webside
Lesson 3 Forsvunnet katt webside All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/18cplpy to find out what
Detaljer1. XML Grunnlag
Avdeling for informatikk og e-læring, Høgskolen i Sør-Trøndelag XML Mildrid Ljosland 4.2.2008 Lærestoffet er utviklet for faget LO701D Interaktive Webtjenester med Java og XML 1. XML Resymé: Webtjeneste-teknologien
DetaljerHTML: Del inn nettsiden
HTML: Del inn nettsiden Erfaren Web Introduksjon Målet med denne oppgaven er å lære hvordan man kan organisere en nettside ved å dele den inn med forskjellige tagger. Dersom du ikke er kjent med tagg-strukturen
DetaljerHvordan 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
DetaljerNY 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
DetaljerFakultet for informasjonsteknologi, EKSAMEN I EMNENE TDT4110/TDT4115 SIF8008/SIF8009 INFORMASJONSTEKNOLOGI GK 5. AUGUST 2004 KL. 09.00 13.
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
DetaljerKanter, kanter, mange mangekanter. Introduksjon: Steg 1: Enkle firkanter. Sjekkliste. Skrevet av: Sigmund Hansen
Kanter, kanter, mange mangekanter Skrevet av: Sigmund Hansen Kurs: Processing Tema: Tekstbasert, Animasjon Fag: Matematikk, Programmering, Kunst og håndverk Klassetrinn: 8.-10. klasse, Videregående skole
DetaljerTema Guide for PHP-Fusion v6.01.
1 av 12 18.08.2007 20:47 Tema Guide for PHP-Fusion v6.01 Publisert av sveinungs den 18. august 2007 13:29 Tema Guide for PHP-Fusion v6.01. Sist oppdatert: 18-08-2007 Innhold: Innledning Theme.php Endre
DetaljerBRUK AV GMAIL SOM KLUBBADRESSE
Tillitsvalgt (ATV) og vara på KS-området (videregående skole, grunnskolen, kommunale barnehager, PPT mfl). Andre tillitsvalgte som bruker Gmail Oppdatert utgave 01.06.2011 BRUK AV GMAIL SOM KLUBBADRESSE
DetaljerManual 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
DetaljerAUTOCAD 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
Detaljerwww.ir.hiof.no/~eb/viz.htm Side 1 av 12
VIZhtm Side 1 av 12 Innhold Side MÅL 1 OPPGAVE / RESULTAT 1 BESKRIVELSE ØVING 6A 2 BESKRIVELSE ØVING 6B 9 BESKRIVELSE ØVING 6C 12 MÅL Når du har utført denne øvingen, skal du kunne: Benytte et kamera som
DetaljerInstallasjon InfoMediaPlayer:
Installasjon InfoMediaPlayer: InfoMediaPlayer lastes ned fra: https://dl.dropboxusercontent.com/u/81046462/5.5.42.exe Dette er en executable RAR fil, så kjør filen og sett C:\InfoMedia som bane for utpakking.
DetaljerUtseende. Lauri Watts Oversettelse: Bjørn Steensrud
Lauri Watts Oversettelse: Bjørn Steensrud 2 Contents 1 Utseende 4 1.1 Generelt........................................... 4 1.2 Skrifter............................................ 4 1.3 Stilsett............................................
DetaljerFarger. Introduksjon. Skrevet av: Sigmund Hansen
Farger Skrevet av: Sigmund Hansen Kurs: Processing Tema: Tekstbasert Fag: Matematikk, Programmering, Kunst og håndverk Klassetrinn: 8.-10. klasse, Videregående skole Introduksjon På skolen lærer man om
Detaljerwww.lakselvdal.no Brukerkurs 16.februar 2012
Brukerkurs 16.februar 2012 Kort introduksjon til world wide web og struktur der. Forskjellige måter å lage seg en hjemmeside på. Hvordan vi i Lakselvdal gjør det. Og viktigst av alt, utdanne flere til
DetaljerGrafisk profilhåndbok Retningslinjer for grafisk profil
Grafisk profilhåndbok Retningslinjer for grafisk profil Rudi Stensvold Versjon: 1 November 2013 Innhold Introduksjon Side 2 Logo Beskrivelse Side 3 Presentasjon Side 4 Fargekoder Side 5 Feil bruk Side
DetaljerOBLIG 2 WEBUTVIKLING
OBLIG 2 WEBUTVIKLING Oppgave 1 Design ved hjelp av skisser eller wireframes et nettsted med et "avansert" design. Lag spesifikke design for ulike skjermstørrelser og utskrift. Fokuser spesielt på å få
DetaljerOBLIG 1 WEBUTVIKLING. Oppgave 1 Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak.
OBLIG 1 WEBUTVIKLING Oppgave 1 Gå gjennom nettsiden arngren.net og list opp alle problemene du ser. Både i funksjonalitet/bruk og i koden bak. Tar lang tid å laste inn siden: Mye bilder Mange animasjoner
Detaljerog 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
DetaljerHalloweenimasjon 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
DetaljerRammer. Mer om Javascript
Rammer. Mer om Javascript LO130A Kirsten Ribu 11.10.2004 Kirsten Ribu - HiO - LO 130 A 1 I dag Om rammer (Frames) Mer om Javascript Kirsten Ribu - HiO - LO 130 A 2 Innledende om rammer (Frames) Med rammer
DetaljerBrukerdokumentasjon 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