FIT3084 lect3

FIT3084: eXtensible HyperText Markup Language (XHTML)

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 HTML and how is it used to construct a web page?
Suggested reading: Sebasta, chapters 1 and 2.

Hyper Text Markup Language (HTML), a brief history

HTML is a document-layout and hyperlink specification language that was derived from Standrard Generalized Markup Language (SGML).

HTML consists of tags that specify:

the structure of text and embedded elements (images, sounds, tables etc.) of a document;
hyper-links to other web pages.

Several versions of HTML were approved by the WWW Consortium (W3C) (see http://www.w3.org/ ).

The most recent approved version was HTML 4.01 (1999).

HTML 5 is in draft stage (since 2008). It has an XHTML variant (see below), XHTML 5.

Early HTML.

HTML was intended for specificying document structure, not for control of document graphic design & typography.

Originally the browser (on the client side) interpretted and displayed a (server provided) document's elements as it liked.

E.g. HTML allows the specification of a Heading level 2 but the client decides that a Heading level 2 shall be displayed in bold, 12pt Times Roman text (or otherwise).

So instead of...

a company's page might have looked like...

Coca-Cola
classic

...to some viewers. To please their marketing staff, companies made extensive use of images instead of plain text on websites. Text in images is not searchable, nor can it be read by text-to-speech software.

Later, Style Sheets and other tools allowed specification of exact fonts and colours, but...

...differences between the way browsers displayed and interpretted HTML made things tricky for designers.

Some browsers incorporated proprietary extensions to HTML...

...which did not work on other browsers (e.g. Microsoft Explorer & Netscape Navigator are two old browsers that had different "standards").

eXtensible HyperText Markup Language (XHTML)

HTML is sloppily coded and sloppily interpretted by browsers.
Since the year 2000, XHTML has been approved by W3C.
XHTML has strict syntactic rules based on XML (rather than SGML).

XHTML may be checked for correctness automatically using a validation tool.

Tools for creating XHTML documents

For best results use one of the following:

Ordinary text editor (or one extended for XHTML)
What you see is what you get (WYSIWYG) editor

For poor results, use:

Word processor with XHTML export

You will also require:

A web browser
(You can use the web browser to view XHTML files from your local drive. Files don't need to be uploaded to the WWW until you are ready for everybody to look at them.)
An image editor (possibly one that allows interactive specification of image maps)

XHTML tags

Appear in lowercase characters between < and > symbols in the XHTML code

For instance: <h2>The Heading</h2> <p>The paragraph of text.</p>
Assist page layout by specifying the type of content between them
Are not displayed by the browser (they are parsed by it though!)
Always have an open and close pair: <tag> </tag>
If the open and close tag pair do not contain any content between them, they may be written <tag /> to indicate both the open and close tag. Note: A space before the forward slash in the tag is required.

Sample XHTML document code

In the sample code that follows, for interest's sake, XHTML-specific tags are marked in blue. The remaining tags were also present in HTML although it was possible to get away with missing some of them out altogether.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//w3c//DTD XHMTL 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<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 <br /> for a walk!
</p>
<p>
Let's wander over to CEMA's <a href="http://www.csse.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

<?xml version = "..." encoding = "..."?>
is an XML declaration that what follows is based on XML. It includes the version number and unicode format of the XML.
<!DOCTYPE ... >
is an SGML document type definition (DTD) stating (amongst other things) that the document complies with XHTML 1.1.
<html xlmns = " ... "></html>
tags tell the browser the document is entirely HTML. xmlns refers to an XML Name Space that contains the specification of the tags. It is included for the same reason name spaces are required in programming languages like C: so that conflicting definitions for names do not cause problems.

An XHTML document has two parts, a head and a body...

<head></head> tags contain information about the document (e.g. A <title> for the page)
<body></body> contains document content
demarcate comments which are ignored by the browser but useful to humans
A hyperlink (usually to another document) is specified with the anchor tag:

<a href="linked_to_doc_URL#anchor_name"> clickable elements go here </a>

An anchor within a document can be made:

<a name="anchor_name"> clickable elements go here </a>

Inline Images

The basic requirements for an image image tag are the source (src) attribute (a URL) of the image and some alternate (alt) text to display if images are turned off. (See these important notes on accessibility).

Additional attributes of the image tag may also be added. For example,

width & height attributes allow page layout to occur whilst/before images are downloaded and allow the image to be scaled by the browser.
border determines pixel width of the image border. This is especially useful if the image is used as a hyperlink...

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.

Image Maps

Images may be over-laid with regions.
Each region 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. Server side maps are hardly used nowadays.
A sample XHTML image map:
<img src="myImage.JPG" usemap="#myImageMap" />
<map id="myImageMap">
<area href="page1.html" shape="circle" coords="152,113,14" alt="page 1" />
<area href="page2.html" shape="polygon" coords="241,64,235,91,332,91,338,67" alt="page 2"/>
</map>

This is usually constructed using interactive software that lets you make standard shapes (ellipses, rectangles, polygons, circles) over an image and then export the XHTML code that corresponds to your drawing. The map drawing interface looks like this:

image map detail

The finished map looks and works like this:

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

(See these important notes on accessibility)

Ordered and Unordered Lists

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

<ul>
<li>Tomatoes</li>
<li>Potatoes</li>
<ul>
     <li>sweet</li>
     <li>rotten</li>
</ul>
<li>Elephantoes</li>
</ul>

Spot the odd one out

Tomatoes
Potatoes

sweet
rotten

Elephantoes

<h4>Spot the dog</h4>

 <ol>

<li>Collar</li>
 <li>Cat</li>
 <li>Caterpillar</li>

</ol>

Spot the dog

Collar
Cat
Caterpillar

Additional XHTML tags to research

Tables - very useful for laying out pages.

this	is
a simple	table

<tr>
<td>a simple</td>
<td>table</td>
</tr>
</table>

Forms - useful to obtain data from users

Formatting and other tags

Tags such as <br />, <hr />, <span>, <div> & <meta> are all handy to know about, as are many others... do some reading to find out what tags are available. Some of them will be touched upon in later lectures.

Web References:

http://www.w3.org/MarkUp/ - the official spec's for XHTML (and HTML).
http://validator.w3.org/file-upload.html - a checker to be certain your web pages comply with the standard.

Other important tools used to create web pages

	PHP - a programming language embedded in XHTML documents that is executed (web) server-side before delivery to the client. Excellent for accessing server databases etc.
	Perl and CGI (Common Gateway Interface) - A general purpose scripting language that runs server-side to process requests received via a specifically-designed interface (CGI)
	JavaScript - a programming language embedded in XHTML documents and executed (web browser) client-side to make dynamic web pages
	Flash - a proprietry (Adobe) authoring tool and browser plugin for making interactive animations, buttons, text and sound
	Servlets, JavaServer Pages (JSP), JavaServer Faces (JSF) - means of using the Java programming language to handle requests to complete computations, access databases, process forms etc.
	Active Server Pages .NET (ASP.NET) - Microsoft's framework for doing what JSP does with Java by using Microsoft's .NET variants of the standard programming languages
	Ruby - an object-oriented, interpretted scripting language. This language works with the Rails Web Development framework (see below).
	Rails - correctly called Ruby on Rails, this is used with Ruby for web applications that access databases.
	Ajax - Asynchronous, Javascript + XML, a powerful way of increasing the interactive speed of web pages that involves rethinking the way web documents are requested, sent and interacted with. Interaction between browser and server is asynchronous: a user does not need to wait for a full page to be received before interacting with the browser. Documents returned by the server are often only a small part of the entire requested document, thereby speeding up the interaction between client and server.

We will look at (several) of these technologies in more detail during the rest of this unit. In the meantime, do some reading to find out a little more about each of them.

This lecture's key point(s):

XHTML 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.
Numerous other technologies interact with the web-server or browser in order to allow for different kinds of interaction with users.

Courseware | Lecture notes