Transcript XHTML 1
XHTML Digitalisering av kulturarvet [email protected] Idag Design Struktur och uppmärkning Vad är (X)HTML? Element, taggar och attribut Standarder En webbsidas obligatoriska delar XML, XSLT, XHTML och CSS XML XSLT CSS Omvandling (XALAN) XHTML 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 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 Visuell struktur header main navigation List content footer container 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" 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 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 XHTML En striktare variant av HTML XML+HTML=XHTML eXtensible HyperText Markup Language XHTML använder… HTML:s element och XML:s syntax 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 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> 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> Element, taggar och attribut <h1 class="rubrik1">MACBETH</h1> Element- Attribut namn Attributvärde Starttagg Innehåll Element Sluttagg Element Vanliga element Start- och sluttagg <h1>Rubrik</h1> <p>Stycke</p> Tomma element Stängs inom taggen <br /> <hr /> <img /> Jämför med trafikmärken 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> Jämför med trafikmärken 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> 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> 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 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 Obligatoriska delar <!DOCTYPE Dokumenttypsdeklaration> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Titel placeras här</title> </head> <body> </body> </html> 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 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/xht ml" lang="se"> etc… 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 Strukturen i HEAD head meta title style link script Huvud Metadatataggar Titel Intern eller importerad stilmall Länk till extern stilmall Interaktivitet 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ör kursen 'Digitalisering av kulturarvet'" /> <title>Sidans titel</title> <script></script> <style></style> </head> Block- och radelement Blockelement Exempel: body, p, div, pre, ul, ol, dl, li, table, h1, h2 Ett blockelement kan innehålla andra blockelement 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 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) 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 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 DIV-element för sektioner DIV-element för sektioner kodexempel <body> <div id="container"> <div id="header"> </div> <div id="main"> </div> <div id="footer"> </div> </div> </body> 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> 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. 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 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> 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> 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 Tildetecknet anger (oftast) ett användarnamn, i Adressen till servern detta fallet dgu som webbsidan ligger webbht07 är en på. Domännamnet är mapp som ligger hb.se och under dgu:s toppdomänen är se användararea Slutligen är index.htm en fil som ligger i mappen webbht07 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> 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> 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 Exempel 2: Om filen befinner sig i en annan mapp på samma nivå i hierarkin <a href="../start.htm" title="Till startsidan">Till startsidan</a> <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> 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> 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 Innehållsförteckning <ul id="index"> <li> <a href="#kapitel1" 1">Kapitel 1</a> </li> <li> <a href="#kapitel2" 2">Kapitel 2</a> </li> <li> <a href="#kapitel3" 3">Kapitel 3</a> </li> <li> <a href="#kapitel4" 4">Kapitel 4</a> </li> <li> <a href="#kapitel5" 5">Kapitel 5</a> </li> </ul> title="Kapitel title="Kapitel title="Kapitel title="Kapitel title="Kapitel 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 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> 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" /> 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>