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:
You may also find information on:
. A paragraph break is typically represented as a blank line while a line break simply moves to a new line. The
tag, like 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
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. starts text that is typically
displayed as bold and (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 for bold, for italic, and for
underline. 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
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 "
"
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:
Mission
contains all the information needed to go to another document in the
same directory as the current document. The 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 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:
Overview
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:
Welcome
If the document is on a totally different server, the entire address
must be given:
(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.
Personnel
then go to the anchor point and put in a name for it to find.
Our Personnel 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:
E-mail Dave Whipp 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
. 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:
This creates a list that looks like:
* Item 1
* Item 2
Note that the list starts with and ends with
. Put a , end with
, and put
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 < and use > for >. Also, use & for & and " 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.
This sets up a table with a border.
* Provide the headings for the columns.
.
Remember that you can use the
The 1994 1995 1996
tags designate a table row which consists of table
headers for the columns.
The 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
(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.
Personnel $155,000
$157,000 $157,500
Travel $12,324
$10,800 $11,857
Office Supplies
$2434 $1876 $2267
defines the end of
the row.
You can have many rows.
* End the table with
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.