Webpublisering Kisten Ribu HiO1 Stilark - lenker Mer om (X)HTML Kap. 7, 8 og 9

Webpublisering Kisten Ribu HiO2 I dag Noen flere tagger Stilark  Selektorer  Stiltyper og stilverdier  Stiltyper for skriftutseende  Stiltyper for tekstorganisering  Stiltyper for farger og bakgrunn  Stiltyper for lister Pekere (lenker)  Internt i samme dokument

Webpublisering Kisten Ribu HiO3 Taggen Innrykk Et innrykket avsnitt starter med og må avsluttes med. Nok et innrykket avsnitt (til et innrykket avsnitt) oppnås ved en ny. En må etterfølges av en blokk-tag som,, eller en ny. Du kan ikke begynne direkte med vanlig tekst.

Webpublisering Kisten Ribu HiO4 Blokker ( ) Et (X)HTML-dokument kan deles inn i blokker med og hver blokk må avsluttes med. Blokker benyttes i dokumenter der forskjellige deler (blokker) skal ha forskjellig struktur og utseende. Typisk eksempel er hvis noen deler av dokumentet skal være sentrert og andre ikke. Innenfor en blokk kan du bruke alle vanlige tagger som du ellers kunne ha brukt utenfor en blokk. Det blir mer om denne strukturen senere når vi snakker om stilark.

Webpublisering Kisten Ribu HiO5 Linjeskift, streker og bilder Dette er 3 tagger der det ikke skal være noen sluttagg i HTML. I XHTML derimot skal det være en sluttag, og det skjer ved en ekstra avsluttende skråstrek i taggen. I HTML er som sagt denne skråstreken valgfri. Det normale er at teksten i et avsnitt går helt ut til høyre skjermkant før ny linje skrives. Du kan derimot styre linjeskift selv med taggen. Nest tegn vil da alltid komme på ny linje, men uten luft mellom linjene. Du kan ha flere -tagger etter hverandre for å skape mer luft mellom linjene. Taggen setter inn en vannrett strek etter foregående linje. Taggen setter inn et bilde som befinner seg i filen meg.gif.

Webpublisering Kisten Ribu HiO6 Litt mer om IP adresser IP adresser kan ikke brukes til å sende datapakker – maskinvaren forstår ikke Internettadresser. ’Address Resolution Protocol (ARP) (ARP) konverterer IP adresser til en MAC- adresse (maskinadresse) Denne mappingen lagres i en tabell. Man finner ut av MAC adressen og den tilsvarende IP adressen med kommandoen arp -a Internet addresse: Fysisk addresse: c-5a-cd-90

Webpublisering Kisten Ribu HiO7 Address Resolution Prtocol Adressering Domain Name System ? Logisk adresse e.g. Internet address e.g Netadapter address e.g. Ethernet address 00:08:74:35:2b:0a Address resolution

Webpublisering Kisten Ribu HiO8 Kommandoen arp -a arp –a: Viser gjeldende ARP-adresser ved å kontrollere gjeldende protokolldata.

Webpublisering Kisten Ribu HiO9 Eksempel C:\Documents and Settings\kirsten ribu>arp -a Grensesnitt: x10003 Internett-adresse Fysisk adresse c0-02-ef-d3-8a Type dynamisk

Webpublisering Kisten Ribu HiO10 IP adresser På en Windows maskin: Kommanoen ’ipconfig’ gir Ip-adressen til maskinen du sitter ved, nettverksmasken og gatewayadressen = ruteren ut fra nettverket. IP-adresse …... : Nettverksmaske : Standard gateway :

Webpublisering Kisten Ribu HiO11 Stilark

Webpublisering Kisten Ribu HiO12 Stilark Stilark benyttes for å definere layout (farger, skrift, rammer, plassering etc.) på individuelle deler (strukturer som avsnitt, lister, overskrifter etc.) av et (X)HTML-dokument. Et stilark (egentlig en samling av stildefinisjoner) kan anvendes på et (X)HTML-dokument på 3 måter:

Webpublisering Kisten Ribu HiO13 Stilarket kan ligge på en egen fil slik at flere forskjellige (X)HTML-dokumenter kan anvende det samme stilarket. Stilarket kan være en integrert del av (X)HTML-dokumentet plassert i header- delen. Det virker da bare på dette ene dokumentet og er globalt definert for (X)HTML-dokumentet. Stildefinisjonene kan legges lokalt inn i en (X)HTML-struktur (avsnitt, liste, overskrift etc.) og virker bare der.

Webpublisering Kisten Ribu HiO14 Bruke stilark fra egne filer Det skjer ved å legge inn en link-tag i (X)HTML- dokumentets header som vist her: Tittel I dette eksemplet ligger stilarket i filen filnavn.css og i samme katalog som (X)HTML-dokumentet. Du kan gjerne hente inn flere stilark i et (X)HTML- dokument (flere link-tagger), men hvis de er selvmotsigende (har konflikter), så er det den sist definerte stilen som gjelder.

Webpublisering Kisten Ribu HiO15 Formattering med stiler CSS er standard Hver stilregel i et stilark har to deler: Selector – definerer hvilke elementer som påvirkes En declaration – eller egenskap/verdi – par: Eks: h1{color:red;}

Webpublisering Kisten Ribu HiO16 Bruke stilark globalt i (X)HTML-dokumentet Tittel I dette eksemplet gjelder stildefinisjonene for hele (X)HTML-dokumentet, men bare det dokumentet det er lagt inn i. Hvis du i tillegg har en eller flere link-tagger (over style-taggen), og disse er selvmotsigende så er det stildefinisjonene i style-taggen som gjelder.

Webpublisering Kisten Ribu HiO17 Bruke stilark lokalt i et (X)HTML-dokument Det skjer ved å legge inn et stil-attributt i en eller annen (X)HTML-tag som eksempelvis her: I eksemplet over betyr det at etterfølgende tekst i et avsnitt skal sentreres. Legg merke til at i en stildefinisjon fungerer et kolon som et likhetstegn. I neste eksempel skal et avsnitt ha rød tekst i tillegg.

Webpublisering Kisten Ribu HiO18 NB! Legg merke til at flere stildefinisjoner adskilles med et semikolon. Hvis du i tillegg har stildefinisjoner fra link-tagger eller globalt definerte (ved en stil-tag), så er det de lokalt definerte stilene som gjelder.

Webpublisering Kisten Ribu HiO19 Generelt om stildefinisjoner Som siste side viste, er en stildefinisjon egentlig knyttet til en (X)HTML-tag, og enhver (X)HTML-tag kan ha et stil-attributt. For stilark (stildefinisjoner) i egne filer og globalt definerte stiler i et (X)HTML- dokument er derfor syntaksen for en stildefinisjon som følger: HTML-tag: {stil-type-1: stil-verdi-1; stil-type-2: stil-verdi-2}

Webpublisering Kisten Ribu HiO20 Hvorfor bruke stilark Skille innhold og utseende. Skrekkeksempel Kindereggsyndrom: 3 ting på én gang!: StilarkStilark, globale stildefinisjoner, og stildefinisjoner for enkelttagger!!

Webpublisering Kisten Ribu HiO21 Selektorer Hvis to eller flere (X)HTML-tagger skal ha samme sett med stildefinisjoner, er det ikke nødvendig å spesifisere dette en for en. Det kan gjøres samlet på f.eks. denne måten: h1, h2 {stil-type-1: stil-verdi-1; stil-type-2: stil-verdi-2} Lister: (taggen er en ordnet (nummerert liste): ol {stil-type-1: stil-verdi-1; stil-type-2: stil-verdi-2} olol {stil-type-1: stil-verdi-3; stil-type-2: stil-verdi-4} Den første stildefinisjonen sier at en ordnet liste skal nummereres med f.eks. vanlige tall. Den andre stildefinisjonen sier at hvis en ordnet liste har en ordnet underliste, så skal de nummereres med f.eks. romertall.

Webpublisering Kisten Ribu HiO22 Eksempel – flere stiler body {font-family: "verdana", fantasy, serif; font-size:12pt} h1 {font-size:200%; font-style: italic text-decoration:underline}

Webpublisering Kisten Ribu HiO23 Selektorer som klasse eller ID Du kan gi HTML elementene et unikt navn, eller et klasse-navn. Unike elementer: I åpningstaggen skrives id=”navn”. Navnet er unikt. Grupper av elementer: I åpningstaggen skriver du class=”navn”, der navnet identidfiserer en klasse av elementer.

Webpublisering Kisten Ribu HiO24 Velg elementer basert på klasser Bruk klassen til å formattere elementene Velg klassen ved å skrive. (punktum) Eks:.nyheter{color:red;} virker på alle elementene i klassen nyheter h1.nyheter{color:red;} virker bare på h1 elementene i klassen nyheter

Webpublisering Kisten Ribu HiO25 -taggen En stildefinisjon er knyttet direkte til en (X)HTML- tag eller indirekte med et class- eller id-attributt. I noen situasjoner er det ønskelig å anvende stiler på tegnnivå (f.eks. enkeltord), og det er mulig ved hjelp av -taggen. Nedenfor er det definert en klasse "viktig" som f.eks. kan være rød farge og fet type:.viktig {stil-type-1: stil-verdi-1; stil-type-2: stil-verdi-2} For å anvende dette på et viktig ord, er det bare å omslutte ordet med og. PS. For dere som kan litt (X)HTML fra før, så er -taggen arvtageren til -taggen som nå er ute (borte vekk!).

Webpublisering Kisten Ribu HiO26 Stiltyper og stilverdier Ethvert (X)HTML-dokument skal/bør ha en stildefinisjon for -taggen. Den definerer standarden i dokumentet som helhet, alt annet er avvik fra denne standarden. Et eksempel ser du her:  body {font-family: "verdana", fantasy, serif; font- size: 12pt; color: #0000ff; background-color: #fffcbf} Stiltypene opptrer til venstre for et kolon og stilverdiene til høyre. Hver stiltype har enten et begrenset sett stilverdier eller en numerisk verdi i en eller annen enhet. En oversikt over mulige stiltyper og tilhørende stilverdier finner du i notatet

Webpublisering Kisten Ribu HiO27 Stilverdier Et eksempel på en stiltype som antar et begrenset sett med stilverdier kan f.eks. være stiltypen ’text- align’ som normalt står for hvordan teksten skal justeres (innenfor en blokk). Denne stiltypen kan anta verdiene left, right, center eller justify. Et eksempel kan f.eks. være stiltypen font-size som definerer skriftstørrelsen. Denne kan angis i mange forskjellige enheter som %, cm, mm, in, px og pt der pt er den vanligste. Denne enheten er en gammel typografisk enhet som tilsvarer 1/72 tomme. Normal skriftstørrelse er 12 pt og svarer derfor til 1/6 tomme.

Webpublisering Kisten Ribu HiO28 Fargekoder En spesiell numerisk stilverdi er fargekoder som kodes etter et RGB-skjema (innslag av Rødt, Grønt og Blått). Denne kan kodes heksadesimalt eller desimalt. Heksadesimalt (tegnet # står for heksdesimalt) er #ff0000 rødt, #00ff00 grønt, #0000ff blått. Desimalt er rgb(256,0,0) rødt osv.. Svart kan kodes # eller rgb(0,0,0) Hvitt kan kodes #ffffff eller rgb(256,256,256).

Webpublisering Kisten Ribu HiO29 Stiltyper for farger og bakgrunn Dette er de viktigste skrifttypene som går på farger og bakgrunn body {color: #0000ff; background-color: #fffcbf; background- image: url(bakgrunn.gif); background-repeat: repeat-y; background-attachment: fixed; background-position: 30px} De to første stiltypene definerer dokumentets tekstfarge og bakgrunnsfarge. De 4 siste stiltypene definerer et bakgrunnsbilde som skal repeteres vertikalt (i y-retningen), som skal ligge fast slik at teksten ruller over bakgrunnen ved scrolling og som skal ligge 30 piksler fra venstre kant. Områder som ikke er dekket av bakgrunnsbildet får bakgrunnsfargen.

Webpublisering Kisten Ribu HiO30 Stiltyper for layout Layout omfatter marger, rammer, luft innenfor blokker, blokkstørrelser og "flytende objekter": div.bx {margin: 20px; width: 200px; border-width: thick; border- color: red; border-style: groove; padding: 10px; float: left} Selektoren div.bx inneholder stildefinisjoner for blokker av typen. En slik blokk skal ha en margavstand (avstand til andre objekter) på 20 piksler i alle retninger, og blokken skal være 200 piksler bred. Den skal ha tykk rød ramme i stilen "groove". Luften mellom rammen og innholdet (padding) skal være 10 piksler. Den skal legges til venstre slik at andre objekter (vanligvis tekst) kan "flyte" rundt blokken til høyre.

Webpublisering Kisten Ribu HiO31 Stiltyper for lister Stiltyper for lister kan bestemme hvordan ordnete lister skal nummereres (bokstaver, vanlige tall eller romertall) og hvordan listepunktene i uordnete lister skal presenteres (punkter, firkanter, sirkler eller egendefinerte ikoner): ol {list-style-type: decimal} ol ol {list-style-type: lower-roman} ul {list-style-type: url(ikon.gif)} ul ul {list-style-type: square} Selektoren ol definerer ordnete lister til å være nummerert på vanlig måte (1, 2, 3 osv.). Ordnete underlister til ordnete lister derimot (ol ol) skal nummereres med små romertall (i, ii, iii osv.). Selektoren ul presenterer uordnete lister med et ikon gitt ved bildefilen ikon.gif. Uordnete underlister til uordnete lister derimot (ul ul) skal presenteres med firkanter.

Webpublisering Kisten Ribu HiO32 Stiltyper for skriftutseende Dette er de viktigste skrifttypene som går på utseende av skriften: body {font-family: "verdana", fantasy, serif; font- size: 12pt; font-style: normal; font-weight: normal} h1 {font-size: 150%; font-style: italic; font-weight: bold; text-decoration: underline} Selektoren body definerer standarden i dokumentet, og i dette tilfelle er det skrift-utseende, -størrelse, - stil og -tykkelse. Legg merke til at skriftutseende har 3 alternativer, og de er nevnt i prioritert rekkefølge. Selektoren h1 omdefinerer noen av disse stiltypene med andre stilverdier.

Webpublisering Kisten Ribu HiO33 Stilark - eksempel body {font-family: "Verdana", "Luxi Sans"; font-size: 12pt; background-color: #ffffff; color: #000000} h1 {text-align: center; background-color: #aaaaaa; color: #ffffff}} td {padding: 5px; vertical-align: top} dt {font-weight: bold} img {float: left; border-style: none} A:link {text-decoration: none; color: #0000ff} A:visited {text-decoration: none; color: #0000ff} A:active {text-decoration: none; color: #0000ff} A:hover {text-decoration: none; color: #ff0000}.red {color: #ff0000}.svart1 {background-color: #000000; width: 3%}.svart2 {background-color: #000000; width: 4%}

Webpublisering Kisten Ribu HiO34 Pekere

Webpublisering Kisten Ribu HiO35 Pekere til andre dokumenter Pekere til andre dokumenter har der alt laget Istedenfor klikkbar tekst kan du ha klikkbare bilder (eller begge deler). F.eks. kan du ha en peker til en medstudent ved å klikke på et bilde av ham/henne slik: Når du peker til andre dokumenter, så vil du komme til starten av dette dokumentet.

Webpublisering Kisten Ribu HiO36 Pekere internt i samme dokument Pekere gir deg muligheten for hoppe mellom dokumenter og innenfor dokumenter. Hvor disse dokumentene befinner seg på Internett spiller ingen rolle. Hvis du hopper til et nytt dokument havner du vanligvis på toppen av dokumentet, men det er også mulig å hoppe til slutten av et dokument. Pekere defineres med (X)HTML-taggen etter det engelske ordet "anchor".

Webpublisering Kisten Ribu HiO37 Pekere i samme dokment etc For å kunne hoppe fra sted til sted innenfor et og samme dokument, må dokumentet inneholde "bokmerker". Det er bare i store dokumenter som går over flere skjermsider, at det har noen hensikt å definere "bokmerker". Hvis dokumentet er langt og inneholder bokmerker, så er det fullt mulig å hoppe rett inn til hvilket som helst bokmerke i dokumentet. Vi tenker oss det lange dokumentet (filnavn bok.html) fra forrige leksjon som var inndelt i kapitler. Da kan vi hoppe rett inn i kapittel 3 slik: Kapittel 3 i boken

Webpublisering Kisten Ribu HiO38 Forts... Tenk deg et stort dokument inndelt i kapitler med en kapitteloversikt først i dokumentet, og at du fra kapitteloversikten kan klikke deg til de forskjellige kapitlene i dokumentet. For å få dette til må du først definere bokmerker foran hvert kapittel, og det gjør du med et id-attributt i f.eks. en overskriftstag eller en hvilken som helst annen tag: osv. Deretter legger du inn i kapitteloversikten øverst pekere til de enkelte kapitlene på denne måten: Kapittel 1

Webpublisering Kisten Ribu HiO39 Filreferanser og URL Parametrene href og src i (X)HTML-tagger som pekere, bilder og mye annet får verdier i form av en URL (Uniform Resource Locator). En URL er tredelt der første del er et protokollnavn, andre del er et servernavn og tredje del er en sti gjennom mappestrukturen på serveren ned til en bestemt fil. I URL'en ml ml er http (HyperText Transfer Protocol) protokollnavnet, servernavnet og ~kirstenr/webprosjekt/index.html stien til filen index.html som ligger i undermappen webprosjekt i brukeren kirstenr sin www-mappe på serveren.

Webpublisering Kisten Ribu HiO40 Mailto: En protokoll som er mye brukt i web- sammenheng er mailto. Den forteller web-leseren at et mailprogram skal starte for å sende en mail til den mailadressen som er nevnt i href parameteren. Eksempel Send mail

Webpublisering Kisten Ribu HiO41 Absolutte og relative filreferanser En fullstendig URL med protokollnavn og servernavn er en absolutt filreferanse som f.eks. ml. En URL der protokollnavn og servernavn er utelatt, men som begynner med en /, er også en absolutt filreferanse. Dokumentet det refereres til og som det refereres fra, må i slike tilfeller ligge på samme server. En slik filreferanse kalles absolutt fordi den er uavhengig av det refererende dokument sin plassering på serveren. Den tar alltid utgangspunkt i toppen av mappestrukturen på serveren eller til en bruker. Et eksempel kan være: /~tomerikt/webprosjekt/index.html

Webpublisering Kisten Ribu HiO42 Forts. En relativ filreferanse tar alltid utgangspunkt i det refererende dokument sin plassering, og navigerer seg ut og inn av mapper til den søkte filen. Eksempler på relative filreferanser kan være:../bilder/meg.gif../../prosjekt/index.html I det første tilfellet skal du ut av mappen til det refererende dokument (et nivå opp) for så å gå inn i mappen bilder og hente filen meg.gif. I det andre tilfellet skal du først opp to nivå før du går inn i mappen prosjekt og henter filen index.html.

Webpublisering Kisten Ribu HiO43 Oppgaver Sett inn et eller flere bilder på siden din (noen har gjort dette alt). Lag stildefinisjoner på overskrifter, tekst, bakgrunnsfarge og linker, og sett det inn i HTML dokumentet ditt. Eksperimenter med ulike fonter, fontstørrelser og farger. Lag et stilark som egen fil. Utvid websiden din med en side til og bruk stilarket på denne siden. Svar på følgende: (bruk boka og notatene)  Hva er HTML? Og XHTML?  Hva er www?  Hva er en URL?  Hvorfor bruker vi hexadesimale tall? Legg inn mailadressen din på siden og bruk mailto slik at andre kan sende deg mail.

Webpublisering Kisten Ribu HiO44 Neste gang Mer om stilark og layout. Kapittel 9-11