An Introduction To HTML

A Bare-Bone Introduction to HTML
by K. Yue, @copyright 1997-2001, revised 8/12/2001

I. General Introduction

HTML stands for HyperText Markup Language (hyper -- not linear).
A markup language is a collection of elements (tags) embedded in a text document.
HTML is a markup language for delivery in the Internet.
HTML elements describe how the document should be displayed in a browser.
Thus, a HTML file is a text (ASCII) file marked up by HTML elements.
There are two kinds of markup:

Physical markup: describe physical layout directly, such as font types and font sizes, italic, bold, etc.
Logical (semantic) layout: describe structures of document, such as heading, paragraph, title, emphasis, etc.

II. Web Hosting

A HTTP server (web server) is used to host your page: Apache, MS IIS (Internet Information Server), Netscape (IPlanet), etc.
HTTP server configurations vary. Consult manuals for configuration.
Voyager (dcm) accounts:

default start page URL: http://dcm.uhcl.edu/[your_account_name]/index.html or http://dcm.uhcl.edu/[your_account_name]/index.asp
directory: [voyager_course_directory]/[your_account_name]/pages/
uploading: ftp or use mapping network drive. For mapping network drive, map to \\voyager\[your_account_name].
For additional information on how to use your voyager account, go to URL: http://dcm.uhcl.edu/.

III. HTML Development

Authoring HTML documents

HTML files usually have the extension of .html or .htm.
As HTML files are ASCII files, they can be created by either a text editor, a word processor or an HTML editor.
Tips: to use a word processor, remember to save your file as an ascii text file (e.g. ASCII DOS TEXT). Some word processors always save files using their own format. So, use "SAVE AS" option if needed.
Tips: to use notepad, be sure to save as "All file."
Using text editors:

More flexibility.
Tedious.
Error prone.
Good to use a HTML validator.

Using HTML editors: e.g. MS FrontPage, Netscape's composer, Macromedia's Dreamweaver, etc.

Easy to use.
Less error prone.
Less flexible.
Limited by the features and code generation quality of the editor.
Difficult to modify without using the same HTML editor.

Testing

You may use your browser to test run your HTML files. Use the "OPEN FILE" option in Netscape's Navigator. To view source code in Navigator, select VIEW, and the DOCUMENT SOURCE.
It is a very good idea to test your files with multiple browsers.
- Determine before the start of projects what browsers and their versions to support.
- Test your page in all supported browser versions.

IV. HTML Structures, Elements and Tags

HTML is a structured language. Documents are defined in term of elements, which are defined by tags.
Elements can be nested. There are rules for the placement of elements.
All HTML elements are composed of a start tag and usually an end tag. <Name> begins the markup and </Name> ends the markup. Some tags may not have end tags. Examples:

<H1>
Homework Assignments
</H1>

<B>excellent</B>

Tags are case insensitive. However, it is a good style to use the same cases for start and end tags.
Elements may have attributes defining the properties. Examples:

<H1 ALIGN="CENTER">Homework Assignments</H1>
<A HREF="hw1.txt">Homework #1</A>

The logical structure of a HTML file usually looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Title of your page.</TITLE>
</HEAD>
<BODY>
Body of your page.
</BODY>
</HTML>

Comments and Entities

HTML comments are enclosed by .
Some characters have special meanings in HTML: <, >, #, & and ", for examples.
These characters can be referred to by using either numbered or named entities. Format:
- Numbered entities: &#character_number;
- Named entities: &character_name;

Example:

'<': < or <
'>': > or >
'"': " or "
'&': & or &
'#': #
' ':   or  

V. Navigation and Links

HTML allows navigation both inside and outside of the current page.
The basic element for navigation is the element A(anchor), which makes its body a hyperlink. An example:

<A HREF="http://dcm.uhcl.edu/yue/csci4230/Fall2001/index.html">CSCI
4230 Internet Application Development</A>

Browsers usually display unvisited and visited links in different colors than other contents. For text, the links are underscored. This display style may be changed.
The link colors can be changed by the attributes LINK and VLINK of the body element using the value "#rrggbb".
Important attributes for the A element are:

HREF = "URL": URL address of the hyperlink.
NAME = "string": Name of the anchor point for reference (with a # before the name).
REL = "string": Relationship of the link to the current page.
REV = "string": Reverse relationship of the link to the current page.
TITLE = "string": Title of the linked page for preview.
METHODS = "string": HTTP methods mainly for CGI programming.
TARGET = "window": Display linked page in targeted frame;some examples:
     "_blank" new, unnamed window.
     "_self" current window.
     "_parent" parent window.
     "_top" window containing the top document.

VI. Graphics

The basic HTML element for including images is the IMG tag. An example:

Some important attributes of IMG are:

ALIGN = "align":top, bottom, middle, left, right, etc.
ALT = "text": alternative text in lieu of the image.
HEIGHT ="n": actual height to be displayed in n units.
ISMAP: is an active map, coordinate of mouse click will be sent back to the server for CGI programming; used only with combination with <a>.
SRC = "URL": URL of the image.
UNITS ="n": Units for height and width in pixels.
WIDTH ="n": Actual width to be displayed in n units.

The most popular graphics format is gif (General Image Format). Gif files have the extension .gif. Gif image is a series of colored picture element (pixels). The newest development in gif files is animated gif images.
For most popular images, free gif files are available all over the Internet.
For custom designed gif images, you need to use software such as Photoshop or Gif Construction kit (shareware).
Another popular graphics format is JPEG (Journalist Photographic Equipment Group). JPEG files have extension of .jpeg or .jpg. JPEG files are compressed.