Web Authoring 2
1	The Web site
1.1	Images
Images may be sourced from an image bank or from participant’s own collection. 

1.1.1	Image file size constraints

From Yale Style Guide http://info.med.yale.edu/caim/manual/graphics/graphics.html

Graphics and modems

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.

Hands on placing image, referencing correct file path, alignment, alt text, border. This area will be fleshed out…(transparent gifs, jpgs, web pallate, imagemaps… or if pressed for time, pointers to where participants can find out more)
1.2	Page layout techniques
1.2.1	Tables

Even though HTML4 recommends using tables only for tabular data, tables are ‘abused’ to force page layout. Most graphical browsers (Netscape 1.1+) can read tables. 

Bear in mind, however, that screen-reader browsers for the visually impaired often have difficulty making sense of a page that is formatted using tables. Often, the screen-reader will render the table but read left to right across the entire page, regardless of table cells. One way of alleviating the accessibility problem for this user group, when using tables, is to have navigation elements either outside the page layout table, or in a small left-hand-side column and allowing the page text to wrap in one large right-hand-side column. (This might be too confusing at this point. Maybe mention this after the participants have mastered tables, and had some ideas on how they’re going to use them).

Adapted from http://www.hotwired.com/webmonkey/html/96/47/index3a.html?tw=html

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. And if you understand what you can and can't do right from the beginning, you'll save yourself lots of hassle in the long run.

There are three basic units 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’)

The thing to remember here is that a <td> is always enclosed in a <tr>, which is always enclosed in a <table>. 

Let's make the basic table we outlined above. Here it is: 

Cell 1	Cell 2	
Cell 3	Cell 4	

And 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 sandwiched 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">

You can also 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>, like so: 

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

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

You can use the align tag in a table, in order 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. 

But wait, there's more! 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 all aligned, you may want to adjust the spacing of the cells. Here are two tags that do really similar things that you'll probably mix up a lot: cellspacing and cellpadding. 

They both put a little space between the cells of your table, but they do it 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, like so: 

<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. Just remember: Spacing increases the size of the border, and padding increases the space around the border. 

Now that you've mastered tables. here are some tips and tricks that might come in handy: 

•	If you don't specify cellpadding and cellspacing, they default to the number 2. So if you really want your cell contents to get close and personal, be sure to specify cellpadding=0 and cellspacing=0. 
•	For more control, put nowrap in your table cell, like so: <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%"> (warning: height=100% only works in Netscape). 

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

•	<tr bgcolor=”#xxxxxx”>
•	<td bgcolor=”#xxxxxx”>

1.2.2	<DIV>

These days, with HTML4, it is good practice to start diving the page into its logical sections. For example, your page will normally begin with a headline. Let’s say this is always centered. Next comes your text, which is generally left aligned. At the bottom of the page, you might have a centered footer / copyright statement. 

Your page would then fall into three major sections:

<DIV ALIGN=”CENTER”> 
…header…
</DIV>

<DIV ALIGN=”LEFT”>
…body…
</DIV>

<DIV ALIGN=”CENTER”> 
…footer…
</DIV>

While not crucial to use as you’re starting out with web authoring, you’ll find that <DIV> comes in handy when you make extensive use of style sheets (that is, when the majority of web users are using the browsers that support CSS). You’ll probably use <DIV> to define your own classes and identifications for common styles across your website, <DIV ID=”sectionName”> or <DIV CLASS=”styleName”>.
1.3	Forms

Adapted from http://www.pageresource.com/html/formhelp.htm.

To use a form on your page, 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. There are a couple of ways to get a CGI program for your form, and one alternative to CGI: 

•	You can program it yourself, or find one in the public domain, and upload the program to the directory you keep CGI programs in (usually, a directory called /cgi-bin/). A good place to find CGI programs is http://www.freescripts.com  or http://www.cgi-resources.com 
•	You can see if your ISP has one available for your use, and find out from them how to use it in your HTML form code. 
•	You can use a free CGI processor, such as http://www.response-o-matic.com 
•	There is an alternative workaround to CGI that works on version 4+ browsers. More information in http://www.htmlgoodies.com/tutors/forms.html

It’s usually easier to look to your ISP or web hosting service, since they generally provide free CGI programs, along with instructions on how you implement them.

The most common program to handle a form is one that sends you the results via email, and this is the program most servers will provide. For this exercise, we will create a form on the page that mails form input to an email address. 

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

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 web server’s GCI program If you are using your own program, upload the program to your server and use the address of your program. Before you upload a CGI program, be sure your server allows you to use your own CGI programs! 

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. 

Let’s start by looking at a tag that allows the user to enter a single line of text: 

<INPUT type="text" name="yourname" size="25" maxlength="60"> 

This tag will display an input box on your page like this: 

[insert image of text box here]

•	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 your email. We used the name "yourname" in the example. Suppose the user input their name, let's say they typed in Will Smith. When you got your results, you would see the name you gave the input line, followed by what the user typed in, like this: yourname: Will Smith 
•	The size command allows you to specify how many characters long you wish the text box to be. 
•	The maxlength=" " command will force the box to stop scrolling the text over when it hits that number of characters, which would be 60 in this case. 

So, how do you get one of those big spaces for people to write in more than one line? You will use a <TEXTAREA> tag. Here's an example: 

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

This will give you a textarea like this: 

[insert image of textarea here]

•	Textarea requires you to have the 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. 

So how about a radio button? Here is the tag: 

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

This will give you a nice little button for people to click on to highlight it: 

[insert image of radio button here]

•	type="radio" tells the browser to display the little 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 food, and the one the user selected would be what I got back as their "foodchoice". 

What about a checkbox? To use a checkbox, use this tag: 

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

Now you get a little square instead: 

[insert image of checkbox here]

•	type="checkbox" tells the browser to display the little box. 
•	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, like the radio buttons above. 

How do you make drop-down (pull-down menus?) This is done with the <SELECT> tag: 

<SELECT name="bestcolor"> 
<OPTION SELCTED>blue 
<OPTION>red 
<OPTION>black 
<OPTION>green 
<OPTION>polka dots! 
</SELECT> 
This will give you the following drop down menu. Click the arrow on the right side to view your choices! 

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

How do you make text instruction appear next to the boxes so users know what they are filling out? Just 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>

[insert image of <p>field instruction <br> text box</p> here]

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

<INPUT type="submit">  <INPUT type="reset">

[insert image of form buttons “Submit Query” and “Reset” here]

•	The "submit" button sends the users input to the CGI program to be processed and sent to you. 
•	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!">

Would look like this:

[insert image of form button “Send Now!” here]

Last, but not least, Remember to put the </FORM> closing tag at the end of the form! 
2	Development of Web languages
2.1	Glossary and background

This glossary is provided in a separate document for handout. It explains key terms and concepts in the sequence of web evolution - from what is hypertext, to current development in the area of XML. This can be presented as a lecture, with the trainer reading through these concepts and adding additional information/anecdote where appropriate. 

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. 

2.2	Dynamic HTML

2.2.1	CSS

From GlassDog http://glassdog.com/design-o-rama/

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 sort of cheat and make a graphic that positions words the way you want them to be seen. And, yes, you have some control over appearance with the font tag. But 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.

Cascading, because you can use more than one and the browser needs to be able to tell which one to use. Style, because that's what you're defining. Sheets, because Cascading Style Doodads doesn't have that nice, tidy, professional-sounding ring to it. With CSS, you are suddenly given the capability to perform some rather amazing page design stunts all without a net.

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 browser, they wont see CSS effects. Which means that unless you plan on designing separate pages for browsers that can and can't interpret CSS, you would be best advised to use Style Sheet instructions as incidental and not integral to your page design.

Your next question is likely, "Can I design a page that allows me to use CSS and still make it look good for everyone else?" Short answer: Yes. Long answer: We'll get to that later. Given that you may not even choose to use Style Sheet formatting now, it’s good to learn, because it will be used widely in the future. 

You need to get familiar with some new concepts when you start thinking about CSS. Firstly, it used to be that you could only attach layout instructions to certain HTML tags. For example, you could define the background 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, a letter can have its own background and text effects. So think of everything on a page as an element that you can now ascribe individual attributes to. 

Note: 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>. The reason is because CSS will be very serious about what it does when it starts affecting your page. 

For example, if you use <P> more as a separator than as an envelope, along with </P>, to encompass a Paragraph (like you use one between every element - including tables and images - on a page to provide a line of blank space) you may find your text bleeding across your images, or being hidden by them, and your tables collapsing in on themselves attempting to conform to your CSS margins and such. Remember, a TABLE is not a Paragraph. It's a TABLE. When you want blank space around an image, use the HSPACE and VSPACE tags which is what they're there for. If you want to separate your 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!

Another concept to become 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 yield a white box of text, surrounded by a border of blue, sitting on a red page. Or the background of any of those enveloping elements could be a graphic. Or an element might have no background defined and would be transparent. Using those three boxing envelope elements you can move other elements all over your page by any measurement (centimeter, pixel, inch, etc.) so you suddenly have complete layout control.

Learning how to define things is easier once you know what you can define: 

What It Is	What It Does	How It's Defined	How It's Used	
background-color	Sets background color of an element. 	color-name
RGB hexidecimal	{background-color: blue}	
background-image	Same as above, only with a graphic. 	URL address	{background-image: url(dots.gif)}	
background-repeat	Specify how a background graphic will tile. 	repeat (tile both directions)
no-repeat (do not tile) 
repeat-x (horizontal) 
repeat-y (vertical) 	{background-repeat: repeat-y}	
background-attachment	Specify if background image will scroll with text. 	fixed
scroll	{background-attachment: scroll}	
background-position	Specify where background will appear initially. 	horizontal/vertical by unit count (in, px, em, ex) or screen percentage	background-position : 50px 50% (50 pixels in, 50% down)	
background	Provide shorthand for all above elements. 	URL address,
color-name
RGB hexidecimal	{background: #000000}
{background: url(images/circles.gif) repeat fixed}	
clear	Specifies where floating elements (float) are not accepted. 	none
left
right
both	{clear: none}
With this style, floating elements are allowed on all sides. 	
color	Sets element color. 	color-name
RGB hexidecimal	{color: teal}
{color: #0099ff}	
float	Specifies how other elements will wrap (float) around this one. 	none
left
right	{float: left}	
font-family	Sets font. 	typeface name
font family name	{font-family: courier}	
font-size	Sets font size. 	centimeters (cm) 
inches (in) 
pixels (px) 
points (pt) 	{font-size: 12pt}
{font-size: 25px}	
font-style	Italicizes text. 	normal
italic	{font-style: italic}	
font-variant	Use Small Caps	normal
small-caps	{font-variant: small-caps}	
font-weight	Sets thickness of text. 	extra-light
light
demi-light
medium
demi-bold
bold
extra-bold	{font-weight: bold}	
font	Use as shorthand to specify all above "font" elements as a group. 	
	{font: bold 12pt/12pt Times small-caps}	
line-height	Sets the distance between lines of text. 
(This will allow for some fun tricks!) 	centimeters (cm) 
inches (in) 
pixels (px) 
points (pt) 
percentage (%)	{line-height: 20pt}	
margin-bottom	Sets the bottom margin for an element. 	centimeters (cm) 
inches (in) 
pixels (px) 
points (pt) 	{margin-bottom: .5in}	
margin-left	Sets distance from left edge of page. 
(You can even set a negative margin!) 	centimeters (cm) 
inches (in) 
pixels (px) 
points (pt) 	{margin-left: 1in}	
margin-right	Same as above, only on the right. 	centimeters (cm) 
inches (in) 
pixels (px) 
points (pt) 	{margin-right: 1.5in}	
margin-top	Same as above, at the top. 	centimeters (cm) 
inches (in) 
pixels (px) 
points (pt) 	{margin-top: 20px}	
margin	Use as shorthand for any margin elements. 
Measurements are applied top-right-bottom-left (like a clock starting from 12). If one measurement is used, it is applied to all margins. If two or three are used, the missing measurements are taken from the opposite side. 	centimeters (cm) 
inches (in) 
pixels (px) 
points (pt) 	{margin: 1in 1.5in 2in}
In this case, you end up with a 1 inch margin at the top, a 1.5 inch margin on the left and right (the missing measurement taken from its opposite side) and a 2 inch margin on the bottom. 	
text-align	Sets text alignment. 	left
center
right	{text-align: center}	
text-decoration	Underlines or otherwise highlights text. 
(Also see: font-style) 	none
underline
italic
line-through	{text-decoration: underline}	
text-transform	Changes appearance of effected section. 	capitalize
lowercase
uppercase
none	{text-transform: uppercase}	
vertical-align	Specifies the vertical positioning of the element. 	baseline 
middle
sub
super
text-top
text-bottom	{vertical-align: super}	
text-indent	Sets distance from left margin (not from left edge of page). 	centimeters (cm) 
inches (in) 
pixels (px) 
points (pt) 	{text-indent: 1in}	

You define styles by groups of the above elements and assign them to HTML tags. You can assign them to any HTML tag. 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. 

How you assign these elements gives you further options.

You assign styles in three ways:

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

<LINK REL=StyleSheet HREF="default.css" TYPE="text/css" TITLE="My Really Cool Default Style Sheet"> at the top of the HTML page before the </HEAD> tag pointing to the .CSS page and it will incorporate all the styles! That way you can define one set of styles for multiple pages and not retype it for every single page just by LINKing them all to the same .css document. The other advantage is you can share style sheets with your fellow designers because anyone can link to your style sheet since it has a distinct URL. You can build a Style Sheet library and allow others to use yours and you can use theirs. Cool? 

2. Define the styles within each HTML page like this: 

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

This way you put all the elements at the top of the page instead of linking to a separate page. Obviously that involves more work for you, but in those cases where you want distinct pages (or maybe you want to use a linked CSS for your other pages but the main page should stand out) you can stick it all in one place. 

3. Lastly, you can define single sets of styles within the body of your HTML document: 
<P STYLE="color: red; font-family: 'New Century Schoolbook', serif; font-size : large;">This paragraph is styled in red with the New Century Schoolbook font, if available.</P>

So instead of defining every little tag on some big list, you define a tag inside your document to assign the style only to where you want the style to change. (Note the </P> at the end to denote that that is also where you want that style definition to end) 

Now you have four different ways that HTML tags get defined. You have the default method if you don't use Style Sheets, the linked CSS page method, the top-of-the-page CSS method and the inline CSS tag method.

So, what if you use all of them on a single page? And just to make things even more confusing, plans are in place that will allow the people who visit your page to use their own CSS definitions on your pages, changing everything you planned out so carefully. So 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 and such for their personal viewing pleasure by not defining them in your CSS. See how life can get easily complicated?

How is your browser supposed to know what a tag should look like, and what if the browser can't interpret CSS data?

This is where "Cascading" comes in. Here's the order that styles get used:

1.	Browser default styles (no style sheet used) are used first. So <P> just means <P> 
2.	The Reader'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 viewer 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 Author's style sheet overrides the Reader's styles where defined. 

Remember, you can apply style definitions to any tag so you could end up with a combination of Reader and Author styles all on the same page depending on who defined 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.	In-page (inline) styles override Top-of-page styles. 
Which makes sense. You're coming from big-picture down to specific.

But... what if you want a certain Style element to always take precedence over any other element that might override yours? Hey, they've thought of that, too! You would do it like this:

H1 {color: black ! important;
background: white ! important;
font-family: "Times New Roman"} 

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

1.	Browser default styles (no style sheet used) 
2.	Reader's style sheet overrides browser default and applies styles where defined. 
3.	Author's style sheet overrides reader's styles where defined. 
4.	A Reader Style with an !important declaration overrides an Author Style without it. 
5.	An Author Style with an !important declaration overrides a Reader's !important declaration. 

What it all comes down to is that for the time being, if you want special font tricks and margins and so forth to appear on everyone's browser regardless of which browser they're using, you'll have to include all the kludges (i.e. <FONT FACE="Times New Roman">) as well as your Styles. Older browsers that can't interpret them simply ignore them, so don’t worry about error messages. Conversely, browsers that can interpret them will ignore your kludges in favor of CSS definitions. It's messy, but that’s the way it is. 

You can, of course, include CSS stuff, leave out the <FONT> tags that would otherwise effect the text appearance and drop your center-aligned, borderless tables that provide fake margins and tell everyone to go update their browsers and those who won't or can't will still see your pages. They'll just look less perfect.

As it stands right now, Microsoft seems more on-board with this than Netscape, but that's sure to change. Both companies are using CSS as a model for their competing DHTML / Dynamic HTML - implementations and since the standards have been ratified, well, they're standards, right? You should really, really, really experiment with CSS before going public with your pages, because strange things can happen depending on how a browser interprets your definitions.

2.2.2	JavaScript

From http://www.builder.com/Programming/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 our 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 designer and the hardware. Collecting and processing user data required something called a common gateway interface (CGI) script that ran on the Web server. To use a CGI script, you first design an HTML-based Web page containing forms to gather input from users. Then you create (or pay someone to create) a CGI script in C or Perl to process the gathered input on the Web server. 

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 Web form, thus soaking up the server's CPU power and wasting time 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. 

Activity: each participant to receive navigation images (on and off states – maybe AWORC nav graphics? Participants own sites?) and we go through Universal JavaScript Rollovers tutorial, http://www.webreference.com/js/column1/ (Cheesy tutorial, but will adapt this to our needs.) 

This will be sufficient backgrounder, tutorials in their own time at Webmonkey:http://www.hotwired.com/webmonkey/javascript/?tw=frontdoor
3	Using Multimedia
3.1	Streaming Media
3.1.1	Shockwave/Flash

To do

3.1.2	RealMedia/SMIL

To do

3.2	Anything else????