An HTML Primer

An HTML Primer

This primer will cover the most basic information necessary to create a World-Wide Web (WWW or Web) page. By reading this document and doing the simple exercises, you should be able to create a simple informational page which others on the Web will be able to browse.

Background

A World-Wide Web author produces HyperText Markup Language (HTML) encoded documents with an editor or word processor and places them on a machine on the Internet called a Web "server," which holds these and other pages. Others who have Internet access and a Web "browser" can connect to this server and view those Web pages on their own computers.

An HTML document is a plain-text (or ASCII) file that uses special codes embedded within the text which, when viewed with an appropriate browser, will display the text in the preselected formats. For example, by placing the codes <b> and </b> around a word, that particular word will be shown in boldface. The HTML specification includes many different codes, or "tags," which do different things. See other documents for the specifications of HTML for complete information.

Basic Requirements

You should have the following:

Knowledge of the use of a Web browser, such as Mosaic, Netscape, Internet Explorer or Lynx.
Basic knowledge of the use of a text editor like Notepad, Pico or VI or else have a HTML editor.
Some familiarity of UNIX commands and DOS and UNIX directory structures might be helpful.
Experience in uploading files from a personal computer to a UNIX system via FTP is again helpful.

A Simple Sample

Here's a very simple example of what an HTML document might look like:

<title>Simple Sample</title> <h1>My Sample Page</h1> This is my basic, simple, do-nothing page.<p> Here's the second paragraph.<p>

In a browser like Netscape, your page might look like this:

Figure 1.

The embedded HTML tags tell the browser how to render the page. Line by line, here's what our example did:

The <title> tag (and its corresponding </title>) put the words "Simple Sample" into the title bar of the window.
The <h1> tag (and its corresponding </h1>) put the words "My Sample Page" into a font with a larger point size.
The next two lines are in the default font and point size and separated by the paragraph tag, <p>.

Pick up the Pieces

The tags used in our HTML document consist of a left angle bracket (<), followed by the name of the tag (like "title" or "h1"), and is then completed with the right angle bracket (>). In most cases, the tags are paired (except the ending tag has an extra slash (/) before the name of the tag) to tell the browser where to begin and where to end. In our example code, see how the title starts with <title>, then contains the words "Simple Sample," then ends with </title>.

One exception to this pairing of tags is with the paragraph tag. The <p> is used alone; the </p> is implied at the end of the paragraph and not used.

Also, be aware that carriage returns in the text file have no meaning. Paragraphs must be specified with the <p> marker, otherwise the paragraphs will simply run together on the page.

Note: The tags are not case-sensitive, that is, <title> or <TITLE> or <TitLE> are all okay. Also, be sure your editor does not convert your normal, straight quotes into curly quotes; the browser may have trouble determining what you actually mean.

Hint: A good way to learn what HTML elements do, is to simply use your Web browser and find someone's page that has a style, look, or feature that you like. Most browsers have a feature to view the source, that is, to see the actual HTML code behind the pretty page you see on the screen. Compare what you see on the screen with the HTML codes. You'll be surprised how simple it really is.

Basic HTML Elements

Let's create another sample document and add a few more elements, including a graphic and a link to another document. You can create a text document with the below text (without the line numbers, of course) and save it with a name like "sample.html" (or "sample.htm" if you're on a DOS or Windows machine). The ".html" suffix helps the browser software (and yourself) determine what kind of file this is without needing to examine the contents.

1 <HTML>
2 <HEAD>
3<TITLE>Simple Sample #2</TITLE>
4 </HEAD>
5 <BODY>
6<H1>Simple Sample #2</H1>
7
8Now is the <B>time</B> for all good men to come to
9 the aid of their country.<P>
10Go to <A HREF="http://www.doe.hawaii.edu">Upena, the DOE Web
11 Server</A>
12 <P>
13<A HREF="my.big.graphic.gif"><IMG SRC="my.small.graphic.gif"></A>
14 </BODY>
15 </HTML>

Figure 2 on the next page shows what it looks like in Netscape.

Figure 2.

Now, let's examine it line by line and go into more detail.

The <HTML> tag denotes that this document is an HTML document. Although it is usually not necessary to include this tag, it is best to get into the habit of writing proper code and include it (and the corresponding </HTML>) in each of your HTML documents.
A <HEAD> tag shows the start of the heading section of the document. The document's title usually falls in the heading. Again, although not usually required, it should be inserted.
This is the title of the document, bracketed by the <TITLE> tags. The titles should be informative so that people know what it is when they (hopefully!) add it to their hotlist.
4. The </HEAD> tag denotes the end of the heading section.
<BODY> means the body section of the document follows. Once again, this is proper HTML coding and should always be included.
The <H1> header tags tell the browser to show the words "Simple Sample #2" in the largest (size 1) text. The numbers range from 1 through 6, with 1 being the largest and 6 being the smallest. The specifications for HTML do not say what font or size these numbers should correspond to, but the major heading usually starts with <H1> with subheadings getting smaller. Don't do big jumps in header sizes, e.g., a <H1> heading followed by a <H4>; try to go in sequence.
This blank line is inserted in the source file for clarity; it does not appear when viewed in the browser. Also, note that in most cases, browsers ignore extra spaces and blank lines in your source file, making things like lining up columns with spaces a bit more challenging.
The word "time" appears in boldface using the <B> tag. Likewise, using tags like <U> or <I>, we could just as easily made that word or words underlined or displayed in italics.
This is a continuation of the previous sentence (the linebreak doesn't matter to the browser); the <P> tag adds a blank line after the sentence.
This <A HREF="http://www.doe.hawaii.edu"> ... </A> is a special set of tags to create a HyperText link. You may think of it as <A> ... </A> to make it clearer. The name, "http://www.doe.hawaii.edu" is known as a Uniform Resource Locator (URL) which is a special way of naming a server or a document on the server. The URL could also be a text or picture file in your directory The phrase "Upena, the DOE Web Server" would appear in blue or underlined in Netscape, indicating that one can click on this phrase to connect to Upena.. Although they fall on two lines, the carriage return in the source does not appear in the final form.
Paragraph mark. Puts a blank line at this location.
Another clickable object, except instead of blue-colored words, it's an image that is presented onscreen, that, when clicked it'll bring up another image. It's a combination of two things: <IMG SRC="my.small.graphic.gif"> which simply finds the graphic file indicated and puts it onto the page; and bracketing that with the <A HREF="my.big.graphic.gif"> and the </A> makes it clickable.
</BODY> marks the end of the body text. Matches the corresponding tag at the beginning.
</HTML> marks the end of the document. Matches the corresponding tag at the beginning of the document.

(Note: In the above example "my.big.graphic.gif" and "http://www.doe.hawaii.edu" are both legal URLs -- the former is simply an image in the current directory (or folder) and the latter is a link to the default home page on the Upena server. The <IMG SRC="URL"> tag has no ending marker.)

Hint: Another way to learn HTML is to go online and seek out easy, simple Web Pages. Once you find one, click on FILE, usually at the top of your browser, and look for the command SAVE AS. This will allow you to save the web page you are looking at. You can keep the name of the file the same, or you can save the file to a name you can remember. Limit the characters to (8), when re-naming. Make sure that the EXTENSION is .HTM. Remember where you are going to save this file.

Then, bring up your text program, like WORD, WRITE, WORD PERFECT, ETC.. and open up the file you just saved.... Make sure that when you tell the computer that you want to look at ALL EXTENSIONS (ALL FILES), because the extension will not be .TXT. The extension will be .HTM. Now, print the file.

Once saved, print out the file to see the HTML coding. Also, while the page that you saved is still showing on your monitor, click on the PRINT button. This will print the actual PAGE you are viewing exactly like you see it on your browser. Now, compare the printed page of the page you viewed (that should look exactly like what you see on your monitor) to the printed page you printed in the instructions above. You will see what HTML codes were used.

By comparing the HTML code to the printed page, you can start learning the various TAGS that are used within HTML pages. Many individuals have learned HTML in this manner. You can do this with THIS document that you are viewing!

Adding Color to your Pages

Specifying Colors Of Text, Links, Etc.

The following tags contained in the <BODY> statement allow a user to specify how the web page elements are colored.

Elements of this tag include:

BGCOLOR=
Specifies the background color of the document.
TEXT=
Specifies the color of the text in the document.
LINK=
Specifies the color of the links in the document.
ALINK=
Specifies the color of the link when activated by your mouse.
VLINK=
Specifies the color of the visited links in the document.

For example, to create a web page with a background color of green normal text in red and links in blue is specified with the following elements to the tag <BODY>

<BODY BGCOLOR="#00FF00" TEXT="red" LINK="#0000FF">

The document may also be given a background image. The selected image is tiled across the document and then the text of the document is written over the image(s). It is thus important to choose a background image that will not be too distracting for the reader. The background image is achieved by adding a background attribute to the BODY markup tag. For example:

Specifying a color by name

The formatting tag <FONT> with the tag COLOR="red" changes the color of the text of the document to red. The </FONT> tag terminates the color change.

Examples	HTML Language
* Red* Green* Blue*	* <FONT COLOR="red">Red</FONT>* <FONT COLOR="green">Green</FONT>* <FONT COLOR="blue">Blue</FONT>*

Possible values for a named color are:
black [###]	maroon [###]	green [###]	blue [###]
olive [###]	navy [###]	purple [###]	fuchsia [###]
teal [###]	gray [###]	, silver [###]	aqua [###]
red [###]	lime [###]	yellow [###]	white [###]

Specifying a color by hexidecimal value

A color is defined either by a hexidecimal value or by its name. When you want to refer to a color by using a hexidecimal value you use the six digit color reference number preceeded by the "#" sign:

Examples

HTML Language

* Red* Green* Blue*


 *
 <FONT COLOR="#FF0000">Red</FONT>*
 <FONT COLOR="#00FF00">Green</FONT>*
 <FONT COLOR="#0000FF">Blue</FONT>*

* Yellow* White* Purple*


 *
 <FONT COLOR="#FFFF00">Yellow</FONT>*
 <FONT COLOR="#FFFFFF">White</FONT>*
 <FONT COLOR="#FF00FF">Purple</FONT>*