HTML Tutorial
An HTML Tutorial
This document may be copied and used freely without charge or credit.

HTML demo page for my wild and crazy students!
duck dinner!
Table of Contents

 Tags

Tags are the fundamental component of all HTML. They are the commands which cause the browser to perform all the functions which we see on web pages. Tags are normally enclosed in angle brackets. For example <H1> causes the browser to display text using the Heading 1 style. This is the largest heading style. <H6> is the smallest heading style. The MARQUEE tag created the scrolling marquees above. Most (but not all) tags require a beginning and corresponding end tag. The end tag is the same as the beginning tag except the < is immediately followed by the / character. For example the beginning tag for a font change is <font> and the ending tag is </font>.

Headings

Below, see the result of using different Heading (H) tags.

A Heading using H1

A Heading using H2

A Heading using H3

A Heading using H4

A Heading using H5
A Heading using H6
Two important notes:
1. The FONT tag gives better control over sizing and emphasis of text than the H tag. However, the H tag may be easier to use.
2. The numbering of font sizes is opposite in meaning to the numbering of heading sizes. For example, 1 is the largest heading size but the smallest font size.


Horizontal Rules

A horizontal rule (HR) is just a straight line and is produced with the HR tag.
You may control the thickness,
width,
alignment,
and shading

Images

LC students learn HTML from the top down.
Picture of big balloon
    Image tags (IMG) generally have at least three parts.
  1. A SRC tag indicating the location and name of the image file.
  2. An ALIGN tag indicating if the image is left, right or center justified.
  3. An ALT tag providing text that describes the image.
Text may be positioned alongside images simply by using the align tag within the image tag.

In order to force text beyond the image use the BR CLEAR=ALL tag.
and the bottom up.

Animated Images

spinning question mark These are images which appear to move. They are a very crude form of digital video but are adequate for many situations and consume far fewer resources than true digital video. The images are actually composed of several images in sequence which give the illusion of motion. We will not discuss their production here. However, installing one in a web page is no different than installing a still image.


Stylistic Changes

Simple stylistic changes may be controlled with the bold, italic and underline tags.

You may control the size, color, and style of text using the font tag.

COLORS are specified using a hexadecimal (base 16) coding scheme. The code consists of three hex numbers of two digits each. The first number (two digits) specifies the RED intensity, the second number, the GREEN intensity and the last number, the BLUE intensity.
Here are some examples with their color coding.

RED #FF0000
DULL RED #B00000
YELLOW #FFFF00
GREEN #00FF00
DULL GREEN # 00B000
AQUA #00FFFF
BLUE #0000FF
DULL BLUE #0000B0
PURPLE #FF00FF
WHITE #FFFFFF (White does not show up on a near-white background)
BLACK #000000
SHADES OF GRAY #C0C0C0 #808080 #404040


Lists

Lists are an important HTML device. Several types of lists are implemented in HTML.

Unordered Lists End of unordered list
End of unordered list
    Here is the start of an ordered list
  1. Item 1
  2. Item 2
  3. Last Item
End of ordered list

You may control the type of list item indicator (number, letter, etc) and the starting point for the ordering indicator. For example you may want to start your numeric list with the digit 0 rather than 1. Lists may also be nested.

Here is an alphabetic, ordered list containing a roman numeral sublist. Note that the alphabetic list has been programmed to start with the letter C.
    Ordered list with sublist
  1. Item 1
  2. Item 2
      Sublist header
    1. Item 1
    2. Item 2
  3. Last Item
End of ordered lis and sublistt

Other styles of lists are available. These, in combination, may allow lists to be used in more complex ways. For example the DL, DD and DT list tags may be used in a judicious manner to emulate a standard outline format.


Text Formatting

This line is centered using the CENTER tag

Much of what we take for granted using word processors may be somewhat difficult or, at least, non-intuituve to implement in HTML. For example, indenting a paragraph does not happen by simply pressing the TAB key. This entire paragraph was indented using the DIR tag which is intended to be used as a special type of list.       Browsers generally ignore "white space" in source code. The first word of this paragraph is indented by using several non-breaking space tags.
Carriage return/line feed (end of line) characters are also ignored by browsers since the browser formats HTML text to fit into the browser's window as configured on the client's (user's) monitor.
The browser takes into account the width of the window, the font being used and other factors such as resolution to fit text into the browser window.
Such automatic formatting on balance helps the programmer immensely by relieving him/her of such responsibilities but may be frustrating at times when the programmer wishes to have control over such formatting.
Several of the lines above were forced to a new line by using the break (BR) tag. The BR tag causes the browser to produce a carriage return/line feed sequence.

The BR tag was also used to produce the blank line immediately above.

     Occasionally we want text to be formatted exactly     as we type
it without the browser reformatting     at all.  The PRE tag 
can be used
for this purpose.


Usingsuperscript and subscriptTags

These tags make possible writing many mathematical expressions in HTML.
AN = XN + X2 -1


Special Fonts

With some difficulty we may even produce expressions that use special symbols of mathematics and symbolic logic.

"x $y(x Î R /\ y Î R /\ x + y = 0)

The above expression was created by switching to the SYMBOL font to acquire the "for all", "there exists" and "element of" symbols. We may also wish to use other fonts such as "WingDings" for other special symbols.


Hyperlinks and URLs

A URL (Universal Resource Locator) for our purposes is simply the address of a resource (file, usually) on the World Wide Web (WWW). A hyperlink appears on a web page as a sequence of characters or an image. The hyperlink is programmed to connect to a designated URL. Hyperlinks are usually used to enable the user to "jump" from one web page to another by clicking the mouse. Hyperlinks may also be used to move quickly between different areas on the same page. The NAME tag is used to designate locations on a page. Links are automatically underlined by the browser. The text associated with hyperlinks is rendered in a different color than ordinary text. And links that have not been visited are usually rendered in a different color than those that have been visited. These colors may be set in the BODY tag. If the colors are unspecified the browser supplies default colors.

Links (Local links go to locations on this page. Links may also connect to other pages - local or remote.)

A link to an external page on "the web". Visit Lynchburg College's home page

Clickable (link) Images
Here is an image which will take us back to the top of this document. Top of page

The Anchor tag
In order to program hyperlinks one must use the Anchor tag (A).
<A href="URL">Text associated with this hyperlink goes here</A>
The above defines a link to the indicated URL.

The Anchor tag may also be used to define the name of a location in a page. The name may be used as the destination for a local hyperlink reference.
<A name="LocationName">Text associated with this location goes here</A>
Gives the name "LocationName" to the current location.


Tables

Tables are the most useful and flexible device for arranging page content.
Main Table Tags and Their Meanings
TABLE Defines the start of a Table
TR Table Row - defines a row in the table
TD Table Data - defines the content of a cell in a table




This table is aligned to the right. Tables may be centered and aligned just as images. This table specifies border thickness and color and padding within cells. Tables may be created without any border whatsoever. This is useful in displaying columns of text as in a newspaper and has numerous other applications as well. As with images, BR CLEAR=ALL forces text past the end of the table.


Tables can be much more complex. Table cells may contain images, links and other HTML devices and we may nest tables inside of tables.
Course Information
Constantine Roussos Information about your favorite instructor.
Study Guide for Test #1 Review of materials for the first test
HTML Reference Materials Reference Materials for writing HTML code and setting up web pages.
Two tests 32%
Final Exam 24%
Programs 35%
Homework and Class participation 9%
Final Grade Components


Frames

Frames enable the HTML programmer to divide the browser's window into two separate windows. Content in the two windows may be as independent as desired. Although frames are a very powerful HTML device and can bring important functionality to one's pages they should not be used where not required. Some browsers (esp. older versions) do not support frames and some features are not implemented properly in some browsers. Indescriminate use of frames can yield pages which are more difficult to navigate and can often lead to confusion for the user. However, proper use of frames can give a very professional look and feel to your documents and greatly enhance page navigation.

One potential use for HTML is the creation of help files. In this example of a help file for a calculator, the table of contents is placed in one frame and the help text in another so the user may have easy access to both simultaneously.

The VRC calculator help file


Forms

Forms are a means of collecting data from the user.
Connect to the FORMS Tutorial page.


Organization of Files

There are several schemes for organizing the files required for your HTML pages. We will discuss a few of the most common.


Standard Ending

Your documents should have a standard ending that should normally include the following:
a mailto - linked email address where the user may email comments, questions, etc.
last updated - the date the document was last updated
copyright - a copyright notice
a link to the "home page"
a link the the top of the current page

Top of this page   Top of page      Home page   Home page



Send comments, questions to: roussos@lynchburg.edu   EMail address icon
Last Updated 1/5/98
Copyright © C. Roussos