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 Stiltyper for farger og bakgrunn Stiltyper for lister Pekere (lenker) Internt i samme dokument Webpublisering 2004 - Kisten Ribu HiO 2
Taggen <blockquote> Innrykk Et innrykket avsnitt starter med <blockquote> og må avsluttes med </blockquote>. Nok et innrykket avsnitt (til et innrykket avsnitt) oppnås ved en ny <blockquote>. En <blockquote> må etterfølges av en blokk-tag som <p>, <h1>, <div> eller en ny <blockquote>. Du kan ikke begynne direkte med vanlig tekst. Webpublisering 2004 - Kisten Ribu HiO 3
Blokker (<div>) Et (X)HTML-dokument kan deles inn i blokker med<div> og hver blokk må avsluttes med </div>. 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 2004 - Kisten Ribu HiO 4
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 <br />. Nest tegn vil da alltid komme på ny linje, men uten luft mellom linjene. Du kan ha flere <br />-tagger etter hverandre for å skape mer luft mellom linjene. Taggen <hr /> setter inn en vannrett strek etter foregående linje. Taggen <img src="meg.gif" alt="bilde av meg" /> setter inn et bilde som befinner seg i filen meg.gif. Webpublisering 2004 - Kisten Ribu HiO 5
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:128.39.89.1 Fysisk addresse: 00-00-0c-5a-cd-90 Webpublisering 2004 - Kisten Ribu HiO 6
Address Resolution Prtocol Adressering Logisk adresse e.g. www.iu.hio.no Internet address e.g. 129.31.65.7 Address resolution Netadapter address e.g. Ethernet address 00:08:74:35:2b:0a Domain Name System? Webpublisering 2004 - Kisten Ribu HiO 7
Velg Kjør på startmenyen Kommandoen cmd åpner kommandovinduet: Webpublisering 2004 - Kisten Ribu HiO 8
Skriv kommandoer: Webpublisering 2004 - Kisten Ribu HiO 9
Kommandoen arp -a arp a: Viser gjeldende ARP-adresser ved å kontrollere gjeldende protokolldata. Webpublisering 2004 - Kisten Ribu HiO 10
Eksempel C:\Documents and Settings\kirsten ribu>arp -a Grensesnitt: 192.168.2.52 --- 0x10003 Internett-adresse Fysisk adresse 192.168.2.1 00-c0-02-ef-d3-8a Type dynamisk Webpublisering 2004 - Kisten Ribu HiO 11
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............. : 128.39.89.89 Nettverksmaske.......... : 255.255.255.0 Standard gateway........ : 128.39.89.1 Webpublisering 2004 - Kisten Ribu HiO 12
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 2004 - Kisten Ribu HiO 13
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 headerdelen. 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 2004 - Kisten Ribu HiO 14
Bruke stilark fra egne filer Det skjer ved å legge inn en link-tag i (X)HTMLdokumentets header som vist her: <head> <title>tittel</title> <link rel="stylesheet" type="text/css" href= stil.css" /> </head> 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)HTMLdokument (flere link-tagger), men hvis de er selvmotsigende (har konflikter), så er det den sist definerte stilen som gjelder. Webpublisering 2004 - Kisten Ribu HiO 15
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 2004 - Kisten Ribu HiO 16
Bruke stilark globalt i (X)HTML-dokumentet <head> <title>tittel</title> <style type="text/css"> <!-- Her kommer stildefinisjonene --> </style> </head> 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 2004 - Kisten Ribu HiO 17
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: <p style="text-align: center"> 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. <p style="text-align: center; color: red"> Webpublisering 2004 - Kisten Ribu HiO 18
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 2004 - Kisten Ribu HiO 19
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)HTMLdokument er derfor syntaksen for en stildefinisjon som følger: HTML-tag: {stil-type-1: stil-verdi-1; stil-type-2: stil-verdi-2} Webpublisering 2004 - Kisten Ribu HiO 20
Hvorfor bruke stilark Skille innhold og utseende. Skrekkeksempel Kindereggsyndrom: 3 ting på én gang!: Stilark, globale stildefinisjoner, og stildefinisjoner for enkelttagger!! Webpublisering 2004 - Kisten Ribu HiO 21
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 <ol> er en ordnet (nummerert liste): ol {stil-type-1: stil-verdi-1; stil-type-2: stil-verdi-2} ol ol {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 2004 - Kisten Ribu HiO 22
Eksempel flere stiler body {font-family: "verdana", fantasy, serif; font-size:12pt} h1 {font-size:200%; font-style: italic text-decoration:underline} Webpublisering 2004 - Kisten Ribu HiO 23
Stiltyper og stilverdier Ethvert (X)HTML-dokument skal/bør ha en stildefinisjon for <body>-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; fontsize: 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 2004 - Kisten Ribu HiO 24
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 #000000 eller rgb(0,0,0) Hvitt kan kodes #ffffff eller rgb(256,256,256). Webpublisering 2004 - Kisten Ribu HiO 25
Stiltyper for farger og bakgrunn Dette er de viktigste skrifttypene som går på farger og bakgrunn body {color: #0000ff; background-color: #fffcbf; backgroundimage: 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 2004 - Kisten Ribu HiO 26
Stiltyper for layout Layout omfatter marger, rammer, luft innenfor blokker, blokkstørrelser og "flytende objekter": div.bx {margin: 20px; width: 200px; border-width: thick; bordercolor: red; border-style: groove; padding: 10px; float: left} Selektoren div.bx inneholder stildefinisjoner for blokker av typen <div class="bx">. 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 2004 - Kisten Ribu HiO 27
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 2004 - Kisten Ribu HiO 28
Stiltyper for skriftutseende Dette er de viktigste skrifttypene som går på utseende av skriften: body {font-family: "verdana", fantasy, serif; fontsize: 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 2004 - Kisten Ribu HiO 29
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; A:hover color: #0000ff} {text-decoration: none; color: #ff0000}.red {color: #ff0000}.svart1 {background-color: #000000; width: 3%}.svart2 {background-color: #000000; width: 4%} Webpublisering 2004 - Kisten Ribu HiO 30
Pekere Webpublisering 2004 - Kisten Ribu HiO 31
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: <a href="http://www.iu.hio.no/~student"><img src="student.gif" alt="bilde av student"></a> Når du peker til andre dokumenter, så vil du komme til starten av dette dokumentet. Webpublisering 2004 - Kisten Ribu HiO 32
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 <a> etter det engelske ordet "anchor". Webpublisering 2004 - Kisten Ribu HiO 33
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: <a href="http://www.iu.hio.no/bok.html#kap3">kapittel 3 i boken</a> Webpublisering 2004 - Kisten Ribu HiO 34
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: <h1 id="kap1"> osv. Deretter legger du inn i kapitteloversikten øverst pekere til de enkelte kapitlene på denne måten: <a href="#kap1">kapittel 1</a> Webpublisering 2004 - Kisten Ribu HiO 35
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 http://www.iu.hio.no/~kirstenr/webprosjekt/index.ht ml er http (HyperText Transfer Protocol) protokollnavnet, www.iu.hio.no 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 2004 - Kisten Ribu HiO 36
Mailto: En protokoll som er mye brukt i websammenheng er mailto. Den forteller webleseren at et mailprogram skal starte for å sende en mail til den mailadressen som er nevnt i href parameteren. Eksempel <a href="mailto:kirsten.ribu@iu.hio.no"> Send mail</a> Webpublisering 2004 - Kisten Ribu HiO 37
Absolutte og relative filreferanser En fullstendig URL med protokollnavn og servernavn er en absolutt filreferanse som f.eks. http://www.iu.hio.no/~tomerikt/webprosjekt/index.ht 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 2004 - Kisten Ribu HiO 38
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 2004 - Kisten Ribu HiO 39
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 2004 - Kisten Ribu HiO 40
Neste gang Mer om stilark og layout. Kapittel 9-11 Webpublisering 2004 - Kisten Ribu HiO 41