XHTML & CSS 2 del 1 Elektronisk publicering. Idag  Repetition  Teckenuppsättningar  Metadata  Mer om klasser och ID:n  CSS.

En presentation över ämnet: "XHTML & CSS 2 del 1 Elektronisk publicering. Idag  Repetition  Teckenuppsättningar  Metadata  Mer om klasser och ID:n  CSS."— Presentationens avskrift:

1 XHTML & CSS 2 del 1 Elektronisk publicering

2 david.gunnarsson@hb.se Idag  Repetition  Teckenuppsättningar  Metadata  Mer om klasser och ID:n  CSS och XHTML  Elementen div och span

3 Var är vi? DATALOGIKGRÄNSSNITT XMLXSLTXHTML(+CSS)

4 XML, XSLT, XHTML och CSS XML XSLT CSS XHTML Omvandling

5 Teckenuppsättningar  Varje tecken har en numerisk motsvarighet  Binärt system  ASCII=7 bitar (=7 positioner)  32=mellanslag (=0100000)  65=A (=1000001)  97=a (=1100001)  127=backsteg (=1111111)

6 ASCII-tabellen 32 48 0 64 @ 80 P 96 ` 112 p 33 ! 49 1 65 A 81 Q 97 a 113 q 34 " 50 2 66 B 82 R 98 b 114 r 35 # 51 3 67 C 83 S 99 c 115 s 36 $ 52 4 68 D 84 T 100 d 116 t 37 % 53 5 69 E 85 U 101 e 117 u 38 & 54 6 70 F 86 V 102 f 118 v 39 ' 55 7 71 G 87 W 103 g 119 w 40 ( 56 8 72 H 88 X 104 h 120 x 41 ) 57 9 73 I 89 Y 105 i 121 y 42 * 58 : 74 J 90 Z 106 j 122 z 43 + 59 ; 75 K 91 [ 107 k 123 { 44, 60 < 76 L 92 ¥ 108 l 124 | 45 - 61 = 77 M 93 ] 109 m 125 } 46. 62 > 78 N 94 ^ 110 n 126 ~ 47 / 63 ? 79 O 95 _ 111 o (127 backsteg)

7 ISO 8859  Infoga i head:  ISO-8859-1 är nord- och västeuropeiska språk, även kallad Latin-1  Alternativt: Placeras först i dokumentet

8 Teckenentiteter  Tecken som inte är definierade i ASCII kan skrivas med teckenentiteter  På formen &kod;  Exempel: å = å ä = ä ö = ö ü = ü Å = Å Ä = Ä Ö = Ö Ü = Ü & = & mellanslag =  Ange alltid teckenuppsättning

9 Metadata  Data om data  Information som beskriver information  Format: Fält, värde   Resource Description Framework (RDF)  Dublin Core

10 Metadata  Elementet infogas i Titel

11 Dublin Core  Dublin Core Metadata Initiative (DCMI)  Ett klassificerings- och indexeringssystem för webbsidor  15 fält (upphov, titel, språk, publiceringsdatum, nyckelord etc) http://dublincore.org/usage/documents/overview

12 Dublin Core  På formen: DC.fältnamn

13 Klasser  En klass är en grupp av element som identifieras av ett klassnamn  Elementen kan vara av samma typ men behöver inte vara det I XHTML-koden: Text I CSS-koden: p.text { color: blue; } Alternativt:.text { color: blue; }

14 Identifierare  En identifierare refererar till exakt ett element i ett dokument I XHTML-koden: A I CSS-koden: span#firstLetter { color: blue; font- size: 3em;} Alternativt: #firstLetter { color: blue; font-size: 3em;}

15 När ska vad användas?  Tumregel: använd id:n för sektioner (vanligtvis div-element)  id:n är också användbart för listor, särskilt länklistor  Använd klasser då flera element av samma typ ska ha samma visuella formatering  Tänk på att ett id alltid måste vara unikt!

16 Ankare  Hyperlänkningen medger länkning inom ett (X)HTML-dokument  Vi kan även länka till en specifik sektion i ett externt (X)HTML-dokument  Det som möjliggör detta är fyrkantsoperatorn # och id-namn

17 david.gunnarsson@hb.se Hyperlänk  Länkar infogas i dokumentet  En länk består av: 1 – Länktext 2 – Destination (url) 3 – Mål (önskat webbläsarfönster, "_blank"=nytt fönster) 4 – Titel (en beskrivning på vart länken leder)  Högskolan i Borås (1) http://www.hb.se

18 david.gunnarsson@hb.se Hyperlänk  En url kan vara relativ eller absolut  http://www.hb.se är exempel på en absolut url http://www.hb.se Högskolan i Borås http://www.hb.se  start.htm är exempel på en relativ url Till startsidan

19 david.gunnarsson@hb.se Relativ url  En relativ url utgår från den mapp där det aktuella dokumentet befinner sig  Med hjälp av../ och mappnamn kan man navigera i mapphierarkin Exempel 1: Om filen befinner sig ett steg upp i hierarkin  Till startsidan Exempel 2: Om filen befinner sig i en annan mapp på samma nivå i hierarkin  Länk till bild.gif Exempel 3: Om filen befinner sig i samma mapp  Hem

20 david.gunnarsson@hb.se Ankare – länkning inom dokumentet Kapitel 1 länkar till Kapitel 1 eller varför inte Kapitel 1 eller Kapitel 1

21 david.gunnarsson@hb.se Ankare – komplettera med tillbakalänk Kapitel 1 länkar till Kapitel 1 som i sin tur länkar tillbaka

22 Innehållsförteckning Kapitel 1 Kapitel 2 Kapitel 3 Kapitel 4 Kapitel 5

23 Innehållet… Ett svart får bland hermelinerna... Kapitel 1 Lite rolig text som hör till kapitel 1. Kapitel 2 Lite rolig text som hör till kapitel 2. Till toppen av sidan Exempel

24 Externt dokument  Id-namnet läggs på url:en  Även här används fyrkantsoperatorn Introduktion till Flash-kursen http://www.adm.hb.se/~dgu/flash/#intr Schemaändring på Flash-kursen http://www.adm.hb.se/~dgu/flash/#sche

25 david.gunnarsson@hb.se Block- och radelement  Blockelement Exempel: body, p, div, pre, ul, ol, dl, table, h1, h2 Ett blockelement kan innehålla andra block- element och samtliga radelement (samt text). p kan dock inte innehålla andra blockelement. body, ul, ol, dl och table kan inte innehålla text, de måste innehålla andra element. Ett blockelement innebär alltid en radbrytning före och efter elementet.

26 david.gunnarsson@hb.se Block- och radelement  Radelement Exempel: span, img, strong, em, a Radelement kan enbart innehålla andra radelement samt text.

27 david.gunnarsson@hb.se När ska vilket element användas?  p för uppmärkning av hela stycken  span för uppmärkning av enstaka ord och meningar (inom ett annat element)  div för uppmärkning av större sektioner  br för kontrollerade radbrytningar inom ett element  br ska aldrig användas som mellanrum mellan två element

28 david.gunnarsson@hb.se Strukturen i ett dokument html h1 div id="chapter1" h2 class="chapterHeading" p class="text" div id="chapter2" h2 class="chapterHeading" p class="text" span class="leader" span class="firstWord" span class="firstLetter" p class="legend"

29 david.gunnarsson@hb.se Alternativ struktur html h1 div h2 id=" chapter1 " p class="text" h2 id="chapter2" p class="text" span class="leader" span class="firstWord" span class="firstLetter" p class="legend"

30 Visuell struktur header footer navigation List content maincontainer

31 david.gunnarsson@hb.se Grov struktur html div id="container" div id="header" h1 div id="main" div id="navigationList" div id="content" h2 id="chapter1" p class="text" div id="footer"

32 Introduktion till CSS  Vad är CSS och varför?  Syntax, regler och selektorer  Koppling till XHTML: klasser och id:n  Färg och typografi  Mått  Justering och marginaler

33 CSS – vad är det?  Cascading StyleSheets  Stylesheet – en mall som formaterar något  Här: en mall som formaterar ett XHTML- dokument (men även XML och HTML)  XSLT – en mall som transformerar ett XML- dokument  Cascade – ett prioriteringsschema för att bestämma vilka stilregler som gäller om mer än en regel matchar ett element

34 Så går det till  Ett XHTML-dokument läser in eller länkar in en stilmall  I stilmallen pekas element i XHTML- dokumentet ut  De utpekade elementen tilldelas stilregler som talar om hur de ska presenteras visuellt

35 Varför?  Därför att vi gärna vill separera innehåll från presentation, vilket 1. Förenklar underhåll och uppdatering 2. Minskar filstorlekar 3. Ökar tillgängligheten 4. Ger oss möjligheten att med en enda stilmall formatera ett oändligt antal XHTML-dokument

36 Vad kan man göra med CSS?  Mycket…  Typsnitt, justering, kantlinjer, bakgrundsfärger, textfärger, textstilar, bakgrundsbilder, storlek, positionering, visning/synlighet  Med mera  CSS ger fullständig kontroll över layout utan att stöka till innehållet

37 Flera media…  En stilmall för visning på skärm…  …en annan anpassad för utskrift…  …och kanske en tredje för visning i mobiltelefon?

38 Formatera XHTML-dokument  Tre alternativ Inbäddning i XHTML-dokumentet Länkning till CSS-dokumentet Importering till XHTML-dokumentet

39 Inbäddning <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

40 Inbäddning body { font-family: 'trebuchet ms', verdana, arial, sans-serif; font-size: 0.8em; background: #2baffa; color: #ffffff; padding-bottom: 20px; }

41 Länkning <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

42 Länkning, stilmall.css body { font-family: 'trebuchet ms', verdana, arial, sans-serif; font-size: 0.8em; background: #2baffa; color: #ffffff; padding-bottom: 20px; }

43 Importering <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> @import "stilmall.css";

44 Importering, stilmall.css body { font-family: 'trebuchet ms', verdana, arial, sans-serif; font-size: 0.8em; background: #2baffa; color: #ffffff; padding-bottom: 20px; }

45 Syntaxen…  En CSS-regel består av en selektor och en till flera deklarationer  Selektorn avgör vilket eller vilka XHTML- element som ska påverkas av regeln  Varje deklaration består av en egenskap och ett värde

46 Syntaxen… Selektor Egenskap Värden Enheter body { font-family: 'trebuchet ms', verdana, arial, sans-serif; font-size: 0.8em; background: #2baffa; color: #ffffff; padding-bottom: 20px; }

47 Syntaxen…  Regelblock omges av krullparenteser { } och varje deklaration avslutas med ett semikolon ;

48 Regler och selektorer  Regel – talar om hur något ska formateras  Selektor – talar om vad som ska formateras

49 Regler  Regler skrivs på följande sätt: selektor { egenskap: värde; }  Med fler än en egenskap: selektor { egenskap1: värde; egenskap2: värde; }  Mer läsvänligt: selektor { egenskap1: värde; egenskap2: värde; }

50 Regler p { color: blue; font-family: verdana, arial, sans-serif; margin-top: 40px; margin-bottom: 20px; border: 1px dotted black; }

51 Kontextuella selektorer Dokument Sektion 1 Sektion 2 Rubrik 1 Stycke 1 Sektion 3 En rubrik Ett stycke text

52 Kontextuella selektorer  div#main h2 för att peka ut rubriken  #main h2 fungerar lika bra div#main h2 { font-family: georgia; color: green; }

53 Kontextuella selektorer Projekt Runeberg CSS Zen Garden W3C Schools

54 Kontextuella selektorer  ul#navigation li a:link för att peka ut länken ul#navigation li a:link { text-decoration: underline; } ul#navigation li a:hover { text-decoration: none; }

55 XHTML-klasser i CSS  Pekas ut med hjälp av punktoperatorn plus klassnamn I XHTML-koden: Text I CSS-koden: p.text { color: blue; } Alternativt:.text { color: blue; }

56 XHTML-id:n i CSS  Pekas ut med hjälp av fyrkantsoperatorn plus klassnamn I XHTML-koden: A I CSS-koden: span#firstLetter { color: blue; font-size: 3em;} Alternativt: #firstLetter { color: blue; font-size: 3em;}

57 Elementen div och span … … …

58 Elementen div och span Underrubrik L oren ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

59 Elementen div och span span.firstLetter { font-style: italic; font-size: 3em; font-family: georgia, serif; } span.leader { font-size: 2em; font-family: georgia, serif; font-variant: small-caps; } Exempel Exempel

60 Pseudoklasser  Klasser som inte finns i dokumentstrukturen  Används bland annat för länkegenskaper a:link {color: black} a:visited {color: grey} a:hover {color: red} a:active {color: red}  I tur och ordning: oklickad länk, klickad länk, muspekaren över länk och aktiverad länk  Ordningen är viktig, tänk: LoVe HAte

61 Pseudoklasser  Men även för andra element: p:first-letter { font-style: italic; font-size: 3em; font-family: georgia, serif; } p:first-line { font-size: 2em; font-family: georgia, serif; font-variant: small-caps; }

62 Färger  Färg anges i RGB, hex eller med färgkonstant Hex - #99cc33 (eller #9c3) RGB – rgb(153, 204, 51) Färgkonstant - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white och yellow h1 {background-color: #99cc33;} h1 {background-color: rgb(153, 204, 51);} h1 {background-color: maroon;}

63 Typografi  Teckensnitt kan också anges  Verdana, Trebuchet MS, Georgia, Tahoma mfl är anpassade speciellt för webben p { font-family: verdana, sans-serif; font-size: 0.8em; } p { font-family: georgia, serif; font-size: 12pt; }

64 Mått  Absoluta mått mm – millimeter cm – centimeter in – inch pt – point (72pt = 1in) pc – pica (1pc = 12pt) px – pixel  Relativa mått em – fyrkanten (emspace) ex – x-höjden % – procent

65 Justering och marginaler  Varje element har justerbar position och justerbara marginaler  Dessutom finns möjligheten att justera mellanrum mellan elementets sidor och dess innehåll  margin, padding, position  Elementens innehåll kan också justeras med text- align som kan anta något av värdena: left, right, center och justify Reglerna påverkar inte bara text utan även element inom elementet

66 david.gunnarsson@hb.se Boxmodellen innehåll margin padding border ”TRouBLed”: När man använder kortformen för att specificera margin, padding eller border för ett element börjar man med den övre sidan och går medsols: Top, Right, Bottom, Left. Ex.: h1 { margin: 1em 1em 0 1em; }

67 p { width: 300px; padding: 20px; margin: 10px; border: 2px solid } Total bredd 300px +40px +20px +4px ----- 364px Boxmodellen

68 Positionering  Egenskap: position, värde: absolute, relative, static eller fixed  Absolute – placerar elementet i en position relativ till elementets förälder  Relative – placerar elementet i en position relativ till dess utgångsposition

69 Absolute #navigationList { text-align: center; margin-left: 0; position: absolute; top: 70px; right: 10px; }  Dokumentträdet: #container > #main > #navigationList  #main är #navigationList:s förälder  #navigationList placeras 70px från #main:s topp och 10px från #main:s högerkant

70 Relative h1 { background: white; width: 200px; border: 1px solid black; position: relative; top: -20px; left: -20px; }  Elementet h1 placeras 20px ovanför och 20px till vänster om dess utgångsposition Rubrik

71 Visuell struktur header footer navigation List content maincontainer

72 Görs möjlig med CSS #container { position: relative; margin: auto; width: 750px; padding: 10px; } #header { width: 750px; margin: 0 0 10px 0; } #main { width: 750px; margin: 0 0 10px 0; } #navigationList { width: 140px; margin: 0 10px 0 0; float: left; } #content { width: 600px; margin: 0; float: left; } #footer { width: 750px; margin: 0; } Exempel

73 float: left?!?  Bryter ut ett element ur det normala flödet och placerar det så långt till vänster som möjligt  …men detta sparar vi till nästa gång