Introduction to Publishing on the World-Wide Web

General overview of the World-Wide Web and HTML

Basics of online design

Basics of HTML


What is the World-Wide Web?

The World-Wide Web (WWW, or Web) is a dynamic, interactive, distributed, cross-platform graphical hypertext information system residing on the Internet.

Back to top

What is HTML?

HTML is an acronym for Hypertext Markup Language. HTML allows one source document to be formatted for different platforms.

HTML uses "tags" to identify structures within the document.
<H1>This is a first-level heading</H1>

HTML defines how a document is understood, not how it is formatted.

HTML isn't anything inherently magical.

HTML isn't the only ingredient of a good Web document.

HTML is not an end in itself.

Back to top

Web browsers

A browser connects to a Web server (for example, the FortNet server) via the Internet and accesses information.

The browser then displays HTML documents or "pages" so they can be read on your computer.

Each browser may display a Web page a little differently, depending on how the user's preferences are set up.

Some currently popular browsers are:

Lynx is another Web browser, but it is capable of displaying only text, not graphics, and so is called a "character-based" browser.

Back to top

A thumbnail of design considerations

Back to top

Basics of online design: Content

Garbage in, garbage out.



Keep your intent in mind!

Back to top

Basics of online design: Visual design

Reading from a computer screen is a problem.



Back to top

Basics of online design: Navigation

Hypertext: at last, the goodies.

Beware the dreaded "lost in hyperspace."

Back to top

"Container" tags

Do something nice for yourself: use an HTML editor. See FortNet's Tools and Procedures for HTML Preparation page for more information on editors.

The "container" tags. Boxes within boxes. These tages identify the largest components of the document.

To wit:
<TITLE>Introduction to NASIS</TITLE>
<!-- OWNER_NAME="Terry Burton, CDSI Senior Systems Engineer" -- >
<!-- OWNER_ADDR="2625 Redwing Rd. Suite 110, Fort Collins, CO 
80526" -->
.	[this is where the actual document text goes]

Back to top

Tags used inside the document body

Tags used inside the body.

A example of HTML text including heading levels, unordered lists, and bold and italic text formatting:

<H1>Introduction to NASIS</H1>
The focus of the National Cooperative Soil Survey is shifting from producing 
static printed soil survey reports to providing a dynamic resource of soils
information for a wide range of needs. <B>NASIS</B> supports 
this conceptual shift in three important areas:
<LI>Collection of new information in compliance with standards.
<LI>Application of expert knowledge to make information usable for 
a variety of purposes.
<LI>Dissemination of information to a wide variety of users.
<B>NASIS</B> is an entirely new system for managing soil 
survey mapunit data. 
<B>NASIS</B> maintains the hierarchical structure of soil 
survey data, through the use of table-oriented editors, but allows for 
new flexibility in creating and maintaining soil survey data. 
<I>"NASIS allows me to do my job better in less time."</I>
<I>"The NASIS software allows me to concentrate on soil 
science and the quality of my data instead of computer science."</I>

Back to top

Links and hotspots

First, some terms.

A link is actually made up of two parts: the hotspot and a target. There are different kinds of links:

Back to top

Examples of different types of links

Local, within the same file:

<a href="#aboutrmht">About Rocky Mountain High Tours</a>
<a name="aboutrmht">About Rocky Mountain High Tours </a>
Rocky Mountain High Tours also specializes in custom programs. Please 
contact us by phone ...

Local, to another file:

<a href="rmgpack1.htm">Deserts and Dinosaurs: Grand Junction, Colorado</a>

<a href="c:\tour\rmgpack1.htm">Deserts and Dinosaurs: Grand Junction, 


For more information about the National Soil Information System, click 
<a href="">here</a>.

URL = Uniform Resource Locator. Expressed in the form:

For example,

Back to top

Working with graphics

Graphical browsers such as Netscape and Mosaic can display color images. These images are most commonly in "gif" format.

Basic form:

<IMG SRC="graphic.gif">


The ALT tag allows text to be displayed if the browser can't display the graphic.

<IMG ALT="Picture of a bear" SRC="bear.gif">

ALIGN allows you to align the graphic with the top, middle, or bottom edge of the following text.

<IMG ALIGN=middle SRC="rainbow.gif">

HTML 3.0 also supports left and right alignment (wrapping) of text around graphics.

<IMG ALIGN=left SRC="logo.gif">

Image maps are graphics with imbedded hotspots. Depending on which area of the graphic you click on, a different link is activated. Image maps require a special CGI (Common Gateway Interface) form which is stored on the server.

Back to top


Basic Guides

HTML References

WWW Authoring Resources & Indexes

Software Design & Human Interface Design Sites

Back to top

Terry Burton, MA
Comments to author:

All contents copyright (C), 1995, Chinook Information Architects. All rights reserved.
Revised 10-23-95