If you want to create a web site, need to add web publishing to your skill set, or just want to know a little more about how web pages work, this article will teach you the basics of creating and publishing documents on the World Wide Web. You will learn what basic elements make up a web page, how to create a web page, how to write basic HTML (Hypertext Markup Language), how to link to other documents, and how to post your creations to the web for all to see. Because of space limitations, this article cannot possibly cover all the topics that encompass the wide world of web publishing. However, I present the basics that will give you the ability to get started and to build a foundation of knowledge that will be invaluable if and when you decide to go further. This article also assumes that you have a basic familiarity with Microsoft Windows and that you know how to navigate using your screen reader or other access technology. If you need a basic primer on how to use Windows, see my article "Driving Windows for the First Time" (January 2002 AccessWorld).
Web publishing and coding may appear to be complex and impenetrable, but you do not have to know the subject in its entirety to get your feet wet. Even if you are a novice, you can create a basic web page that is effective and attractive. Before I tell you how to write a web page, I will present some basic definitions.
Definitions
The World Wide Web and Web Pages
In simple terms, the Internet consists of millions of computers that are linked in a global network, allowing these systems to share information using standard protocols. The World Wide Web is the embodiment of this linkage because it allows you to publish documents that others can access from across the street or around the world. These documents are called web pages, and they are written using a standard language known as HTML.
On the World Wide Web, documents can be bound together by a mechanism known as linking. Links can be embedded in web pages, allowing you to move quickly to another web page by simply clicking on its link. With the click of the mouse or the strike of the Enter key, you can move across the world to another web page from the one you are currently viewing. This is a defining property of the web and what makes it so popular and efficient. In this article, I will show you how to create links to files and other web pages.
Web pages are basically plain text documents that contain the text and other content that you want displayed on your web page, as well as embedded commands called HTML tags. These tags tell your web browser how to display your page. Pages that are written in HTML have the file extension .HTML or .HTM, which allows the file to be recognized and read by web browsers. The browser processes the file, looking for HTML tags that it recognizes, and then displays the page according to the embedded HTML commands. If the file contains incorrectly written tags, the browser will fail to display the page properly. Web pages can also contain forms, buttons, and other control objects, but a full description of them is beyond the scope of this article.
Web pages can be written with almost any software program that will allow you to create documents and then save them as plain text files with the file extension .HTML. A file can be stored almost anywhere--on your local hard disk, on a company's network or intranet, or on the Internet itself. It really does not matter where the file is located, as long as you have access to the directory or the web site where it is stored. Then, you can point your web browser to the file to view its contents.
Web Browsers
A web browser is one of the most important applications in your software arsenal, and its importance is increasing as the web expands and more software adopts web-style user interfaces. In a nutshell, web browsers are file readers that know how to interpret embedded HTML tags and then display a web page according to the embedded tags. Your web browser lets you open and view web pages found on the web, on your local hard drive, and on your company's network or intranet. Web browsers also let you run applications that have a web-style interface, a growing trend in the world of software development.
Microsoft Internet Explorer is by far the most common web browser, and I assume throughout this article that you are using it. Internet Explorer lets you navigate forward and backward from link to link by pressing Tab and Shift-Tab. Because of Internet Explorer's dominance of the market, manufacturers of screen readers have built in additional navigation for it.
Both Window-Eyes and JAWS for Windows reformat web pages to allow you to navigate through the pages using the arrow keys to move character by character, word by word, or line by line. Other web browsers include Netscape Navigator, Opera, Lynx, and IBM's Home Page Reader.
HTML Tags and Basic Web Page Structure
So what is contained within the actual file that makes up your web page? As already noted, this file contains all the text and other information you want displayed on your page, as well as embedded commands called HTML tags. Again, these tags tell your web browser how to display your web page on the screen and where to find the images, sounds, and other files that are connected to your page. HTML consists of hundreds of tags that let you format and display your web page in a wide variety of ways and includes tags that allow you to insert titles, headings, paragraphs, lists, images, links, and other objects within your web pages.
What is the basic construction of HTML tags? HTML tags begin with the left angle bracket "<" and end with the right angle bracket ">." An example of a commonly used HTML tag is this:
<title>
This tag tells your browser where the title of your page begins. But how do you tell your browser where the title ends? You use a closing tag like this:
</title>
Pay special attention to this example. It looks almost like the previous example, with one exception. It contains a "/" (forward slash) character. Thus, there are two basic types of tags: opening tags and closing tags. An opening tag tells your browser to start doing something, such as showing a word in bold face, and the closing tag tells it when to stop that action. It is that simple.
The next example puts a title on your web page. The title appears on the top bar of your browser's window, just above all the content. If you are using a screen reader, you can hear the title by using your Read Window Title command. Every page deserves a title, and this is how to do it:
<title>This Is the Title of My Web Page</title>
You will find that you need subtitles to make certain content stand out and to separate sections of your page. Here's an example that puts a Level 1 heading into your web page:
<h1>This Is a Heading</h1>
Headings have levels, and you can have up to six levels. Level 1 headings are more important than Level 2 headings, and so on.
<h6>This Is a Level 6 Heading</h6>
Because your web pages will likely contain lots of text content, you need a mechanism to separate paragraphs from one another. When you need to skip to the next paragraph, insert the following tag into your page:
<p>
Here's an example of how to use the paragraph tag in conjunction with text content:
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
Adding images and graphics to your web pages makes them stand out and gives your page a professional look. If you want to display an image file, use the following example:
<img src="FileName.jpg">
To make an image accessible, you will need to include a text description of the image. To display an image file on your page with a text description, use the following, slightly more complicated, example:
<img src = "C:\FileName.jpg" alt="This is the description of the image file">
Some of your web creations will include lists, and HTML allows you to do so fairly easily. The following example is known as an unordered list. You begin the list using the <ul> (for unordered list) tag and end it with the </ul> tag. You use the list item <li> and </li> tags for each item in the list, as in this short example:
<ul>
<li>the first object in the list</li>
<li>the second object in the list</li>
<li>the third object in the list</li>
<li>the last object in the list</li>
</ul>
Building Your First Web Page
In this section, I show you how to write a web page from beginning to end, building a template that you can modify for future creations. This sample template includes the basic HTML tags that you need to build a page that can be formatted correctly by most browsers. Your first page will include few HTML tags, but it will show you the steps that are necessary for creating a web page from start to finish.
I am using the Windows Notepad program for all the examples in this section. Notepad is a simple text editor that is used widely by programmers and software developers for editing their programs and HTML. It is simple and easy to use and does not insert hard carriage returns into your documents, which is useful because some programming languages are fussy about where carriage returns are inserted into the source code. Notepad is preferred by web designers who are blind because it is totally accessible, whereas many web-building tools are not. This text editor is available with all Windows systems and can be found by going to the Start Menu, Programs, Accessories. Arrow down until you hear Notepad and press the Enter key.
Type the following short example in Notepad, taking care to include all punctuation. The example creates a page with a title and two paragraphs of text beneath the title.
<html>
<head>
<title>This Is the Title of My Web Page</title>
</head>
<body>
<p>This is the first paragraph of my web page.</p>
<p>This is the second paragraph of my web page.</p>
</body>
</html>
This example is about as simple as it gets. Let us look at the HTML tags used in this example. The first tag <html> tells your browser that this is a web page written in HTML. The next tag <head> tells your browser where to find the heading information, and the tag after that <body> tells your browser where to find the actual content of your web page. The example also uses the title <title> tag and the paragraph <p> tags. If you read through the entire example, you will find that all the tags have corresponding closing tags.
Once you have typed in the foregoing example, the next step is to save the file. Press Alt+F to go to the File menu, arrow down to Save As, and then press the Enter key. This brings up the Save As dialog box, which asks for a file name.
Save the file in the root directory of Drive C, so it will be easy to find later. Type in the filename "C:\MyFirstFile.html" and press the Enter key. (Do not type the quotes.) Now, exit Notepad by hitting Alt+F4. Congratulations! You've just created your first web page!
Testing Your New Web Page
The way to test our new web page is to launch the file and view the results using a browser. You can quickly launch the file by hitting WindowsKey+R to bring up the Run dialog box. Type "C:\MyFirstFile.html" into the box and press the Enter key. Be sure not to type the quotes. Shortly after you press Enter, your default browser, probably Internet Explorer, will automatically start and load your new file, provided that you entered the file name correctly.
If you did everything correctly, your new web page should now be visible on screen with Internet Explorer, the standard browser for Windows platforms, and you should hear the title and two paragraphs. If you see or hear any of your HTML tags, something is wrong, and you will need to edit the page to fix it.
Try to read the page in smaller increments using the Up and Down arrow keys. You can also move to the top of your page with Control-Home and to the end by hitting Control-End, both of which are standard Windows keyboard shortcuts.
If you want to view the source HTML, simply go to the View Menu with Alt+V. Arrow down to Source and press the Enter key. Doing so will launch Notepad with the source code of the file you are currently viewing. Internet Explorer remains active but is pushed into the background. Do not edit the source file, because editing will create a second copy of your file. If you need to edit the page, reopen your original file in Notepad. Simply make your corrections to the original and save the file again. Then hit Alt-Tab to return to Internet Explorer and view the results of your editing handiwork. To see these changes, you need to do one more step: hit the F5 key to reload the page. Once you hit F5, you will be able to see and hear your new page with the changes. Repeat these steps as many times as needed if you see or hear any of your HTML tags. This procedure is useful because it lets you quickly bounce back and forth, from viewing with Internet Explorer to editing with Notepad, with just a few keystrokes.
Building Links
Once you have fixed your page and it displays properly, you can make the page more useful. One way to do so is to build a link to another page. To begin, just Alt-Tab to the original file in Notepad and start editing. Make your file look like the following example by adding the link <a> tag:
<html>
<head>
<title>This Is the Title of My Web Page</title>
</head>
<body>
<p>This is the first paragraph of my web page.</p>
<p>This is the second paragraph of my web page.</p>
<p><a href="http://www.afb.org/accessworld">
AccessWorld</a></p>
</body>
</html>
Now save your work and return to Internet Explorer. Hit F5 to reload the source file and view the page in the browser. If you want to add a new tag to expand your page, just repeat this sequence until you are satisfied.
Presto! you have just added the code to link your new web page to the AFB AccessWorld web page. Again, linking is the fundamental power of the World Wide Web, giving you the mechanisms to connect to other documents, files, web pages, and other information, and it is simple to accomplish. Links stand out on your page, and you can move through them using the tab key or move backward using Shift-Tab.
The next example shows how to link to a file on your hard drive. If you want to link to a local file, use this sequence in your page:
<a href="C:\Resume.doc"> This is the link to my resume.</a>
The string within the quotes is the full path of the file name, and the text that follows is the text that will be displayed on screen and spoken by your synthesizer when you land on the link.
You can use the foregoing example to link to text documents, Word documents, sound files, and other web pages. Try adding it to your template file at the end, right after the link to the AFB AccessWorld tag. Just be sure that you are linking to a file that exists and that you have entered the full and complete path.
Playing a Startup Sound
A sound that is played every time someone visits your web page can add color and distinction to your page. Just be aware that if you add a sound, it is best to select a short sound file, because a background sound can drown out speech being produced by a screen reader. But if you want to play a Wav or MP3 file when your page opens, put this tag into your page, as in the following example.
<bgsound src="SoundFile.Wav">
For the file to be accessible, remember that you must provide a text description of this and any sound files that are linked to your pages. Just provide a text transcript of the file, or briefly describe the contents of the file to support users with hearing impairments.
Looking Under the Hood
You can learn a lot about how to write computer programs just by studying how other programs are written, and this applies in spades to HTML. A good way to learn how HTML is written is to look at the source codes of web pages that you visit. Just go to your favorite web page and tell your browser to view the source. If you are using Internet Explorer, just go to the View Menu by hitting Alt+V, arrow down to "View Source," and then hit Enter. This sequence will open up the file in Notepad, letting you examine all the HTML tags and other content contained within the page. You can save this file to your PC and read it later or cut and paste useful HTML tags into your creations. One word of caution: Not all the pages you view will be coded correctly, but this procedure will let you look under the hood of many sites on the World Wide Web.
Once you have written and tested your page on your local hard drive, you can put it on the web for all the world to see. You can typically upload the files to your Internet service provider using the standard file transfer protocol (FTP), and set the privileges for the files so that others can read them. Consult your Internet service provider for specific instructions on how to post your web site, since the requirements can vary from one provider to another. If you are on an intranet or network, you can publish your web site by copying your web page and its components to a shared network drive. Consult your company's director or coordinator of information technology to obtain the proper permissions.
Adding Value
In closing, it is in your basic interest to learn as much as you can about web publishing because it is still a needed resource for the general marketplace and a critical function for many companies and institutions. If you are comfortable with the web and web page development, you will be a more valuable commodity for most employers. Building your own web page is not difficult (it can be done with less than a dozen HTML commands), and you can reuse the template I have presented in this article. Isn't it time that you added this valuable set of skills to your résumé?
