1 / 44

Stilark - lenker

Stilark - lenker. Mer om (X)HTML Kap. 7, 8 og 9. 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.

maddy
Download Presentation

Stilark - lenker

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

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

  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:128.39.89.1 Fysisk addresse: 00-00-0c-5a-cd-90 Webpublisering 2004 - Kisten Ribu HiO

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

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

  9. 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

  10. 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

  11. Stilark 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 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 2004 - Kisten Ribu HiO

  14. Bruke stilark fra egne filer • Det skjer ved å legge inn en link-tag i (X)HTML-dokumentets 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)HTML-dokument (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)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 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. 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 2004 - Kisten Ribu HiO

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

  25. <span>-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 <span>-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 <span class="viktig"> og </span>. • PS. For dere som kan litt (X)HTML fra før, så er <span>-taggen arvtageren til <font>-taggen som nå er ute (borte vekk!). Webpublisering 2004 - Kisten Ribu HiO

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

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

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

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

  30. 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 <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

  31. 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

  32. 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. Stiltyper for skriftutseende Webpublisering 2004 - Kisten Ribu HiO

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

  34. Pekere Webpublisering 2004 - Kisten Ribu HiO

  35. 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

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

  37. 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

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

  39. 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.html 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

  40. 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 • <a ref="mailto:kirsten.ribu@iu.hio.no"> Send mail</a> Webpublisering 2004 - Kisten Ribu HiO

  41. 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.html. • 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

  42. 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.htmlI 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

  43. 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

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

More Related