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: The West Virginia Rehabilitation Research and Training Center

The West Virginia Rehabilitation Research and Training Center

WVRRTC Logo 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:

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. on the first line identifies the file as an HTML document. At the bottom of the document 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 is 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 . 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 at the end of the title. marks the end of the header information. Body: Information contained between and is displayed by the browser. The first item is the heading (sometimes called "headline") for the document. Headings: The

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

(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: WVRRTC Logo 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
and a paragraph is

. A paragraph break is typically represented as a blank line while a line break simply moves to a new line. The

tag, like , supports ALIGN commands. Thus,

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 if you include additional instructions such as ALIGN, otherwise the end tag is optional. A paragraph tag is not needed following a 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 " " but this may not be supported by all browsers. Blank lines are ignored, so you must create them with the

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:
  • Item 1
  • Item 2
This creates a list that looks like: * Item 1 * Item 2 Note that the list starts with
    and ends with
. Put a
  • in front of each item in the list. It is a good idea to put
  • at the end of the line, but it is not always required. An "ordered" list typically uses numbers rather than bullets. Start with
      , end with
    , and put
  • 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.
    1. Ordered List Item 1
    2. Ordered List Item 2
      • Unordered List Item 1
      • Unordered List Item 2
    3. Ordered ListItem 3
    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. The 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.


    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. defines the end of the row. You can have many rows. * End the table with
    1994 1995 1996
    Personnel $155,000 $157,000 $157,500
    Travel $12,324 $10,800 $11,857
    Office Supplies $2434 $1876 $2267
    . Remember that you can use the 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.