XHTML Digitalisering av kulturarvet.

En presentation över ämnet: "XHTML Digitalisering av kulturarvet."— Presentationens avskrift:

1 david.gunnarsson@hb.se XHTML Digitalisering av kulturarvet

2 Idag  Design  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Standarder  En webbsidas obligatoriska delar

3 XML, XSLT, XHTML och CSS XML XSLT CSS XHTML Omvandling (XALAN)

4 Strukturen i ett dokument Dokument Kapitel 1 Kapitel 2 Rubrik 1 Stycke 1 Stycke 2 Mening 1 Ord 1 Ord 2 Ord 3 Mening 2 Stycke 3 Kapitel 3

5 Uppmärkning  Uppmärkning = processen att bestämma (träd-) strukturen i ett dokument med hjälp av märken  Märken = taggar  Uppmärkning handlar inte om visuell formatering  Uppmärkning handlar alltså om strukturmässig design och inte layoutmässig dito

6 Visuell struktur header footer navigation List content maincontainer

7 Grov struktur body 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"

8 Varför XHTML och inte HTML?  Tidiga versioner av HTML (< 4.01) tillät mycket slarv i kodningen  Följden blev att webbläsarna fick utrustas med tunga kodbibliotek som slukade minne  Därför behövde kodningen styras upp  HTML 4.01 var ett steg mot renare kodning  XHTML drar detta ett steg ytterligare

9 HTML  Tre typer av uppmärkning Struktur Presentation Referens  Strävan mot uppmärkning av struktur (innehåll) snarare än presentation (form)  För det senare används CSS

10 XHTML  En striktare variant av HTML  XML+HTML=XHTML  eXtensible HyperText Markup Language  XHTML använder… HTML:s element och XML:s syntax

11 Visuell formatering SCENE III. A heath. Thunder. Enter the three witches. First Witch: Where hast thou been, sister? Second Witch: Killing swine. Third Witch: Sister, where thou? First Witch: A sailor's wife had chestnuts in her lap, and munch'd, and munch'd, and munch'd. "Give me!" quoth I: "Aroint thee, witch!" the rump-fed ronyon cries. Her husband's to Aleppo gone, master o' the Tiger: But in a sieve I'll thither sail, and, like a rat without a tail, I'll do, I'll do, and I'll do. Text lånad från http://www.clicknotes.com/macbeth/T13.html

12 Uppmärkning med XHTML Scene III. A heath. Thunder. Enter the three witches. First Witch: Where hast thou been, sister? Second Witch: Killing swine. Third Witch: Sister, where thou? First Witch: A sailor's wife had chestnuts in her lap, and munch'd, and munch'd, and munch'd. "Give me!" quoth I: "Aroint thee, witch!" the rump-fed ronyon cries. Her husband's to Aleppo gone, master o' the Tiger: But in a sieve I'll thither sail, and, like a rat without a tail, I'll do, I'll do, and I'll do.

13 Uppmärkning med XML Scene III. A heath. Thunder. Enter the three witches. Where hast thou been, sister? Killing swine. Sister, where thou? A sailor's wife had chestnuts in her lap, and munch'd, and munch'd, and munch'd. "Give me!" quoth I: "Aroint thee, witch!" the rump-fed ronyon cries. Her husband's to Aleppo gone, master o‘ the Tiger: But in a sieve I'll thither sail, and, like a rat without a tail, I'll do, I'll do, and I'll do.

14 Element, taggar och attribut MACBETH Element Starttagg SluttaggInnehåll Attribut- värde Attribut Element- namn

15 Element  Vanliga element Start- och sluttagg Rubrik Stycke  Tomma element Stängs inom taggen

16 Jämför med trafikmärken

17 Attribut  Placeras i starttaggen  Kan vara obligatoriska… Högskolan i Borås  …eller valfria Det var en gång...

18 Jämför med trafikmärken

19 Regler för element  Gemener används för taggnamn och attributnamn Rätt: Fel:  Citationstecken omger attribut Rätt: Länk Fel: Länk

20 Regler för element  Överlapp är inte tillåtet Rätt: Fet text i ett stycke. Fel: Fet text i ett stycke.  Element måste stängas Rätt: Ett stycke text. Ett annat stycke text. Fel: Ett stycke text. Ett annat stycke text. Rätt: Fel:

21 Validering  På http://validator.w3.org kan en webbsida valideras http://validator.w3.org  Kontrollerar att webbsidan är korrekt kodad enligt den DTD man har angivit i DOCTYPE  Varför ska en webbsida vara valid? Följer man standarden ökar chansen att webbsidan ser likadan ut i olika webbläsare Webbläsaren behöver då inte göra sin egen tolkning av koden

22 Strukturen i ett XHTML-dokument DOCTYPE Talar om vilken dokumenttypsdefinition som används HEAD Innehåller titel, metadata, eventuella skript och stilmallar BODY Sidans innehåll, det som visas i webbläsarfönstret

23 Obligatoriska delar Titel placeras här

24 DOCTYPE  Dokumenttypsdeklaration  Pekar på en dokumenttypsdefinition (DTD)  En DTD specificerar de element och attribut som är tillåtna  Flera DTD:er finns Strict Transitional Frameset

25 Strict  Skiljer helt på innehåll och presentation etc…

26 Transitional  Lite mer tillåtande etc…  Används ofta tillsammans med Content Management-system  Tillåter bland annat länkattributet target

27 Strukturen i HEAD headHuvud metaMetadatataggar titleTitel styleIntern eller importerad stilmall linkLänk till extern stilmall scriptInteraktivitet

28 Strukturen i HEAD <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> Sidans titel

29 Block- och radelement  Blockelement Exempel: body, p, div, pre, ul, ol, dl, li, 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

30 Block- och radelement  Radelement Exempel: span, img, strong, em, a Radelement kan enbart innehålla andra radelement samt text Radelement måste alltid finnas inom ett blockelement (dock ej body)

31 Kommentarer  Med märkena kan man infoga kommentarer i koden  Exempel:  Kod kan även kommenteras bort för att webbläsaren inte ska tolka den  Exempel: Rubrik -->  Används ofta då JavaScript och CSS-kod ska döljas för äldre webbläsare

32 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

33 DIV-element för sektioner

34 DIV-element för sektioner - kodexempel

35 main inzoomad

36 P, LI, H1-H6 för textenheter  Hit: stycken, listelement, rubriker (ofta inom en sektion)  Rubrik: Lorem ipsum  Stycke: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis volutpat. Maecenas arcu. Duis vitae urna. Cras risus ante, mollis quis, pellentesque eget, tincidunt sit amet, urna.  Stycke: Pellentesque et lorem. Suspendisse cursus eros non mi. Donec nibh magna, aliquet id, dictum vel, ornare ac, tellus. Phasellus egestas lobortis mi. Nam facilisis risus at dui. Vivamus auctor, mauris vel faucibus nonummy, ipsum risus scelerisque magna, ac ornare diam libero in odio.

37 SPAN, A, EM, STRONG för enstaka ord/meningar inom textenheter  SPAN – Text som ska specialbehandlas på något sätt (döljas, få annan färg/annat teckensnitt/annan textstorlek mm)  A – Text som ska utgöra en länk eller ett ankare  EM – Kursiv stil  STRONG – Fetstil

38 leftCol inzoomad Start Sida 2 Sida 3 Sida 4

39 centerCol inzoomad Lorem ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis volutpat. Maecenas arcu. Duis vitae urna. Cras risus ante, mollis quis, pellentesque eget, tincidunt sit amet, urna. Pellentesque et lorem. Suspendisse cursus eros non mi. Donec nibh magna, aliquet id, dictum vel, ornare ac, tellus. Phasellus egestas lobortis mi. Nam facilisis risus at dui. Vivamus auctor, mauris vel faucibus nonummy, ipsum risus scelerisque magna, ac ornare diam libero in odio. Lorem Ipsum

40 URL  En gammal, men fortfarande tillgänglig, kurshemsida som exempel: http://www.adm.hb.se/~dgu/webbht07/index.htm Talar om att vi använder protokollet http Adressen till servern som webbsidan ligger på. Domännamnet är hb.se och toppdomänen är se Tildetecknet anger (oftast) ett användarnamn, i detta fallet dgu webbht07 är en mapp som ligger under dgu:s användararea Slutligen är index.htm en fil som ligger i mappen webbht07

41 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

42 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

43 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

44 Ankare – länkning inom dokumentet Kapitel 1 länkar till Kapitel 1 eller Kapitel 1 eller Kapitel 1

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

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

47 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

48 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

49 Inbäddning av bilder  En bild infogas i ett dokument med hjälp av taggen  innehåller två obligatoriska uppgifter: 1 – Bildens url (src) 2 – Alternativ text (alt)  Exempel:

50 En bild som en del av en länk  Bilder kan användas som länkar http://www.hb.se