XHTML

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

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 Omvandling (XALAN) XHTML

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 navigation List content main container footer

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 <h3>Scene III.</h3> <p>A heath. Thunder.</p> <p>Enter the three witches.</p> <p><strong>First Witch:</strong>Where hast thou been, sister? </p> <p><strong>Second Witch:</strong> Killing swine.</p> <p><strong>Third Witch:</strong> Sister, where thou?</p> <p><strong>First Witch:</strong> A sailor's wife had chestnuts in her lap, and munch'd, and munch'd, and<br /> munch'd. "Give me!" quoth I: "Aroint thee, witch!"<br /> the rump-fed ronyon cries. Her husband's to Aleppo<br /> gone, master o' the Tiger: But in a sieve I'll thither<br /> sail, and, like a rat without a tail, I'll do, I'll<br /> do, and I'll do.</p>

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

14. Element, taggar och attribut <h1 class="rubrik1">MACBETH</h1> Attribut Element- namn Attribut- värde Starttagg Innehåll Sluttagg Element

15. Element • Vanliga element • Start- och sluttagg • <h1>Rubrik</h1> • <p>Stycke</p> • Tomma element • Stängs inom taggen • <br /> • <hr /> • <img />

16. Jämför med trafikmärken

17. Attribut • Placeras i starttaggen • Kan vara obligatoriska… • <img src="bild.gif" alt="En bild helt enkelt" /> • <a href="http://www.hb.se" title="Högskolans hemsida">Högskolan i Borås</a> • …eller valfria • <p class="leader">Det var en gång...</p>

18. Jämför med trafikmärken

19. Regler för element • Gemener används för taggnamn och attributnamn • Rätt: <img src="bild.gif" alt="En bild helt enkelt" /> • Fel: <IMG src="bild.gif" alt="En bild helt enkelt" /> • Citationstecken omger attribut • Rätt: <a href="index.htm">Länk</a> • Fel: <a href=index.htm>Länk</a>

20. Regler för element • Överlapp är inte tillåtet • Rätt: <p><strong>Fet text i ett stycke.</strong></p> • Fel: <p><strong>Fet text i ett stycke.</p></strong> • Element måste stängas • Rätt: <p>Ett stycke text.</p><p>Ett annat stycke text.</p> • Fel: <p>Ett stycke text.<p>Ett annat stycke text. • Rätt: <br /> • Fel: <br>

21. 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? • 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 <!DOCTYPE Dokumenttypsdeklaration> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Titel placeras här</title> </head> <body> </body> </html>

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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="se"> etc…

26. Transitional • Lite mer tillåtande <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="se"> etc… • Används ofta tillsammans med Content Management-system • Tillåter bland annat länkattributet target

27. Strukturen i HEAD head Huvud meta Metadatataggar title Titel style Intern eller importerad stilmall link Länk till extern stilmall script Interaktivitet

28. Strukturen i HEAD <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="keywords" content="digitalisering, kulturarv" /> <meta name="description" content="kursmaterial f&ouml;r kursen 'Digitalisering av kulturarvet'" /> <title>Sidans titel</title> <script></script> <style></style> </head>

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 <!-- och --> kan man infoga kommentarer i koden • Exempel: <!-- här följer ett avsnitt om… --> • Kod kan även kommenteras bort för att webbläsaren inte ska tolka den • Exempel: <!-- <h1>Rubrik</h1> --> • 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 <body> <div id="container"> <div id="header"> </div> <div id="main"> </div> <div id="footer"> </div> </div> </body>

35. main inzoomad <div id="main"> <div id="leftCol"> </div> <div id="centerCol"> </div> <div id="rightCol"> <div id="extra1"> </div> <div id="extra2"> </div> </div> </div>

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 <div id="leftCol"> <ul> <li><a href="index.htm">Start</a></li> <li><a href="sida2.htm">Sida 2</a></li> <li><a href="sida3.htm">Sida 3</a></li> <li><a href="sida4.htm">Sida 4</a></li> </ul> </div>

39. centerCol inzoomad <div id="centerCol"> <h2>Lorem ipsum</h2> <p><span class="leader">Lorem ipsum</span> dolor sit amet, consectetuer adipiscing elit. Duis <em>volutpat</em>. Maecenas arcu. Duis vitae urna. Cras risus ante, mollis quis, pellentesque eget, tincidunt sit amet, urna.</p> <p><strong>Pellentesque et lorem</strong>. 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.</p> <ul> <li><a href="http://www.lipsum.com/">Lorem</a></li> <li><a href="http://www.lipsum.com/">Ipsum</a></li> </ul> </div>

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

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) • <a href="http://www.hb.se" (2) target="_blank" (3) title="Högskolan i Borås" (4)>Högskolan i Borås (1)</a>

42. Hyperlänk • En url kan vara relativ eller absolut • http://www.hb.se är exempel på en absolut url • <a href="http://www.hb.se" title="Högskolan i Borås">Högskolan i Borås</a> • start.htm är exempel på en relativ url • <a href="start.htm" title="Till startsidan"> Till startsidan</a>

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 • <a href="../start.htm" title="Till startsidan">Till startsidan</a> • Exempel 2: Om filen befinner sig i en annan mapp på samma nivå i hierarkin • <a href="../img/bild.gif" title="Länk till bild.gif">Länk till bild.gif</a> • Exempel 3: Om filen befinner sig i samma mapp • <a href="index.htm" title="Hem">Hem</a>

44. Ankare – länkning inom dokumentet <a href="#chapter1" title="Kapitel 1">Kapitel 1</a> länkar till <a id="chapter1">Kapitel 1</a> eller <h2 id="chapter1">Kapitel 1</a> eller <h2><a id="chapter1">Kapitel 1</a></h2>

45. Ankare – komplettera med tillbakalänk <a href="#chapter1" title="Kapitel 1" id="index">Kapitel 1</a> länkar till <h2><a href="#index" title="Index" id="chapter1">Kapitel 1</a> </h2> som i sin tur länkar tillbaka

46. Innehållsförteckning <ul id="index"> <li> <a href="#kapitel1" title="Kapitel 1">Kapitel 1</a> </li> <li> <a href="#kapitel2" title="Kapitel 2">Kapitel 2</a> </li> <li> <a href="#kapitel3" title="Kapitel 3">Kapitel 3</a> </li> <li> <a href="#kapitel4" title="Kapitel 4">Kapitel 4</a> </li> <li> <a href="#kapitel5" title="Kapitel 5">Kapitel 5</a> </li> </ul>

47. Innehållet… <div id="header"> <h1>Ett svart får bland hermelinerna</h1> <ul id="index">. . .</ul> </div> <div id="content"> <h2 id="kapitel1"><a href="#index" title="Index">Kapitel 1</a></h2> <p>Lite rolig text som hör till kapitel 1.</p> <h2 id="kapitel2"><a href="#index" title="Index">Kapitel 2</a></h2> <p>Lite rolig text som hör till kapitel 2.</p> </div> <div id="footer"> <p><a href="#" title="Till toppen av sidan">Till toppen av sidan</a></p> </div> Exempel

48. Externt dokument • Id-namnet läggs på url:en • Även här används fyrkantsoperatorn <a href="http://www.adm.hb.se/~dgu/flash/#intr"> Introduktion till Flash-kursen </a> <a href="http://www.adm.hb.se/~dgu/flash/#sche"> Schemaändring på Flash-kursen </a>

49. Inbäddning av bilder • En bild infogas i ett dokument med hjälp av taggen <img /> • <img /> innehåller två obligatoriska uppgifter: • 1 – Bildens url (src) • 2 – Alternativ text (alt) • Exempel: <img src="bild.gif" alt="en bild helt enkelt" />

50. En bild som en del av en länk • Bilder kan användas som länkar <a href="http://www.hb.se" title="Högskolan i Borås"> <img src="bild.gif" alt="Högskolan i Borås" style="border: 0" /> </a>