Introduction to Publishing on 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.

DYNAMIC because it changes constantly.
INTERACTIVE because the reader activates links when navigating the Web.
DISTRIBUTED because pieces of it are located all around the world.
CROSS-PLATFORM because the same Web document can be read by DOS, Macintosh, and UNIX computers.
GRAPHICAL because ... well, Web documents contain graphics.
HYPERTEXT INFORMATION SYSTEM because information can be accessed in a reader-controlled, non-linear sequence by means of links.

What is HTML?

HTML is an acronym for Hypertext Markup Language.

HTML is a subset of SGML, Standard Generalized Markup Language.

HTML allows one source document to be formatted for different platforms.

DOS/Windows
Macintosh
UNIX

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.

It's just a lot of weird looking tags

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

Yes, there is more!

HTML is not an end in itself.

No matter how cool the results.

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:

Netscape
NCSA Mosaic
MacWeb

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

A thumbnail of design considerations

Web page designers should have a basic understanding of graphic user interface design.
Readers interact with multimedia Web documents differently than paper documents. A Web document may contain text, numeric information, illustrations, photos, and sound. The page must be designed for easy access and comprehension.
Apply a few basic design principles to all Web pages you create.
More is not better. The more complex the content, the more important it is to use a consistent design strategy. Don't get too carried away with the possibilities.
HTML page design should stress the power of hypermedia links. Don't force your readers to wade through too many layers to reach the information they want. Use the power and flexibility of hypertext links to provide readers with direct connections to relevant information.
Clear communication does not mean shouting everything VERY LOUD! Use good typographic principles and go easy on the headings. Use boldface sparingly. Think about contrast and emphasis when designing your pages.

Basics of online design: Content

Garbage in, garbage out.

Intent.

WHAT do you want to say?
WHY is it important?
What is your GOAL? Educate, entertain, inform
Who is your AUDIENCE? Technical vs. non-technical

Style.

Avoid techno-talk in all its incarnations. Remember who your audience is.
LIMIT passive voice. Use strong verbs and identify the subject of the sentence.
NO endless sentences. A good rule of thumb is 20 words or less.
ESCHEW over-stuffed words. For example:
- "utilize" for "use"
- "facilitate" for "help"
- "initiate" for "begin"

Keep your intent in mind!

Basics of online design: Visual design

Reading from a computer screen is a problem.

Resolution limitations
Glare
Smaller size
Lack of physical landmarks (e.g. pages)

DO:

Use "white space." In particular, keep paragraph blocks short.
Break information out into lists ("chunking").
Use different heading sizes to create visual landmarks.
Use mixed case. Text set in all uppercase is harder to read.
Use graphics to illustrate points (a picture is worth ... 1000Mb).

DON'T:

Run on and on in huge unbroken blocks of text.
Get TOO carried away with the possibilities: wretched excess!
Use headings to create emphasis. Too much emphasis quickly loses its meaning. Use headings for headings.

Basics of online design: Navigation

Hypertext: at last, the goodies.

Allows readers to choose their own paths through the information.
Advanced users can skip to the information they need.
Can provide links to external resources, pictures, FTP sites, etc.

Beware the dreaded "lost in hyperspace."

Organizing the links is the FIRST task in designing a Web page, not the last.
Use navigational aids: Next, Previous, Up, Down. These can be words, buttons, or other icons.
Use a mini- Table of Contents. This gives the reader a preview of what's in the Web page.
Provide a "back to top" link. VERY important.
Title the page informatively. This is what will appear in a reader's bookmark list, so make it useful and descriptive. Remember, people from all over the world may be reading your page -- don't assume they know who and where you are.
Provide URL somewhere on page for printouts.

"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.

<HTML>
<HEAD>
<TITLE>
<BODY>

To wit:

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

Tags used inside the document body

Tags used inside the body.

Headings come in "levels" (usually 1 - 6)
Paragraphs and line breaks keep everything from running together
Lists can be ordered (numbered) or bulleted (unordered)
Text formatting includes bold and italics

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

<H1>Introduction to NASIS</H1>
<H2>Welcome!</H2>
<P>
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:
<P>
<UL>
<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.
</UL>
<P>
<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. 
<P>
<I>"NASIS allows me to do my job better in less time."</I>
<P>
<I>"The NASIS software allows me to concentrate on soil 
science and the quality of my data instead of computer science."</I>

Links and hotspots

First, some terms.

Link, or hyperlink
The connection between two locations in a Web document
Hotspot
The highlighted word, phrase, or graphic that, when clicked on, activates the link
Local
Located on your computer
Remote
Located anywhere else on the Web

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

Local, within the same file
Local, to a location within another file
Remote, to another file
Remote, to a specific location within another file

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, 
Colorado</a>

Remote:

For more information about the National Soil Information System, click 
<a href="http://ftc.nrcs.usda.gov/IRMD/nasis.html">here</a>.

URL = Uniform Resource Locator. Expressed in the form:

http://server.name/directory/file.html

For example, http://www.fortnet.org/CITY/NaturalResources/recycle.html

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">

Options:

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.

Resources

Basic Guides

A Beginner's Guide to HTML

Web66 Cookbook-University of Minnesota

HTML References

Yale C/AIM WWW Style Manual

HTML Documentation

Extensions to HTML, Netscape Communications Corp.

HTML, The Complete Guide

Yahoo Index: HTML Guides & Sources

WWW Authoring Resources & Indexes

Yahoo-Guide to World Wide Web