Essential Tags
XHTML 1.0 strict requires the following tags to be in your html
source file:
COMPSCI 111 / 111G
html
head
title
body
An introduction to practical computing
XHTML and CSS
XHTML 02
Example Source Code
<?xml version="1.0" encoding="utf-8"?>
<!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>
<title>A sample page</title>
</head>
<body>
<h1>Example</h1>
<p>This is a complete xhtml web page. You can verify that all the
code is correct using the <a href=http://validator.w3.org">W3C
Validator</a>.</p>
<h2>Images</h2>
<p>If your code is correct, then you can include an image to show
that the page is validated.</p>
<p>
Author: Andrew Luxton-Reilly<br></br> Date: 01/04/06<br></br>
</p>
<p>
<img src="http://www.w3.org/Icons/valid-xhtml10"
alt="Validated xhtml logo"></img>
</p>
</body>
</html>
Resulting Web Page
Today
Tables
<table>
Tables in XHTML
Used to format tables of information
By default, there are no borders shown
Style sheets
XHTML 02
XHTML 02
Tags required to format Tables
A simple table example
Tags
<table> </table>
border attribute
<tr> </tr>
<td> </td>
<html>
<head>
<title>TABLES</title>
</head>
<body>
<p>What follows is a simple table</p>
Surrounds the entire table
Used to display table border
Identifies a row in the table
Each element/cell of data in the row
<table border=1px>
<tr>
<td>One row</td><td>Two Columns</td>
</tr>
</table>
Row
<tr>
<td> </td>
<td> </td>
</tr>
Data
XHTML 02
</body>
</html>
XHTML 02
Table Exercise
Styles
Exercise 1: Write a fragment of XHTML code that will generate a table with
2 rows and 1 column. The text in the first row should be first row and
the text in the second row should be second row. The table should
have a 1 pixel border.
A style changes the way the HTML code is displayed
Same page displayed using different styles
http://csszengarden.com
XHTML 02
Defining a style
XHTML 02
10
Grouping rules
Styles are defined using rules
Multiple tags that use the same rule
Selector determines what the rule applies to
Property the thing that will be changed
Value the value that will be used
h1 { font-weight:
bold }
h2 { font-weight:
bold }
Same style defined for multiple selectors
h1, h2 { font-weight:
Property
bold }
Value
h1 { color: green; }
Selector
XHTML 02
11
XHTML 02
12
Grouping rules
Class selectors
Same tag using multiple rules
Sometimes want to apply a style to specified tags
h1 { color: green }
h1 { text-align: center }
Most paragraphs are normal
Some paragraphs are quotes
Apply multiple properties to the same selector
Define a style that can be applied to a group of tags
h1 {
color: green;
text-align: center;
}
Class selector
.className { property: value; }
In XHTML source code
Assign the tag to the class
Use an attribute
<tag class=className> </tag>
XHTML 02
13
XHTML 02
Example class selector
14
Id selectors
Style defined as follows:
Sometimes want to apply a style to a single tag
E.g. Defining a special heading
.quote
{
text-align: center;
font-style: italic;
Define a style that can be applied to a single tag
Id selector
#idName { property: value; }
Xhtml source code uses the style as follows:
<p class=quote>
Let's face it, the average computer user has
the brain of a Spider Monkey --- Bill Gates
</p>
In XHTML source code
Use an attribute to specify the id used for the tag
<tag id=idName> </tag>
XHTML 02
15
XHTML 02
16
Example id selector
CSS Exercise
Exercise 2: What is a selector in a CSS style?
Style defined as follows:
#footer
{
text-align: center;
font-style: italic;
}
Xhtml source code uses the style as follows:
<p id=footer>
Copyright 2006
</p>
XHTML 02
17
XHTML 02
Location of the styles
18
External Style Sheet
Three possible locations
Styles are defined in a file
External style sheet
Internal style sheet
Inline styles
Used when styles apply to more than one web page
Entire site has a consistent visual theme
.quote { text-align: center; }
Saved in a file
called theme.css
h1 { color: green; }
Web page must be told where to find the style sheet
<link> tag has 3 attributes:
rel specifies relationship between current document and linked document
href specifies location of linked document
type specifies media type of linked document
<head>
<title> </title>
<link rel=stylesheet href=theme.css type=text/css></link>
</head>
XHTML 02
19
XHTML 02
20
Internal Style Sheet
Inline styles
Styles are defined in the head of the page
Styles are defined in the tag
Used when styles apply to only the one web page
Keeps all the visual formatting located in the same place
Used when style is applied only to that tag
Can be required to override styles
<style type=text/css>
Used in the head of the document to contain styles
type attribute specifies media type of the <style> tag
<p style=text-align: center;>
This paragraph will be centred using
an inline style.
</p>
<head>
<title>Example</title>
<style type=text/css>
.quote { text-align: center; }
h1 { color: green; }
</style>
</head>
XHTML 02
21
Cascading Style Sheets
Browser default
External style sheet
Internal style sheet
Inline styles
22
CSS Exercises
Exercise 3: Write a simple XHTML page with the title Simple CSS
example. The body of the page should contain a single paragraph
with the text Hello. The text should have the color property
set to green. An internal style sheet should be used to define an
appropriate style that can be applied to the paragraph.
Order to apply styles
1.
2.
3.
4.
XHTML 02
Increasing priority
http://en.wikipedia.org/wiki/Cascading_Style_Sheets
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS)
XHTML 02
23
XHTML 02
24
CSS Exercises
CSS Exercises
Exercise 4: Put the following into decreasing order of priority. The
item at the bottom of the list should have the lowest priority.
<html>
<head>
<title>Simple CSS Example</title>
<style type=text/css>
p {color: green;}
</style>
</head>
<body>
<h1>test</h1>
<p>Hello World</p>
</body>
</html>
XHTML 02
Internal style sheet, Browser default, Inline styles, External style sheet
25
<div> and <span>
XHTML 02
26
No CSS
Two additional tags used with CSS
Allow a style to be applied to arbitrary group of elements
<div>
Block-level tag
May contain other block-level tags
Invisible in XHTML, but can have styles applied
<span>
Inline tag
May contain other inline tags
Invisible in XHTML, but can have styles applied
XHTML 02
27
XHTML 02
28
CSS Example
Same page with a style sheet
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
body {
font-family: sans-serif;
}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS Example</title>
<link rel="stylesheet" href="mystyle2.css" type="text/css"></link>
</head>
<body>
<h1>Example</h1>
<p>This is a complete xhtml web page. You can verify that all the code is
correct using the <a href="http://validator.w3.org">W3C Validator</a>.</p>
<h2>Images</h2>
<p>If your code is correct, then you can include an image to show that the
page is validated.</p>
<div id="footer">
<p>
<span class="emphasize">Author:</span> Andrew Luxton-Reilly<br />
<span class="emphasize">Date:</span> 01/04/06<br />
</p>
<p>
<img src="http://www.w3.org/Icons/valid-xhtml10"
alt="Validated xhtml logo"></img>
</p>
</div>
</body>
</html>
XHTML 02
h1,h2 {
text-align: center;
background-color: black;
color: white;
}
#footer{
border-top-width: thick;
border-top-style: solid;
font-size: small;
}
.emphasize{
font-weight: bold;
}
29
Same page, different style sheet
body {
background-color: #eeffee;
}
h1,h2 {
text-align: right;
border-bottom-style: solid;
color: black;
text-transform: uppercase
}
#footer{
text-align: right;
font-size: small;
}
.emphasize{
font-style: italic;
}
XHTML 02
31
XHTML 02
30
