Simple HTML (by D. Grimshaw)

It is very easy to create simple web pages with HTML. Here are some basics.

Markup tags are distinguished from content by surrounding them with angle brackets, "<" and ">". The browser used to read the HTML pages is an interpreter for the tags.

The browser used to read the Web page is told that the page is an HTML page by starting the page with <HTML> and ending it with </HTML> .

Web pages have two parts, a header and a body. So a contentless, but legal page looks like this:

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

Some useful HTML tags

These are mostly used to lay out the content a user friendly way, and to make links to other pages.

<TITLE> .. </TITLE> Used in the header section of the page. This puts a title on the first line of the browser, not in the body of your page. It is used by web search engines and various browser functions.
<H1> .. </H1> Used in the body of the page (as are all the other tags listed below). This instructs the browser to use its largest available font.
This type of HTML instruction is called a logical instruction in contrast with the absolute instruction you might give to a word processor such as Microsoft Word. In the latter as you would specify the point size absolute, e.g., 20 points.
The HTML tag leaves the actual choice of font size up to the browser. The idea is that given the writer of the document does not know the characteristics of the device displaying her document it is best to leave the details up to the browser which does know something of the characteristics of the machine on which it is running. Often the text between <H1> and </H1> is the same as the title text.
HTML provides 6 other font point sizes, down to <H7> .. </H7>.
<P> This causes the browser to start a new paragraph, which means, put in a blank line and start the text following the <P> at the left margin. (You do not need </P> usually, but it makes the structure of your HTML code more readable).
<BR> Puts the following text immediately on the next line. No blank line is added. (Note that browsers do not recognize end of lines as a word processor would do. You must use either P or BR.
<HR> Horizontal rule. Draws a horizontal line across the page.
<EM> .. </EM> Emphasize text. Usually bold. What happens is up to the browser and the machine it is running on. This is a logical command. You can also use absolute commands such as <B> .. </B> for bold.
<PRE> .. </PRE>. This tag preservers the enclosed text from the HTML interpreter. It is used to keep the original format of the enclosed text. <CODE> .. </CODE> works similarly.
<UL> .. </UL> This tag creates an unordered bullet list. Each bulletted item in the list was separated from its neighbours by using the <LI> tag. You can also used <OL> .. </OL> for ordered, that is, numbered, lists. These tags may be nested.

Two linking tags.

A site gains in power by cleverly linking documents together in a graph or tree structure.

Linking other documents.

To do this you use the anchor tag, A and give it the URL (uniform resource locator, or address) of the other document. There are quite of few forms of this tag. Here are two of the most common.

If you wish to link to another site, the tag looks like this:

<A HREF="http://www.microsoft.com">The Evil Empire</A>

This would link you to the home page (most likely called index.html) of Microsoft Corp. Most browsers display the text between the tags in blue underlined. Clicking the link would lead to the Microsoft page being displayed.

Some other versions.

<A href="http://www.scs.ryerson.ca">School of Computer Science Page</A>

A typical link to a home page on a multiuser system.

<A href="http://www.scs.ryerson.ca/~mes/courses/cps530/homework/a1.html">Assignment 1</A>

Linking to an image.

Web images come in two formats: gif and jpg (or jpeg). To place a picture on your page, do something like this:

Assuming the file me.jpg is in the same directory as the HTML file, the picture will appear at the point where you place this tag. The IMG tag comes with many attributes such as ALLIGN.

The IMG tag places the image directly on the page. You can also use the A HREF tag with an image in which case the image is displayed on a new page when the user clicks the link.

Relative and absolute paths.

The href's shown above are all absolute. The jpeg example is relative. When you are building your own site, you will create directories under you public_html directory for many of your pages. You can link these pages using relative addresses. For example, suppose you have a subdirectory

cps530stuff
which contains a file examinfo.html. Then on you index.html in you public_html directory you could have a link like this:

<A HREF="cps530stuff/examinfo.html">Exam information</A>

Mail.

Somewhere (usually at the bottom) of your home page you should have your email address. HTML provides the mailto tag for this purpose. Its form is, for example,

<a href="mailto:mes@scs.ryerson.ca">mes@scs.ryerson.ca</a>

The rest of HTML

There are many books on HTML. Among the features you might want to look into are tables, and frames. You can also use HTML editors to create web pages, e.g. "Netscape Composer".

Example page.

For a example of a page using the basic instructions click

here.
Use your browser to look at the source of the example above as well as the resulting page. It is important to compare the HTML source with the visual appearance of this example. You can also save this example as ".html" file and print it.

The Applet tag.

Simplest version

It is very easy to put an Applet on your web page. Just add this tag.

<APPLET code="MyAppletClass" width=400 height=400> </APPLET>

Fancy attributes

The Applet tag accepts many more attributes than the compulsorary ones shown above

The Applet tag: from Sun's standard documentation.

Several important attributes are

codebase - the path to where the applet class files are. Needed if the class files are not in the same directory as the HTML file.
archive - used to allow Applets to be packaged in "jar" files (a form of zip file).
param - probably the most important attribute. You use this in conjunction with the getParameter() method of the java.applet class. This feature allows you to provide the applet with different initializations without the need to recompile it. An example would be
<applet code="MyApplet" width=400 height=300>
<param name=msg value="Your favorite message">
</applet>

HTML Info on the Web

There is too much.

You might try Chris's HTML Tutorial Page.

Also interesting is the Yale University style guide.