Nancy's Html and Javascript Learning Page

Simple Html

What is Html?

Most web pages are written in Html or Hyper Text Markup Language. I don't think of this as a language. It is text, with tags embedded here and there to direct the formatting of the text. Html files are read by a browser (such as Netscape or Microsoft Internet Explorer) to produce a nicely formatted page.

What are Html tags?

Html tags, or elements, are formatting instructions for the browser. They direct the placement of paragraphs, headings, forms, buttons, tables, images, links, colors, fonts, and so on. It seems obvious that the browser must have a way of differentiating its formatting instructions from text. This is done by enclosing the formatting instructions in angle brackets, for example ‹pre›. The resultant structure is called a tag. Html tags come in pairs, one to begin the formatting, and the other to end it. The ending tag is identical to the beginning tag except that it contains a slash, e.g. ‹/pre›. Every beginning tag should be followed by the corresponding ending tag. Otherwise the browser is likely to become confused. There are a few exceptions to this rule, notably the paragraph tag, ‹p›. Html tags will be familiar to anyone who has used the old Word Star, or Donald Knuth's Tex or LaTex.

How are Html files produced?

Html files, like computer programs, must be written with an editor that does not insert any characters into the file except those which are keyed in. For example, Notepad. Html files are given the extension .htm or .html. Here is a very simple html file. Note that each tag is opened and closed.

    The body section contains the text to be displayed by the browser.
    The head section contains instructions to the browser that will be applied to the whole file.  
Click here to see the output of this simple file.

No formatting instructions were given in either the head or the body of this very simple file. Thus the browser uses its default settings to format and display the text, and the result is quite unremarkable. Html files may contain comments which are done like this:

‹!-- html comments are done like this--›
Comments may cover several lines.

Some Simple Formatting Instructions


Html provides six headings. They are written thus. The text goes between the beginning and ending tags.:

‹h1› Text for Heading 1         ‹/h1›
‹h2› Text for Heading 2         ‹/h2›
‹h3› Text for Heading 3         ‹/h3›
‹h4› Text for Heading 4         ‹/h4›
‹h5› Text for Heading 5         ‹/h5›
‹h6› Text for Heading 6         ‹/h6›
Click here to see the output of this code, which gives the default settings of the headings.
A new paragraph is begun by using the ‹p› tag. Html ignores white space and line breaks within text (unless the ‹pre› tag is used.) The paragraph tag leaves white space before and after it. Its margins can be changed using the margin-left and margin-right attributes, but there does not appear to be any way to indent it. It is not necessary to use a ‹/p› tag, except in XHTML.
Block Quotes
The blockquote tags produce a paragraph with indented margins.
Preformatted Text
        Preformatted text, 
                             like this, 
                                      can be included by

                                                    using the 

             ‹pre› and ‹/pre›

Simple Font Changes
Bold text is made with the b tags

Italicized text is made with the u tags

Striken through text is made with the strike tags

xi Subscripts  are made with the sub tags

23 Superscripts are made with the sup tags

Text one size bigger than normal is made with the big tags 

Text one size smaller than normal is made with the small tags

Underlined text is made with the u tags, but could be confusing to the reader, 
because the default for clickable text is underlined
Horizontal Rule
A horizontal line can be included by using the ‹hr› tag. There is no closing tag.
Line Breaks

A line break can be included by using the ‹br› tag. There is no closing tag. Here are 2 line breaks, which should leave only one empty space.

and then some more text. However, the break tag is most useful for breaking a line in the middle
like this.

Slightly More Advanced Html

Html is an evolving language. Whether a given tag can be used depends on whether browsers support it. Typically there are several different ways to achieve a desired formatting result. Some will be supported by one browser, some by another. Some will be easy to implement and change; others will be tedious. The longer my web pages become, the more I find that I want to write my text with a minimum of tags to delineate its structure, and to do the formatting elsewhere, in such a manner that one tag can apply to the entire document, or to whole sections of the document. This is the direction in which the language is moving. It is the goal for the new XHTML language, now under development, to structure the text, and for the styling to be done with CSS in an external file, or perhaps in the header. Browsers typically follow the language, or perhaps strike off in their own direction. I'm trying to use tags that are accepted by both Netscape and Internet Explorer, and to separate the process of structuring the text from the process of display.


Attributes are properties that modify the effect of tags. For example the header tag has the attribute, align, and the property align has can take on any of three values: left, center, or right. The code to center a heading looks like this:
‹h2 align="center"›  Heading Text ‹/h2›

External files and tips on managing them

My web pages use four types of external files: The header calls a ".css"style file, and one or more ".js" files containing javascript functions. The body calls numerous ".gif" or ".jpg" files containing images, as well as numerous ".htm" files containing html code. The browser must be able to find all these files.

Clickable Links and the Anchor Tag

Clickable Links are the most notable feature of Html. Click on an icon, or some highlighted text, and something new appears. This feat is accomplished by using the anchor tag, ‹a›. Within the beginning anchor tag is enclosed the name of a file containing new material to be viewed by the browser. Between the beginning and ending anchor tags is enclosed the text to be clicked upon.

Click here for more on Clickable Links.


Click here for more about Colors


Images are inserted into text by using the image tag. For example, the code:
‹img src="maxwell.jpg" width="30%" border="1"› 
‹big›James Clerk Maxwell‹/big›
produces the following image, providing the browser can find the file maxwell.jpg.

James Clerk Maxwell

Animations, or animated images, are inserted in exactly the same manner as other images. The animation is contained within the image file.

Maxwell's little demon.

The image tag is an empty element and has the following attributes:

src          the URL of the image file
border        produces a border around the image - value given in pixels.
width        the width of the image in %
height       analogous to width.  Both need not be set.   
hspace       leaves space between the image and the text
vspace       analogous to hspace
lowsrc       the URL of a low resolution image to be loaded while the image is loading.
name         an identifier, by which to refer to the image 
alt      alt allows a text string to be put in place of the image 
           in browsers that cannot display images. 
align    align sets the relationship of the image to surrounding text,
          but its values vary with the browser from left, right, center to 
             top, middle, or bottom. 
ismap    ismap is used when the image is inside an anchor tag to make the image clickable.
Here I've set the name, width and height.

div and span

div is used to delineate logical sections of a document. Names or classes given to the divisions can be used with scripts or css to modify the formatting of the divisions. The div element can contain paragraph elements, images, and other div elements.

span is similar to div except that it is used to group inline text. That is, span cannot contain other elements. I found that event support for differs for the two.


ul is unordered list ol is ordered list
  1. first item
  2. second item
  3. third item
  1. first item
  2. second item
  3. third item
  1. first item
  2. second item
  3. third item
  1. first item
  2. second item
  3. third item
  1. first item
  2. second item
  3. third item
Definition lists dl


Following is a table with one row and 2 columns;the code used to produce it follows.
The quick brown fox jumped over the lazy dog. Then he jumped back.
‹table border="1" width="40%" cellpadding="5" cellspacing="2"›
  ‹td width="50%" valign="top"›
   The quick brown fox jumped over the lazy dog.
  ‹td width="50%" valign="top"›
    Then he jumped back.
The table tags bracket the table. A tr tag is used for each row of the table. Within the tr tag, td tags delineate each column in that row.

The table tag has attributes of:

border         values of 0, 1, 2, border = "0" means no border
width          the width of the entire table
cellpadding   the distance between the text and its borders
cellspacing  the distance between cells
The td tag has attributes:
A table can be a canny way to leave some space blank. In the next table, I set the td height="300". A % wouldn't cut it. There is a th tag for table headings, but I hear it has poor browser support. This table came from W3 Schools HTML Layout page.
Questions: Answers:

Forms and Input

Click here to learn about Forms


Style refers to those properties of the document such as color, margins, fonts, etc. Here are three recommendations for setting style. All are from W3C and all work in my hands.
External Style Sheet
The external style sheet is the most efficient way to set style if your main Html file calls other files. You can place the same bit of code in the header of all files, so that the style is uniform throughout your document. To do so, you use a link tag in the head section of the file, as shown.
‹link rel="stylesheet" type="text/css" href="blue2.css"›  ‹/link›

The attribute href gives the name of the style file.
The attribute rel gives its relationship to the including document.
The attribute type gives the type of the file.
There is no closing tag.
The link element can be used only in the head of the document.
Following is the entire coding of the style file used for this document.
body  { color		:	#000000;
	background	:	#d9e9ff;

 h1,h2,h3,h4,h5,h6{ font-family	:Arial, Helvetica, sans-serif;
                    color	:	0000ff;
                    background	:	#ffffff;
                    text-align	:	left;

a:link 	  { color: purple;font-weight:bold; font-size:larger}
a:visited { color: green; font-weight:bold; font-size:larger }
a:hover   { color: red;   font-weight:bold; font-size:larger }
a:active  { color: orange;   font-weight:bold; font-size:larger }

p        {margin-left=40px; margin-right=60px}
Internal Style
Here you use style and /style tags. These are intended to go in the head section, but they work in the body section as well.
Inside the style tag use the type attribute:
Between the opening and closing style tags, you may place
statements such as:
p{margin-left: 20px}
h1 {color: red}
h3 {color: blue}
Inline Styles
An inline style can be used when a style is to be used only once. Here style is used as an attribute inside another tag, thus:
style="color:red; margin-left:20px"
or whatever.  
Any CSS property can be used.

In the following example, the above style was applied
to a paragraph tag.  The paragraph is now red and indented.

This is a paragraph, which goes on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on.

In this example style is used as an attribute inside an anchor tag. 
The code results in the link lacking the usual underline.



Click here for Resources for learning html and javascript, the best of which is W3C.

Methods available to Html through the Browser

These are window methods, but the window need not be written.

Window Properties that can be accessed

These are all window properties, but the window need not be written., 


Event Handlers Supported by Html (Maybe)


Html and Hierarchy

Html is just begging for a programming language to work with.

I say this because everything in html has names. Thus a "window" has a "document", a "history", and a "location".

A "document" can have one or more of the following: "anchor", "applet", "area", "form ", "image" and "link".

A "form" can have one or more of the following: "button", "checkbox", "FileUpload", "Hidden", "Password", "Radio", and so on.

It gets better. All these entities have names and values. They are waiting to be used as variables. Even if you don't assign them values, the browser automatically does. The browser keeps an array for each element in the page.

In Microsoft Internet Explorer, you can refer to just about anything by using the document.all array. You refer to it as:


Netscape does not have this particular array. It has other arrays which accomplish the same purpose. (I've not yet compared the similarities and differences between Netscape and Microsoft's versions of these arrays.) For example there are arrays of images and forms:



You can also refer to just about anything by its name, if you have named it. For example if you have named an image "star", you can refer to it as:

By the way, here is an interesting way of creating images. Watch what it does.

I can't use html for long without wanting to program with it. And therein lies the heart of the problem.

Scripting Languages

Html is made to be used in tandem with a programming language. It has a script tag to be used for this purpose. You identify the language to be used in the script tag, e.g. type = "text/javascript" The programming instructions are included between the beginning and ending script tags. Html can be used with any of several languages. I've used Javascript.

Javascript is a very loosely structured language. It should horrify anyone who admires Pascal. Any variable can be declared by saying:

var x

x could be an integer, a string, whatever. The amazing thing is that this system seems to work fairly well.

The latest version of javascript seems to be 1.2 This is a beta version. It still has bugs. There are tutorials all over the internet, based on different versions of Javascript. Even Netscape the author doesn't have a current language reference for it. I don't recommend any of the internet references except W3C, because I've wasted excessive amounts of time with them. An authoritative language reference is far preferable.

The main problem with Javascript is that Netscape (the original author) and Microsoft support it differently. What works with one browser cannot be expected to work with another. You also need to be current on which version of browser does what.

Don't assume that anything you find on the internet will work in your hands until you try it.

For example, Netscape 6.2 couldn't find my file of functions, "jsfunctions.js" on the desktop, even when I gave it the exact address. So ironically enough I am using IE to run this page. Do you notice the little alert button that pops up when the page loads? That has become essential. It tells me that the browser found my file of functions. (That is where that particular function, go(), is found.) Click here to learn more about Programming with Javascript and to see examples that work, at least in my hands.

The Document Object Model

Javascript can be used to manipulate elements of the html document. This is called Document Object Model programming. It is used to make the document user interactive. It can also be used for animation.

I do experiments to find out if a given name will refer to the object I think it will. For example, here is is an experiment I did to find out what is in Microsoft's document.all array.

It appears that the document.all array lists two kinds of things, URL's and objects. Up to this point in the page there are 176 objects and files. Here's another experiment. First I printed out a series of images.

Now I'll print out the images array, document.images[i]

Now let's print out the sources of the images:

Here is an application of Document Object Model programming. Let's change an image after the page has loaded. First let's use the html img tag to print out an image:

Now let's change the image by using a script.

Scrolling Images by Ray Stott, 1998

These scrolling star images are from Ray Stott . First they are written into the document. Then a function changes the source of the images. This example doesn't belong in this section, because I don't understand it. However, it won't work for me unless I put it in this file, and start it when the document loads, that is call the function in the body. So here it is.

Creation of Objects

First define object.

There's no big deal about creating an object. Looking at the document.all[i] array shows that there are already many of them in this document. Everything except files appears to be an object. This includes images, tables and forms. This section shows how to create text (or whatever) blocks using the div and span tags. These blocks function as objects.

The following script comes from: It was written only for MSIE 4.0

Div and span tags do about the same thing. They define a block of material, like some text or a picture as an object, and give that block of material a name. There is a minor difference such as a newline; I'm not sure.

Here's a span tag:

hey, this object is named bob

The appearance of "bob" is due solely to an inline style attribute. A rather primitive function named "proveIt" will describe an object. To call up function proveIt, click on one of the links.

Prove It

Prove It

The first link takes you back to the top of the page. The second does not. For the script to work in Navigator, you must have a position defined on the object.

Making Objects Move

To move an object, you change its CSS properties, using a Javascript function. First, create the object, using the span tag to include the image, or whatever, into an object.

I first learned to do this using a function called MoveIt() (see jsfunctions.js) from the internet. It is unnecessarily complex. MoveIt() calls itself in order to move an object repeatedly. Not only is it unnecessarily complex, it necessitates placing the name of the object within the function. This results in very cumbersome code, if you want to move many objects.

The function MoveIt (See jsfunctions.js) includes setTimeOut, and calls itself recursively. Set Time Out is designed to move an object one time. The function setInterval is designed for moving an object continuously. The use of setInterval is demonstrated here.

Placing Moving Objects within a Table --First Attempt

Here was my first attempt to move several objects. Note the cumbersome MoveIt2() which I used to move only 3 objects.

In these examples, I have been moving objects by referring to them by name. In order to move many objects, I need to refer to them by an array number. The easiest way to do this appears to be use of the document.images[i] array. Unfortunately, I cannot make that work, perhaps because x and y are not settable.

Making Objects Move by Using their Array Indexes

Next Project: Making an array of Objects move within a Table

First I created a table.

Then I placed a number of objects within it, using the span tag. They all lined up in order at the top left of the table, like text.

Then I did an experiment to find the array indices of the objects. Since each object contained an image, every other object referred to a span block. Note, each paragraph that I place above the table changes the array index by 1.

Then I created an array of x and y positions. Then I gave the objects these positions, by saying

Then I did experiments to find out how their positions correlated with their initial positions, and modified the object's positions accordingly, to keep them always in the table.

I found that, even though each object contained a 20x20 image, the objects were 4 pixels apart, so that each object occupied 24x24 of space. It really helped to have the table background in a contrasting color from the objects.

It is fairly obvious that I cannot place an object within the right or bottom 24 pixels of space. I found also, that each succeeding object calculated its position as the sum of its original position and its new position. Therefore, I had to subtract 24 pixels from the x position for each succeeding image. Making these corrections kept randomly spaced objects within the table.

I will have to make similar corrections to keep objects within the table, when I move them.