Web Authoring 2

Welcome to Web Authoring 2. 

Some of the material in this module will have been introduced in Web Authoring 1. Web Authoring 2 introduces more advanced HTML concepts, and where they fit in relation to other Web technologies. This module also contains four exercises. 

By the end of this module you should be equipped with the knowledge (and some of the practice!) required to construct a full Web site. References to useful Web sites are provided throughout this module. Visit and Bookmark these sites for tutorials and more information.  

1. Images and page layout
1.1 Images
1.1.1 Image file size constraints
1.1.2 Image file types
1.1.3 Adding an image to a Web page
Hands-on: Adding an image to a Web page
1.1.4 ‘Web-safe’ colours
1.2 Layout techniques
1.2.1 Tables
Hands-on: Constructing (and deconstructing) HTML Tables
1.2.2 <DIV> and <SPAN>
2. Forms
2.1 What you will need
2.1.1 CGI programs
2.1.2 HTML Forms
Hands-on: A feedback Form
3. Development of Web languages
3.1Glossary and background
3.2 Components of Dynamic HTML
3.2.1 Cascading Style Sheets
3.2.2 JavaScript
Hands-on: Using JavaScript to validate a Form

1	Images and page layout
1.1	Images

1.1.1	Image file size constraints

Most of the present Web audience consists of people accessing Internet service providers via 28.8 kilobit per second (kbps) modems from their homes, offices, or remote work sites. At 28.8 kbps you only get about 3.6 kilobytes (KB) per second (remember it takes 8 bits to make each byte). This means a modest 36 KB graphic on your Web page could take 10 seconds or longer to load into the reader's Web viewer. Actual data transmission rates will vary, depending on the type of modem, the speed of your Web server, the type of Internet net connection used, and other factors, but the overall point is clear: the more graphics you use, the longer your reader will have to wait to see your page. 

A full-screen graphic menu on your home page, plus background graphics could leave your modem-based readers twiddling their thumbs for a full minute or more, even if they have a state-of-the-art modem and good Internet connections. Look at your watch (or better yet, hold your breath) for a full minute, then figure out if that is the first thing you are willing to ask your users to do when they visit your Web site. A better interface strategy would be to gradually increase the graphics loading of your pages, drawing users into your site with reasonable download times. As users become more engaged with your content, they will be more willing to endure longer delays, especially if you give them notes on the size of graphics, or warnings that particular pages are full of graphics and will take longer to download.

1.1.2	Image file types 

Three types of image files are possible on the Web:

.gif  (Graphics Interchange Format)

A standard for digitised images, defined in 1987 by Compuserve. GIF format suits non-photographic, non-realistic images (e.g., Line drawings, logos, cartoons, large areas of flat colour, etc.). Up to 256 colours

.jpg (Joint Photographic Experts Group, JPEG)

Named after the committee that designed the standard image compression algorithm. JPEG is designed for compressing either full-colour or grey-scale digital images (e.g., Photographs or images containing natural or ‘real-world’ scenes). Up to 16 million colours

.png (Portable Network Graphic)

This is a new, though not yet widely supported file format. It is designed for on-line viewing applications such as the Web, since it streams and has options for progressive display, gamma correction, detection of common transmission errors, etc. It compresses images well and will be a patent-free alternative to GIF.

1.1.3	Adding an image to a Web page

For an image to appear in a web page, the HTML code needs to convey two things. Firstly, the physical location of the image file in relation to that web document. The image may be in the local web site directory, on a local area network, or on the Internet. The file path reflects the exact location. Secondly, the HTML code should indicate any size or display attributes particular to that image, such as height and width, alignment, whether the image should have a border, what alternative text to appear for browsers without images, and so on. 

1.1.3.1	Hands-on: Adding an image to a Web page

In this exercise, we will add an image to the front’home’ page of the Web site. 

1. Select the image

Use Paint Shop Pro’s ‘Browse’ function to locate the image you wish to use. Paint Shop Pro will allow you to modify the image and save it as a different file type. If you are using a photographic image, save it in .jpg format. If you are using a non-realistic graphic, save it in .gif format. 

2. Note the image dimensions

Before closing the image, take a note of how many pixels wide, how many pixels high the image is. You will be specifying the image dimensions in the code. 

3. Save or move the image to your web working area

As your Web project grows, it is useful to store the images used throughout the site in their own directory or folder, distinct from other pages. 

A common site directory structure is as follows:

website/
index.htm
page01.htm
etc...

img/
logo.gif
photo.jpg
etc...

reports/
index.htm
page01.htm
etc...

So, if you haven’t done so already, create a directory within your Web working area called ‘img’ or ‘images’. The name is up to you, although img is faster to type, and less letters in your code means pages will be a tiny bit faster to download!

Place your image in the image directory. 

4. Open your ‘home’ page in Netscape Composer

We will place the image directly under the page headline. Locate the page headline <H1> in the code.

5. Insert the image tag

In the space underneath the headline, insert the following code (replacing image.jpg with the name of your image):

<img src="img/image.jpg">

Note: Image tags do not require a closing tag. 

6. Adjust the image attributes

Image attributes can be added in any order. 

The height and width in pixels should be added. This is good practice, to avoid the page ‘jumping’ or reformatting itself as it brings in images. 

<img src="img/image.jpg" height="x" width="x">

Add alternative text for people browsing without images. How you would describe this image, on this page, to someone over the phone? That should be your alternative text. 

<img src="img/image.jpg" height="x" width="x" alt="Photograph of workshop participants">

Adding a border? The values for border are pixel values. The border will generally appear in the colour of your page text. If your image becomes a hyperlink, the border will appear in the colour of linked text. 

<img src="img/image.jpg" height="x" width="x" alt="Photograph of workshop participants" border="1">

For forcing no border, simply use:

<img src="img/image.jpg" height="x" width="x" alt="Photograph of workshop participants" border="0">

7. Adjust the image alignment on the page

There are a number of ways you can specify where the image should appear on the page:

a.	in relation to other elements on the page, such as text, or other images 

<img src="img/image.jpg" height=" x " width="x" alt="Photograph of workshop participants" border="0" align="absmiddle">

right | left | top | middle | absmiddle | texttop | baseline

b.	use HSPACE and VSPACE to force horizontal and/or vertical space around the image:

<img src="img/image.jpg" height="x" width="x" alt="Photograph of workshop participants" border="0" hspace="x" vspace="x">

c.	by enclosing the image tag in a paragraph, or center element (This separates the image from the text, forcing a paragraph or line break)

<p align="right"><img src="img/image.jpg" height="x" width="x" alt="Photograph of workshop participants" border="0"></p>

<center><img src="img/image.jpg" height="x" width="x" alt="Photograph of workshop participants" border="0"></center>

Other methods include placing the image inside a Table cell, or using Styles. We will look at these techniques later in the module. 

8. Make the image a hyperlink (optional)

To make an image ‘clickable’, simply start and end a hyperlink around it. 

<a href="link.htm"><img src="img/image.jpg" height="x" width="x" alt="Photograph of workshop participants" border="0"></a>

Now we have completed this exercise!

Remember: When you are ready to FTP the changes made to this page, you must also FTP the image folder, including any images used. 

1.1.4	‘Web-safe’ colours

It is impossible to know all the computer and browser configurations, as well as monitor settings your web page will be viewed under; however, there are some basic colour rules that, when followed, will ensure your graphics appear more or less how you intend them to appear. 

The browsers Netscape, Explorer and Mosaic allow for 256 colours. Because of variations in the Macintosh and PC system palettes, 216 of these 256 colours are common to both. Graphics using flat colours or large areas of single colour, should use these 216 “web-safe” colours in order for the image to appear the same on the majority of end-user machines. 

Whatever colour you specify on the web, either as a page background colour, or within an image file, the browser will display the colour if it has that colour, and if not, will dither the graphic to the nearest colour available. Dithering is when the computer represents intermediate colours by patterns of tiny coloured dots that simulate the desired colour. Graphic artists will often use dithering techniques to achieve colours other than the 216. When dithering is left to the computer, however, it often looks random and awkward. To see a dithering effect, simply adjust your monitor settings down to 16 colours and look at some of the web pages you’re familiar with. The images will probably look different!

Note, the web-safe palette does not apply to photographs. Photographs, because of their rich colour gradients, are best presented on the web as adaptively dithered .jpg files. (Generally, you can use the photograph straight from the scanned file without colour modification, unless you have access to an advanced graphics tool such as Adobe PhotoShop). An adaptively dithered photograph will be displayed in as many colours as the end-user machine allows. 

Note also that despite using the web-safe colours, some users may only have their monitors set to 16 colours. In this case, the web-safe image will appear using the best match

More information about the web-safe palette, as well as palettes of the 216 colours, can be found at:

Lynda.com
http://www.lynda.com/hex.html

1.2	Layout techniques

1.2.1	Tables

Tables were added to HTML3.2. HTML3.2 represents the consensus on HTML features during 1996. With Tables, Web Authors were afforded new possibilities for page layout. Side columns, navigation bars and coloured boxes are most often shaped with Tables. 

Of course, Tables are meant for displaying tabular data; although they are used as a layout tool on most Web sites. Eventually, Cascading Style Sheets will replace the need for layout using Tables. 

Even though HTML4 recommends using Tables only for tabular data, Tables are often used to force page layout. 

Most of the common Web browsers can read Tables. Bear in mind, however, that screen-reader (speech synthesis) browsers for the visually impaired - along with some of the newer Web browsing tools, such as hand-held or palmtop devices - may have difficulty making sense of content contained within Tables. Screen-readers tend to read left to right across the entire page, regardless of Table cells. If you use Tables, you can alleviate the accessibility problem for these user groups by positioning navigation elements either outside the page layout Table, or in a small left-hand-side column, allowing the page text to wrap in one large right-hand-side column. 

1.2.1.1	Hands-on: Constructing (and deconstructing) HTML Tables

In this exercise, we will create a basic Table then adjust its properties. 

1. Design the Table

When using Tables, it is best to design them on paper beforehand. The first step to understanding Tables is knowing what shapes you can make with them. Start with a grid: 

You can also begin to remove lines: 

A Table cannot do this: 

Basically, if you can draw it in a grid, and it's not shaped like an L, you can put it in a Table. If you understand what you can and can't do right from the beginning, you'll save yourself lots of time and frustration.

2. Learn the basic code

There are three basic components in any Table: the table, the table row, and the table cell. The tags for these are: 

Table: <table>
Table row: <tr>
Table cell: <td> (stands for ‘table data’)

Note: a <td> is always enclosed in a <tr>, which is always enclosed in a <table>. 

3. Commence the Table 

Make a new blank HTML page. 

<html>

<head>
<title>Table</title>
</head>

<body>

<table>

</table>

</body>

</html>

We will start by making a simple Table to look like this:

Cell 1	Cell 2	
Cell 3	Cell 4	

Here's the code: 

<table border>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

(You don’t need to indent the code, but it is useful to do so while working on it!)

As you can see, the first Table row encloses cells 1 and 2; the second Table row encloses cells 3 and 4. Table rows always run horizontally. The contents of each cell - in this case, the words "Cell 1" or "Cell 2" - are placed between the <td> and </td> tags. 

In order to see the Table, border was added to the Table tag. This simply turns the border on. You can also specify its width by adding a number, as in <table border="1">.  To ensure the border invisible, you can use <table border="0">

4. Stretching cells: colspan and rowspan

You can make a cell in one row stretch across two cells in another. Like this: 

Cell 1	
Cell 3	Cell 4	

To do this, you have to use the colspan modifier. Just add colspan=2 to the <td>. 

<table border>
  <tr>
    <td colspan=2>Cell 1</td>
 </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
 </tr>
</table>

You can also do this: 

Cell 1
	Cell 2	
	Cell 4	

Just add rowspan=2 to the <td>: 

<table border>
  <tr>
    <td rowspan=2>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
  </tr>
</table>

Remember: Rows run horizontally, columns run vertically. If you want to stretch a cell horizontally, use colspan. To stretch a cell vertically, use rowspan.

5. Horizontal alignment

You can use the align tag in a Table to control where the cell contents are positioned. 

•	<td align="right"> aligns anything you put in that cell (text, images, etc.) to the right. 
•	<tr align="right"> aligns everything you put in all the cells of that row to the right. 
•	<table align="right"> aligns the whole table to the right and flows text around it.

The values for aligning an entire Table are: 

•	align="right" pushes everything against the right side. 
•	align="left" pushes everything against the left side. (This is the default setting, so you probably won't ever need it.) 
•	align="center" centers everything in the middle. 

6. Vertical alignment

You can also specify the vertical placement of the Table contents, either top, bottom or middle of the cells, using valign: 

•	<td valign="top"> aligns anything you put in that cell (text, images, etc.) at the top. 
•	<tr valign="top"> aligns anything you put in all the cells of that row with the top. 

The values for vertical alignment are: 

•	valign="top" pushes everything to the top of the cell. 
•	valign="bottom" pushes everything to the bottom of the cell. 
•	valign="middle" centers everything in the middle vertically. (This is the default, so you probably won't ever need to do it.) 

Now that you’ve got your Table aligned, you may want to adjust the spacing of the cells. 

7. Spacing: cellspacing and cellpadding

These two tags do very similar things. They both put a little space between the cells of your Table, but in different ways. 

•	cellspacing makes the border of the Table fatter, increasing the distance between cells. 
•	cellpadding adds invisible space inside the border of the cells, which pushes the cell's contents away from the border on all four sides. 

Both attributes go in the <table> tag: 

<table cellpadding="4" cellspacing="5"> 

If you're planning on leaving the Table borders off, it really doesn't matter which you use. But if you're going to leave the borders on (or add colour to your Table cells) the difference between the two tags will become very important. Remember: Spacing increases the size of the border, and padding increases the space around the border. 

If you don't specify cellpadding and cellspacing, they each default to 2. So if you want to force the cells together, be sure to specify cellpadding="0" and cellspacing="0". 

8. Coloured cell backgrounds

Colour backgrounds to Table cells are used similar to the body bgcolor attribute. 

•	<tr bgcolor="#rrggbb">
•	<td bgcolor="#rrggbb">

9. More control over the Table layout?

•	For more control over text in a cell, include nowrap: <td nowrap>. This means that no text in that cell will wrap, unless you manually break it with the <br> tag. 
•	To make a Table take up the entire page ­ no matter how big the user makes it ­ set the width and height at 100%, like so: <table width="100%" height="100%"> (Note: height=100% only works in Netscape). 

Now we have completed this exercise! 

1.2.2	<DIV> and <SPAN>

These are new HTML tags that work in version 4+ browsers and have no effect on earlier browsers. They can be quite powerful when used with Cascading Style Sheets (discussed later in this module).

<DIV> may be used to break the page into its general components. <DIV> stands for ‘division’, and should be used for sectioning or dividing parts of the page. For example, a page will normally begin with a headline. Let’s say this is always centered. Next comes the text, which is generally left aligned. At the bottom of the page, there might be a centered footer and copyright statement. 

The page would then fall into three major sections:

<div align="center"> 
…header…
</div>

<div align="left">
…text…
</div>

<div align="center"> 
…footer…
</div>

<SPAN> means ‘to span over’, and can be used inline, i.e., across a phrase or word that appears within a regular paragraph. 

Remember: <div> and <span> will only function on version 4+ browsers. If you use <div align="center"> for an area of your page, anyone using an older browser will only see the area displayed in its default format, usually left-aligned. 
Forms

1.3	What you will need

To use a form on your Web site, you will need two things: The HTML for the form and a Common Gateway Interface (CGI) program to handle the form when it is submitted. 

1.3.1	CGI programs

CGI programs may be written in Perl, C/C++, TCL, AppleScript, or another CGI language. 

CGI programs generally reside on a Web server. They accept any data that a user inputs, and process this data in some way. What they do depends on what the program has been written to do. A CGI program could e-mail the data to someone, add an entry to a database, write out a text file, create a customised display, or just about anything else you can think of. 

There are a few ways to get a CGI program for your form, and one alternative to CGI: 

•	Program it yourself, or find one in the public domain, then upload the program to the directory you keep CGI programs in (usually, a directory called /cgi-bin/). All CGI program files must be transferred (FTP’d) to the Web server in ASCII format. Most FTP programs will default to Binary. 

Freescripts
http://www.freescripts.com

The CGI Resource Index
http://www.resourceindex.com 

•	See if your ISP provides standard CGI programs, and whether they provide instructions on how to use these in HTML form code. 

•	Use a free Forms processor.

Response-o-matic
http://www.response-o-matic.com 

•	There is an alternative to CGI that works on version 4+ browsers.

Developer.com’s HTML Goodies
http://www.htmlgoodies.com/tutors/forms.html

Start with your ISP or web hosting service, since they generally provide free CGI programs, along with instructions on how to implement them.

Before you upload a CGI program, be sure your server allows you to use your own CGI programs!

Unless you have programming experience, learning CGI can be a timely and complex exercise. If you’re interested in learning more, a good tutorial is available.

CGI101
http://www.cgi101.com/class/

1.3.2	HTML Forms

The most common use for HTML Forms is a feedback, or user-response Form. Usually, this feedback is emailed to someone.
1.3.2.1	Hands-on: A feedback Form

In this exercise, we will create a Form on the page that mails form input to an email address. 

1. Start the page

Begin with a fresh HTML page:

<html>

<head>
<title>Form</title>
</head>

<body>

<form>

</form>

</body>

</html>

Forms tags go like this: <form...>form code here</form>

2. Add form attributes

When opening a Form tag, you give it certain attributes. The most common command is: 

<form method="post" action="/cgi-bin/mailme">form code here</form> 

The method command will almost always be set to "post". The other value is "get", but if you are using a program from your web server, you will likely be instructed to use method="post". The action command is asking for the address of a CGI program that will handle the Form once it is submitted. You will replace the "/cgi-bin/mailme" above with the location of your server’s GCI program. 

3. Design the form

Once you have the Form tags in place, HTML is used for the input fields in between. It is good practice to design your Form on paper first, deciding what information you need from the user, and how you will best pose questions. 

4. Text input field

We’ll start with the tag that allows the user to enter a single line of text: 

<input type="text" name="user_name" size="25" maxlength="60"> 

This tag will display an input box on your page. (You can see what each Form element looks like by viewing the page in the Web browser as you work through the exercise)

•	The tag opens with the name of the tag, input
•	The type=" " command specifies the type of input we want from the user. Since we want one line of text, the type is "text"
•	The name=" " attribute is asking you to name the line of text so you can recognize it when the form results come to you in email. In this example, we use "user_name". When the user enters their name, e.g., Mary Brown, the form results mailed to you will look like this: user_name: Mary Brown
•	The size command allows you to specify how many characters long you wish the text box to appear. 
•	The maxlength=" " command will force the box to stop scrolling the text when it reaches that number of characters, in this case, 60.  

5. Larger areas of text
 
How do you make one of those big spaces for people to write more than one line of text? You use a <textarea> tag. 

<textarea name="comments" rows="5" cols="30"></textarea>

•	Textarea requires a closing tag to mark the end of the textarea. 
•	name=" " lets you assign a name to the textarea, like you did to the text line above. 
•	rows=" " lets you specify how many vertical rows the textarea will take up on the page. 
•	cols=" " lets you specify the horizontal width of the textarea in characters. 

6. Radio buttons

Radio buttons are the small round buttons that users can click on to highlight a particular option.

<input type="radio" name="fruitchoice" value="apple">

•	type="radio" tells the browser to display the radio button. 
•	name=" " allows you to name the section of choices. If you have a group of radio buttons asking for the user's favorite fruit, you should give each radio button the same name. "fruitchoice" was used here. 
•	value=" " lets you assign the value of the individual button when it is selected. This is going to be the text you want to get back as the user's choice from your list. Since the section of buttons was named "fruitchoice" and the button selected had a value of "apple", the form result email would say: fruitchoice: apple
•	If there were more buttons to choose from, you would change only the value command in each one to a different fruit, so the one the user selects is the result received in the form email as their "foodchoice". 

7. Checkboxes

Checkboxes are the small squares. When selected, a tick appears in the square. To use a checkbox, use this tag: 

<input type="checkbox" name="fruitchoice" value="apple">

•	type="checkbox" tells the browser to display the checkbox. 
•	name=" " allows you to give the section of choices a name, like the radio buttons above. 
•	value=" " allows you to give the individual checkbox its value, as with the radio buttons above. 

8. Drop-down (pull-down) menus

These are done with the <SELECT> tag: 

<select name="bestcolor"> 
<option selected>blue 
<option>red 
<option>black 
<option>green 
<option>polka dots! 
</select> 

•	<select name="bestcolor"> tells the browser to display a selectable list, and give the list the name "bestcolor". 
•	<option selected> lets you specify which option will be displayed as the default value on the screen. 
•	<option> allows you to add another choice to the list. Use as many of these as you need. 
•	</select> ends the drop down menu. 

9. Instructions to accompany Form fields

How do you make text instruction appear next to the boxes so users know what they are filling out? Simply add the text where you want it to be. Use spaces, line breaks or paragraphs to separate the text from the input boxes. If you want to say "Input your name:" and have the name box on the next line, do this: 

<p>Input your name: <br> 
<input type="text" name="yourname" size="25" maxlength="50"></p>

Tables are often used to format how a Form appears on the page. For example:

<form…>

<table>
  <tr>
    <td>Your name:</td>
    <td><input type="text" name="yourname" size="25" maxlength="50"></td>
  </tr>
...
</table>

</form>

10. Activating the Form

How does the user activate the Form? Add these tags:

<input type="submit">  <input type="reset">

•	The "submit" button sends the user’s input to the CGI program for processing. 
•	The "reset" button allows the user to clear the entire Form and start over. 

If you want the buttons to say something different than "Submit Query" and "Reset", you can add the value=" " command to either or both of the tags. For example, to change the "Submit Query" to "Send Now!":

<input type="submit" value="Send Now!">

11. Remember to include the </form> closing tag at the end of the Form! 

Now we have completed this exercise! Keep this Form handy, because we  will be returning it later in this module.

Development of Web languages
1.4	Glossary and background

This section describes key terms and concepts in the sequence of Web evolution – from Hypertext to current development in the area of XML. 

Hypertext

Machine-readable text that is not sequential but is organized so that related items of information are connected. "Let me introduce the word hypertext to mean a body of written or pictorial material interconnected in such a complex way that it could not conveniently be presented or represented on paper"--Ted Nelson 

A term coined by Ted Nelson around 1965 for a collection of documents (or "nodes") containing cross-references or "links" which, with the aid of an interactive browser program, allow the reader to move easily from one document to another. 

Standard Generalized Markup Language (SGML)

A generic markup language for representing documents. It is an International Standard that describes the relationship between a document's content and its structure. SGML allows document-based information to be shared and re-used across applications and platforms in an open, vendor-neutral format. 

HTML is based on SGML.

Hyper Text Markup Language (HTML)

A collection of formatting commands that create hypertext documents (Web pages). When you point your web browser to a URL, the browser interprets the HTML commands embedded in the page and uses them to format the page's text and graphic elements. HTML commands cover many types of text formatting (bold and italic text, lists, headline fonts in various sizes, and so on), and also have the ability to include graphics and other non-text elements. 

Development and maintenance of HTML standards is coordinated by the World Wide Web Consortium (W3C), http://www.w3c.org

JavaScript

Originally called LiveScript, developed by Netscape to be a simple, cross-platform scripting language for the web. It has a simplified C-like syntax, and popularity grew instantly since JavaScript is relatively easy to learn and/or copy; and could enhance forms, simple web database front-ends, and provide navigation enhancements such as rollovers.

In the beginning, only Netscape supported JavaScript. Microsoft then released a competing technology called Jscript, and inconsistencies between the two make it difficult to write JavaScript that behaves the same in both Microsoft Internet Explorer and Netscape Navigator. Netscape and allies argue that JavaScript is an ‘open standard’ in an effort to keep Microsoft monopoly at bay. Development of Jscript/JavaScript standards in the W3C has been slow (see DOM below). 
 
Netscape owns the JavaScript trademark. Sun owns the Java trademark. JavaScript and Java are compatible to an extent, although the two should not be confused. (For more information on Java, see http://www.sun.com). 

Cascading Style Sheets (CSS)

An extension to HTML that allows styles (e.g. colour, font and size) to be specified for certain elements of a hypertext document. Style information can be included in-line in the HTML file or in a separate CSS file (which can then be easily shared by multiple HTML files). Multiple levels of CSS can be used to allow selective overriding of styles, hence the term ‘cascading’.

Dynamic HTML (DHTML)

Dynamic HTML (DHTML) is an extension of HTML which gives greater control over layout of page elements, enabling web pages to change and interact with the user without having to communicate with the server. It is a combination of HTML, style sheets and scripts (generally, JavaScript). 

DHTML was developed by Microsoft for viewing in Internet Explorer 4.0 and Netscape Communicator 4.0, although the two companies disagree on how it should be implemented. Coding DHTML that is compatible for both the major browsers (as well as for Windows and Macintosh platforms!) is often a big headache for web developers. Largely the reason why some web sites say ‘Best viewed with x browser’. 

The Document Object Model (DOM)

The Document Object Model Group of the W3C develops standards for Dynamic/DHTML. Despite the popularity of Dynamic HTML in all of its vendor-neutral or proprietary forms, development of standards has been slow. This is perhaps due to industry lobbying, particularly by vendors such as Microsoft.

Extensible Markup Language (XML)

A W3C initiative (W3C own the trademark) for an “extremely simple” dialect of SGML suitable for use on the Web. It poses a rethink about the evolution of HTML, which is only able to markup HTML documents, towards ‘extensible’ markup where individuals may create customised languages for various classes of documents. XML is written in SGML. 

1.5	Components of Dynamic HTML

1.5.1	Cascading Style Sheets

While HTML is a relatively simple language to master, or at least use, it has its drawbacks. While you have control over some of the simpler elements of the appearance of the plain text of your documents – (bold, italics and underline) you can't prescribe some of the subtler aspects that really make a reader smile. Open a magazine, then compare that to what you can do with HTML on a Web page. 

You can ‘cheat’ and make a graphic that positions words the way you want them to be seen. You can also have some control over appearance with the font tag. You have to ‘trick’ a page using Table cells and blank GIFs to achieve simple margins and indents, and it still doesn't look as cool, does it. 

Eventually, Cascading Style Sheets (CSS) will replace the need for Tables and other ‘tricks’. Cascading Style Sheets (CSS) promise well-structured documents along with more layout control. Then, you can completely change the layout of a page, or number of pages, simply by using a different Style Sheet. This will save alot of time, since you won’t have to re-lay out individual pages of content. 

Cascading, because you can use more than one Style Sheet, telling the browser which Style to use. Style, because that’s what you’re defining. With CSS, you are separating the content from its presentation or appearance. This can save a lot of time when you want to make a design change across the site. 

Before we start down this road, you need to be aware that the only browsers currently supporting CSS are Microsoft’s Internet Explorer 3+ and Netscape Navigator 4+. Until the majority of users use these browsers, they won’t see CSS effects. Can you design a page using CSS and still make it look good for people using other browsers? In a word, yes. Given that you may not choose to use Style Sheet formatting now, it’s good to learn, because it will be used widely in the future. 

First, some concepts. 

You need to be familiar with some new concepts when you start thinking about CSS. In the early days of HTML, you could only attach layout instructions to certain HTML tags. For example, you could define the colours for a page in the <body> tag and apply it to the entire document. With CSS, you can define a background for a document <body> or <p> or <h1>, etc. So a paragraph, a sentence, a word, even a letter can have its own background and text effects. Think of everything on a page as an element that you can now ascribe individual attributes to. 

Use tags for the purpose designed

When you are marking up a page and you intend to use CSS, it's very important that you use the tags for the purpose designed, particularly the paragraph tag, <p>. Why? CSS will be very serious about what it does when it starts affecting your page. 

For example, if you use <p> more as a spacing technique or separator than as an envelope (i.e., along with </p>, encompassing the paragraph), you may find your text bleeding across images, or being hidden by them, and your Tables collapsing in on themselves attempting to conform to CSS margins and so on.  

A Table is not a paragraph. It’s a Table. When you want blank space around an image, use HSPACE and VSPACE attributes. If you want to separate two Tables, use two <br><br>’s instead of a <p>. Think about what a tag means instead of what effect it has, and use it for that purpose. No more cheating!

Envelopes 

Another concept to be familiar with involves what we'll call envelopes. With HTML, you can't set margins without using ‘kludges’ such as Tables and transparent GIFs or frames. You can set borders, but only around images, frames and Table elements. 

CSS introduces three envelopes called (in order from outside to in) Margin, Padding and Border. These are areas of blank space that surround elements and, again, you will be able to assign very specific measurements to each side (e.g. margin-right, border-bottom-width, padding-top) of each envelope or box. So, the BODY of the document with a red BACKGROUND might have a set MARGIN on each edge, then you might decide that list items LI have a 20-pixel PADDING around them with a blue BACKGROUND color, and a 5-pixel BORDER of white. This would produce a white box of text, surrounded by a border of blue, sitting on a red page. The  background of any of those enveloping elements could be a graphic. Or an element might have no background defined, making it transparent. 

Using these three boxing envelope elements you can move other elements all over your page by any measurement (centimeter, pixel, inch, etc.) so you have complete layout control.

Learning how to define things is easier once you know what you can define. Web Review has produced an excellent master listing of every CSS aspect.

Web Review’s ‘Master list’
http://webreview.com/wr/pub/guides/style/mastergrid.html 

You define styles by groups of the above elements and assign them to HTML tags. These can be assigned to any HTML tag. For example, if you want to use an <i> tag to change text not only to italics, but to change its colour and make it bold as well, you can. 

In addition, text contained within <p> tags can have variants, such as p.indented, p.bold, p.red and so forth. The same goes for the various headline tags <h1>, <h2> etc, where you can define differing styles and sub-styles within each tag. 

Assigning Styles

How you assign these elements gives you further options. You assign styles in three ways:

1. Linking to a separate style sheet

Build a style sheet that defines all the styles to all the tags you want, save it as a separate document with a .css extension and load it to your server. Then, attach a link like this: 

<head>

<title>A page with an attached style sheet</title>

<link rel=StyleSheet href="default.css" type="text/css" title="My Super Style Sheet"> 

</head>

The advantage of this method is in defining one set of styles for multiple pages and simply linking each page to the same .css document. You can also share this style sheet with other web builders, since it has a distinct URL. 

2. Defining the styles within each HTML page (top-of-the-page)

Declare the style elements at the top of the page:

<head>

<style type="text/css">
<!--
body      {margin:10px; background-color:#999999}
p         {font:10pt/14pt Verdana, Arial, Geneva, sans-serif;
           margin:1em .5em; text-indent:15px; text-align:justify}
a:link    {color:#0000cc; font-weight:bold}
a:active  {color:#0000ff; font-weight:bold}
a:visited {color:#333333; font-weight:bold}
-->
</style>

</head>

This method involves more work, and more code on every page. You might link to the global site style sheet, but include here any styles that are particular to this page. 

3. Defining styles within the body of the HTML page (inline)

You can define a style only where you want the style to change:

<p style="color: red; font-family: 'New Century Schoolbook', serif; font-size : large;">This paragraph is styled in red, large, and with the New Century Schoolbook font, if available.</p>

So now there are four ways to define HTML tags:
1.	The default method if you don’t use style sheets
2.	The linked CSS document
3.	Top-of-the-page styles
4.	Inline styles

Cascading

You can use all the above methods in a single page. You may want to use a ‘universal’ linked CSS for some tags, incorporate subtle changes to tags within a document using inline CSS, and still allow visitors to define font sizes and weights to suit their personal viewing preferences by leaving some of the tags in the default state.  

Styles cascade in a particular order:

1.	browser default styles (no style sheet used) are used first. So <p> just means <p> 
2.	The user’s style sheet (if s/he has one defined) overrides browser default and applies styles where defined if the author has not included his or her own style sheet definitions for that page. So, if you as a user like a certain set of style sheet definitions, you can tell your browser to apply those styles to every page you visit, unless the page author has defined their own CSS, because... 
3.	The page author’s style sheet overrides the reader’s styles where defined. 

Users with special needs, such as vision impairment,  might define browser styles such as  large text and high contrast colours (black text on a white background). Whenever you define a style or use <body...> or <font...>, you are essentially overriding the user’s display settings.

You can apply style definitions to any tag, so you might end up with a combination of user and page author styles all on the same page, depending on who defines what. 

If you use all three author-defined CSS methods listed, here's the order in which a page will use them:

1.	linked CSS pages get looked at first
2.	top-of-page styles override linked page styles
3.	inline styles override top-of-page styles

That is, from the big picture, to the more specific. 

If you want a certain Style element to always take precedence over any other element that might override yours, you would do this:
 
h1 {color: black ! important;
background: white ! important;
font-family: "Times New Roman"} 

In this example, the background and text color specified as "!important" will not be overridden, but the font may be. Using the "!important" weight for a Style element changes the override as follows:

1.	browser default styles (no style sheet used) 
2.	user’s style sheet overrides browser default and applies styles where defined. 
3.	page author’s style sheet overrides reader’s styles where defined
4.	a user’s !important style declaration overrides a page author’s style without it 
5.	a page author’s !important style declaration overrides a user’s !important declaration

In 1999…

At present, if you want special font and layout tricks to appear in every graphical Web browser regardless of what version they’re using, you’ll have to include all the kludges (<FONT FACE="Times New Roman"> etc…) as well as CSS. Older browsers that can’t interpret CSS simply ignore them. Conversely, browser’s than can interpret CSS will ignore the kludges in favour of CSS definitions. 

As it stands, Microsoft Internet Explorer is better at interpreting CSS than Netscape Navigator, although this won’t always be the case. Both companies are using CSS as a model for their competing DHTML / Dynamic HTML implementations. 

You’ll need to experiment extensively with CSS before going public with it on your Web site. This means testing your work on different computers using different browsers. While the World Wide Web Consortium has produced a standard for Styles, browsers do some strange interpretations. 

Refer to:

Web Review’s ‘Danger List’ 
http://webreview.com/wr/pub/guides/style/unsafegrid.html and 

Web Review’s ‘Safe List’ 
http://webreview.com/wr/pub/guides/style/safegrid.html

For articles and tutorials on CSS, see:

Web Review 
http://webreview.com/wr/pub/Style_Sheets

WebReference’s HTML with Style 
http://www.webreference.com/html

World Wide Web Consortium’s CSS Specification
http://www.w3.org/Style/CSS/

1.5.2	JavaScript

Like with any serious scripting language, you can spend countless hours exploring the ins and outs of JavaScript. But unlike with some languages, you can pick up the basics of JavaScript (or at least learn what to cut and paste from examples) and start using it in your pages within a couple of hours. 

With JavaScript, you can: 

•	process data collected in HTML Forms right on the user's computer, without involving a server (or a programmer with advanced Perl, C, or other programming language skills)
•	create and store data on the user's machine
•	add interactivity to graphics
•	change page elements on the fly based on user input
•	and integrate HTML data more tightly with other Web technologies (for example, Java applets and ActiveX controls)

Before JavaScript, creating interactive Web pages was far more difficult - for the page author and the hardware. Collecting and processing user data required Forms and CGI programs. Unfortunately, each time a user views the page and submits the Form, the data travels from the Web browser to the CGI script. The CGI script then processes the data and returns any results to the user in the form of a new HTML-based Web page. This happens every time a user makes changes to the HTML Form, thus relying on the server's CPU power and the time spent sending information back and forth across the Internet connection. 

JavaScript solves many of these problems by collecting and processing the data inside the browser on the user's system (although you may still need to send the processed data to a CGI script afterward). JavaScript is also an interpreted language, meaning it doesn't end up as an executable file for a specific computer. Instead, the code runs only on a JavaScript interpreter in the user's browser. You can write JavaScript code once, and it will work on any system with a JavaScript-capable browser (Netscape Navigator 2.0 or later or Microsoft Internet Explorer 3.0 or later) on any computer platform. 

1.5.2.1	Hands-on: Using JavaScript to validate a Form

A useful application of JavaScript is for checking Form input before it goes to the Web server, thus saving bandwidth and time, both for the Web server and the person who will receive all the Form results by email. The script can check for empty input fields or invalid email addresses. If these errors exist, JavaScript cancels the Form submission and displays an alert box. Each time the Form is submitted, JavaScript will check the Form and alert the user of errors before allowing the complete Form input to go to the server.  

In this exercise, we will add JavaScript to the Form we designed earlier in this module. We will check that the user has input a name and correctly formatted email address. The HTML Form should thus contain the following input fields:

<form>

<p>Email address: <input type="text" name="email"></p>

<p>Name: <input type="text" name="user_name"></p>

<p><input type="submit" value="Submit"></p>

</form>

1. Locate your Form

Open your HTML Form in Netscape Composer. Ensure you have included the fields we will be working with, as shown above.

2. Name the Form elements

The Form is named theform, and its two inputs are named email and user_name. 

<form name="theform" action="mailto:" method="post" enctype="multipart/form-data">

<p>Email address: <input type="text" name="email"></p>

<p>Name: <input type="text" name="user_name"></p>

<p><input type="submit" value="Submit"></p>

</form>

3. Create the JavaScript

While JavaScript code can be written anywhere in the page, it is good practice to always place it within the HTML <head> area. We do this in order to keep all the JavaScripts together, and to ensure that the browser reads the JavaScript code before the page appears. If the JavaScript code was placed near the end of the page but called upon near the top of the page, the user might inadvertently trigger an event handler before the entire page and JavaScript has loaded, thus producing an error message. 

<script language="JavaScript" type="text/javascript">
<!--
function formCheck() 
{
if (document.theform.email.value.indexOf("@") == -1 || document.theform.email.value == "")
    {
    alert("Please include a proper email address.");
    return false;
    }
    if (document.theform.user_name.value == "") 
    {
    alert("Please put in your name.");
    return false;
    }
}
-->
</script>

First, formCheck() will determine if the email input has an @ sign in it or is empty. If either of these scenarios are true, it alerts the user and returns false so the Form will not be submitted. Next, it determines if the user_name input is empty. If it is, it also alerts the user and returns false. Either way, it won't allow the Form to be submitted unless the required fields have been completed.

4. Add the event handler

We bring the Form and JavaScript together using an event handler in the Form tag. This event handler, onSubmit, must return true for the Form to be submitted: 

<form name="theform" action="mailto:" method="post" enctype="multipart/form-data" onSubmit="return formCheck()">

When the submit button is pressed, the event handler is triggered; it in turn runs JavaScript function formCheck() which makes sure there are no errors in the Form. 

5. Test the Form functionality in your browser

If you notice any problems, check you have the complete page code:

<html>

<head>

<title>Forms Validation</title>

<script language="JavaScript" type="text/javascript">
<!--
function formCheck() 
{
if (document.theform.email.value.indexOf("@") == -1 || document.theform.email.value == "")
    {
    alert("Please include a proper email address.");
    return false;
    }
    if (document.theform.user_name.value == "") 
    {
    alert("Please put in your name.");
    return false;
    }
}
-->
</script>

</head>

<body>

<form name="theform" action="mailto:"  method= "post"
 enctype="multipart/form-data" onSubmit="return formCheck()">

<p>Email address: <input type="text" name="email"></p>

<p>Name: <input type="text" name="user_name"></p>

<p><input type="submit" value="Submit"></p>

</form>

</body>

</html>

Now we have completed this exercise!

Forms validation is only one of many JavaScript possibilities. For more information on how to write JavaScript, see:

Webmonkey’s JavaScript tutorial
http://www.hotwired.com/webmonkey/javascript/?tw=frontdoor

Off-the-shelf JavaScripts are available from the sites such as:

WebReference’s Doc JavaScript
http://webreference.com/js 

JavaScript Source
http://javascript.internet.com

Javascript.com
http://www.javascript.com

If you have completed Web Authoring 2 you will have been introduced to Images on the Web, Page layout techniques, HTML Forms, the development of Web languages, Cascading Style Sheets and Javascript. 

With the knowledge gained in this module, further reading, hands-on Web Authoring practice and lots of coffee, you should be able to produce most, if not all of the components for a comprehensive Web site.

All the best! 

References

Image file size constraints
Notes from Yale Style Guide
http://info.med.yale.edu/caim/manual/graphics/graphics.html

Tables
Exercise based on Webmonkey Tables tutorial
http://www.hotwired.com/webmonkey/html/96/47/index3a.html?tw=html

Forms
Exercise based on adapted from Web Design Resource tutorial http://www.pageresource.com/html/formhelp.htm

Cascading Style Sheets
Notes based on GlassDog Design-o-Rama
http://glassdog.com/design-o-rama/ 

JavaScript
Notes adapted from c|net Builder.com tutorial
http://www.builder.com/Programming/Javascript