THE WORLD WIDE WEB
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>/<pathname>
▫ <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 domain 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
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
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 <p>here is a piece of
text that has been placed
Paragraphs: <p>...</p> inside a paragraph</p>
▫ force a break between the enclosed <p align="center">Here is
another paragraph</p>
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
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>
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
<body>
Descriptive elements affect the appearance of A <em>fascinating</em>
text depending on how the text is described subject that I
<strong>must</strong>
• <em></em> emphasis, usually with italics
understand
• <strong></strong> strong, usually </body>
with bold
• <cite></cite> citation, usually in
italics
• <code></code> usually results in
monotype spacing
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 style sheet control
• <div></div> delimits blocks of text for style sheet 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>
<dt>MIME</dt>
• <dl></dl> The enclosing tags <dd>
• <dt></dt> The definition term Multipurpose...
• <dd></dd> The definition </dd>
<dt>FTP</dt>
<dd>
File transfer...
</dd>
<dt>TCP</dt>
<dd>
Transmission...
</dd>
</dl>
<body>
NESTED LISTS <ol>
▪ A list may contain another list <li>apples</li>
<ul>
▪ The inner list is nested inside the outer list
<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>
<body>
A <em> <
Special characters fascinating > </em>
subject that I
<strong>m u
▪ Some characters such as <, >, " and & s t</strong>
have special meanings. understand
▪ To prevent them being interpreted as </body>
HTML code, they must be written as
follows: < > " &
▪ Blank space is normally ignored in
HTML. To include a space in your
document use:
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
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" center of image aligned with center 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>
COLOR
▪ Colors are specified with hexadecimal numbers for the red, green
and blue primary colors, preceded by a “#”.
▪ To set the background color of a web page
<body bgcolor="#994422">
Colour – RGB Model
– #ff0000 (red),
– #00ff00 (green)
– #0000ff (blue)
– #ffff00 (yellow)
– ...
– #3395ab (a pastel blue)
COLOR
<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">
COLOR NAMES
▪ Netscape and Internet Explorer allow textual names for colors instead of
hexadecimal
▪ This is OK provided the page is not looked at by a browser that does not
support color 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">
