the world wide web chapter 4. learning outcomes explain in general terms how web documents are...

The world wide web

Chapter 4

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”, June-

Jully 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 user’s 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 Question-Answer-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).

ParagraphsParagraphs: <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>

<html> <head> <title>Headings</title> </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>

Headings

Six levels of importance <h1>...<h6>

Use headings to divide document into sections

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

The href attribute gives the URL of the target page

The text between the tags is highlighted – selecting it activates the link

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

Example:

Relative addressing

• The ‘root’ directory for the link is assumed to be the directory containing the parent page of the link

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

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

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

To set the colour of all text on a page

<body text="#994422">

• 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 (buttons)• select (options)• textarea• password• button• submit• reset• hidden• file• image

The method and action attributes

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

• 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)

The input element: type="text"

<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 type attribute specifies the type of user input

• The name attribute gives an identifier to the input data

The input element: type="checkbox"

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 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

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"

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 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

The input element: type="submit/reset"

Thank you<br><input type="submit" name="send" value="Send"><input type="reset" name="clear" value="Clear"><br>

• 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

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

How do you rate this site?<br><select name="rating"> <option>Good <option selected>Bad <option>Ugly</select>

• 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)

Tables

Tables provide a means of organising the layout of data

A table is divided into rows and columns: these specify the cells of the table

Tables

• <table> main element

• <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

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

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

Frame attributes

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)

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

Frame attributes

• 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

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

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></html>

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

<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>

• Some browsers cannot process frames. Alternative content should be provided using the noframes element

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

selector { property: value; property: value; property: value; property: value;}

• Each declaration has two parts:

– a property and a value

• For readability, each declaration should be placed on a separate line

Style rules

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

• 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

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 valuesText• 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 valuesBoxes• 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>

CSS Classes…cont.CSS Classes…cont.

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>

TD {font-face : sans-serif; font-size : 12pt}

.even {background-color : #FFFFFF}

.odd {background-color : #CCCCCC}

white

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> & <SPAN> are your friends

<div> and <span> tags allow you define exceptions to the general rules of your body text…and 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 text…like 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), ora 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 documentIn particular, each can have class and id

attributes

Divisions

Styles can be applied to blocks of HTML code using div

<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>

Spans spans are similar

to divisions<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>

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 styleEmbedded styleExternal 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