
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Guides to Hypertext Markup Language (HTML)</title>
<META Name="description" Content="This is a resource on web page authoring and web page design, containing many links to useful resources.">
<META Name="keywords" Content="web page authoring, web page design, design issues, learning html, html tutorial, html handout">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK REL="stylesheet" TYPE="text/css" HREF="/styles/standard.css">
</head>
<body>
<div align=center><p><br>
<table class="tableborder" width="600" border="0" cellspacing="0"
cellpadding="20">
<tr>
<td>
<!--#include virtual="/inc/top.html" -->
<p>
<!--    end header  -->



<h1 align=center>Guides to<br>
Hypertext Markup Language (html)</h1>
<p><br>
<center>
<TABLE class="tableborder" BORDER=0 CELLSPACING=0 CELLPADDING=10
width="80%" summary="Page layout">
<tr><td bgcolor="#eeeeee">
<span class="small">
Anyone who slaps a "this page is best viewed with
Browser X" label on a Web page appears to be yearning for the bad old
days, before the Web, when you had very little chance of reading a
document written on another computer, another word processor, or
another network.<br> Tim Berners-Lee in Technology Review, July 1996
</span></td></tr></table></center>

 <p><br>

There are many good tutorials available on the web authoring. You can
find by searching through <a
href="../../tools/hunt.html">indexes to the
web</a> for the string <b>"html tutor"</b>. In your search
statement you'll probably need to include the quotes.
<p>

<h2>In-House Guides</h2>
<ul>
<li><a href="htstart.html">Reference list of HTML tags</a> for ready reference.
<li>The <a href="bodytag.html">body tag</a>
is an essential tag to understand. This where you set colors for the page and
assign a background image.
<li><a href="lists.html">List tags</a> provide automatic numbering,
bullets and hanging indentations.
<li><a href="css-lists.html">CSS Lists</a>
<li>This <a href="page.html">Brief HTML tutorial</a> steps you through
basic tags for marking up a simple document.
<li><a href="composer.html">The Netscape Composer</a> is an easy to use
webpage editor that functions and looks much like a word processor.
<li><a href="design.html">Design Issues</a> in webpage building
</ul>


<h2>Planning and Preparation</h2>

Start your planning with the initial content you want to publish on
your site. Print the material and lay it out on a table and you will
begin to see how the narrative will flow from one page to another.
You can use paper and pencil to sketch out the flow of traffic from
one page to another and from one topical area to another.

<p>

Group your web pages by topic, placing distinct topics in directories
of their own. Each subdirectory should have its own homepage,
index.html, that appears when visitors parse a URL. This subdirectory
homepage may offer a complex introduction to the topic, or may simply
introduce the subpages contained within. At any rate, the
homepage should annotate each link, providing some description, and
should contain a link back to the site's main home page. Navigation
bars, menus and popups as guides to the site can be included. Most
navigation information is placed in the foot of the page.
<p>
Generally the top level directory will contain a subdirectory titled
"images" or "graphics" or even "media" if you plan to include video or
sound. In that top level "media" directory you will include images that
are used across the site as a whole. This enables you to keep track of
important images such as organizational logos and backgrounds.
<p>
Maintain a sense of consistency in your web site. Use the same background
gif on all of your web pages, or a small variation in color to mark a
series of pages within a single topic.
<p>
All web pages should be "stamped" with certain information, usually placed
in the foot. This information identifies you and the web page and includes
<ul>
<li>Your name as the author or owner of the page
<li>The URL of the page itself
<li>A link up to the referring page, or to the top page in this topical
group of pages
<li>A link to the site's main home page
<li>A mailto link that displays your email address as the link text. Some
people prefer to handle email in a program other than the browser. By
incorporating your email into the link text of the mailto URL you provide
the address to these people as well as offering the hyperlinked email
function.

</ul>


<p>
<h2>Accessibility Issues</h2>
<ul>
<li><a href="http://www.mcsr.olemiss.edu/~mudws/font.html">The font
tag</a>
<li>A discussion of the <a
href="http://ppewww.ph.gla.ac.uk/%7Eflavell/alt/alt-more.html#why">alt tag
and its uses</a>
<li><a
href="http://ppewww.ph.gla.ac.uk/%7Eflavell/alt/alt-text.html#howlers">Alt
text howlers</a>
<li><a href="http://www.w3.org/WAI/">The Web Accessibility Initiative</a>
<li><a href="http://www.bright.net/~jonadab/noframes/">Problems with
frames.</a>
<li>Jakob Nielsen's article, <a
href="http://www.useit.com/alertbox/9612.html">why
frames suck</a> dates to 1996 but it's still relevant.

 </ul>
<p>
<hr>

 <p>

Here is a collection of reference guides, introductions and documentation to
the Hypertext Markup Language (HTML), the language used to format
web documents.
<p>
A really great, interactive, <a
href="http://www.webmonkey.com/teachingtool/">Hypertext tutorial</a>
<p>
<P>

<h2>General Guides and Documentation</h2>
<ul>




<li><a href="http://webreview.com/1997/10_03/strategists/10_03_97_4.shtml">
Organizing Your Site from A-Z</a> is about website architecture and
includes
file and directory structures as well as navigation.





<li><a href="http://www.tsworldofdesign.com/site_developer/">
Web Site Development</a> contains links to myriad tools and techniques,
including browser information and simulation (see how your pages look in
various browsers, including backwards compatibility). It also links to a
number of resources on marketing and promotion of web sites.

<li><a href="http://www.webreference.com/html3andns/">Web references's Guide
to HTML 3.2</a> is well designed to provide a brief reference to tags, but
it doesn't include in-depth explanations and instructions.

 <li><a
href="http://www.ecn.bgu.edu/users/gallery/webwork/www.html">Webwork</a>
contains terrific links to how to do things general and specific. Their
link to ruler lines and controlling the appearance of bullets in list
commands is the best I've seen.
<li>HTML code for 
<a href="http://www.cs.tut.fi/~jkorpela/www/windows-chars.html">symbols and 
 special characters</a>.
<li><a href="http://www.htmlgoodies.com/">HTMLgoodies</a> includes a
series of terrific tutorials on specific aspects of page construction.
Here you'll find mini-tutorials on backgrounds, image maps, tables, etc.

<li> <a href="http://www.nd.edu/PageCreation/TipsAndHints.html">HTML Tips
and Hints</a>. I especially like their explanation of how to place text
and graphics side by side, and their discussion of the differences
between absolute and relative URLs.

<li>
<a href="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html"> A
Beginner's Guide to HTML</a>. This is a very rich and comprehensive site
from the NCSA, the National Center for Superconducting Applications. You
could learn all the HTML you need here.


<li><a href="http://www.w3.org/MarkUp/MarkUp.html">HTML
Documentation from W3</a>. W3 is the World Wide Web Consortium, a non
governmental organization dedicated to developing common standards for
the WWW. It's led by Tim Berners-Lee, the creator of the WWW. This site
contains a number of useful links to HTML tutorials and to papers and
discussions on the development of HTML.

<li>For a lighter view of hypertext try the <a
href="http://ifaq.wap.org/computers/mrml.html">Mind Reading Markup Language
(MRML)</a>
<li><a href="http://members.aol.com/_ht_a/htmlataglance/meta.htm">Meta Tags</a> control
*how* your page will be indexed.
<li><a href="http://www.w3.org/Addressing/Addressing.html">
    About URLs, URIs, URNs</a>
</ul>
<p>
<p>
<h2>Check your HTML Code</h2>
<ul>
<li>My all time favorite is <a
href="http://www.Doctor-HTML.com/RxHTML/cgi-bin/single.cgi">Dr.
HTML</a>,
which checks code, hyperlinks and spelling.

<li>The <a href="http://validator.w3.org/">W3 Validator</a>

</ul>
<p>
<h2>Making Frames and Tables</h2>

Please be sensitive to the fact that not all pages are suitable for frames
and tables.  If you want to learn to make a framed page by doing it, then
I encourage you to place the frame on a separate page, labeled as a test
piece.

<p>
<ul>
<li><a href="http://www.spunwebs.com/frmtutor.html">The Webspinners'
frame tutorial</a> is excellent and includes templates to get you started.

<li>The <a
href="http://www.webreference.com/html3andns/frame.html">Webreference
frame guide</a> is a good reference source.
<p>
<li>Netscape offers an excellent <a
href="http://home.netscape.com/assist/net_sites/table_sample.html">Tutorial
on Tables</a>, with terrific examples and clear code.

 </ul>
<h2> Forms in HTML </h2>
<ul>

<li> The best in fill-out forms, at <a
href="http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/fill-out-forms/
overview.html">Mosaic</a>
<li> <a href="http://hoohoo.ncsa.uiuc.edu/cgi/forms.html">Guide to forms</a>
</ul>
<p>
<h2>The Common Gateway Interface (CGI)</h2>
<ul>
<li> <a href="http://hoohoo.ncsa.uiuc.edu/cgi/">Introduction to CGI</a>

<li><a
 href="http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/serv-cgi-bin.html">
CGI BIN scripts for servers</a>

<li><a href="http://hoohoo.ncsa.uiuc.edu/cgi/interface.html">CGI-BIN
interface spec. (Environmental variables, etc.)</a>
</ul>
<p>
<h2>Programs</h2>
<ul>
<li> <a href="http://www.landfield.com/hypermail/devcenter.html">
Hypermail: convert email to hypertext</a>


</ul>

<p>

<h2>Using HTML Editors</h2>

Try using the
<a href="http://home.netscape.com/browsers/using/newusers/composer/index.html">
Netscape Composer</a>. It's pretty easy to use and creates
clean code that you can actually edit later!
<p>
<a href="http://itc.gsu.edu/howto/acro/dreamweaver.PDF">GSU
Dreamweaver tutorial</a>
is in PDF format.
<p>

<a href="http://www.serif.com/webplus1/index.asp">WebPlus 1</a> is a free
web page editor. This company also offers a free graphics editor,
PhotoPlus.


<p>
<h2>Exceptional Web Pages</h2>
<ul>
<li><a href="http://www.outtacontext.com/">Jeff Gates</a> has one of the
most
interesting web sites I've seen yet.

<li>Jan Hanford's <a href="http://lessing.redmood.com/">Doris Lessing</a>
site is spare
and clean and beautifully rendered.
<li><a href="http://www.salon.com/">Salon</a> is an Internet-based
magazine that offers an exceptional example of the power of hyperlinking.
<li><a href="http://www.envirolink.org/">Envirolink</a> is a beautiful
example of the use of color an imagery to bring cohesion to a web site.

<li>Internet Literacy's <a
href="http://www.matisse.net/files/formats.html">
Common File Formats</a> is an excellent example of the appropriate use of
the table tag.

<li><a href="http://www.art.uiuc.edu/@art/">The @art gallery</a>

</ul>
<p>



<!-- footer -->
<!--#include virtual="/inc/foot.html" -->
<p>
</td></tr></table>
</div>
<!--#exec cgi="/cgi-bin/looker/ax.pl" -->
</body>
</html>

