How To Create HTML Documents

HyperText Mark-up Language (HTML) documents are simply text documents with "markup elements" that can be read by World Wide Web (WWW) browsers like Netscape and Internet Explorer. These browsers use the "markup elements" or "tags" to format the text and present images and hyperlinks to the viewer.

This tutorial explains a few basic HTML tags, which are enough for you to begin creating your own HTML documents. When creating your own documents, you must remember to save the files as TEXT and include .html as a suffix to the file name. You will frequently also see .htm as a file name suffix as created by some commercial packages. It is best to use the full .html extension to both avoid confusion and to maintain consistency of file names.

Creating web documents with Commercial Packages

Many commercial software packages allow you to directly create a web accessible file by saving the document as a "web page". For example, Microsoft Word allows you to save a file as a web page which is fully web accessible. Here is a sample web file created with Word.

You can accomplish the same with spreadsheets (Microsoft Excel), presentation software (PowerPoint), etc.

If you want to hand-code html files, or be able to easily edit files, a text editor, such as WordPad on the PC, may be a good choice. Some commercial packages, such as Microsoft Word, create very complex html files that are difficult to edit by hand.

Basic Structure of HTML file

In general, HTML tags follow a pattern of

    <opening tag>     – a tag name between the symbols < and >     e.g.     <h1>
    ...arbitrary text and/or imbedded HTML commands     e.g.     This is text to be displayed
    </closing tag>     – the same tag name preceded by a / between the symbols < and >     e.g.     </h1>

A tag may have attributes associated with it, such as specifying the name of a file containing an image to be displayed as in

<img src="filename">

Tip: HTML is not case sensitive, so commands can be upper or lower case. We recommend you use lower case for compatibility with future uses of these files with other tools.

Tip: A well-formed HTML document will include the following structure. Note that the title is part of the head section. Blanks can be used for indentation and can be useful for purposes of readability of the tag elements, but the blanks do not affect the output file.

<html>
  <head>
    <title>
    </title>
  </head>
  <body>
     Main text of document to be displayed
  </body>
</html>

Six Basic HTML Commands

1. Title

Every good document has a title. You designate the name of the title by prefacing the title text with the <title> command and ending it with the </title> command. For example:

<title>How To Create HTML Documents</title>

Note that the title is part of the head section as shown below.

<html>
<head>
<title>...</title>
</head>
<body>

</body>
</html>

2. Headers
You can have up to six levels of headers with 1 being the most prominent and 6 the least prominent; though, what a header looks like is largely controlled by the reader rather than the author of the document. You preface the header text with the desired header value such as <h2> and end it with the </h2> command.

You Type:

Web Browser Shows:

<h1>Any Text</h1>

Any Text

<h2>Any Text</h2>

Any Text

<h3>Any Text</h3>

Any Text

<h4>Any Text</h4>

Any Text

<h5>Any Text</h5>
Any Text

<h6>Any Text</h6>
Any Text

3. Paragraphs
All text in an HTML document is packed together in one continuous paragraph unless you tell it otherwise. You indicate that you have ended a paragraph with the <p> command. This will force both a carriage return and a line feed to be inserted. Note that the <p> stands alone; there is no end command (e.g., </p>) to accompany the initial <p>.

Tip: Several separators are available in HTML code.

<br> This is similar to <p>, but there's no blank line
<hr> This adds a horizontal line like the one below.

 

4. Hyperlinks
You may want to offer the reader a chance to jump to another file within the World Wide Web. There are two parts to this process: the anchor and the reference. The anchor is what the reader will see and click on to access the file. The reference is the full network pathname of the file (the Universal Resource Locator, or URL) to be linked.

For example:

<a href="http://www.ncsa.uiuc.edu/Edu/EduHome.html">NCSA Education Group's Home Page</a>

The words "NCSA Education Group's Home Page" will appear in blue (or red) and underlined within a web browser since they are designated as the anchor. The reference or URL designates that the document "EduHome.html" will be accessed from the "http" server "www.ncsa.uiuc.edu" in the "Edu" directory.

You can link to any type of file, whether it is another hypertext document, a regular text document, an image, a sound, etc.. Since there are different types of servers, you need to specify which type of server is holding the desired file. Four common types are:
  • http (http://)
  • anonymous ftp (ftp://)
  • your local hard drive (file://)
  • telnet (telnet://)

If you want to link to a file that resides in the same directory as your current document, then just use the name of the file:

<a href="HTML_Advanced.html">HTML Advanced Guide</a>

If the file resides in a sub-directory of the current document directory, then you may leave out the server type and machine name and begin the URL at the first sub-directory. For example:

<a href="OtherGuides/HTML/HTML_Advanced.html">HTML Advanced Guide</a>

You Type:

<a href="http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html">Guides to Writing HTML Documents</a>

Web Browser Shows:

Guides to Writing HTML Documents

And to link to your e-mail address:

You Type:

<href="mailto:bievenue@ncsa.uiuc.edu">Lisa's e-mail address </a>

Web Browser Shows:

Lisa's e-mail address

 
5. Inline Images
Indicate that you want to include an image within the document itself by using the command <img src="filename"> where filename is the name of the image file. For instance,

<img src="logo.gif">

will display the image file called logo.gif from the same directory as the current document. If the image file is in a different directory, then include the image's URL. For example:

<img src="http://141.142.20.152/document_images/logo.gif">
 
6. Lists
The two most common types of lists are ordered and unordered lists. Items in an ordered list are automatically preceded by a number, while unordered list items are preceded by a bullet. You start ordered and unordered lists by using the <ol> or <ul> commands, respectively. In both lists you use the <li> command to distinguish each item of the list. End the list with a </ol> or </ul> respectively.

Unordered List:

You Type:

Web Browser Shows:

<ul>
<li>Apple
<li>Orange
<li>Kiwi
</ul>
  • Apple
  • Orange
  • Kiwi

Ordered List:

You Type:

Web Browser Shows:

<ol>
<li>Apple
<li>Orange
<li>Kiwi
</ol>
  1. Apple
  2. Orange
  3. Kiwi
You should now be on the road to creating your own HTML documents!

Practice these skills

Try creating your own document that starts by providing an overview of your project plan. You might include the goals, objectives, and expected outcomes of the project, each listed in a "head tag". You might use the list tag to identify partners on the project. And include hyperlinks to display logos from your institution or some other unique graphic to represent the partner interests in the project.

Copyright 1994, 1998, 2002, University of Illinois Board of Trustees
National Center for Supercomputing Applications, Education Group

Written and edited by James Gasaway, Lisa Bievenue, Scott Lathrop.
bievenue@ncsa.uiuc.edu, scott@ncsa.uiuc.edu

Back to Table of Contents