Transcript XHTML 1
XHTML 1 Elektronisk publicering Idag Struktur och uppmärkning Vad är (X)HTML? Element, taggar och attribut Klasser och identifierare Standarder Inbäddade objekt Hypertext [email protected] Var är vi? DATA LOGIK GRÄNSSNITT XML XSLT XHTML(+CSS) XML, XSLT, XHTML och CSS XML XSLT Omvandling CSS 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 [email protected] 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 [email protected] 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 [email protected] HTML HyperText Markup Language Skapades av Tim Berners-Lee Resultatet av hopkopplingen mellan hypertext och TCP- och DNS-idéer Definieras av SGML Begränsad vokabulär [email protected] 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 [email protected] XHTML En striktare variant av HTML XML+HTML=XHTML eXtensible HyperText Markup Language Innehåller HTML-element Skiljer på innehåll och presentation Varför XHTML och inte HTML? [email protected] 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<br /> munch'd, and munch'd, and munch'd. "Give me!" quoth I: "Aroint thee, witch!"<br /> the rump-fed ronyon cries. Her husband's to Aleppo gone, master o' the Tiger: But<br /> in a sieve I'll thither sail, and, like a rat without a tail, I'll do, I'll do, and I'll do.</p> [email protected] Element, taggar och attribut <h1 class="rubrik1">Macbeth</h1> Element- Attribut namn Attributvärde Starttagg Innehåll Element [email protected] Sluttagg Element Vanliga element Start- och sluttagg <h1>Rubrik</h1> <p>Stycke</p> Tomma element Stängs inom taggen <br /> <hr /> <img /> [email protected] Jämför med trafikmärken [email protected] 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> [email protected] Jämför med trafikmärken [email protected] Strukturen i ett dokument html h1 div id="chapter1" h2 class="chapterHeading" p class="text" div id="chapter2" h2 class="chapterHeading" p class="text" span class="leader" span class="firstWord" span class="firstLetter" p class="legend" [email protected] 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! Klasser och XML Ett XML-element per klass i ontologin Instanser av XML-element som förekommer mer än en gång i XML-dokumentet kan översättas till lämpligt HTML-element med tillhörande klassnamn Receptsamlingens trädstruktur recept namn ingrediens namn kategori mängd enhet Receptsamlingen uttryckt i XML <receptsamling> <recept> <namn>Pasta Bolognese</namn> <ingrediens> <namn>Vitlök</namn> <kategori>Grönsak</kategori> <mängd enhet="st">1-2</mängd> </ingrediens> </recept> . . . </receptsamling> XML, XSLT, XHTML och CSS XML XSLT Omvandling CSS XHTML Receptsamlingen uttryckt i XHTML <div id="receptsamling"> <h1>Receptsamling</h1> <div class="recept"> <h2 class="namn">Pasta Bolognese</h2> <div class="ingrediens"> <p class="namn">Vitlök</p> <p class="kategori">Grönsak</p> <p class="mangd">1-2 <span class="enhet">st</span> </p> Notera att rubrik</div> elementen följer en </div> hierarkisk ordning . . . (jfr ett ordbehandlings</div> program) div, h1, div, h2, div, p, span? XHTML är i själva verket en DTD DTD talar om… Vilka element och attribut som kan användas var och hur …vilket bland annat inbegriper vilka element som får finnas i vilka element Block- och radelement Block- och radelement Blockelement Exempel: body, p, div, pre, ul, ol, dl, 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. [email protected] Block- och radelement Radelement Exempel: span, img, strong, em, a Radelement kan enbart innehålla andra radelement samt text. [email protected] 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> [email protected] 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> [email protected] 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 [email protected] Standarder Standardiseringsorganet W3C World Wide Web Consortium http://www.w3.org W3C skapar dokumenttypsdefinitionerna som man hänvisar till i elementet DOCTYPE CSS, HTML, RDF, XHTML, XML är standarder utvecklade av W3C [email protected] Standarder Olika versioner av HTML har utvecklats 4.01 är den senaste versionen XHTML är den senaste standarden HTML 4.01 är ett försök att skapa renare kod genom att skilja på innehåll och presentation XHTML drar detta ett steg ytterligare [email protected] 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 [email protected] Obligatoriska delar <!DOCTYPE Dokumenttypsdeklaration> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Titel placeras här</title> </head> <body> </body> </html> [email protected] 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 [email protected] 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="sw"> etc… [email protected] 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="sw"> etc… Används ofta tillsammans med Content Management-system Tillåter bland annat länkattributet target [email protected] Validering Kontrollera att dokumentet är korrekt kodat enligt angiven DTD http://validator.w3.org Varför? Strukturen i HEAD head title style link script Huvud Titel Intern eller importerad stilmall Länk till extern stilmall Interaktivitet [email protected] Strukturen i BODY body div h1 h2 p ul, ol, dl pre Kropp Sektion Rubrik Underrubrik Stycke Lista Förformatterad text [email protected] 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> [email protected] 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> [email protected] 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> [email protected] 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" /> [email protected] 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> [email protected] Tabeller Skapades främst för att strukturera tabulära data (som i ett excel-ark)… …men används ofta för layout där tabellen utgör ett rutnät i vilket HTML-elementen infogas [email protected] En tabell består av… <table> <tr> <th> <td> Själva tabellen Tabellrad Tabell-/kolumnrubrik Cell [email protected] Exempel på en tabell <table> <tr> <th>Moment</th> <th>Tid</th> <th>Lokal</th> </tr> <tr> <td>XHTML</td> <td>17-20</td> <td>A604, A608</td> </tr> </table> [email protected] Mer om tabeller Med attributen colspan och rowspan kan man skapa celler som spänner över flera kolumner och rader <td colspan="2"> anger att cellen spänner över två kolumner <td rowspan="2"> anger att cellen spänner över två rader [email protected] Exempel 1 <table> <tr> <th>Moment</th> <th>Tid</th> <th>Lokal</th> </tr> <tr> <td>XHTML</td> <td>17-20</td> <td>A604, A608</td> </tr> <tr> <td colspan="3">Cell som spänner över hela tabellens bredd</td> </tr> </table> Exempel 2 <table> <tr> <th>Moment</th> <th>Tid</th> <th>Lokal</th> <th rowspan="3">Cell som spänner över hela tabellens höjd</td> </tr> <tr> <td>XHTML</td> <td>17-20</td> <td>A604, A608</td> </tr> <tr> <td colspan="3">Cell som spänner över tre kolumner</td> </tr> </table> Listor - numrerad <ol> <li>XHTML 1</li> <li>CSS 1</li> <li>XHTML 2</li> </ol> 1. XHTML 1 2. CSS 1 3. XHTML 2 [email protected] Listor - onumrerad <ul> <li>XHTML 1</li> <li>CSS 1</li> <li>XHTML 2</li> </ul> • • • XHTML 1 CSS 1 XHTML 2 [email protected] Listor - definitionslista <dl> <dt>XHTML 1</dt> <dd>Inledande föreläsning om XHTML</dd> <dt>CSS 1</dt> <dd>Inledande föreläsning om CSS</dd> <dt>XHTML 2</dt> <dd>Andra föreläsningen om XHTML</dd> </dl> XHTML 1 Inledande föreläsning om XHTML CSS 1 Inledande föreläsning om CSS XHTML 2 Andra föreläsningen om XHTML [email protected]