Download
1 / 53
530 likes | 756 Views
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.
E N D
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 • 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
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).
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
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>
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
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>
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
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>
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> . . .
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> . . .
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
Tabeller • Följande elementhierarki gäller: table tr rad rubrik th td cell
Tabeller <table> <tr> <th>Författare</th> <th>Titel</th> </tr> <tr> <td>Philip Larkin</td> <td>This Be The Verse</td> </tr> </table>
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?
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>
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
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>)
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/
Stilark: CSS En introduktion version 2005-10: Mats Dahlström
SGML-filosofin kommer igen • Separera innehållsbeskrivning och visuell presentation • One input / many outputs • Ett dokument – flera stilark • Ett stilark – flera dokument • = Ekonomiskt
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
Ett CSS-ark … • … är en enkel textfil (”minstil.css”) • … med en samling regler • … skrivna i en annan notation än XML
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"}
Regelexempel h1 { color: darkred; font-family: Verdana, Arial; font-size: 18pt; margin-top: 20px; }
deklaration av färg (klartext eller RGB) h1 { color: darkred; font-family: Verdana, Arial; font-size: 18pt; margin-top: 20px; }
deklaration av typsnitt h1 { color: darkred; font-family: Verdana, Arial; font-size: 18pt; margin-top: 20px; }
deklaration av teckenstorlek h1 { color: darkred; font-family: Verdana, Arial; font-size: 18pt; margin-top: 20px; }
deklaration av marginalutrymme h1 { color: darkred; font-family: Verdana, Arial; font-size: 18pt; margin-top: 20px; }
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”
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
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
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
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öna hav där blott böljorna lyss till min gråt </p> Styr ett bestämt element i ett dokument
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; }
Ä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
kommentarer i css /* Här ligger en kommentar */ p { text-align: center; /* Här ligger en annan kommentar */ color: black; font-family: arial }
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
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.
Deskriptorlös klassdeklaration • i stilarket: .viktiginfo {text-align: center} • i bodyn: <p class=”viktiginfo"> <div class=”viktiginfo">
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.
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)
<q> • q{quotes: "«" "»"} • <q>Vi synger på 17.mai.</q> • resultat: • «Vi synger på 17.mai.»
<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.»
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>
css-lösning titel {font-weight: bold} huvud titel {font-size: 18pt; text-align: center sektion titel {font-size: 14pt}
