1. Chapter 4
The world wide web

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

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

4. Additional reading William Buchanan, Mastering The Internet, Ch. 9-10
Andrew Tanenbaum, Computer Networks, Ch. 7.3
Douglas Comer, Computer Netwoks and Networking, ch
Chuck Masciano and Bill Kennedy, HTML and XHTML the definitive guide, for reference
Mike Lewis, “Understanding Javascript”, June-Jully 2000

5. 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, clients

6. url format http://doc.gold.ac.uk/~username/index.html
<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.
<pathname> tells the server where to find the file

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

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

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

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

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

12. Introduction to HTML

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

14. Internet - Services
& 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.

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

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

17. 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)‏

18. <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
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>

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

20. 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).

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

22. Headings Six levels of importance <h1>...<h6>
Use headings to divide document into sections
<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>

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

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

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

26. 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">

27. Ordered and Unordered Lists
some normal text
<ol>
<li>apples</li>
<li>oranges</li>
<li>pears</li>
<li>bananas</li>
</ol>
some normal text
<ul>
<li>apples</li>
<li>oranges</li>
<li>pears</li>
<li>bananas</li>
</ul>

28. <!– this is a comment -->
Comments
Comments are delimited by <!-- and -->
<!– this is a comment -->
Comments may span multiple lines
<body>
<!--
this is
a comment
-->
</body>

29. Special characters <body>
A <em> < fascinating > </em> subject that I <strong>m u s t</strong> understand
</body>
Some characters such as <, >, " and & have special meanings.
To prevent them being interpreted as HTML code, they must be written as follows: < > " &
Blank space is normally ignored in HTML. To include a space in your document use:  

30. <img src="mypicture.gif" alt="my picture">
Links and Images
Link:
<body>
The Department of
<a href=" Computing </a> is a very ....
</body>
images:
<img src="mypicture.gif" alt="my picture">
src attribute specifies the file containing the image
alt attribute specifies the text to be displayed if the image is not viewed

31. <body bgcolor="#994422"> <body background="tileimage.gif">
Colour – RGB Model
#ff0000 (red),
#00ff00 (green)‏
#0000ff (blue)‏
#ffff00 (yellow)‏
...
#3395ab (a pastel blue)‏
<body bgcolor="#994422">
<body text="#994422">
<body background="tileimage.gif">

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

33. 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)‏

34. Forms text checkbox radio (buttons)‏ select (options)‏ textarea
Input types
text
checkbox
radio (buttons)‏
select (options)‏
textarea
password
button
submit
reset
hidden
file
image

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

36. Text, checkbox and Radio button
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>
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>
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 -->

37. The input element: type="submit/reset“ and select element
Thank you<br>
<input type="submit" name="send" value="Send">
<input type="reset" name="clear" value="Clear"><br>
How do you rate this site?<br>
<select name="rating">
<option>Good
<option selected>Bad
<option>Ugly
</select>

38. Tables <table border="1"> <tr> <th>Name</th>
<td>A B Morgan</td>
<td>D P Jones</td>
</tr>
<th>Course</th>
<td>Fishing</td>
<td>Sailing</td>
<th>Year</th>
<td>8</td>
<td>5</td>
</table>
<table> main element
<tr> table row
<th> table header
<td> table data

39. 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>
<th>Last</th>
<th>Init.</th>
<td>Morgan</td>
<td>AB</td>
<td>Fishing</td>
<td align="center">5</td>
<!– etc -->

40. Table attributes Table attributes Furthermore
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

41. 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>
<td>A B Morgan</td>
<td>Fishing</td>
<td>5</td>
<!– etc -->

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

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

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

45. <link rel="StyleSheet" type="text/css" href="URL">
Styles can be defined
Inline styles
Global styles
Stylesheets (Cascading stylesheets)
<h1 style="color:#2255ff; border:ridge">Inline styles</h1>
<head>
<title>Styles</title>
<style>
<!-- h1 {
color: red;
border: thin; groove;
text-align:center;
} -->
</style>
</head>
<link rel="StyleSheet" type="text/css" href="URL">

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

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

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

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

50. 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>
Styles can be applied to blocks of HTML code using div

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

52. Summary By now you should be able to use: Tables Frames
Stylesheet – CSS
Inline style
Embedded style
External style

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

54. Next Look at the disadvantages of html XML XHTML vs HTML DHTML
Well formed vs valid xml document
XHTML vs HTML
DHTML

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