FIT5900 : Basic HyperText Markup Language (HTML)

In the previous lecture:

In this lecture:

How does the Web browser identify files on the Internet?

The Internet is a global network (of networks) of computers.

Every computer on the Net has a unique numerical address (an IP address) and a people-friendly equivalent... the numerical address for...


The Net is divided into domains, and subdomains.

Every file on a computer has a filename unique for that machine. When appended to the IP address of its host computer, every file on the Internet therefore has a unique name!

Steps for Retrieving Documents from the Web.

Computers on the Internet called name servers keep lists of numerical IP addresses & people-friendly names and translate between them.

1) A web browser (client) sends a request using HyperText Transfer Protocol (HTTP) for a document, specified by its unique name, to a remote (server) machine.

The unique file name is specified within a Uniform Resource Locator (URL)...


(The protocol may be omitted in which case HTTP is assumed.)

Absolute URL's

are absolute URL's because they include a domain name and a path.

Relative URL's



are relative URL's because they specify a path and domain name by reference to (usually) the URL of the file currently open in the browser (often referred to as the base).

Locations within documents


The text after the # symbols indicates a location within the (HTML) document specified by the URL.

These locations are named whilst the document is being created. The #location is an optional part of a URL. When would it be useful to specify a location within a document in a URL?

2) A web server program on a remote machine always 'listens' on a 'well known' port for incoming requests. (Port 80 for HTTP)

3) The web server checks client access privileges, if all is well, it sends the requested document.

4) Browser displays document retrieved from server on client machine in human-readable form.

A web document is anything accessed with a single request from a client to a server.

Hyper Text Markup Language (HTML)

HTML is a document-layout and hyperlink specification language.

HTML tags specify:

The HTML standard is decided by the WWW Consortium (W3C) at

How is HTML supposed to be used?

HTML is (was) intended for specification of document layout NOT control of document appearance.

Ie. HTML not originally intended for graphic design, typography etc. BUT it is moving in this direction.

Usually, HTML specifies layout, and the browser interprets and displays this as it likes. Hence the final appearance of a document is up to the client browser, not the HTML author.

eg. HTML allows the specification of a Heading level 2 but the client decides that all Headings level 2 shall be displayed in bold, 12pt Times Roman text or otherwise.

HTML is moving towards specification of document appearance but...

...differences between the way browsers of different authorship display and interpret HTML make things tricky for designers!

Some browsers incorporate proprietary extensions to HTML (eg. Micro$oft Explorer)...

...which do not work on other browsers (eg. Netscape).

Writing Your Own HTML

Use any of the following:

You will also require:

HTML tags

Sample HTML document code



<!-- Document information goes here -->
<TITLE> A silly, simple, sample page </TITLE>



< !-- Document content goes here -->
<H2>A Grand Day</H2>
Oh what a <I>lovely</I> day for a walk!
Let's wander over to CEMA's <A HREF="">home page</A> and take a look!



The page produced by this code is available.

Some special tags

<A HREF="linked_to_doc_URL#anchor_name"> clickable text/image goes here </A>

<A NAME="anchor_name"> clickable text/image goes here </A>

Inline Images

<IMG WIDTH=pixels HEIGHT=pixels BORDER=pixels SRC="bug.GIF" ALIGN=alignment ALT="picture of bug">

<A HREF="bug.html"> <IMG SRC="bug.GIF"> </A>




Image Maps

bug image map

Click on the bugs above to see an image map in action!

Ordered and Unordered Lists

<H4>Spot the odd one out</H4>




Spot the odd one out

  • Tomatoes
  • Potatoes
  • Elephantoes

<H4>Spot the dog</H4>




Spot the dog

  1. Collar
  2. Cat
  3. Caterpillar

Additional things to research

Tables - very useful for all kinds of things (do some online research to find out what)!

this is
a simple table


<TD>a simple</TD>

Forms - useful to obtain data from users

I'm a radio button
I'm a radio button too


Frames & Stylesheets - useful if used appropriately... hunt around and find out:

This lecture's key point(s):

FIT5900 courseware | FIT5900 lecture notes

©Copyright Alan Dorin & Jon McCormack 1999,2000