                            Getting A Grip on HTML

                                Version 3.0

                               Copyright 1997

       The West Virginia Rehabilitation Research and Training Center

           Barron Drive, P.O. Box 1004, Institute, WV 25112-1004

     Voice phone (304) 766-2680, TDD (304) 766-2697, Fax (304) 766-2689

   Project Enable Bulletin Board (304) 766-2690, Telnet: enable.wnvet.edu

       Inquiries by E-mail: whipp@rtc2.icdi.wvu.edu, World Wide Web:
                              www.icdi.wvu.edu

   This project is supported in part by grant number H133B30074 from the
        United States Department of Education, National Institute on
        Disability and Rehabilitation Research to the West Virginia
                Rehabilitation Research and Training Center.

         Copies of this manual are available in alternate formats.

           _____________________________________________________

     Written by Dave Whipp, Layout by Betty Jo Tyler, Graphics by Robin
                                   Hammer

                               February 1997

   What is this publication? What is Hypertext Markup Language?,
   What kind of editor is needed?, Aren't there HTML editors
   available?, Why learn HTML instead of using an HTML editor?, Is
   it ok to copy this manual?, A Basic HTML page, Tags, Header,
   Body, Headings, Including images, Including text,
   Paragraphs and line breaks, Fonts, Hypertext links,
   Including E-mail Addresses, Other types of links, Lines,
   Lists, Special Characters, Tables, Some Suggestions,
   Other HTML Guides, More on Accessible HTML.

   What is this publication? This document covers the development of
   World Wide Web pages with an emphasis on accessibility for people with
   disabilities. This is a very basic introduction which covers only the
   minimum amount of information necessary to get started. There is a
   wealth of information about the World Wide Web available on the World
   Wide Web. References to additional documentation are included at the
   end of this document.

   The files used for the World Wide Web (WWW) are simple text files
   which use a system called "Hypertext Markup Language" (HTML) to
   indicate how the text should be displayed on the browser (e.g.,
   Netscape, Mosaic, Microsoft Internet Explorer) that the user has on
   the local computer.

   What is Hypertext Markup Language? A markup language indicates the
   author's intentbut does not specify exact typographical details. For
   example, in a word processor or desktop publisher you might set up a
   chapter title as Helvetica, bold, 18 point type but in HTML you would
   simply indicate that this is a level 2 heading. The setup of the
   user's browser would dictate how this is displayed. Similarly you
   generally do not indicate margins, page width, etc.

   It is important to note that the user may have the browser set up in a
   very different manner than yours. For example a person with low vision
   may use 18 point type on a screen set up for 640 by 480 graphics.
   Others may use 10 point type on a screen set up for 1068 by 740
   graphics because they use a 21 inch monitor. Among other things, the
   number of characters printed on a line will vary greatly.

   "Hypertext" indicates that the documents created with the markup have
   links to other documents. Links are the highlighted text displayed by
   the browser to indicate that you may click on the link to view another
   document.

   What kind of editor is needed? HTML files can be created and
   maintained with a simple text editor (e.g., Windows Notepad) or in
   word processors (e.g., Word Perfect) by saving your work as a DOS text
   file. When used on a WWW server, the HTML files must have an .htm or
   .html extension.

   Aren't there HTML editors available? Yes, there are a number of HTML
   editors (e.g., HTML Assistant, Hot Metal, Netscape Gold) available.
   And, many word processors have options to allow documents to be
   converted to HTML (e.g., Word Perfect allows Word Perfect documents to
   be saved as HTML).

   Why learn HTML instead of using an HTML editor? HTML editors are a new
   type of software and many of them assume some knowledge of HTML on the
   part of the user. Some HTML editors may not be able to provide all
   features, especially as new versions of HTML are developed. Also, an
   understanding of HTML allows you to work with nearly any available
   editor.

   Is it ok to copy this manual? Yes. As long as you copy the entire
   document including publication credits, make no changes, and do not
   charge for the copies. If you distribute many copies, we would very
   much appreciate getting a count from you so that we can report to our
   funding agency the impact of the publication.

                             A Basic HTML page

   Suppose we want a World Wide Web page that looks like:

                      The West Virginia Rehabilitation
                        Research and Training Center

    The West Virginia Rehabilitation Research and Training Center
   provides this resource on disability, rehabilitation, employment, and
   education as part of its mission to improve the effectiveness of
   disability information.

   You may also find information on:
     * The Project Enable Bulletin Board System
     * The Rehabilitation Technology Association
     * Untangling the Web

   The actual HTML document would look like:

   <html>
   <head>
   <title> The West Virginia Rehabilitation Research and Training Center
   </title>
   </head>
   <body>
   <h1 align="center"> The West Virginia Rehabilitation Research and
   Training Center </h1>

   <img src="WVRRTC.gif" align="bottom" alt="WVRRTC Logo">

   The <em> West Virginia Rehabilitation Research and Training
   Center</em> provides this resource on disability, rehabilitation,
   employment, and education as part of its <a href="mission.htm">
   mission </a> to improve the effectiveness of disability information.
   <p>

   You may also find information on:
   <ul>
   <li>The Project Enable Bulletin Board System/li>
   <li>The Rehabilitation Technology Association/li>
   <li>Untangling the Web</li>
   </ul>

   </body>

   </html>

   At a glance, there seems to be little similarity between the two
   documents. However, if we look at the various elements that HTML uses
   to tell the browser how to display the document, we will begin to see
   the building blocks fit together. Let's look at these one-at-a-time.

   Tags: The cryptic looking entries inside the < > markers are called
   "tags"and are the primary HTML markup tool. <HTML> on the first line
   identifies the file as an HTML document. At the bottom of the document
   </HTML> marks the end. In most cases, text within tags can be in upper
   or lower case. Note that putting a "/" in front of most tags means to
   end the instruction.

   Header: After <HTML> is <HEAD> which contains header information that
   is not displayed by the browser. While a number of pieces of
   information can be put in the heading, the only one we'll use is
   <TITLE>. This is what the browser shows at the top of the screen when
   the document is displayed and, when the address of a document is saved
   by a user, the title identifies it in the Bookmark list. The title
   will quite often be the same as the heading at the top of the page,
   but there may be times when it is different. Try to keep the title
   short, but descriptive and unique to each document. Note the </TITLE>
   at the end of the title. </HEAD> marks the end of the header
   information.

   Body: Information contained between <BODY> and </BODY> is displayed by
   the browser. The first item is the heading (sometimes called
   "headline") for the document.

   Headings: The <H1 ALIGN="CENTER".> indicates that the heading is level
   1 and centered between the left and right margins. Levels 1 through 6
   are supported by HTML with 1 having the strongest emphasis. LEFT and
   RIGHT are also supported for justification with LEFT being assumed if
   nothing is indicated.

   Headings are put on a separate line, so you cannot use this command to
   emphasize a section of text within a larger block. You must indicate
   the end of the heading with </H1> (with the number changing according
   to the level of heading used).

   Including images: Graphic files in gif and jpeg format can be included
   in files. Use this format:

   <IMG SRC="WVRRTC.GIF" ALT="WVRRTC Logo" ALIGN="BOTTOM">

   <IMG> indicates a graphic image is to be displayed.

   SRC="WVRRTC.GIF" gives the name of the graphic to display. Path
   information may be included if necessary.

   ALT= provides a text description of the graphic. This is quite
   important as people using speech or braille output will have graphics
   turned off. Also, many other users turn graphics off as they take a
   long time to load through slow connections and some browsers (such as
   Lynx) don't display graphics. If you need a great deal of text to
   describe the information covered in the graphic, an alternative is to
   put the description in a separate HTML file and provide a link to it.

   ALIGN="BOTTOM" indicates how the first line of text should align with
   the image. TOP and MIDDLE are also available. Note that only the first
   line of the following text will be printed in that position, the rest
   of the text will be under the graphic. The crop of browsers currently
   in development (HTML 3.0) will allow fully wrapped text (using
   alignments of "LEFT" and "RIGHT ") , but it will be a while before
   these are fully used in the field.

   It is a good idea to keep graphics as small as possible. 100 pixels
   (dots) wide is usually adequate for a photo of a person. This will
   speed up the transfer of the file to the user. Remember that many
   people access the Internet through a modem which can take much longer
   than a direct connection to transfer a file.

   Graphics Workshop for Windows is a good system for converting other
   formats to .gif and .jpg as well as sizing them. It is shareware and
   can be obtained on the Internet.

   Including text: The next section of the document contains text
   information, links to other documents or other sections of the same
   document, images, etc. Simply type in text that you want to be
   displayed.

   Paragraphs and line breaks: The browser will automatically reformat
   paragraphs depending on its line length setting, so you must indicate
   line breaks (hard returns) and paragraphs. A line break is <BR> and a
   paragraph is <P>. A paragraph break is typically represented as a
   blank line while a line break simply moves to a new line.

   The <P> tag, like <H?>, supports ALIGN commands. Thus, <P
   ALIGN="RIGHT"> will right justify the paragraph. "CENTER" and "LEFT"
   are supported and "LEFT" is the default if nothing is specified. You
   must end the paragraph with a </P> tag if you include additional
   instructions such as ALIGN, otherwise the end tag is optional. A
   paragraph tag is not needed following a </H?> tag, the break is
   automatically added.

   Multiple spaces within a document are normally compressed to a single
   space. A "hard space" can be created by "&nbsp;" but this may not be
   supported by all browsers. Blank lines are ignored, so you must create
   them with the <P> tag.

   Fonts: The browser will generally use the type face (e.g., Helvetica,
   Ariel) selected by the user. However, there are several ways to
   emphasize blocks of text. <STRONG> starts text that is typically
   displayed as bold and <EM> (emphasis) is typically displayed as
   italic. These commands allow the user to specify how the enclosed text
   will be display. This is a preferred method.

   However you can specify <B> for bold, <I> for italic, and <U> for
   underline. <CODE> is fixed width and often used to represent computer
   information.

   To show a block of text just as it is typed in, including line
   endings, blank lines, and spaces, use <PRE> to mark the preformatted
   text. This uses fixed width type and may be useful for tables until
   you get comfortable with the markup for these.

   Remember to mark the end of the text block with using the "</PRE>"
   tag.

   Hypertext links: The term "hypertext" indicates the ability to link
   one document to another or link to different sections in the same
   document. This is done by indicating "links" in the document and
   providing the address or reference to which to link. The statement:

   <A HREF="MISSION.HTM"> Mission </A>

   contains all the information needed to go to another document in the
   same directory as the current document. The <A indicates the start of
   a link. HREF="MISSION.HTM" gives the name of the document and the
   following > indicates the end of the address. Note that if you are
   using a UNIX based Web server, the case of the letters inside the
   quote marks must match the case of the directory and file names on the
   server.

   The word "mission" is outside the tags, so it will be highlighted as a
   link by the browser and, when the user clicks on it, it will call and
   display the next document. It is helpful to make the link information
   fairly self- explanatory as some screen readers allow the user to tab
   through documents and only read the highlighted link information.

   The </A> indicates the end of the words to be highlighted as a link.

   In the above example the file was in the same directory on the same
   WWW server. If it were in a subdirectory below the directory of the
   document, the link would look like:

   <A HREF="RESEARCH/OVERVIEW.HTM"> Overview </A>

   Note that forward slashes (/) are used instead of backslashes (\).

   A link to a document in a directory above the one containing the
   current document might look like:

   <A HREF="../WELCOME.HTM"> Welcome </A>

   If the document is on a totally different server, the entire address
   must be given:
   <A HREF="HTTP://WWW.ICDI.WVU.EDU/HOMEPAGE.HTM">

   (The HTTP:// (Hyper Text Transfer Protocol) indicates that the action
   is to call another hypertext document. We'll look at this a bit more
   later.)

   You can link to a different point (called an "anchor or target") in
   the same document. First put a # in front of the anchor name when
   setting up the link.
   <A HREF="#Personnel">Personnel</A>

   then go to the anchor point and put in a name for it to find.
   <A NAME="Personnel"> Our Personnel </A> include . . .

   Note that the case of the letters for the name must be the same in
   both places.

   Including E-mail Addresses: A mail address may be included as a link.
   If the user's browser is correctly setup, a click on the anchor will
   start a mail editor and allow mail to be sent to the address. The
   format of this is:
   <A HREF="Mailto:whipp@rtc2.icdi.wvu.edu">E-mail Dave Whipp </a> at
   whipp@rtc2.icdi.wvu.edu

   The information after the Mailto: is the actual email address that is
   used, "E-mail Dave Whipp" will be highlighted as the link. It is
   helpful to give the actual E-mail address as part of the text as well
   to allow users to write it down or print the page to save it.

   Other types of links: In addition to the hypertext link which uses
   HTTP:// as described above, you may link to a gopher site by using
   GOPHER://, and ftp site by using FTP://, etc.

   Lines: A horizontal line or rule may be placed across the page with
   <HR>. Some speech output systems try to pronounce the line so these
   should be used sparingly.

   Lists: HTML supports several types of lists. An "unordered" list
   typically puts bullets in front of items:

   <UL>
     <LI>Item 1 </LI>
     <LI>Item 2 </LI>
   </UL>

   This creates a list that looks like:
     * Item 1
     * Item 2

   Note that the list starts with <UL> and ends with </UL>. Put a <LI> in
   front of each item in the list. It is a good idea to put </LI> at the
   end of the line, but it is not always required.

   An "ordered" list typically uses numbers rather than bullets. Start
   with <OL>, end with </OL>, and put <LI> in front of each item.

   Other types of lists are available. You may have lists within lists
   (nested). Just be careful to end each list in the proper place.

   <OL>
     <LI>Ordered List Item 1 </LI>
     <LI>Ordered List Item 2 </LI>
     <UL>
       <LI>Unordered List Item 1 </LI>
       <LI>Unordered List Item 2 </LI>
       </UL>
     <LI>Ordered ListItem 3 </LI>
   </OL>

   The resulting WWW page will look like:
    1. Ordered List Item 1
    2. Ordered List Item 2
          + Unordered List Item 1
          + Unordered List Item 2
    3. Ordered List Item 3

   Some people who use screen readers say that it is helpful to them if
   lists use numbers and the list is preceded with a note indicating "The
   following list has three items which . . . ."

   Special Characters: As you have noticed, the characters < and > are
   used to mark tags. They also may need to be included in the document
   as "less than" and "greater than" symbols. To include < in a document,
   use &lt; and use &gt; for >. Also, use &amp; for & and &quot; for the
   double quotation mark. Note that these entries are followed with a
   semicolon and are lower case.

   Tables: Tables take a bit of concentration, but a nice looking one can
   be done with only a handful of commands. To do a simple table that
   looks like:

   1994 1995 1996
   Personnel $155,000 $157,000 $157,500
   Travel $12,324 $10,800 $11,857
   Office Supplies $2432 $1876 $2267
     * Start the table and define the setup.
       <TABLE BORDER>
       This sets up a table with a border.
     * Provide the headings for the columns.
       <TR> <TH></TH> <TH>1994 </TH> <TH>1995 </TH> <TH>1996 <BR> </TH>
       </TR>
       The <TR></TR> tags designate a table row which consists of table
       headers for the columns.
       The <TH></TH> tags designate table headers, put table header
       information between these tags. The example leaves a blank header
       above the first column as that will have the labels for the rows
       in it. The second column will be "1994" and so on. Note that there
       is a space after each header item and a <BR> (line break) after
       the last item. These tags are not required by Web browsers that
       support tables but do make the tables readable by some browsers
       that do not support tables. In the case of CENTER and RIGHT
       alignments, they may shift the alignment. This can be eliminated
       with a space before the text instead of after for RIGHT alignment
       and by putting a space both before and after text for CENTER.
       These tags will be included throughout this table.
       You do not define widths of the cells, the browser will do that
       automatically. You can have a number of columns.
     * Put in the information for each row.
       <TR> <TH ALIGN="LEFT">Personnel </TH> <TD ALIGN="RIGHT">$155,000
       </TD> <TD ALIGN="RIGHT">$157,000 </TD> <TD ALIGN="RIGHT">$157,500
       </TD> </TR> <BR>
       <TR> <TH ALIGN="LEFT">Travel </TH> <TD ALIGN="RIGHT"> $12,324</TD>
       <TD ALIGN="RIGHT"> $10,800</TD> <TD ALIGN="RIGHT"> $11,857 </TR>
       <BR>
       <TR> <TH ALIGN="LEFT">Office Supplies </TH> <TD ALIGN="RIGHT">
       $2434</TD> <TD ALIGN="RIGHT"> $1876</TD> <TD ALIGN="RIGHT"> $2267
       </TD> <TR> <BR>
       Note that the first entry is for a table header aligned to the
       left of the column, the next three entries are for table data and
       are aligned to the right of the column. </TR> defines the end of
       the row.
       You can have many rows.
     * End the table with </TABLE>.
       Remember that you can use the <H?> commands to put headings above
       the table to identify and describe it.
       Note: Tables are a problem for many of the screen reader software
       systems, especially if cells have more than one line of
       information. If you use tables, it is a good idea to allow an
       option to access the same material in text form in a non-table
       format. Remember that screen readers usually read across the
       screen one line at a time. Thus information in columns or cells
       will not be read correctly.

   Some Suggestions: Remember that HTML only allows you a system for
   presenting your information--it is the information itself that is
   important. Here are a few ideas that may help make your site more
   useful to users.
     * Analyze your audience and develop your site around their needs and
       abilities.
     * Use the medium to better communicate your message. Don't let
       "frills" get in the way.
     * People may visit your site the first time to see how it looks;
       they will return if they find it useful. Provide useful
       information, make it easy to find, and keep it up-to date.
     * Update and improve frequently. If there is nothing new, there is
       no reason to return later.
     * Keep graphics to a minimum. Make sure they assist in
       communication. Keep them as small as possible.
     * Use multiple pages rather than long pages as much as possible.
       Often users only need part of the information and waiting for long
       files to load, then searching them can be tedious. An exception is
       that it is easier to print or save a document if it is in a single
       file.
     * Check out your site using a browser that is connected with a 14.4
       baud modem. Many users do not have high speed connections. Make
       sure your pages don't take too long to load. Thirty seconds can
       seem like a very long time to wait when using a computer.
     * Check out your site using a variety of browsers. Remember that
       many people will be using older versions of the browser. Try a
       text based browser such as Lynx to make sure you don't exclude any
       of your audience.
     * Make your system "findable" by the WWW search engines such as
       Yahoo or Alta Vista. Users who are looking for the information you
       provide will be searching for words or terms. Make sure you use
       all appropriate descriptors on your pages. Make certain that the
       first few lines of each page tell about the page as most search
       engines present a list of pages found with only a few lines from
       the page. Post information about your site to the sites running
       the search systems so that you will be included.

   Other HTML Guides: This document is intended to provide the minimum
   amount of information needed to develop basic World Wide Web pages. It
   probably covers less than 10% of the options available for HTML
   documents. Many other guides exist on the World Wide Web. A good list
   is available at:
   http://www.yahoo.com/Computers_and_Internet/Software/Internet/Worl
   d_Wide_Web/Authoring

   More on Accessible HTML: A good guide on developing accessible WWW
   pages is available at http://trace.wisc.edu.