XHTML 1 - HB Personalsidor

Download Report

Transcript XHTML 1 - HB Personalsidor 

XHTML & CSS 2 del 1
Elektronisk publicering
Idag






Repetition
Teckenuppsättningar
Metadata
Mer om klasser och ID:n
CSS och XHTML
Elementen div och span
[email protected]
Var är vi?
DATA
LOGIK
GRÄNSSNITT
XML
XSLT
XHTML(+CSS)
XML, XSLT, XHTML och CSS
XML
XSLT
Omvandling
CSS
XHTML
Teckenuppsättningar







Varje tecken har en numerisk motsvarighet
Binärt system
ASCII=7 bitar (=7 positioner)
32=mellanslag (=0100000)
65=A (=1000001)
97=a (=1100001)
127=backsteg (=1111111)
ASCII-tabellen
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
!
"
#
$
%
&
'
(
)
*
+
,
.
/
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
0
1
2
3
4
5
6
7
8
9
:
;
<
=
>
?
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
@
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
P
Q
R
S
T
U
V
W
X
Y
Z
[
¥
]
^
_
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
`
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
112 p
113 q
114 r
115 s
116 t
117 u
118 v
119 w
120 x
121 y
122 z
123 {
124 |
125 }
126 ~
(127 backsteg)
ISO 8859



Infoga i head: <meta httpequiv="content-type"
content="text/html; charset=iso8859-1" />
ISO-8859-1 är nord- och västeuropeiska språk, även
kallad Latin-1
Alternativt: <?xml version="1.0"
encoding="iso-8859-1"?>

Placeras först i dokumentet
Teckenentiteter




Tecken som inte är definierade i ASCII kan
skrivas med teckenentiteter
På formen &kod;
Exempel: å = &aring; ä = &auml;
ö = &ouml; ü = &uuml; Å = &Aring;
Ä = &Auml; Ö = &Ouml; Ü = &Uuml;
& = &amp; mellanslag = &nbsp;
Ange alltid teckenuppsättning
Metadata






Data om data
Information som beskriver information
Format: Fält, värde
<meta name="keywords"
content="borås, högskola" />
Resource Description Framework (RDF)
Dublin Core
Metadata

Elementet <meta> infogas i <head>
<head>
<title>Titel</title>
<meta name="author" content="David
Gunnarsson" />
<meta name="keywords" content="xhtml &
css 2 del 1, metadata, dublin core, css,
teckenuppsättning" />
</head>
Dublin Core



Dublin Core Metadata Initiative (DCMI)
Ett klassificerings- och indexeringssystem för
webbsidor
15 fält (upphov, titel, språk,
publiceringsdatum, nyckelord etc)

http://dublincore.org/usage/documents/overview
Dublin Core

På formen: DC.fältnamn
<meta name="DC.title" content="Dublin Core
Metadata Initiative (DCMI) Home Page" />
<meta name="DC.description" content="The
Dublin Core Metadata Initiative [...]" />
<meta name="DC.date" content="2006-08-28" />
<meta name="DC.format" content="text/html"
/>
<meta name="DC.contributor" content="Dublin
Core Metadata Initiative" />
<meta name="DC.language" content="en" />
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!
Ankare



Hyperlänkningen medger länkning inom ett
(X)HTML-dokument
Vi kan även länka till en specifik sektion i ett
externt (X)HTML-dokument
Det som möjliggör detta är fyrkantsoperatorn
# och id-namn
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]
Ankare – länkning inom dokumentet
<a href="#kapitel1" title="Kapitel
1">Kapitel 1</a>
länkar till
<a id="kapitel1">Kapitel 1</a>
eller varför inte
<h2 id="kapitel1">Kapitel 1</h2>
eller
<h2><a id="kapitel1">Kapitel 1</a></h2>
[email protected]
Ankare – komplettera med tillbakalänk
<a href="#kapitel1"
title="Kapitel 1"
id="index">Kapitel 1</a>
länkar till
<a href="#index" title="Index"
id="kapitel1">Kapitel 1</a>
som i sin tur länkar tillbaka
[email protected]
Innehållsförteckning
<ul id="index">
<li> <a href="#kapitel1"
1">Kapitel 1</a> </li>
<li> <a href="#kapitel2"
2">Kapitel 2</a> </li>
<li> <a href="#kapitel3"
3">Kapitel 3</a> </li>
<li> <a href="#kapitel4"
4">Kapitel 4</a> </li>
<li> <a href="#kapitel5"
5">Kapitel 5</a> </li>
</ul>
title="Kapitel
title="Kapitel
title="Kapitel
title="Kapitel
title="Kapitel
Innehållet…
<div id="header">
<h1>Ett svart får bland hermelinerna</h1>
<ul id="index">. . .</ul>
</div>
<div id="content">
<h2 id="kapitel1"><a href="#index" title="Index">Kapitel 1</h2>
<p>Lite rolig text som hör till kapitel 1.</p>
<h2 id="kapitel2"><a href="#index" title="Index">Kapitel 2</h2>
<p>Lite rolig text som hör till kapitel 2.</p>
</div>
<div id="footer">
<p><a href="#" title="Till toppen av sidan">Till toppen av
sidan</a></p>
</div>
Exempel
Externt dokument


Id-namnet läggs på url:en
Även här används fyrkantsoperatorn
<a href="http://www.adm.hb.se/~dgu/flash/#intr">
Introduktion till Flash-kursen </a>
<a href="http://www.adm.hb.se/~dgu/flash/#sche">
Schemaändring på Flash-kursen </a>
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]
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]
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]
Alternativ struktur
html
h1
div
h2 id=" chapter1 "
p class="text"
h2 id="chapter2"
p class="text"
span class="leader"
span class="firstWord"
span class="firstLetter"
p class="legend"
[email protected]
Visuell struktur
header
main
navigation
List
content
footer
container
Grov struktur
html
div id="container"
div id="header"
h1
div id="main"
div id="navigationList"
div id="content"
h2 id="chapter1"
p class="text"
div id="footer"
[email protected]
Introduktion till CSS






Vad är CSS och varför?
Syntax, regler och selektorer
Koppling till XHTML: klasser och id:n
Färg och typografi
Mått
Justering och marginaler
CSS – vad är det?
Cascading StyleSheets
 Stylesheet – en mall som formaterar något
 Här: en mall som formaterar ett XHTMLdokument (men även XML och HTML)
 XSLT – en mall som transformerar ett XMLdokument
 Cascade – ett prioriteringsschema för att
bestämma vilka stilregler som gäller om mer
än en regel matchar ett element

Så går det till
Ett XHTML-dokument läser in eller länkar in
en stilmall
 I stilmallen pekas element i XHTMLdokumentet ut
 De utpekade elementen tilldelas stilregler som
talar om hur de ska presenteras visuellt

Varför?

Därför att vi gärna vill separera innehåll från
presentation, vilket
1.
2.
3.
4.
Förenklar underhåll och uppdatering
Minskar filstorlekar
Ökar tillgängligheten
Ger oss möjligheten att med en enda stilmall
formatera ett oändligt antal XHTML-dokument
Vad kan man göra med CSS?

Mycket…
Typsnitt, justering, kantlinjer, bakgrundsfärger,
textfärger, textstilar, bakgrundsbilder, storlek,
positionering, visning/synlighet
 Med mera
 CSS ger fullständig kontroll över layout utan
att stöka till innehållet

Flera media…
En stilmall för visning på skärm…
 …en annan anpassad för utskrift…
 …och kanske en tredje för visning i
mobiltelefon?

Formatera XHTML-dokument

Tre alternativ
Inbäddning i XHTML-dokumentet
 Länkning till CSS-dokumentet
 Importering till XHTML-dokumentet

Inbäddning
<!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/xhtml"
xml:lang="sw">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
<style type="text/css" media="all">
</style>
</head>
<body>
</body>
</html>
Inbäddning
<style type="text/css" media="all">
body {
font-family: 'trebuchet ms', verdana, arial,
sans-serif;
font-size: 0.8em;
background: #2baffa;
color: #ffffff;
padding-bottom: 20px;
}
</style>
Länkning
<!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/xhtml"
xml:lang="sw">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css"
href="stilmall.css" />
</head>
<body>
</body>
</html>
Länkning, stilmall.css
body {
font-family: 'trebuchet ms', verdana,
arial, sans-serif;
font-size: 0.8em;
background: #2baffa;
color: #ffffff;
padding-bottom: 20px;
}
Importering
<!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/xhtml"
xml:lang="sw">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
<style type="text/css" media="all">@import
"stilmall.css";</style>
</head>
<body>
</body>
</html>
Importering, stilmall.css
body {
font-family: 'trebuchet ms', verdana,
arial, sans-serif;
font-size: 0.8em;
background: #2baffa;
color: #ffffff;
padding-bottom: 20px;
}
Syntaxen…
En CSS-regel består av en selektor och en till
flera deklarationer
 Selektorn avgör vilket eller vilka XHTMLelement som ska påverkas av regeln
 Varje deklaration består av en egenskap och ett
värde

Syntaxen…
Selektor
body {
Egenskap
Värden
font-family:
'trebuchet ms',
verdana, arial,
sans-serif;
font-size: 0.8em;
background: #2baffa;
color: #ffffff;
padding-bottom:
20px;
Enheter
}
Syntaxen…

Regelblock omges av krullparenteser { } och
varje deklaration avslutas med ett semikolon ;
Regler och selektorer
Regel – talar om hur något ska formateras
 Selektor – talar om vad som ska formateras

Regler

Regler skrivs på följande sätt:
selektor { egenskap: värde; }

Med fler än en egenskap:
selektor { egenskap1: värde; egenskap2:
värde; }

Mer läsvänligt:
selektor {
egenskap1: värde;
egenskap2: värde;
}
Regler
p {
color: blue;
font-family: verdana, arial, sans-serif;
margin-top: 40px;
margin-bottom: 20px;
border: 1px dotted black;
}
Kontextuella selektorer
Dokument
Sektion 1
Sektion 2
Rubrik 1
Stycke 1
Sektion 3
<div id="container">
<div id="header">
</div>
<div id="main">
<h2>En rubrik</h2>
<p>Ett stycke
text</p>
</div>
<div id="footer">
</div>
</div>
Kontextuella selektorer


div#main h2 för att peka ut rubriken
#main h2 fungerar lika bra
div#main h2 {
font-family: georgia;
color: green;
}
Kontextuella selektorer
<ul id="navigation">
<li>
<a href="http://runeberg.org/eddan/se01.html"> Projekt Runeberg</a>
</li>
<li>
<a href="http://www.csszengarden.com/">CSS Zen
Garden</a>
</li>
<li>
<a href="http://www.w3schools.com">W3C
Schools</a>
</li>
</ul>
Kontextuella selektorer

ul#navigation li a:link för att peka ut
länken
ul#navigation li
text-decoration:
}
ul#navigation li
text-decoration:
}
a:link {
underline;
a:hover {
none;
XHTML-klasser i CSS

Pekas ut med hjälp av punktoperatorn plus klassnamn
I XHTML-koden:
<p class="text">Text</p>
I CSS-koden:
p.text { color: blue; }
Alternativt:
.text { color: blue; }
XHTML-id:n i CSS

Pekas ut med hjälp av fyrkantsoperatorn plus
klassnamn
I XHTML-koden:
<span id="firstLetter">A</span>
I CSS-koden:
span#firstLetter { color: blue; font-size: 3em;}
Alternativt:
#firstLetter { color: blue; font-size:
3em;}
Elementen div och span
<div id="container">
<div id="header">
…
</div>
<div id="main">
…
</div>
<div id="footer">
…
</div>
</div>
Elementen div och span
<div id="main">
<h2><span>Underrubrik</span></h2>
<p class="text">
<span class="leader">
<span class="firstLetter">L
</span>
oren ipsum
</span> dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At
vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
Elementen div och span
span.firstLetter {
font-style: italic;
font-size: 3em;
font-family: georgia, serif;
}
span.leader {
font-size: 2em;
font-family: georgia, serif;
font-variant: small-caps;
}
Exempel
Pseudoklasser
Klasser som inte finns i dokumentstrukturen
 Används bland annat för länkegenskaper

a:link {color: black}
 a:visited {color: grey}
 a:hover {color: red}
 a:active {color: red}

I tur och ordning: oklickad länk, klickad länk,
muspekaren över länk och aktiverad länk
 Ordningen är viktig, tänk: LoVe HAte

Pseudoklasser

Men även för andra element:
p:first-letter {
font-style: italic;
font-size: 3em;
font-family: georgia, serif;
}
p:first-line {
font-size: 2em;
font-family: georgia, serif;
font-variant: small-caps;
}
Färger

Färg anges i RGB, hex eller med färgkonstant
Hex - #99cc33 (eller #9c3)
 RGB – rgb(153, 204, 51)
 Färgkonstant - aqua, black, blue, fuchsia, gray,
green, lime, maroon, navy, olive, purple, red,
silver, teal, white och yellow
 h1 {background-color: #99cc33;}
 h1 {background-color: rgb(153,
204, 51);}
 h1 {background-color: maroon;}

Typografi
Teckensnitt kan också anges
 Verdana, Trebuchet MS, Georgia, Tahoma mfl är
anpassade speciellt för webben
p {
font-family: verdana, sans-serif;
font-size: 0.8em;
}
p {
font-family: georgia, serif;
font-size: 12pt;
}

Mått

Absoluta mått







mm – millimeter
cm – centimeter
in – inch
pt – point (72pt = 1in)
pc – pica (1pc = 12pt)
px – pixel
Relativa mått



em – fyrkanten (emspace)
ex – x-höjden
% – procent
Justering och marginaler




Varje element har justerbar position och justerbara
marginaler
Dessutom finns möjligheten att justera mellanrum
mellan elementets sidor och dess innehåll
margin, padding, position
Elementens innehåll kan också justeras med textalign som kan anta något av värdena: left, right,
center och justify

Reglerna påverkar inte bara text utan även element inom
elementet
Boxmodellen
”TRouBLed”: När
man använder
kortformen för att
specificera margin,
padding eller
border för ett
element börjar man
med den övre sidan
och går medsols:
Top, Right,
Bottom, Left.
innehåll
margin
padding
border
Ex.: h1 { margin: 1em 1em 0 1em; }
[email protected]
Boxmodellen
p {
width: 300px;
padding: 20px;
margin: 10px;
border: 2px solid
}
Total bredd
300px
+40px
+20px
+4px
----364px
Positionering



Egenskap: position, värde: absolute, relative,
static eller fixed
Absolute – placerar elementet i en position
relativ till elementets förälder
Relative – placerar elementet i en position
relativ till dess utgångsposition
Absolute
#navigationList {
text-align: center; margin-left: 0;
position: absolute; top: 70px; right: 10px;
}



Dokumentträdet: #container > #main >
#navigationList
#main är #navigationList:s förälder
#navigationList placeras 70px från #main:s
topp och 10px från #main:s högerkant
Relative
h1 {
background: white; width: 200px;
border: 1px solid black;
position: relative; top: -20px; left: -20px;
}

Elementet h1 placeras 20px ovanför och
20px till vänster om dess utgångsposition
Rubrik
Visuell struktur
header
main
navigation
List
content
footer
container
Görs möjlig med CSS
#container {
position: relative; margin: auto; width: 750px; padding: 10px;
}
#header {
width: 750px; margin: 0 0 10px 0;
}
#main {
width: 750px; margin: 0 0 10px 0;
}
#navigationList {
width: 140px; margin: 0 10px 0 0; float: left;
}
#content {
width: 600px; margin: 0; float: left;
}
#footer {
width: 750px; margin: 0;
}
Exempel
float: left?!?


Bryter ut ett element ur det normala flödet och
placerar det så långt till vänster som möjligt
…men detta sparar vi till nästa gång