1 / 53

XHTML

XHTML. En introduktion version 2005-10 Mats Dahlström. TEI. XSLT. XHTML. CSS. CSS. Presentation. Presentation. HTML. HEAD. BODY. TITLE. STYLE. H1. P. Trädstruktur (XHTML). Strikt hierarkisk ordning, element bäddas in i andra element och får inte överlappa. HTML ↔ XHTML.

cade
Download Presentation

XHTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. XHTML En introduktion version 2005-10 Mats Dahlström

  2. TEI XSLT XHTML CSS CSS Presentation Presentation

  3. HTML HEAD BODY TITLE STYLE H1 P Trädstruktur (XHTML) Strikt hierarkisk ordning, element bäddas in i andra element och får inte överlappa

  4. HTML ↔ XHTML • XHTML är HTML (4.01) omdefinierad som en XML-tillämpning • Skillnader HTML ↔ XHTML • välformat och giltigt • exakthet i notationen • gemener • attribut måste vara citerade • tomma element måste vara stängda 

  5. Tomma element • Ett XHTML-element kallas tomt om det inte omsluter (inte kan omsluta) något elementinnehåll • I XHTML måste ett tomt element stängas (<hr></hr> ; <hr/>) • Exempel på tomma element är <br/> (radbrytning) och <img/> (bild).

  6. Grundstruktur HEAD Dokumentets osynliga data, t.ex. metadata, stilmallar och scriptkoder. BODY Dokumentets synliga data, d.v.s dess text, bilder och inbäddade multimediaobjekt

  7. Ett HTML-dokument <html> <head> <title>Den suckande sjömannen</title> </head> <body> <h1>Den suckande sjömannen</h1> <p>O ge mig en grav i det isgröna hav</p> </body> </html>

  8. Några viktiga head-element <title> HTML-dokumentets titel <link/> länk till extern resurs ss ett stilark <meta/> metadata, t.ex. i Dublin Core <style> internt stilark <script> instruktioner för exempelvis ett javascript

  9. Några vanliga body-element

  10. Listor: <ul> ; <ol> <ul> <li>Asien</li> <li>Afrika</li> <li>Europa (= en inbäddad lista) <ul> <li>Frankrike</li> <li>Tjeckien</li> </ul> </li> </ul>

  11. Infoga länkar: <a> • En länk består av två komponenter: • dess text (som användaren ser) • dess destinationsadress (URL) <p>Mer information kan du hitta på <a href="http://www.hb.se"> Högskolans webbplats</a>. </p> Mer information kan du hitta på Högskolans webbplats

  12. Absoluta och relativa länkar <p> Mer information kan du hitta i Pelle Anderssons <a href="http://www.hb.se/bhs/ pelle/artikel.htm"> artikel</a>. </p> <p> Läs mer om detta i nästa <a href=”artikel.htm"> artikel </a> på den här webbplatsen. </p>

  13. Länkar till interna dokumentsektioner <p>Läs mer om detta i avsnittet om<a href=”#slutsatser”>slutsatser </a>längre ned i den här artikeln.</p> . . . <h1><a name=”#slutsatser”>Slutsatser </a></h1> <p>Det har nu blivit dags för mig att summera mina slutsatser, och de lär mig att jag ingenting vet bla bla bla bla.</p> . . .

  14. Länkar till externa dokumentsektioner <p> Läs mer om detta i Anderssons <a href=”http://www.hb.se/bhs/pelle/artikel.htm#slutsatser”>slutsatser </a>.</p> . . . <h1><a name=”#slutsatser”>Slutsatser </a></h1> <p>Det har nu blivit dags för mig att summera mina slutsatser, och de lär mig att jag ingenting vet bla bla bla bla.</p> . . .

  15. Infoga bilder: <img/> • Relativt respektive absolut • Om bilden finns på din dator (d.v.s. är lokalt belägen) bör den placeras i samma mapp som HTML-dokumentet (undviker krångel). <img src="tree.jpg" alt="Ett träd”/> • Notera attributen

  16. Tabeller • Följande elementhierarki gäller: table tr rad rubrik th td cell

  17. Tabeller <table> <tr> <th>Författare</th> <th>Titel</th> </tr> <tr> <td>Philip Larkin</td> <td>This Be The Verse</td> </tr> </table>

  18. XHTML och TEI: exempel

  19. Ett problem • TEI är detaljerat, nyanserat och elementrikt. XHTML är mycket tunnare och elementbegränsat. • Olika TEI-element kanske bara kan transformeras till ett och samma XHTML-element: • <name>, <emph> och <hi> behöver kanske alla återges med exv <em> • <salute>, <argument>, <p> och <note> får kanske återges med <p> • Kan vi på något sätt bibehålla ”rikedomen” i TEI in i XHTML?

  20. Lösningen • Ja, genom klasser • Attributet class är ett sätt att specificera en eller flera instanser av ett element såsom en särskild typ: <p class=”viktiginfo">Observera att detta bara är ett arbetsex.</p> • Vill vi gå in i enstaka ord inne i stycken, använder vi <span>:<p> Men inom några minuter var <spanclass=”namn”>Vergérus</span> redan död. </p>

  21. Läs, testa, lek • Referensverk – w3c: http://www.w3.org • Kolla källa / source • Pröva samma dokument i olika webbläsare • Lek och lär: http://www.w3schools.com/ • kurser • märkbibliotek • ”labb” • quiz

  22. Validering • Kontrollera giltigheten i förhållande till standarden (= kontrollera att man har använt XHTML på rätt sätt) • Uppgift om kodspråk, version och DTD som gäller i och för dokumentet • Anges i SGML, skrivs i prologen (därför även före elementet <html>)

  23. XHTML: DTD / specifikation • XHTML 1.0 (spec hos W3C). Tre DTD:er: • Transitional, Strict och Frameset • Följande rad (ex.) skall placeras högst upp i dokumentet (syntaxen är alltså hämtad från SGML): <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • Se validatorer på webben, exv W3C:s: http://validator.w3.org/

  24. Stilark: CSS En introduktion version 2005-10: Mats Dahlström

  25. SGML-filosofin kommer igen • Separera innehållsbeskrivning och visuell presentation • One input / many outputs • Ett dokument – flera stilark • Ett stilark – flera dokument • = Ekonomiskt

  26. Nivåer (specifikationer) • CSS 1  CSS 2.1 CSS 3 • CSS2 kan gå in på attributnivå • Webbläsarstödet varierar och är långt från fullt utbyggt • W3C:s specifikationer är den utförligaste referensmanualen (se också W3Schools) • Ray kap. 5 mkt bra att läsa här

  27. Ett CSS-ark … • … är en enkel textfil (”minstil.css”) • … med en samling regler  • … skrivna i en annan notation än XML 

  28. Regler • selektor: identifierar det / de element som skall presenteras mha en deklaration • {deklaration}: ett direktiv som anger hur ett element skall presenteras • selektor {egenskap: värde} • body {color: black} • p {font-family: "sans serif"}

  29. Regelexempel h1 { color: darkred; font-family: Verdana, Arial; font-size: 18pt; margin-top: 20px; }

  30. deklaration av färg (klartext eller RGB) h1 { color: darkred; font-family: Verdana, Arial; font-size: 18pt; margin-top: 20px; }

  31. deklaration av typsnitt h1 { color: darkred; font-family: Verdana, Arial; font-size: 18pt; margin-top: 20px; }

  32. deklaration av teckenstorlek h1 { color: darkred; font-family: Verdana, Arial; font-size: 18pt; margin-top: 20px; }

  33. deklaration av marginalutrymme h1 { color: darkred; font-family: Verdana, Arial; font-size: 18pt; margin-top: 20px; }

  34. display: block / display: inline • Deklarera för varje element om det är ett blockelement eller ett inlineelement • Element hanteras av CSS som en rektangulär box. Ett block-element (display:block) tar ett helt horisontellt utrymme i anspråk, medan inline-elementen (display:inline) ”bäddas in”

  35. CSS för HTML: fyra alternativ • Webbläsarens default • Extern css-fil (rekommenderas för XHTML) • Internt för hela dokumentet • Internt för ett bestämt element • Stigande prioritetsordning

  36. CSS för HTML : Placering i extern fil <head> <link rel="stylesheet" type="text/css" href="minstil.css"> </head> En extern stilmall kan styra flera dokument samtidigt Ett dokument kan presenteras med varierande externa stilmallar

  37. CSS för HTML : Internt för hela dokumentet <head> <title>Kapitel 1</title> <style type="text/css"> h1 { color: darkred } </style> </head> Styr det specifika dokumentet

  38. CSS för HTML : Internt för ett element (placering inline) <p style="color: red; margin-left: 20px"> O ge mig en grav i det isgr&ouml;na hav d&auml;r blott b&ouml;ljorna lyss till min gr&aring;t </p> Styr ett bestämt element i ett dokument

  39. Flexibilitet • En egenskap kan ha flera värden • Värden separerade med kommatecken anger preferens • En selektor med flera deklarationer • Flera selektorer med en deklaration: • h1,h2,h3 { display:block; font-size:14pt; }

  40. Ärvda egenskaper • CSS utnyttjar XML-hierarkin och låter barnelement ärva förälderelementets egenskaper • Somliga egenskaper är ärftliga, andra inte (se specifikationen) • Om samma egenskap tilldelas olika värden för föräldern och för barnet, ges det mer specifika (barnet) företräde

  41. kommentarer i css /* Här ligger en kommentar */ p { text-align: center; /* Här ligger en annan kommentar */ color: black; font-family: arial }

  42. CSS vs XSLT. XSLT och CSS. • CSS + (X)HTML = Ja! • CSS + andra XML-tillämpningar = Nja… • Bättre med XSLT: • client + server side • CSS kan inte modifiera dokumentets struktur, men det kan XSL • XSLT och CSS kombineras ofta

  43. klasshantering i CSS • I stilmallen: • p.datum {text-align: right} • p.viktiginfo {text-align: center} • I bodyn: <p class=”datum">Borås den 5 juni 1998</p> <p class=”viktiginfo">Observera att detta bara är ett arbetsex.</p> • I presentationen: Borås den 5 juni 1998 Observera att detta bara är ett arbetsex.

  44. Deskriptorlös klassdeklaration • i stilarket: .viktiginfo {text-align: center} • i bodyn: <p class=”viktiginfo"> <div class=”viktiginfo">

  45. ett exempel till • bodyn: • <p> Men inom några minuter var <span class=”namn”>Vergérus</span> redan död. </p> • stilarket: • .namn {color: darkred;} • presentationen: • Men inom några minuter var Vergérus redan död.

  46. CSS för TEI – lite överkurs • Placering i extern fil • Deklareras i prologen: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> <?xml-stylesheet type="text/css" href=”minstil.css"?> • Observera type, namnet och lokaliseringen av stilarket (lokalt, externt)

  47. <q> • q{quotes: "«" "»"} • <q>Vi synger på 17.mai.</q> • resultat: • «Vi synger på 17.mai.»

  48. <q> i <q> • q{quotes: "«" "»" "'" "'"} • <p><q>Vi synger <q>Mellom bakkar og berg</q> på 17.mai.</q> • resultat: • «Vi synger 'Mellom bakkar og berg' på 17.mai.»

  49. olika barnelement med samma märkord <artikel> <huvud> <titel> Att baka bröd </titel> </huvud> ... <sektion> <titel> Så här skållar du mjöl </titel> ... <sektion> ... </artikel>

  50. css-lösning titel {font-weight: bold} huvud titel {font-size: 18pt; text-align: center sektion titel {font-size: 14pt}

More Related