XHTML / CSS - HB Personalsidor
Download
Report
Transcript XHTML / CSS - HB Personalsidor
XHTML
En introduktion
version 2005-10
Mats Dahlström
TEI
XSLT
CSS
XHTML
CSS
Presentation
Presentation
Trädstruktur (XHTML)
HTML
HEAD
TITLE
BODY
STYLE
Strikt hierarkisk ordning,
element bäddas in i andra
element och får inte
överlappa
H1
P
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>
<link/>
<meta/>
<style>
<script>
HTML-dokumentets titel
länk till extern resurs ss ett
stilark
metadata, t.ex. i Dublin Core
internt stilark
instruktioner för exempelvis ett
javascript
Några vanliga body-element
<h1>, <h2>, ... , <h6>
rubriknivå 1-6
<p>
stycke
<div>
avsnitt
<br/>
radbrytning i text
<hr/>
<em>
infogande av horisontell
linje
betonat elementinnehåll
<a>
länk / ankare
<img/>
bildobjekt
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
rubrik
th
rad
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>
XHTML och TEI: exempel
Stycken
XHTML
Radbrytning
TEI
<p>, <div> <p>, <div>
XHTML
TEI
<br/>
<lb>
Betoning
Länk
XHTML
TEI
XHTML
TEI
<em>
<hi>
<a>
<ref>
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 <span
class=”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; fontsize: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
p
{ text-align:
/* Här ligger
color: black;
en kommentar */
center;
en annan kommentar */
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:
stilarket:
<p> Men inom några minuter var
<span class=”namn”>Vergérus</span>
redan död. </p>
.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="ISO8859-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; textalign: center
sektion titel {font-size: 14pt}
styra särskilda attribut
*[language="japanska"]
{
color:#ff0000;
}
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