Introduction to XML, XHTML and CSS

Introduction to xhtml and css Jussi Pohjolainen TAMK University of Applied Sciences

EXTENSIBLE MARKUP LANGUAGE

Extensible Markup Language

XML is a specification for creating custom markup languages

Subset of SGML

XML languages: RSS, MathML, SVG, XHTML

W3C Recommendation

XML and SGML SGML XML RSS XHTML SVG HTML

XML Example

<?xml version=“1.0” encoding=“utf-8”?>

<books>

<book id=“A01”>

<title>Designing Web Usability</title>

<author>Jakob Nielsen</author>

<book>

</books>

XML Well Formed

XML Declaration

One root-element

Every tag is opened and ended

Attributes inside “ ”

Case-sensitivity

XML Example

<?xml version=“1.0” encoding=“utf-8”?>

<!DOCTYPE books SYSTEM “books.dtd”>

<books>

<book id=“A01”>

<title>Designing Web Usability</title>

<author>Jakob Nielsen</author>

<book>

</books>

DTD Example: books.dtd

<!ELEMENT books (book+)>

<!ELEMENT book (title, author)>

<!ELEMENT title (#PCDATA)>

<!ELEMENT author (#PCDATA)>

<!ATTLIST book id ID #REQUIRED>

XML Valid

XML document is valid, when it follows it’s dtd

Validation can be done only, if the xml document has dtd (or schema)

XHTML strict 1.0 dtd:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

EXTENSIBLE HYPERTEXT MARKUP LANGUAGE

XHTML

XHTML is a XML based language

XHTML 1.0 / 1.1:

Strict

Transitional

Frameset

XHTML Example

<?xml version="1.0"?>

<!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="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>XHTML 1.0 Example</title>

</head>

<body>

<p>This is a example.</p>

</body>

</html>

General Form

XHTML consists of

Xml-declaration

Document type

XHTML - document

head

body

XHTML Basic Structure

Every element is written in lower case

If element does not contain anything, it’s empty element:

<br></br> <!– line break -->

<hr></hr> <!– horizontal line -->

<img src=”pic.jpg" alt=”picture"></img>

Empty elements should be written like this:

<br/>

<hr/>

<img src=”pic.jpg" alt=”picture"/>

Indenting

Indentation is free in xml

It’s easier to read the document, if you use indentation

One indentation: 4 spaces:

<ul>

<li>Carrot</li>

<li>Tomato</li>

</ul>

Commenting

It’s possible to add comments to xhtml – documents:

Document types

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">a

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd ">

Head

Compulsary: title

Meta-information

See: http://www.cs.tut.fi/~jkorpela/webjulk/1.6.html

Possible linking to stylesheets

Text - elements

p

br

blockquote

pre

em

strong

code.

tt

i

b

big

small

sub

sup

Lists

ul: unordered list

ol: ordered list

dl: definition list

ul and ol items are marked as li

In dl items are marked as dt and dd

Links

See:

http://www.cs.tut.fi/~jkorpela/webjulk/1.5.html

Link to outside

<a href=" http://www.tamk.fi ">tamk</a>

Link within page

<a href=”dog.html">Dog</a>

Images

Use gif, jpeg or png

img-element:

<img src=”pic.jpg" alt=”alternative text"/>

Img as link

<a href=”dog.html"><img src=”dog.png" alt=”dog"/></a>

Tables Title Title Title Cell Cell Cell Cell Cell Cell

Tables

<table>

<tr>

<td>cell</td>

<td>cell</td>

</tr>

<tr>

<td>cell</td>

<td>cell</td>

</tr>

</table>

Table: Heading

<table>

<tr>

<th>Name</th>

<th>Telephone</th>

<th>Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>

Combining Rows and Cols

<table>

<tr>

<td colspan="3">Title</td>

</tr>

<tr>

<td>Title</td>

<td colspan="2">cell</td>

</tr>

<tr>

<td>cell</td>

<td>cell</td>

<td>cell</td>

</tr>

</table>

CASCADING STYLE SHEETS

CSS

CSS is a stylesheet language used to describe the presentation of a document written in markup language

Usually used with (x)html

Defining fonts, colors and layout

Separates document content and presentation

CSS

Merkintäkielten (esim. xhtml) tarkoitus: kuvata dokumentin rakenne.

Ulkoasu luodaan erillisellä tekniikalla: CSS (Cascading Style Sheet)

Eri versioita

CSS level 1 (1996)

CSS level 2 (1998)

CSS level 3 (working draft)

History

CSS1 spec finished 1996, it took three years before browsers supported CSS1

2000 IE 5.0 for Mac was the first browser to fully support CSS1

=> CSS Filtering

Still hundreds of bugs in browsers

CSS support today

Competition

Mozilla Gecko engine (FireFox, Mozilla)

Presto Layout engine (Opera)

KHTML (Apple Safari, Konquer, S60 Browser)

Internet Explorer

CSS and browser compatibility:

http://www.quirksmode.org/css/contents.html

Before CSS

Presentation was part of the document structure:

<h2 align="center">

<font color="red" size="+4" face="Times New Roman, serif">

<i>Usage of CSS</i>

</font>

</h2>

Many problems…

Using CSS

Structure is clear:

<h2>Usage of CSS</h2>

Presentation is clear:

h2 {

text-align: center;

color: red;

font: italic large "Times New Roman", serif;

}

CSS Possibilities

Colors, fonts, layout, sizes, borders..

Possible to do different css – files for printing, mobile devices, desktop computers.

See

http://www.csszengarden.com /

CSS Linking

<html>

<head>

<title>Page</title>

<link rel="stylesheet"

type="text/css"

media="screen"

href="screen.css" />

</head>

<body>

<h1>Title</h1>

<p>paragraph</p>

</body>

</html>

CSS Linking

<html>

<head>

<title>Sivu</title>

<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />

<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

</head>

<body>

<h1>Title</h1>

<p>paragraph</p>

</body>

</html>

CSS General Form

CSS general form

selector declaration

Example:

h1 { color: blue; }

h1 = selector

color: blue; = declaration

Selectors

Element (h1)

Class (.important)

Class (h1.important)

ID (#important)

Contextual (h1 p)

Pseudo (a:link)

Element

XHTML:

<h1>Otsikko</h1>

Css:

h1 {

color: RGB(255,0,0);

}

Class

XHTML:

<h1 class="tarkea">Otsikko</h1>

<p>Tässä tekstiä ja tämä <span class="tarkea">erityisen tärkeää tekstiä</span></p>

<p class="tarkea">Ja tämä vasta tärkeää onkin</p>

Css:

.tarkea {

}

Class

Css:

h1.tarkea {

}

ID

XHTML:

<h1 id="paaotsikko">Otsikko</h1>

Css:

#paaotsikko {

}

Contextual

XHTML:

<ul>

<li>Porkkana</li>

</ul>

Css:

ul li{

}

This is different!

h1, p{

}

Pseudo

Example:

<a href=" http://www.tamk.fi /">TAMK</a>

a:link { color: red; }

a:visited { color: blue; }

a:active { color: lime; }

a:hover { color: green; }

Font-family

sans-serif, example: Helvetica

serif, example: Times

cursive, example: Zapf-Chancery

fantasy, example: Western

monospace, example: Courier

Example:

font-family: verdana, arial, sans-serif

font-style, font-weight

Font-style

normal (default), italic, oblique

example:

font-style: italic;

Font-weight:

normal, bold, bolder, lighter, 100, 200 ... 900

normal = 400

bold = 700

bolder and lighter

font-size

It’s possible to define the font size absolutely, relatively, using unit of length or by percentage

font-size: x-small; /* absolute */

font-size: larger; /* relative */

font-size: 12pt; /* unit of length */

font-size: 80%; /* percentage */

Colors

color: red;

color: rgb(255,0,0);

color: #FF0000;

color: #F00;

Background

Background color:

background-color: #C0C0C0;

Background image:

background-image: url("marble.gif");

Repeat

repeat (oletus): repeat both directions

repeat-x: repeat horizontally

repeat-y: repeat vertically

no-repeat: no repeat

background-attachment: fixed | scroll

Is the image still or does it move when scrolling

Background Image Position

background-position: right top; /* right upper-corner */

background-position: 100% 0%; /* right upper-corner */

background-position: 100%; /* right upper-corner */

background-position: center bottom;/* center bottom */

background-position: 50% 100%; /* center bottom */

background-position: 100%; /* right top */

background-position: 50% 10px; /* center 10 pixels from top */

Text Features

word-spacing

letter-spacing

text-decoration

underline

overline

line-through

blink

Text Features

vertical-align

baseline, middle, sub, super, text-top, text-bottom, top, bottom, prosenttiluku

text-transform

capitalize, uppercase, lowercase

text-align

left, right, center, justify

text-indent

line-height

Introduction to XML, XHTML and CSS

1 comments

Notes on slide 1

6 Favorites