Textkodning 2 Dokumentrepresentation. Idag  Teckenuppsättningar  Validering  Metadata  Elementen div och span  Klasser och.

En presentation över ämnet: "Textkodning 2 Dokumentrepresentation. Idag  Teckenuppsättningar  Validering  Metadata  Elementen div och span  Klasser och."— Presentationens avskrift:

1 Textkodning 2 Dokumentrepresentation

2 david.gunnarsson@hb.se Idag  Teckenuppsättningar  Validering  Metadata  Elementen div och span  Klasser och id:n  CSS

3 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)

4 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)

5 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

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

7 david.gunnarsson@hb.se Validering  På http://validator.w3.org kan en webbsida validerashttp://validator.w3.org  Kontrollerar att webbsidan är korrekt kodad enligt den DTD man har angivit i DOCTYPE  Varför ska en webbsida vara valid?

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

9 Metadata  Elementet infogas i Titel

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

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

12 Dublin Core  För examinationsuppgiften: Identifier Creator Title Date Description Subject

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 Cascading Style Sheets (CSS)  Språk för att skapa stilmallar för layoutmässig design av XHTML, HTML och XML- dokument  Finns i version 1 och 2 medan version 3 är under utveckling

17 Vad kan man modifiera med CSS?  Text (typsnitt, storlek, färg, stil)  Justering (högerställd, centrerad, vänsterställd, marginaljusterad)  Positionering  Marginaler  Kantlinjer (tjocklek, strecktyp, färg)  Bakgrundsbilder  Synlighet och visning

18 Regler och selektorer  Regel: direktiv som anger hur ett HTML- element ska presenteras  Selektor: identifierar det eller de element som skall presenteras med hjälp av en regel  Kontextuell selektor: identifierar ett element i en specifik kontext

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

20 Selektorer  Element: p { width: 200px; }  Klasser: td.leftCol { width: 300px; background: green; }  Identifierare: #container { witdh: 500px; }  Kontextuella selektorer p.text img { border: 1px solid black; }

21 Mer om regler och selektorer  Regel: direktiv som anger hur ett HTML- element ska presenteras  Selektor: identifierar det eller de element som skall presenteras med hjälp av en regel  Kontextuell selektor: identifierar ett element i en specifik kontext

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

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

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

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

26 Kontextuella selektorer Projekt Runeberg CSS Zen Garden W3C Schools

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

28 Elementen div och span … … …

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

30 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

31 Checklistan, kontrollera att:  "Citationstecken förekommer parvis"  {Varje vänster krullparentes svarar mot en höger krullparentes}   Varje starttagg svarar mot en sluttagg  Tomma element stängs inom taggen  Egenskaper och värden är rätt stavade: Skriv color inte colour Skriv center inte centre

32 Checklistan, kontrollera att:  Öppna sammansättningar är skrivna med bindestreck: font-style används för font style border-bottom-width används för border bottom width sans-serif används för sans serif  Inga egenskaper eller värden innehåller mellanslag Skriv 1em inte 1 em Skriv 10px inte 10 px Undantag - teckensnittsnamn med mellanslag omsluts av apostrofer (eller citationstecken):  Skriv 'trebuchet ms' iställer för trebuchet ms  Skriv 'times new roman' iställer för times new roman  Se CSS-specifikationen för tillåtna egenskaper och värden.CSS-specifikationen