Basic HTML

This is meant to only to be a simple tutorial in HTML; enough to get one started. There are many books and references better suited for advanced applications.

HTML (Hyper-Text Markup Language)

HTML is the text formatting language used by World Wide Web (WWW) servers and browsers (netscape, internet explorer, mosaic, etc.). It is reasonably easy to learn and can be written with any text editor or word processor. There are many programs available that can help simplify the page creation and editing.

HTML utilizes tags within the document text to control the documents appearance, include graphics, and make links to other documents. There are two types of tags: empty and non-empty.

  • Empty Tags: These can occur anywhere within the document and cause a single action. For example < br   / > is a line break; it is equivalent to a carriage return.
  • Non-Empty Tags: These can also occur anywhere within the document, but have a beginning and an end. For example, to bold face text you would place the desired text between < b > and < / b >. The The < COMMAND > starts the tag, and the < / COMMAND > ends the tag (Note the “/” in the closing tag.)

All tags are located between the special characters < and >.

Basic HTML Document Structure

The HTML document has two basic sections; the HEAD and the BODY.

HEAD: This is the header of the document. Information in this section is not meant to be displayed on the page, but includes descriptive information about the page. The document title (displayed on the browser title bar), for example, is defined here.

BODY: Information in this section is displayed on the page.

The general page layout is:

< HTML >
< HEAD >
…
< / HEAD >
< BODY >
…
< / BODY >
< / HTML >
HEAD Section Tags

The HEAD section includes information about the document. Two common tags are used here:

  • < TITLE > … < / TITLE >:This specifies the title of the page. It is required. The title is displayed on the top window bar of most browsers.
  • < !– > … < — >: This is a comment. Nothing between < !– > and < — > will be displayed on the page. These are also used by Server Side Includes, but these will not be discussed here.

It is often a good idea to put in contact information in a comment in the HEAD. This way if someone has difficulty file your HTML document, they know who to contact.

BODY Section Tags

The body of the HTML pages contains all the information you want to present. There are many tags that can be used in this section. Some are described below.

Anchors are what make HTML useful for the WWW. They allow one page to Link to another. The general format is:

< A HREF = “URL” > text < A >

or
< A NAME = “text” > text < A >

The HREF allows the anchor to specify another WWW document. The document can be on the same server or on a completely different server in another part of the world. The URL specifies the local or WWW address of the desired document. If the document is server by another computer, you must give the complete URL address. For example:

< A HREF=”http://www.colorado.edu/” > University of Colorado < A >

If the page is served on this computer, you should leave off the http:// address. For example, here are two ways to access the Mines Software area:

< A HREF=”http://ccit.mines.edu/Software” > Software < / a >
< a href=”/Software” > Software < / a >

If the page you want to link to is in the same directory as the current page (or in a related directory), you can use relative addressing. For example:

< a href=”local.shtml” > Page in this directory < / a >
< a href= “test/local.shtml” > Page in subdirectory test < / a >
< b > text < / b > Bold
< big > text < /big > Big font
< i > text < /i > Italic
< pre >

text

< /pre >

 Preformatted text. Text displayed exactly as typed. Uses equally spaced characters
< s > text < /s > Strikethrough
< small > text < /small > Small font
< sub > text < /sub > Subscript
< sup > text < /sup > Superscript
< tt > text < /tt > Typewriter text (equal spaced characters)
< u > text < /u > Underline

There are six header levels; 1 is the largest and 6 is the smallest. They are all in bold, and they appear alone on a single line (images can be added to the line), and blank lines are added above and below the text.

       < h1 > header < /h1 >

        < h2 > header < /h2 >

          < h3 > header < /h3 >

             < h4 > header < /h4 >

               < h5 > header < /h5 >
                   < h6 > header < /h6 >

Headers may also be aligned left, right, or centered:

          < h4 align=”LEFT” > header < /h4 >

          < h4 align=”RIGHT” > header < /h4 >

          < h4 align=”CENTER” > header < /h4 >

What makes the WWW, in large part are the graphics on the various pages. The following basic syntax can be used to put a *.GIF or a *.JPG on your page:

< img align= ” TOP | MIDDLE | BOTTOM ” alt=” text ” height=”#” src= ” URL ” width=”#” / >

Only this is required though:

< img src=” URL ” / >

ALT is good to use if the image conveys textual information. Some people do not download images to save time. ALT presents a text message, if for whatever reason the image is not displayed. If you don’t want any text display it is good form to use ALT=” “. ALT is required for ADA compliance.
ALIGN allows you to position the image to the LEFT, RIGHT, or CENTER. WIDTH and HEIGHT specify the width and height of the image in pixels. These are good to use and actually speed downloads, because the remote browser doesn’t have to determine the size of the image independently (Note, if the wrong dimensions are given, the image will be squashed or stretched by some browsers). Several examples are given below:

< img align=”TOP” src=”image.gif” / >
< img align=”MIDDLE” src=”image.gif” / >
< img align=”BOTTOM” src=”image.gif” / >
< img align=”BOTTOM” height=”20″ src=”image.gif” width=”80″ / >

Often a list is required or text must be indented. These tasks are done using lists and can be nested.

Unordered Lists:

  • Item 1
  • Item 2
  • Item 3
The syntax is:

< ul >
< li > Item 1 < /li >
< li > Item 2 < /li >
< li > Item 3 < /li >
< /ul >

Order Lists:

  1. Item 1
  2. Item 2
  3. Item 3
The syntax is:

< ol >
< li > Item 1 < /li >
< li > Item 2 < /li >
< li > Item 3 < /li >
< /ol >

Definition Lists:

Item 1
Item 2
Item 3
The syntax is:

< dl >
  < dd> Item 1 < /dd >
  < dd > Item 2 < /dd >
  < dd > Item 3 < /dd >
  < /dl >

Controlling where a line of text breaks requires special effort in HTML. Just because text starts on a new line within the HTML file does not mean it will be displayed by the browser that way. In HTML, unless explicitly defined, all text is assumed to occur on one line. Several tags can be used to divide the document.

< br >
is equivalent to a carriage return.
<p> will also act as a carriage return, but it also adds a blank line (usually). It is an end of Paragraph marker. Paragraphs may also be aligned left, right, or centered. If a special alignment is used, a </p> end tag must be used. Otherwise it is not needed. For example (The left side is indented two tabs):

<p align=”LEFT”>This is aligned left.</p>

<p align=”RIGHT”>This is aligned right.</p>

<p align=”CENTER”>This is aligned center.</p>

<hr />

will place a horizontal line separator across the page: For example: