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

Slides:



Advertisements
Liknande presentationer
PTS Bredbandskartläggning
Advertisements

Folkhälsan i Sverige: Årsrapport 2012
Resultat av brukarenkäter 2012 Funktionsstöd. Svarsfrekvens.
Kap 1 - Algebra och linjära modeller
Copyright Detta material är framtaget av Stefan Särdqvist på Räddningsverket. Upphovsman till illustrationer anges vid respektive illustration Detta verk.
Joomla © 2009 Stefan Andersson 1. Kontaktformulär  På varje seriös webbplats bör det finnas ett kontaktformulär.  Använd ej maillänkar, risk för spam!
II130V Konstruktion av webbsidor Välkommen till föreläsning 3 September 2007.
XHTML.
Introduktion till CSS CSS1 - EXEMPEL. Denna webbsida vill vi kopiera och förbättra.
Konstföreningen Dragning På sista sidan finns konstnärerna för respektive tavla.
Projektföljeforskning
XHTML 1 Designa din egen webbsida. Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Validering.
HEAD – HUVUDET I huvudet hittar du information om dokumentets titel, sökord, referenser till stildokument och annan information som normalt inte visas.
Programmeringteknik Webbdelen. HTML H yper T ext M arkup L anguage Märker upp sidans innehåll så att webbläsaren kan avgöra hur innehållet ska visas.
Webbteknik En kort introduktion. Innehåll Historisk återblick Tim Berners Lee 1992 Teknisk beskrivning Märkspråk Standardisering Trender.
Webbutveckling grundkurs DA7710
Webbteknik lektion 3 Det handlar mer om stilmallar Per K, 2012.
Webbteknik lektion 2 Det handlar om stilmallar Per K, 2012.
XHTML och CSS En föreläsning om webbteknik , SK, PK TFE Umeå Universitet.
Webbteknik lektion 4 Det handlar mer om stilmallar Per K, 2012.
Webbteknik En kort introduktion. Innehåll Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender.
Stilark: CSS Digitalisering av text April 2005 Mats Dahlström.
WEBMASTER DAG 4 Mahmud Al Hakim
Karolinska Institutet, studentundersökning Studentundersökning på Karolinska Institutet HT 2013.
Bastugatan 2. Box S Stockholm. Blad 1 Läsarundersökning Maskinentreprenören 2007.
| Trycksår Kommun/Områdes-skillnader (inklusive könsdimensionen) Dennis Nordvall Statistiker/Datamanager,
REGIONAL DIGITAL AGENDA Tony Blomqvist VD, IT Norrbotten
CSS3 Några exempel på nyheter i CSS3. Basdokument – som används i flertalet exempel Pingvinsång Fyra små pingviner, klädda i svart och.
Enkätresultat för Grundskolan Elever 2014 Skola:Hällby skola.
Sammanfattning av marknadsundersökning Siffrorna är angivna i procent (%) och baserade på den undersökning som gjordes på 100 slumpmässigt utvalda personer.
Sveriges utrikeshandel (Andelar i procent) ImportExport EU (25) EFTA NAFTA Central- och Östeuropa Asien - Japan - Kina Övriga 59,9.
Finländarnas uppfattningar om äldrevården Kirsi Markkanen Utvecklingschef Tehy rf.
1 Vänsterskolan Debattartiklar. 2 Aktuell krok 3 Aktuella krokar 1. Direkt krok.
DHTML Designa din egen webbsida.
Konsumenter om Svanen och EU Ecolabel Om undersökningen Utförd av: Response Analys, Oslo i dec 2010 Cirka personer från respektive land Totalt.
Kostnader för läkemedelsförmån Utveckling t.o.m. september 2014 Materialet: avser kostnader inklusive moms är ej åldersstandardiserat Lennart Tingvall:
Hittarps IK Kartläggningspresentation år 3.
1 Individ Kompetens 60%66%67% Motivation 59%64%60% Ansvar & Initiativ 77%74%68% Befogenheter 82%69%61% Organisation Samarbete 52%66%68% Organisatorisk.
Från Gotland på kvällen (tågtider enligt 2007) 18:28 19:03 19:41 19:32 20:32 20:53 21:19 18:30 20:32 19:06 19:54 19:58 20:22 19:01 21:40 20:44 23:37 20:11.
Arbetspensionssystemet i bilder Bildserie med centrala uppgifter om arbetspensionssystemet och dess funktion
ÖVERSLAGSRÄKNING.
TÄNK PÅ ETT HELTAL MELLAN 1-50
Kouzlo starých časů… Letadla Pár foteček pro vzpomínku na dávné doby, tak hezké snění… M.K. 1 I Norrköping får man inte.
(Cascading Style Sheets) Rebecca Landmér 2007 CSS.
Datastrukturer och algoritmer VT © Anders Broberg, Ulrika Hägglund, Lena Kallin Westin, 2003 Bredden-först exempel ABCD EFGH IJKL MNOP = Obesökt.
Varumärket Luleå kommun
CSS del 3 Kvarnbrinkx Medietyper En XHTML-sida kan ha olika CSS-filer för olika medier! Definieras med attributet “media” i link- taggen,
Resultat sammanhållen vård och omsorg om de mest sjuka äldre i Örebro län Västra länsdelen mätperiod 2014.
Arbetspensionssystemet i bilder Bildserie med centrala uppgifter om arbetspensionssystemet och dess funktion
Källa: FHI, Folkhälsodatabas
Rådgivar- och Ordförandekonferens 18 – 20 maj LondonSt Giles/ St James´Court Ca 140 rådgivare, ordföranden och samarbetspartners.
XHTML och något om CSS Produktion för tryckta Webbutveckling Kvarnbrink
XHTML & CSS Introduktion Erik Nahkala
TEXT – GRUNDERNA Det huvudsakliga innehållet i XHTML- dokument är text – brödtext, rubriker, avgränsande linjer.
XHTML & CSS 2 del 2 Designa din egen webbsida. Idag  Boxmodellen  Bakgrundsbilder  Rubriker  Clear och float  Positionering.
XHTML 1 Elektronisk publicering. Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Klasser och.
Förskoleenkät Föräldrar 2012 Förskoleenkät – Föräldrar Enhet:Hattmakarns förskola.
2I1073 Lektion 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript.
Presskonferens 7 december 2010 Arbetsmarknadsutsikterna Hösten2010 Tord Strannefors.
CSS del 2 Kvarnbrink Mer elementreferens ID refererar man till med #-tecken #content { width: 600px; } Klassnamn har en punkt före.newsitem.
CSS del 1 Kvarnbrink I början… Bakgrunden var det enda man kunde byta färg på Allt var satt i Times Texten flödade över hela webbläsarfönstrets.
XHTML & CSS 2 del 1 Elektronisk publicering. Idag  Repetition  Teckenuppsättningar  Metadata  Mer om klasser och ID:n  CSS.
Textkodning 1 Dokumentrepresentation. Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Standarder.
CASCADING STYLE SHEETS Digitalisering av kulturarvet.
CSS del 2 Samuel Kvarnbrink
CSS del 2 Samuel Kvarnbrink
Introduktion till CSS CSS1 - EXEMPEL.
CSS del 2 Kvarnbrink
CSS del 1 Kvarnbrink
CSS del 1 Samuel Kvarnbrink
Presentationens avskrift:

Textkodning 2 Dokumentrepresentation

Idag  Teckenuppsättningar  Validering  Metadata  Elementen div och span  Klasser och id:n  CSS

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

Validering  På 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?

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 katalogiserings- och indexeringssystem för webbsidor  15 fält (upphov, titel, språk, publiceringsdatum, nyckelord etc)

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

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: 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!

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

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

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: p { width: 200px; }  Klasser: td.leftCol { width: 300px; background: green; }  Identifierare: #container { witdh: 500px; }  Kontextuella selektorer p.text img { border: 1px solid black; }

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

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#content h1 för att peka ut rubriken  #content h1 fungerar lika bra div#content h1 { 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; }

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

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

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