The world wide web

Download Report

Transcript The world wide web 

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 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 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
<sub></sub> subscripts
<sup></sup> 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">
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>
Comments

Comments are delimited by <!-- and -->
<!– this is a comment -->

Comments may span multiple lines
<body>
<!-this is
a comment
-->
</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 and Images
Link:
<body>
The Department of
<a href="http://www.doc.gold.ac.uk/index.html">
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
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">
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)
Forms
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>
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 -->
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>
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>
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
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>
Styles

Styles can be defined

Inline styles
<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>

Global styles

Stylesheets (Cascading stylesheets)
<link rel="StyleSheet" type="text/css" href="URL">
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>
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
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
