Embed Size (px)
DESCRIPTION
Citation preview
Introduc)on to XHTML and CSS
Jussi Pohjolainen
Tampere University of Applied Sciences
EXTENSIBLE MARKUP LANGUAGE
Extensible Markup Language
• XML is a specifica)on for crea)ng custom markup languages
• Subset of SGML
• XML languages: RSS, MathML, SVG, XHTML
• W3C Recommenda)on
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 Declara)on • One root-‐element
• Every tag is opened and ended • ASributes inside “ ” • Case-‐sensi)vity
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 • Valida)on can be done only, if the xml document has dtd (or schema)
• XHTML strict 1.0 dtd: – hSp://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 – Transi)onal – 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-‐declara)on
– Document type – XHTML -‐ document • head • body
XHTML Basic Structure
• Every element is wriSen 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> <!-‐-‐ picture -‐-‐>
• Empty elements should be wriSen like this: – <br/> – <hr/> – <img src=”pic.jpg" alt=”picture"/>
Inden)ng
• Indenta)on is free in xml • It’s easier to read the document, if you use indenta)on
• One indenta)on: 4 spaces:
<ul>
____<li>Carrot</li>
____<li>Tomato</li>
</ul>
Commen)ng
• It’s possible to add comments to xhtml – documents:
• <!-‐-‐ and here we have a list -‐-‐>
Document types
<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Strict//EN" "hSp://www.w3.org/TR/xhtml1/DTD/xhtml1-‐strict.dtd">
<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Transi)onal//EN" "hSp://www.w3.org/TR/xhtml1/DTD/xhtml1-‐transi)onal.dtd">a
<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Frameset//EN" "hSp://www.w3.org/TR/xhtml1/DTD/xhtml1-‐frameset.dtd">
Head
• Compulsary: )tle • Meta-‐informa)on – See: hSp://www.cs.tut.fi/~jkorpela/webjulk/1.6.html
• Possible linking to stylesheets
Text -‐ elements
• p
• br
• blockquote
• pre • em
• strong
• code
• S
• i
• b
• big • small
• sub
• sup
Lists
• ul: unordered list • ol: ordered list • dl: defini)on list • ul and ol items are marked as li
• In dl items are marked as dt and dd
Links
• See: – hSp://www.cs.tut.fi/~jkorpela/webjulk/1.5.html
• Link to outside – <a href="hSp://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=”alterna)ve 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 presenta)on of a document wriSen in markup language
• Usually used with (x)html
• Defining fonts, colors and layout • Separates document content and presenta)on
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 • S)ll hundreds of bugs in browsers
CSS support today
• Compe))on – Mozilla Gecko engine (FireFox, Mozilla)
– Presto Layout engine (Opera) – WebKit (Apple Safari, Konquer, S60 Browser) – Internet Explorer
• CSS and browser compa)bility: – hSp://www.quirksmode.org/css/contents.html
Before CSS
• Presenta)on 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>
• Presenta)on is clear: h2 {
text-align: center;
color: red;
font: italic large "Times New Roman", serif;
}
CSS Possibili)es
• Colors, fonts, layout, sizes, borders.. • Possible to do different css – files for prin)ng, mobile devices, desktop computers.
• See – hSp://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 declara)on
• Example: – h1 { color: blue; }
• h1 = selector • color: blue; = declara)on
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 {! color: RGB(255,0,0);!}!
Class
• Css: h1.tarkea {! color: RGB(255,0,0);!}!
ID
• XHTML: <h1 id="paaotsikko">Otsikko</h1>!
• Css: #paaotsikko {! color: RGB(255,0,0);!}!
Contextual
• XHTML: <ul>! <li>Porkkana</li>!</ul>!
• Css: ul li{! color: RGB(255,0,0);!}!
• This is different! • h1, p{!
color: RGB(255,0,0);!}!
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: Helve)ca • serif, example: Times
• cursive, example: Zapf-‐Chancery
• fantasy, example: Impact
• 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, rela)vely, 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 (default): repeat both direc)ons • repeat-‐x: repeat horizontally • repeat-‐y: repeat ver)cally • no-‐repeat: no repeat
– background-‐aSachment: fixed | scroll • Is the image s)ll or does it move when scrolling
Background Image Posi)on
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 • leSer-‐spacing • text-‐decora)on – underline – overline – line-‐through – blink
Text Features
• ver)cal-‐align – baseline, middle, sub, super, text-‐top, text-‐boSom, top, boSom,
prosenyluku
• text-‐transform – capitalize, uppercase, lowercase
• text-‐align – lez, right, center, jus)fy
• text-‐indent
• line-‐height
