Transcript XHTML 1
Textkodning 2 Dokumentrepresentation Idag Teckenuppsättningar Validering Metadata Elementen div och span Klasser och id:n CSS [email protected] 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) ASCII-tabellen 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 ! " # $ % & ' ( ) * + , . / 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 0 1 2 3 4 5 6 7 8 9 : ; < = > ? 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 @ A B C D E F G H I J K L M N O 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 P Q R S T U V W X Y Z [ ¥ ] ^ _ 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 ` a b c d e f g h i j k l m n o 112 p 113 q 114 r 115 s 116 t 117 u 118 v 119 w 120 x 121 y 122 z 123 { 124 | 125 } 126 ~ (127 backsteg) ISO 8859 Infoga i head: <meta httpequiv="content-type" content="text/html; charset=iso8859-1" /> ISO-8859-1 är nord- och västeuropeiska språk, även kallad Latin-1 Alternativt: <?xml version="1.0" encoding="iso-8859-1"?> 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 Validering På http://validator.w3.org kan en webbsida valideras Kontrollerar att webbsidan är korrekt kodad enligt den DTD man har angivit i DOCTYPE Varför ska en webbsida vara valid? [email protected] Metadata Data om data Information som beskriver information Format: Fält, värde <meta name="keywords" content="borås, högskola" /> Resource Description Framework (RDF) Dublin Core Metadata Elementet <meta> infogas i <head> <head> <title>Titel</title> <meta name="author" content="David Gunnarsson" /> <meta name="keywords" content="xhtml & css 2 del 1, metadata, dublin core, css, teckenuppsättning" /> </head> 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 Dublin Core På formen: DC.fältnamn <meta name="DC.title" content="Dublin Core Metadata Initiative (DCMI) Home Page" /> <meta name="DC.description" content="The Dublin Core Metadata Initiative is an open forum engaged in the development of interoperable online metadata standards that support a broad range of purposes and business models..." /> <meta name="DC.date" content="2006-08-28" /> <meta name="DC.format" content="text/html" /> <meta name="DC.contributor" content="Dublin Core Metadata Initiative" /> <meta name="DC.language" content="en" /> Dublin Core För examinationsuppgiften: Identifier Creator Title Date Description Subject 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: <p class="text">Text</p> 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: <span id="firstLetter">A</span> I CSS-koden: span#firstLetter { color: blue; fontsize: 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! Cascading Style Sheets (CSS) Språk för att skapa stilmallar för layoutmässig design av XHTML, HTML och XMLdokument Finns i version 1 och 2 medan version 3 är under utveckling 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 Regler och selektorer Regel: direktiv som anger hur ett HTMLelement 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 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; } Selektorer Element: Klasser: td.leftCol { width: 300px; background: green; } Identifierare: p { width: 200px; } #container { witdh: 500px; } Kontextuella selektorer p.text img { border: 1px solid black; } Mer om regler och selektorer Regel: direktiv som anger hur ett HTMLelement 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 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 <div id="container"> <div id="header"> </div> <div id="content"> <h1>En rubrik</h1> <p>Ett stycke text</p> </div> <div id="footer"> </div> </div> Kontextuella selektorer div#content h1 för att peka ut rubriken #content h1 fungerar lika bra div#content h1 { font-family: georgia; color: green; } Kontextuella selektorer <ul id="navigation"> <li> <a href="http://runeberg.org/eddan/se01.html"> Projekt Runeberg</a> </li> <li> <a href="http://www.csszengarden.com/">CSS Zen Garden</a> </li> <li> <a href="http://www.w3schools.com">W3C Schools</a> </li> </ul> Kontextuella selektorer ul#navigation li a:link för att peka ut länken ul#navigation li text-decoration: } ul#navigation li text-decoration: } a:link { underline; a:hover { none; Elementen div och span <div id="container"> <div id="header"> … </div> <div id="main"> … </div> <div id="footer"> … </div> </div> Elementen div och span <div id="main"> <h2><span>Underrubrik</span></h2> <p class="text"> <span class="leader"> <span class="firstLetter">L </span> oren ipsum </span> 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. </p> </div> 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 Checklistan, kontrollera att: "Citationstecken förekommer parvis" {Varje vänster krullparentes svarar mot en höger krullparentes} <Varje mindre än-tecken svarar mot ett större äntecken> <p>Varje starttagg svarar mot en sluttagg</p> Tomma element stängs inom taggen <br /> Egenskaper och värden är rätt stavade: Skriv color inte colour Skriv center inte centre 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.