An Introduction To HTML

A Bare-Bone Introduction To HTML
by K. Yue (revised: 8/21/2000)

General

HTML stands for HyperText Markup Language (hyper -- not linear).
A markup language is a collection of code (tags) embedded in a text document.
HTML is a markup language for delivery in the internet.
Thus, a HTML file is a text (ASCII) file marked up by HTML tags.
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.

Page 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.
Lattes accounts:

start page url: http://lattes.uhcl.edu/your_account_name/index.html
directory: lattes../your_account_name/docs/ (or pages instead of docs)
uploading: ftp or use mapping network drive.

Voyager (DCM) accounts:

start page url: http://dcm.uhcl.edu/your_account_name/index.html
directory: voyager../your_account_name/pages/
uploading: ftp or use mapping network drive. For mapping network drive, map to \\voyager\your_account_name

HTML Development

Writing HTML programs:

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 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 quality of the 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.

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 tags.
All HTML elements are similar. <Name> begins the mark-up and </Name> ends the markup. Some tags may not have end tags. Examples:

<H1>
Homework Assignments
</H1>

<B>excellent</B>

Tags are case insensitive.
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:

<HTML>
<HEAD>
<TITLE> Title of your page.</TITLE>
</HEAD>

<BODY>
Body of your pages.
</BODY>
</HTML>

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 a block a hyperlink. An example:

<A HREF="http://turquoise.rocks.uhcl.edu/yue/csci4230/f99/index.html">CSCI 230 Software Tools</A>

Browsers usually display unvisited and visited links in different colors than other contents. For text, the links are underscored.
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 elements 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.

Graphics

The basic html element for including images is the IMG tag. Example:

<IMG SRC="banner1.gif"
ALT="University of Houston - Clear Lake">

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.
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).