Intro to HTML


Table of Contexts


Tag Format

The basic commands in HTML are call tags.

Page Definition Tags


Tags for the Head of a Page


Text Separating Commands


HTML Typeface Commands


HTML Lists

A list displays information in an organized fashion. Each list is indented away from the left hand margin of the page. There are two main types of lists in HTML:
  1. ordered lists and
  2. unordered lists.
The ordered lists use the tag pair <ol> </ol> and preface the items in the list with a numeric value.

The unordered lists us the tag pair <ul> </ul> and preface the items in the list with a symbol.

There are other list types, but these two are the most common. One of these other list types is the definition list. It uses the tag pair <dl> </dl> and have the list divided into two parts: the terms and the definitions.

Each item in the ordered and unordered lists is denoted by the use of the <li> tag (list item). As shown by the example below.

Here is a list of common pets:
<ol>
<li> Dogs
<li> Cats

<li> Fish
<li> Birds
</ol>

The above html code would display an ordered list as shown below. Note how the list is indented from the text.

Here is a list of common pets:
  1. Dogs
  2. Cats
  3. Fish
  4. Birds

Here is a description of the order list and unordered list tags.


HTML Images

IMAGES: <img> - attributes: src, alt, border, height, width, hspace, vspace, align

The <img> tag allows a picture to be displayed on a web page. The src attribute is used to specify the file that contains an image. This file can be specified using its filename if the images is in the same directory as the html file using this tag, or the file can be specified using the URL of the image. Images should be in the GIF or JPG format. There may be other formats acceptable to some Web Browsers, but GIF and JPG are the most common. An example of using the <img> tag is as follows.

     <img src="picture.jpg">

<img> Attributes

To find the URL's of an image in a web page

When viewing a Web Page in Internet Explorer, you can use the menu option "Privacy Report" under the "View" drop-down menu to check out the HTML source files for the current document. THis will give the URLs of all files used for the web page including the URL of any image.

You can make a copy of an image by clicking the RIGHT mouse button when over an image and selecting the "Save Image as..." option from the pop-up menu. This will save the image to the current machine that you are using. You may have to transfer the image (via FTP or some other method) to get it to your UNIX account.


HTML Links

The Anchor Tag: <a> </a> - attributes: href, name

The Anchor tag <a> allows you to add a link to another web page. The href attrribute is used to specify the URL of the web page to which the link will point. The name attribute allows the a page to be displayed at some location other than the top of the page. This discussion will focus on the href attribute. The follow is how to write a link to the CS Department Home Page:

     <a href="http://www.cs.uic.edu">CS Home Page</a>

This link would appear as follows:
     CS Home Page
There are two primay parts of the HTML code for the link. These are the URL and the display information. In the above example:
The URL is: http://www.cs.uic.eduThis specifies where the link will go. This information is given by the value of the href attribute. Normally the URL will specify another HTML web page, but it can reference just about anything. If the web browser can display the URL it normally asks if you want to download to which the object the URL refers.
The display information is: CS Home Page This specifies the information that will be displayed on the web page that you can click to activate the link. This information can be text or an image or both. Whatever information is between the open anchor tag <a> and the closing anchor tag </a> will become the display information.
An image link is when you have a image as the display information. The following is an image link to the UIC Home Page.

     <a href="http://www.uic.edu"><img src="uic_logo_full_blue_rev.gif"></a>
This link appears as:

HTML Special Character Codes

In HTML, some characters can't be typed in since they have special meaning to the HTML browser. So some other method must be used.

Special characters code all

Some examples of these special character codes are:
CharacterCodeName
&&amp;Ampersand
<&lt;Less Than
>&gt;Greater Than
"&quot;Double Quote
©&copy;Copyright Symbol
°&deg;Degree Symbol
 &nbsp;Non-breaking Space Character
A list of these codes can be found at


HTML Tables

The Table tags allow information to be displayed in cells in a grid of rows and columns. Tables are one of the main ways to layout data in a format you choose. A good web page showing various tables can be found at http://wp.netscape.com/assist/net_sites/table_sample.html.

Frames

Frames allow for the web browser to be divided into multiple windows and to have a different URL displayed in each window.