Xhtml
This presentation is the property of its rightful owner.
Sponsored Links
1 / 53

XHTML PowerPoint PPT Presentation


  • 120 Views
  • Uploaded on
  • Presentation posted in: General

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.

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Xhtml

XHTML

En introduktion

version 2005-10

Mats Dahlström


Xhtml

TEI

XSLT

XHTML

CSS

CSS

Presentation

Presentation


Tr dstruktur xhtml

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

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

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

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

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

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


N gra vanliga body element

Några vanliga body-element


Listor ul ol

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

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

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

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

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

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

Tabeller

  • Följande elementhierarki gäller:

table

tr

rad

rubrik

th

td

cell


Tabeller1

Tabeller

<table>

<tr>

<th>Författare</th>

<th>Titel</th>

</tr>

<tr>

<td>Philip Larkin</td>

<td>This Be The Verse</td>

</tr>

</table>


Xhtml och tei exempel

XHTML och TEI: exempel


Ett problem

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

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

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

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: 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

Stilark: CSS

En introduktion

version 2005-10: Mats Dahlström


Sgml filosofin kommer igen

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

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

Ett CSS-ark …

  • … är en enkel textfil (”minstil.css”)

  • … med en samling regler 

  • … skrivna i en annan notation än XML 


Regler

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

Regelexempel

h1 {

color: darkred;

font-family: Verdana, Arial;

font-size: 18pt;

margin-top: 20px;

}


Deklaration av f rg klartext eller rgb

deklaration av färg (klartext eller RGB)

h1 {

color: darkred;

font-family: Verdana, Arial;

font-size: 18pt;

margin-top: 20px;

}


Deklaration av typsnitt

deklaration av typsnitt

h1 {

color: darkred;

font-family: Verdana, Arial;

font-size: 18pt;

margin-top: 20px;

}


Deklaration av teckenstorlek

deklaration av teckenstorlek

h1 {

color: darkred;

font-family: Verdana, Arial;

font-size: 18pt;

margin-top: 20px;

}


Deklaration av marginalutrymme

deklaration av marginalutrymme

h1 {

color: darkred;

font-family: Verdana, Arial;

font-size: 18pt;

margin-top: 20px;

}


Display block display inline

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

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

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

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

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


Flexibilitet

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

Ä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

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 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

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

Deskriptorlös klassdeklaration

  • i stilarket:

    .viktiginfo {text-align: center}

  • i bodyn:

    <p class=”viktiginfo">

    <div class=”viktiginfo">


Ett exempel till

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

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)


Xhtml

<q>

  • q{quotes: "«" "»"}

  • <q>Vi synger på 17.mai.</q>

  • resultat:

    • «Vi synger på 17.mai.»


Q i q

<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

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

css-lösning

titel {font-weight: bold}

huvud titel {font-size: 18pt; text-align: center

sektion titel {font-size: 14pt}


Styra s rskilda attribut

styra särskilda attribut

*[language="japanska"]

{

color:#ff0000;

}


Styra ett element med ett unikt id

Styra ett element med ett unikt id

  • id-selektor:

    • [element]#[värdet till id-attributet]

  • En id-selektor pekar bara till en bestämd elementinstans.

  • Ett unikt id-attribut måste finnas i dokumentet

  • Denna regel matchar ett p-element som har det unika id-attributvärdet "para1":

    • p#para1{ text-align: center; color: red }


L s mer om attributm jligheter i w3c s spec f r css 2 1 kap 5 8

Läs mer om attributmöjligheter i W3C:s spec. för CSS 2.1, kap. 5.8


  • Login