FIT5900 lect3

FIT5900 : Basic HyperText Markup Language (HTML)

In the previous lecture:

The WWW is a document network linked by hyperlinks.
The WWW and Web browser mask the complexities of accessing computers and files on the Internet to simplify the retrieval of information from remote computers.

In this lecture:

What is a URL and how is it used to retrieve data from the WWW?
What is HTML and how is it used to construct a web page?

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

130.194.64.81

...is the numerical address for...

molly.cs.monash.edu.au

The Net is divided into domains, and subdomains.

molly is the machine name
cs is the Computer Science subdomain
monash is the Monash University domain
edu indicates the address is educational.
What other extensions are there for different types of institutions?
au indicates the address is Australian
What other extensions are there for different countries?

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

Protocol://server_domain_name/file_path

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

Absolute URL's

http://www.cs.monash.edu.au/~aland/index.html

ftp://ftp.cs.monash.edu.au/pub/

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

Relative URL's

index.html

../index.html

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

http://www.cs.monash.edu.au/~aland/index.html#chapter

index.html#fred

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:

how web browser is to format text and embedded elements (images, sounds, tables etc.) of a web page;
hyper-links to other web pages.

The HTML standard is decided by the WWW Consortium (W3C) at http://www.w3.org/

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:

An ordinary text editor (or one extended for HTML)
A 'what you see is what you get' (WYSIWYG) editor
A word processor with HTML export

You will also require:

A web browser
(You can use the web browser to view HTML files from your local drive too.)
An image editor

HTML tags

appear between < and > symbols in the HTML code
describe page layout
are not displayed by the browser (they are parsed by the browser though!)
usually have an open / close pair: <tag> </tag>

Sample HTML document code

<HTML>

<HEAD>


<TITLE> A silly, simple, sample page </TITLE>

</HEAD>

<BODY>

< !-- Document content goes here -->
<H2>A Grand Day</H2>
<P>
Oh what a <I>lovely</I> day for a walk!
</P>
<P>
Let's wander over to CEMA's <A HREF="http://www.cs.monash.edu.au/~cema">home page</A> and take a look!
</P>

</BODY>

</HTML>

The page produced by this code is available.

Some special tags

<HTML></HTML> tags tell the browser the document is entirely HTML
<HEAD></HEAD> tags contain information about the document (eg. A TITLE for the page)
<BODY></BODY> contains document content
 demarcate comments which are ignored by the browser
A hyperlink is specified by the anchor tag:

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

An anchor within a document can be made:

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

Inline Images

WIDTH & HEIGHT allow page layout to occur whilst/before images are downloaded.
BORDER determines pixel width of border if the image is used as a hyperlink...

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

border=0

border=1

border=3

ALIGN can be left, center or right and determines where text will be placed in relation to the image
Images must be in the GIF, JPEG (or PNG) format for inline display
ALT = "text that will be displayed if browser has image display turned off"

Image Maps

Images may be divided into sections.
Each section may be made a hyperlink activated by a mouse click.
Image maps may be client or server side.
Client side server maps are more efficient.
A sample of the HTML for the image map found here:
<IMG WIDTH=354 HEIGHT=224 SRC="amoeba.JPG" USEMAP="#amoebaMap" BORDER=0
ALT="(Amoeba Image Map) Use text menu to navigate if image display is off.">

<MAP NAME="amoebaMap">
<AREA SHAPE=circle COORDS="152,113,14" HREF="nucleus.html">
<AREA SHAPE=polygon COORDS="241,64,235,91,332,91,338,67" HREF="phenotypes.html">
</MAP>

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

Ordered and Unordered Lists

<UL>

<LI>Tomatoes
<LI>Potatoes
<LI>Elephantoes

</UL>

Spot the odd one out

Tomatoes
Potatoes
Elephantoes

<OL>

<LI>Collar
<LI>Cat
<LI>Caterpillar

</OL>

Spot the dog

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

<TR>
<TD>a simple</TD>
<TD>table</TD>
</TR>
</TABLE>

Forms - useful to obtain data from users

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

What are they?
When is a good time to use them?
How do you code them in HTML?

This lecture's key point(s):

A Uniform Resource Locator consists of a protocol, domain name and path which is unique to every document on the WWW and is used to retrieve that particular document.
HTML is a simple method of identifying sections of text, images, tables etc. to be displayed within a web browser in formats governed largely by the web browser itself.

FIT5900 courseware | FIT5900 lecture notes