Maxwell's little demon.
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.
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.
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.
‹html›
‹head›
‹title›simple‹/title›
‹/head›
‹body›
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.
‹/body›
‹/html›
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.
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.
Preformatted text,
like this,
can be included by
using the
‹pre› and ‹/pre›
tags.
Bold text is made with the b tags Italicized text is made with the u tagsStriken through text is made with the strike tagsxi 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
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.
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.
‹h2 align="center"› Heading Text ‹/h2›
Click here for more on Clickable Links.
‹img src="maxwell.jpg" width="30%" border="1"› ‹br› ‹big›James Clerk Maxwell‹/big›produces the following image, providing the browser can find the file maxwell.jpg.
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.
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.
| The quick brown fox jumped over the lazy dog. | Then he jumped back. |
‹table border="1" width="40%" cellpadding="5" cellspacing="2"›
‹tr›
‹td width="50%" valign="top"›
The quick brown fox jumped over the lazy dog.
‹/td›
‹td width="50%" valign="top"›
Then he jumped back.
‹/td›
‹/tr›
‹/table›
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 cellsThe td tag has attributes:
width valignA 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: |
‹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}
Inside the style tag use the type attribute:
type="text/css"
Between the opening and closing style tags, you may place
statements such as:
body{background-color:red}
p{margin-left: 20px}
h1 {color: red}
h3 {color: blue}
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. style="text-decoration:none"THIS IS A LINK!
These are window methods, but the window need not be written. window.document.write() window.alert()
These are all window properties, but the window need not be written., document.location document.URL document.title document.lastModified document.bgColor document.links.lenth document.all[i] document.links[i] document.anchors.length document.anchors[i] document.forms.length document.forms[i] document.forms[i].name document.forms[i].elements[i] document.images[i] window.frames[]
onClick onDblClick onMouseOver onMouseOut
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:
document.all[i]
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:
document.forms[i]
document.images[i]
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:
document.star
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.
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.
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.
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.
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: Tripod.com 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 bobThe 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.
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.
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.
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.
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.
|