XHTML & CSS 2 del 1 Elektronisk publicering

Idag  Repetition  Teckenuppsättningar  Metadata  Mer om klasser och ID:n  CSS och XHTML  Elementen div och span

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

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

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

ASCII-tabellen P 96 ` 112 p 33 ! A 81 Q 97 a 113 q 34 " B 82 R 98 b 114 r 35 # C 83 S 99 c 115 s 36 $ D 84 T 100 d 116 t 37 % E 85 U 101 e 117 u 38 & F 86 V 102 f 118 v 39 ' G 87 W 103 g 119 w 40 ( H 88 X 104 h 120 x 41 ) I 89 Y 105 i 121 y 42 * 58 : 74 J 90 Z 106 j 122 z ; 75 K 91 [ 107 k 123 { 44, 60 < 76 L 92 ¥ 108 l 124 | = 77 M 93 ] 109 m 125 } > 78 N 94 ^ 110 n 126 ~ 47 / 63 ? 79 O 95 _ 111 o (127 backsteg)

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

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

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

Metadata  Elementet infogas i Titel

Dublin Core  Dublin Core Metadata Initiative (DCMI)  Ett klassificerings- och indexeringssystem för webbsidor  15 fält (upphov, titel, språk, publiceringsdatum, nyckelord etc)

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

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; }

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;}

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!

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

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)

Hyperlänk  En url kan vara relativ eller absolut  är exempel på en absolut url Högskolan i Borås  start.htm är exempel på en relativ url Till startsidan

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

Ankare – länkning inom dokumentet Kapitel 1 länkar till Kapitel 1 eller varför inte Kapitel 1 eller Kapitel 1

Ankare – komplettera med tillbakalänk Kapitel 1 länkar till Kapitel 1 som i sin tur länkar tillbaka

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

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

Externt dokument  Id-namnet läggs på url:en  Även här används fyrkantsoperatorn Introduktion till Flash-kursen Schemaändring på Flash-kursen

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.

Block- och radelement  Radelement Exempel: span, img, strong, em, a Radelement kan enbart innehålla andra radelement samt text.

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

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"

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"

Visuell struktur header footer navigation List content maincontainer

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"

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

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

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

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

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

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?

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

Inbäddning <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

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

Länkning <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

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

Importering <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "stilmall.css";

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

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

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; }

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

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

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; }

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

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

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

Kontextuella selektorer Projekt Runeberg CSS Zen Garden W3C Schools

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; }

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; }

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;}

Elementen div och span … … …

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.

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

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

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; }

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;}

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; }

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

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

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; }

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

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

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

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

Visuell struktur header footer navigation List content maincontainer

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

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