Chapter 4

The world wide web

Learning outcomes

Explain in general terms how web

documents are transferred across the
Internet and
What processes are triggered when you
click on hyperlink
Code web pages using HTML and XHTML
using style sheets.
Explain why it is advisable to use XHTML
rather than HTML
Describe some technologies available for
dynamic web pages

Essential Reading

Joe Casad, Teach yourself TCP/IP, Ch. 17

William Buchanan, Mastering The Internet,
Ch. 6-8
Introductory materials on HTML & XHTML
either a text book such as
John

Shelly, HTML AND CSS explained, or

http:/www.webMonkey.com
http://www.w3schools.com

Additional reading

William Buchanan, Mastering The Internet, Ch.

9-10
Andrew Tanenbaum, Computer Networks, Ch.
7.3
Douglas Comer, Computer Netwoks and
Networking, ch. 32-33
Chuck Masciano and Bill Kennedy, HTML and
XHTML the definitive guide, for reference
http://www.pcnetworkadvisor.com
Mike Lewis, Understanding Javascript, JuneJully 2000

How the web works

The client-server model

Client and server operate on machines which are able
to communicate through a network
The server waits for requests from a clients
Server receives a requests from a client
Performs a the requested work
Or lookup the requested data
And send a response to the client

Servers: file servers, web servers, name servers

Clients: browsers, email clients

url format

<scheme>://<server-domain-name>/<pathmane>

<scheme> which protocol to use

http: in general
file: which tells the client document is in a local machine
ftp: file transfer protocol

<server-domain-name> identifies the server system

i.e. www.doc.gold.ac.uk

<pathname> tells the server where to find the file

http://doc.gold.ac.uk/~username/index.html

Web browsers and servers

A browser: is a program that can retrieve

files from the world wide web and render
text, images, or sounds encoded in the files.
i.e.

IE, Nescape, Mozilla

A web server: is an application which waits

for client requests, fetches requested
documents from disk and transmits them
the client.
i.e

Apache

What happened when you

click on hyperlink?

Determine URL and extract domaine name.

Use the name server to get IP address
(DNS)
Make a TCP connect to port 80
And send a request for a web page once
the server has accepted to connection.
The server send the file and releases the
TCP connection
The client displays the document.

Other possibilities

The steps in the previous slide are for displaying a static

web page from a remote machine.
Other possibilities are:

Page is loaded from a local system

no tcp connection
url begin with file://...

The page is dynamically generated by a client-side script

No tcp connection

The page is dynamically generated by a server-side script:

The server may carry out other functions

Secure server
Check users identity if they are authorised to access a particular
resources

Stateless connection

Both client and server release TCP connection after a

page has been transferred.
HTTP1.0 is stateless
Connections are not persistent
There is no indication to the server whether new
transactions involve the same client
HTTP 1.1 is persistent
By keeping track of the client IP addresses
However, there is no way of identifying a repeated
visits to the site by the same user.
Futhermore, ISPs reallocate IP addresses to dial-up
customers as new user dial in.

Cookies

Request the browser to store a small data

file (cookie) on the users hard disk.
Which can serve to identify users only.
For instance it could contain a key into a
database on the server machine.
Most browsers nowadays allow you to
decide whether or not you want cookies on
your machine.

Introduction to HTML

What is an HTML File?

HTML stands for HyperText Markup Language

An HTML file is a text file containing small markup tags

The markup tags tell the Web browser how to display the page

An HTML file must have an htm or html file extension

An HTML file can be created using a simple text editor

Internet - Services

Email & MIME (Multipurpose Internet Mail Extensions)

text (text/html), image, video, etc.
Telnet & ssh
FTP File Transfer Protocol
Gopher
IRC Internet Relay Chat
Newsgroups
WWW World Wide Web
HTTP (Hypertext transfer protocol) uses a QuestionAnswer-Scheme, i.e. a browser sends a request und gets a
response from a server. Note the server does not send out
anything without a request.

Markup languages

Suppose we have a document containing only plain text

We tag certain parts of the document to indicate what

they are and how they should be formatted

This procedure is called marking-up the document

Tags are usually paired:
e.g. <title>My Memoirs</title>

A pair of tags plus their content constitute an element

Un-paired tags are called empty tags

Markup languages

Physical vs Semantic markup

physical refers to appearance (style) on the page
semantic refers to structure and meaning

HTML is the HyperText Markup Language

HTML is based on SGML (Standard Generalised Markup
Language) which is more complex

HTML has a fixed set of tags but is constantly evolving,

but newer versions are downward compatible

Markup languages

HTML places primary emphasis on structure

paragraphs, headings, lists, images, links,
.
HTML places secondary emphasis on style
(CSS)
fonts, colours, .
HTML does not label the meaning of the text
(XML)

A basic document

Every document should start with the following line

<!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN>

There are three required elements, defined by the tags <html>,

<head> and <body>
<html>
<head>
<title>My Home Page</title>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>

Basic structure elements

first and last tags

The HEAD section
must come before the BODY section
contains generic information about the document
Elements specified in the HEAD section can include
title, link, script, style
The BODY section
contains the content of the document (text, images
etc)
this content is structured by other tags

Block elements

Block elements define sections of text, usually preceded by

a blank line
<p></p> - paragraph
<h1></h1>...<h6></h6> - headings
<pre></pre> - preserve (original format)
<blockquote></blockquote> - indented text
<div></div> - division
used to identify a section of the document that may be
subject to special formatting (for example, using
stylesheets).

Paragraphs
Paragraphs: <p>...</p>
force a break between the
enclosed text and the text
surrounding it
the tagged region of text may be
subject to special formatting
<p align="center">Here is
another paragraph</p>
align is an attribute of the
paragraph tag
center is the value of the align
attribute

<p>here is a piece of
text that has been
placed inside a
paragraph</p>
<p align="center">Here
is another
paragraph</p>

Headings

Six levels of importance

<html>
<h1>...<h6>
<head>
Use headings to divide
<title>Headings</title>
document into sections
</head>
<body>
<h2>Chapter 1</h2>
<h3>1. Introduction</h3>
This is the introduction
<h3>2. Next section</h3>
This is the next section
<h4>2.1 A subsection</h4>
This is a subsection
</body>
</html>

Element relationships

The elements marked by tags form a hierarchy

The root element is html (marked by <html>...</html>)
It usually has two children: head and body
each of these are further subdivided
There are rules for which elements can contain other elements
e.g. headers cannot contain headers
see http://www.w3.org/ for a full list of rules
Elements must not overlap each other
we cannot have: <h1>...<a..> ... </h1>...</a>
we can have: <h1>...<a..> ... </a>...</h1>

Inline descriptive elements

Descriptive elements affect the
appearance of text depending on
how the text is described

<em></em> emphasis, usually with

italics

<strong></strong> strong,
usually with bold

<cite></cite> citation, usually in

italics

<code></code> usually results in

monotype spacing

<body>
A <em>fascinating</em>
subject that I
<strong>must</strong>
understand
</body>

Inline explicit style elements

<boldface></boldface>
<big></big> bigger font than surrounding text
<small></small> smaller font than surrounding text
<i></i> italics
<s></s> strikethrough
 subscripts
 superscripts
<span></span> delimits text for stylesheet control
<div></div> delimits blocks of text for stylesheet control

Inline explicit style elements

<font> attributes
face - name of font (must be installed)
"arial", "times", "verdana", "helvetica"
size - absolute size (1-7), or relative to previous text
"2", "5", "7", "+1", "-2"...
color - hexadecimal RGB, or a named color
"3399dd", "blue", "red"
weight - boldness from 100, 200, ..., 900
"100", "300", "900"
e.g.
<font face="arial" size="+1" color="pink" weight="300">

Unordered lists

Unordered lists <ul>...</ul>

<li>...</li> for the list
elements
each item has a bullet
some normal text
<ul>
<li>apples</li>
<li>oranges</li>
<li>pears</li>
<li>bananas</li>
</ul>

Ordered lists

Ordered lists <ol>...</ol>

<li>...</li> for the list elements
each item has a number

some normal text

<ol>
<li>apples</li>
<li>oranges</li>
<li>pears</li>
<li>bananas</li>
</ol>

Definition lists

<dl></dl> The enclosing tags

<dt></dt> The definition term
<dd></dd> The definition

<dl>
<dt>MIME</dt>
<dd>
Multipurpose...
</dd>
<dt>FTP</dt>
<dd>
File transfer...
</dd>
<dt>TCP</dt>
<dd>
Transmission...
</dd>
</dl>

Nested lists

A list may contain another list

The inner list is nested inside the
outer list

<body>
<ol>
<li>apples</li>
<ul>
<li>red</li>
<li>green</li>
</ul>
<li>oranges</li>
<li>pears</li>
<li>bananas</li>
</ol>
</body>

Comments

Comments are delimited by <!-- and -->

<! this is a comment -->

Comments may span multiple lines

<body>
<!-this is
a comment
-->
</body>

Horizontal lines

To insert a horizontal line to

divide up parts of a document
we use the empty tag <hr>
Attributes: align, size (in
pixels), width (in pixels or
percentage), noshade

<body>
<h1>Chapter 1</h1>
<hr align="center" size="3" width="50%" noshade>
<h2>Introduction</h2>
</body>

Special characters

Some characters such as <, >, "

and & have special meanings.
To prevent them being interpreted
as HTML code, they must be
written as follows: &lt; &gt;
&quot; &amp;
Blank space is normally ignored
in HTML. To include a space in
your document use: &nbsp;

<body>
A <em> &lt;
fascinating &gt; </em>
subject that I
<strong>m&nbsp;u&nbsp;
s&nbsp;t</strong>
understand
</body>

Links

The link (anchor) element <a>...</a> provides hypertext links

between
1. different documents (using a URL)
2. different parts of an individual document
User selection of the link (hot spot) results in
1. retrieval and display of the designated document
2. movement to relevant part of same document
<body>
The Department of
<a href="http://www.doc.gold.ac.uk/index.html"> Computer
Science</a> is a very ....

</body>

Link with URL

Example:
<body>
The Department of
<a href="http://www.doc.gold.ac.uk/index.html">
Computer Science</a> is a very ....
</body>

The href attribute gives the

URL of the target page
The text between the tags is
highlighted selecting it
activates the link

Relative addressing
The

previous example gave the full path name, known as the absolute address

<a href="research.html">Research</a>
<a href=./pub.html">Publications</a>
<a href="../../index.html">Computer Science home</a>

The root directory for the link is assumed to be the

directory containing the parent page of the link

Images

Images are included using the empty tag <img>

Example:
<img src="mypicture.gif" alt="my picture">
The src attribute specifies the file containing the image
absolute or relative path names can be used (see notes for
links)
The alt attribute specifies the text to be displayed if the image is
not viewed

some

users choose not to display images (for

faster download)
also used for compatibility with older browsers

Image attributes

The size attributes control the size of the image

<img src="cat.gif" height="60" width="90" align=top alt="cat">

The align attribute controls the vertical location of the image,

relative to the line of text
align="top"
top of image aligned with top of text
align="middle" centre of image aligned with centre of text
align="bottom" bottom of image aligned with baseline of text

The align attribute also controls the horizontal location of the image,
relative to the line of text
align="left"
image aligned with left margin
align="right" image aligned with right margin

Links with images

A link element can include an image instead of text

both images and text can be included if required
<body>
Enter my world of cats <a href="cats.html"><img
src="cat.gif" height="60" width="60" align="middle"
alt="cat"></a>
</body>

Colour

Colours are specified with hexadecimal

numbers for the red, green and blue primary
colours, preceded by a #.
To set the background colour of a web page

<body bgcolor="#994422">

Colour RGB Model

#ff0000 (red),
#00ff00 (green)
#0000ff (blue)
#ffff00 (yellow)
...
#3395ab (a pastel blue)

Colour
<body text="#994422">

To set the colour of all text on a page

In the body element, the colour of link text can be controlled with the
following attributes:
link
for an un-visited link
vlink
for a visited link
alink
for a link that is currently selected by the mouse
Example
<body text="#000000" link="#0000ff">

Colour

To set the colour of an individual piece of text use the font element
(or preferably stylesheets see later)

<body bgcolor="#3395ab">
Text in quotes <font color="#ff0000">"such as
this"</font> has a different colour
</body>

Colour names

Netscape and Internet Explorer allow textual names for

colours instead of hexadecimal
This is OK provided the page is not looked at by a
browser that does not support colour names
For example

<body bgcolor="gray" text="black" link="blue">

Background patterns
Rather than a uniform color
You can give the background of web
page a pattern as follow:

<body background="tileimage.gif">

Forms

Server-based programs may return data to the

client as a web page

Client-side scripts can read input data

To validate the data, prior to sending to
server
To use in local processing which may output
web page content that is displayed on the
client

Example applications

Questionnaires to provide feedback on a web site

e-commerce, to enter name, address, details of purchase

and credit-card number
request brochures from a company
make a booking for holiday, cinema etc.
buy a book, cd, etc
obtain a map giving directions to a shop

Run a database query and receive results (an important

part of e-commerce)

Input types

text
checkbox
radio
select
textarea
password
button
submit
reset
hidden
file
image

(buttons)
(options)

The method and action

attributes
The method attribute specifies the way that form data is sent to the
server program
GET appends the data to the URL
POST sends the data separately
The action attribute specifies a server program that processes the
form data (often as a URL)

<body>
<form method="POST" action="comments.php">
<h2>Tell us what you think</h2>
<!-- etc -->
</form>
</body>

The input element:

type="text"
The type attribute specifies the
type of user input
The name attribute gives an
identifier to the input data

<form method="POST" action="comments.php">

<h2>Tell us what you think</h2>
Name <input name="name" type="text" size="20"><br>
Address <input name="address" type="text" size="30">
</form>

The input element:

type="checkbox"
The name attribute is used to
define a set of checkboxes
The value attribute identifies
the individual checkbox
If the checked attribute is set
the box is initially checked
How did you hear about this web site?<br>
A friend
<input type="checkbox" name=name" value="friend"><br>
Search engine
<input type="checkbox" name=name" value="engine"><br>

The input element:

type="radio"
Radio buttons are similar to
checkboxes, but only one can be
selected
To select a button by default, use
the checked attribute (for one
button only)

How did you hear about this web site?<br>

A friend
<input type="radio" name=name" value="friend"><br>
Search engine
<input type="radio" name=name" value="engine"><br>
<! etc -->

The input element:

type="button"
The name attribute uniquely identifies
a button
The value attribute gives a label to
the button
Actions can be associated with
buttons using JavaScript
see later
Do you want to receive any further information:<br>
<input type="button" name="yes" value=" Yes ">
<input type="button" name="no" value=" No "><br>

The input element:

type="submit/reset"
type="submit"
clicking this button sends the
form data to the program
(URL) specified in the
action attribute of the form
type="reset"
clicking this button clears all
data entered so far
Thank you<br>
<input type="submit" name="send" value="Send">
<input type="reset" name="clear" value="Clear"><br>

The input element:

type="password/file/hidden"
type="password"
similar to type="text" except that the input is
echoed with asterisks (so not visible)
type="file"
provides a file dialogue box to specify a file that is
sent to the server
type="hidden"
similar to text input, but the value attribute is used to
specify data that is to be sent to the server. Nothing
appears on the screen.
The data might be set by a server program to keep
track of the details of a particular transaction.

The textarea element

Used for multi-line text input
The size of the input area is
specified with the cols and
rows attributes
Any text placed inside the
element appears in the input
area (this can be deleted).
Please write your comments:<br>
<textarea name="comments" rows="5" cols="20">
put text here
</textarea>

The select element

The select element provides a
menu of options
An option can be selected by default
using the selected attribute
(otherwise the first in the list is
initially selected)
How do you rate this site?<br>
<select name="rating">
<option>Good
<option selected>Bad
<option>Ugly
</select>

Tables
Tables

provide a means of
organising the layout of data

table is divided into rows and

columns: these specify the cells
of the table

Tables

<table>
element

main

<tr>

table row

<th>

table header

<td>

table data

<table border="1">
<tr>
<th>Name</th>
<td>A B Morgan</td>
<td>D P Jones</td>
</tr>
<tr>
<th>Course</th>
<td>Fishing</td>
<td>Sailing</td>
</tr>
<tr>
<th>Year</th>
<td>8</td>
<td>5</td>
</tr>
<tr>
</table>

Rows and
Columns

Cells can span

multiple columns and
multiple rows with the
colspan and
rowspan attributes

<table border="1">
<tr>
<th colspan="2">Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>A B</td>
<td>Morgan</td>
<td rowspan="2">Fishing</td>
<td>5</td>
</tr>
<tr>
<td>D J</td>
<td>Jones</td>
<td>8</td>
</tr>
<tr>
</table>

The align and width attributes

The align
attribute
determines the
position of the
text within a cell
The width
attribute
determines the
width of the row
relative to the
table

<table border="1" align="center">

<tr>
<th colspan="2" width="60%">Name</th>
<th rowspan="2">Course</th>
<th rowspan="2">Year</th>
</tr>
<tr>
<th>Last</th>
<th>Init.</th>
</tr>
<tr>
<td>Morgan</td>
<td>AB</td>
<td>Fishing</td>
<td align="center">5</td>
</tr>
<! etc -->

Table attributes
Table attributes

align alignment relative to the page

width in pixels or percentage of page width
border - width of border (pixels)
cellspacing separation between cells (pixels)
cellpadding - space around data inside cell (pixels)
bgcolor - background colour (inside cells)

Furthermore
The <caption> element puts a title above the table

Table attributes
<table border="3" align="center" cellspacing="6"
cellpadding="6" bgcolor="cyan">
<caption>
<h2>Course Data</h2>
</caption>
<tr>
<th>Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>A B Morgan</td>
<td>Fishing</td>
<td>5</td>
</tr>
<! etc -->

Frames and Framesets

A frameset partitions a web browser

window so that multiple web documents
can be displayed simultaneously.

Example application: To maintain a

permanently visible directory of links
within your site, while also displaying one
or more selected documents from the
site.

Framesets
<html>
<head><title>Frames 1</title></head>
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frame name="mainF" src="intro.html">
</frameset>
</html>

The frameset element replaces

the body element

frameset has attributes cols or

rows, defined in terms of pixels,
percentage(%) or unspecified (*)
this splits the window into two
or more columns or rows

Frame attributes
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frame name="mainF" src="intro.html">
</frameset>

The name attribute uniquely identifies the frame.

It may be used as the target in an anchor (<a>)
element

The src attribute specifies the web page to be

placed in the frame initially (it may subsequently
be overwritten)

Frame attributes
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frame name="mainF" src="intro.html">
</frameset>

The scrolling attribute ("auto", "yes",

"no") specifies whether the frame is to have
scroll bars

The frameborder attribute ("0", "1")

specifies whether the frame is to have a border

navigation.html

The anchor tag has a target attribute

takes

the name of the frame used to display the information

All anchors below are targeted to the "mainF" frame

<html><head><title>Navigation Bar</title></head>
<body><center>
<a href="course.html" target="mainF">HTML Course</a><br><br>
<a href="paragraph.html" target="mainF">Paragraphs</a><br>
<a href="headings.html" target="mainF">Headings</a><br>
<a href="ulists.html" target="mainF">Unordered lists</a><br>
<a href="olists.html" target="mainF">Ordered lists</a><br>
<a href="nlists.html" target="mainF">Nested lists</a><br>
<a href="intro.html" target="mainF">Home</a><br>
</center></body>

intro.html
A simple document which is initially placed in the
"mainF" frame
This is replaced when a user clicks on a link in the
"navF" frame

<html>
<head><title>Internet Computing</title></head>
<body>
<h2>Welcome to the HTML Course</h2>
<p>
<h4>Please select the subject of...</h4>
</p>
</body>
</html>

Nested framesets
<html>
<head><title>Frames 2</title></head>
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frameset rows="30%,70%">
<frame name="upperF" src="intro.html">
<frame name="lowerF" src="course.html">
</frameset>
</frameset>
</html>

Noframes
Some browsers cannot process frames. Alternative
content should be provided using the noframes element
<html>
<head><title>Frames 1</title></head>
<frameset cols="140,*">
<frame name="navF" src="navigation.html">
<frame name="mainF" src="intro.html">
</frameset>
<noframes>
<body>
Something here for browsers not supporting frames
</body>
</noframes>
</html>

Stylesheets

One of the most important functions of HTML is its ability

to separate the content and presentation of a web
document

Aspects of the document presentation include

positioning on the page
choice of fonts
colours and backgrounds
borders

Styles

A style is a set of formatting instructions that can be

applied to a piece of text.

Styles can be defined

Within a single HTML tag Inline styles

In the <head> section, and applied to the whole

document Global styles

In external files, and can be applied to any

document by including the URI of the file
Stylesheets

Inline styles

Every tag has a style attribute

This can be assigned a style definition

A style definition is a list of property-value pairs

a property is separated from its value by a colon

property-value pairs are separated by semi-colons

the list is delimited by quotation marks

A property-value pair is also called a declaration

Inline styles only affect the text contained in the tag

<h1 style="color:#2255ff; border:ridge">Inline styles</h1>

Inline styles
<body>
<h1 style="color:blue; border:ridge">
Inline styles</h1>
<p style="margin-left:10%; background:#ffffcc">
some text . . . some text
</p>
<body>

The heading is boxed with

the text displayed in blue

The paragraph is indented

by 10% (from the left) and
has a cream background

Global styles

A style can be defined in

the head of the document
using the <style> tag

The style declaration is

placed inside a comment
so that it can be ignored by
older browsers

Each style rule consists of

the name of an element
(selector) followed by a list
of property-value pairs
enclosed in curly brackets

<head>
<title>Styles</title>
<style>
<!-h1 {
color: red;
border: thin groove;
text-align:center;
}
-->
</style>
</head>
<body>
<h1>Simple styles</h1>
</body>

Example
<head>
<style>
<!-h1 {
color: red;
border: thin groove;
text-align:center;
}
p {
margin-left: 10%;
border: ridge;
background: #ee8822;
}
-->
</style>
</head>
<body>
<h1>Simple styles</h1>
<p>some text . . . </p>
</body>

A global style applies to

every instance of the
corresponding element
in the document

Stylesheets

Styles can be declared in separate files called stylesheets.

A stylesheet is linked to a web document by including the following

line in the head section
<link rel="StyleSheet" type="text/css" href="URL">

rel specifies the type of link being used

href specifies a hyperlink to the stylesheet file
type specifies the MIME type of the data
text/css describes the cascading style sheets type

Multiple stylesheets

The first stylesheet is included using the <link> tag

Any further stylesheets have to be imported

The @import command is placed inside a comment

<head>
<title>Stylesheets</title>
<link rel="StyleSheet" type="text/css"
href="http://www.abc.com/mainstyles.css">
<!
@import
url(http://www.abc.com/deptstyles.css)
url(mystyles.css)
-->
</head>

Cascading stylesheets

Multiple stylesheets can be included in a document

Styles defined in the first stylesheet are overridden by
corresponding styles defined in the second stylesheet
the

stylesheets are said to cascade

Example
mainstyles.css the company's stylesheet
deptstyles.css the department's stylesheet
mystyles.css the user's stylesheet
If the stylesheets are included in this order, the user's
style definitions will override the department styles,
which in turn will override the company styles

Cascading stylesheets

Different stylesheets for different media, platforms and

systems
Font size in CSS does not yield sam results on
different screens. On Print Media 10pt size fonts are
always the same size because the size of a pt is well
defined. The conversion of pt to px (pixel) is different
on Windows, Linux or Mac OS X platforms.
Browser allow to customize layout and fonts

Style rules

A style rule has two parts

a selector (element name) and a set of declarations

The selector associates the style rule with a HTML tag of

the same name

Each declaration has two parts:

a property and a value
For readability, each declaration
should be placed on a separate
line

selector {
property:
property:
property:
property:
}

value;
value;
value;
value;

Style rules
Some properties can be given multiple values
The browser first looks for the "Book Antiqua" font
If this is not on the system, it looks for the Times font
Last resort: the browser uses the generic serif font

body {
background-color: lightgreen;
}
h1 {
color: lightgreen;
background-color: blue;
font-family: "Book Antiqua", Times, serif;
border: thick groove #9baab2;
}

Properties and values

Fonts

font-family: <family name> [<generic family>]

font-style: normal|italic|oblique

font-weight: normal|bold|bolder|lighter

font-size: small|medium|large|smaller|larger

Backgrounds and colours

color: <value>

background-color: <value>|transparent

background-image: URL|none

Properties and values

Text
text-decoration: none|underline|overline|
line-through
text-transformation: none|capitalize|
uppercase|lowercase
text-align: left|right|center|justify
text-indentation: length|percentage
Example: To remove underlining on links:

a:link, a:visited, a:active{text-decoration: none}

Properties and values

Boxes

margin: length|percentage|auto {1,4}

border-width: thin|thick|medium|length {1,4}

padding: length|percentage {1,4}

border-color: value {1,4}

border-style: none|dotted|dashed|solid|
double|groove {1,4}

ridge: value {1,4}

width: length|percentage|auto

height: length|auto

Properties and values

Position

location: absolute|relative|fixed
absolute: relative to upper left corner of window
relative: relative to the last item
fixed:
does not move when the page is
scrolled

left: distance from left border of window (pixels, %)

top: distance from top border of window (pixels, %)

Classes

Simple style rules change the appearance of all

instances of the associated element

A class is a style definition that may be applied as and

when we choose
if we don't want the styles, we don't have to use them

Simple classes are applied to a single type of element

Anonymous classes can be applied to any type of

element

Simple classes
</head>
<style>
<!-h1.fred {
color: #eeebd2;
background-color: #d8a29b;
border: thin groove #9baab2;
}
-->
</style>
</head>
<body>
<h1 class="fred">A Simple Heading</h1>
<p>some text . . . some text</p>
</body>

Anonymous classes
</head>
<style>
<!-.fred {
color: #eeebd2;
background-color: #d8a29b;
border: thin groove #9baab2;
}
-->
</style>
</head>
<body>
<h1 class="fred">A Simple Heading</h1>
<p class="fred">some text . . . some text</p>
</body>

white

CSS Classescont.
TD {font-face : sans-serif; font-size : 12pt}
.even {background-color : #FFFFFF}
.odd {background-color : #CCCCCC}

In your HTML code for the table:

you simply reference the class to invoke the style:

<td class=even>display this text with a white background

</td>
<td class=odd>and this text with a grey background
</td>

grey

IDs
<head>
<style>
<!-#list1 {
color: blue;
background: cyan;
text-decoration: underline;
border: thin groove red;
}
-->
</style>
</head>
<body>
<ul id="list1">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</body>

Classes specify styles for

particular instances of an
element
IDs specify the style of a
single element

IDs allow the

element to be
identified by other
elements on the
page

<DIV> & <SPAN> are your friends

<div> and <span> tags allow you define exceptions to the general
rules of your body textand they are helpful tools for
document designers and web developers
<div> is usually used to designate styles for block elements that
should stand apart from the body textlike callout quotes.
Everything inside a <div> tag takes on the <div> attributes
and you can specify classes and ids for <div> too!

Divisions and spans

Rather than applying styles to an element itself,

we wrap the element in
a div element (usually for block elements), or
a span element (usually for inline elements)

Any required formatting can then be applied to

the <div> or <span> element.

Div and span elements become part of the

document
In particular, each can have class and id
attributes

Divisions
<head>
<style>
<!-.myclass {
color: blue;
background: cyan;
text-decoration: underline;
border: thin groove red;
}
-->
</style>
</head>
<body>
<div class="myclass">
<h2>A Simple Heading</h2>
<p>some text . . . </p>
</div>
</body>

Styles can be applied

to blocks of HTML
code using div

Spans
<head>
<style>
<!-.myclass {
color: red;
background: cyan;
text-decoration: none;
}
-->
</style>
</head>
<body>
<span class="myclass">
<h2>A Simple Heading</h2>
<p>some text . . . </p>
</span>
</body>

spans

are similar
to divisions

Layers

The browser maintains a stack of layers, each containing

text, images etc. The browser displays layers on top of
each other (in order).

The <div> tag has the following attributes

z-index: the number of the layer containing the
division
left and top : the location (top-left corner) of the
division in pixels
width and height: the size of the division in pixels
position: absolute or relative

Layers

Layers can be manipulated using JavaScript to create

Dynamic HTML pages

Layers can also be used to organise page content

<body>
<div style="z-index:2; left:100px; top:50px; position:absolute;
background-color:red; font-size:30">
<p>THIS STUFF IS ON TOP</p>
</div>
<div style="z-index:1; left:10px; top:10px; position:absolute;
background-color:yellow; font-size:56">
<p>BACKGROUND STUFF</p></div>
</body>

Summary
By now you should be able to use:
Tables
Frames
Stylesheet CSS

Inline

style
Embedded style
External style

Typical exam question

explain why is it important to separate
the content from the style.
what is CSS?
State three ways in which styles can
be used. And explain the advantages
and disadvantages of each one.

Next
Look at the disadvantages of html
XML

Well

formed vs valid xml document

XHTML vs HTML
DHTML

Useful sites
http://www.w3schools.com/
http://www.w3schools.com/html
http://www.w3schools.com/css