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

Transkript

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

2 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 HiO 2

3 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 Kisten Ribu HiO 3

4 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 Kisten Ribu HiO 4

5 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 Kisten Ribu HiO 5

6 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 HiO 6

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

8 Velg Kjør på startmenyen Kommandoen cmd åpner kommandovinduet: Webpublisering Kisten Ribu HiO 8

9 Skriv kommandoer: Webpublisering Kisten Ribu HiO 9

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

11 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 HiO 11

12 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 HiO 12

13 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 HiO 13

14 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 Kisten Ribu HiO 14

15 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 Kisten Ribu HiO 15

16 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 HiO 16

17 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 Kisten Ribu HiO 17

18 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 Kisten Ribu HiO 18

19 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 HiO 19

20 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 Kisten Ribu HiO 20

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

22 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 Kisten Ribu HiO 22

23 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 HiO 23

24 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 Kisten Ribu HiO 24

25 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 HiO 25

26 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 Kisten Ribu HiO 26

27 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 Kisten Ribu HiO 27

28 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 HiO 28

29 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 Kisten Ribu HiO 29

30 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 Kisten Ribu HiO 30

31 Pekere Webpublisering Kisten Ribu HiO 31

32 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=" 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 Kisten Ribu HiO 32

33 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 Kisten Ribu HiO 33

34 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=" 3 i boken</a> Webpublisering Kisten Ribu HiO 34

35 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 Kisten Ribu HiO 35

36 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 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 HiO 36

37 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 Kisten Ribu HiO 37

38 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 HiO 38

39 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 HiO 39

40 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 HiO 40

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