Writing A Web Page

WRITING YOUR FIRST (OR SECOND OR...) WEB PAGE

I. Introduction

In this tutorial you will learn some simple HTML (Hyper Text Markup Language) components and how to use Microsoft Word to write web pages and to transform your Word documents into web pages. Standard HTML coding will be emphasized along with some of the extensions that have been implemented rather broadly across a number of different browsers and computer platforms.

II. Learning About HTML Tags And Formatting

An HTML document is simply a text file. Any formatting is imbedded in special text codes referred to as "tags." A tag consists of the necessary text (in upper or lower case) enclosed in <...>. Generally, each tag is followed at some point by a closing tag to indicate when that particular formatting feature should be turned off. For example, to indicate bold text the beginning tag is <b> followed by the text to be set in boldface font and closed by </b>.

Each HTML page begins with <HMTL> followed by a <head> tag allowing the author to give a title to the web page and list other pertinent information and finally ends with a </head> tag. The body of the document gives all of the information that is to be printed by a browser interpreting that HTML code and begins with <body>. The whole page ends with a </body> and </HTML>. (Some browsers will not require all of the ending tags. However, in order to be as general as possible, it is a good procedure to include all of the ending tags. The closing paragraph tag may be ignored in almost all situations.)

III. Writing A Sample Web Page

From the Start menu go to Programs/Accessories and run the Notepad editor. Enter the lines listed below.

<HTML>
<head>
<title>First Web Page</title>
</head>
<body>
<h1><center>MY OWN WEB PAGE</center></h1>
This is now the first paragraph of this document. [Enter whatever additional text to this paragraph that you want.]
<p>
Similarly this is the second paragraph. [Add your own thoughts here].
<p>
<hr>
Created and maintained by: [your name] [today's date]
</body>
</HTML>

The words embedded within the <title> tags is the name that will appear at the top of Internet Explorer when it is displaying this page. These words do not appear on the display of the web page itself. Headlines, text and graphics are by default left justified. Using <center> will center all of these until the closing </center> is encountered. The size of the font used in headlines can be adjusted using <h1>, <h2>, etc. The largest font is indicated by <h1>. A horizontal bar (ruler) is put in place with the tag <hr>.

In general, browsers will condense all spaces in front of, between, and following words or numbers into a single space. To tell the browser that a new paragraph should begin, use the <p> tag. This tag will cause the browser to begin a new paragraph and place roughly a half height blank line between paragraphs. If the author of a web page simply wants to indicate the end of a line without the additional vertical space, then a <br> tag should be used to tell the browser to break the line here.

The lines at the bottom of the HTML file beginning with the tag <hr> are important to include on any web page you write. (The <hr> is simply a horizontal rule or line.) Adding the name of the author of the web page and the date it was created or lasted updated provides important documentation.

Save this file using "Save As" from the File menu. Locate your X-drive (or whatever drive you will be saving your web pages in) and the folder in which you wish to save your web pages. Enter the file name you want to save this HTML document under with the extension of .htm, e.g. "MyWebPage.htm" is a valid name. Word 97 also supports an extension of .html; however, earlier versions of Word expected three-letter extensions. Thus .htm extensions allowed for easier editing.

IV. Viewing The Web Page

To view this sample web page, close Notepad and locate your sample web page file using "My Computer." When the file is located, double-click on its icon. Internet Explorer will automatically start up and display your web page. This assumes that your default web browser is Internet Explorer.

To examine and edit (if necessary) the underlying HTML code, from the View menu select "Source." The Notepad editor will automatically start up and show the text source behind that particular web page. Minor (or for that matter major) editing may be done at this point. Then Save the HTML file and Exit the Notepad.

Note: Any changes made to the web page you were viewing will not be visible in Internet Explorer until the "Refresh" button is pressed.

V. Adding A Touch Of Color

This page may look just a bit disappointing, but it is your very own web page. Add a little color by editing the Source code in the Notepad as described above. Replace the opening <body> tag with the following.

The "0" above is a zero. For the artistic minded among us, these color codes are in the RGB form, that is "red-green-blue" with the color intensity indicated on a 256 point scale. The maximum color is "FF" and the least color is "00". The continuum of values would go like this:

00, 01, 02,...,0A,0B,0C,0D,0E,0F,10, 11,...,9E,9F,A0,A1,...,FE,FF

Save this file as before and take a look at the background and text colors. Have fun; do some experimenting.

VI. Getting More Advanced

Any author who wants to learn HTML this way may do so. (I enjoyed learning it this way and still do a lot of my HTML writing this way.) "A Beginner's Guide to HTML" from NCSA is a very useful departure point for this route.

A more "humane" way to write web pages is to use an HTML converter. Word 97 comes with such a converter built in. Word 95 can also do this if the free add-on from Microsoft, Internet Assistant for Word, has been installed. (To check if Internet Assistant has been installed in your Word 95 program, go to the File menu and select "Browse Web." If this option does not show, then Internet Assistant for Word is not installed on your computer. It may be downloaded from Microsoft and installed on your home computer free.)

With the HTML editing capabilities of Word 97 or Word 95 with Internet Assistant, one can easily write a more complicated page including:

hyperlinks to other files or locations
graphic images
table to organize data or text
forms in which viewers can provide information to the author

One can go to Word directly from Internet Explorer and edit the currently visible web page. To try this, open up the HTML document you created above by double clicking on its icon. While viewing this web page in the browser, press the "Edit" button on the toolbar. Word will automatically start up and your web page will be displayed in the HTML edit mode.

Another very helpful feature of Word is its ability to convert regular Word documents into HTML code. Simply open the document (such as a syllabus) in Word and use the "Save As" option from the File menu to save it as an HTML document. Close the document and open up the newly saved .htm form of it. Depending upon the format of the original document some corrections will need to be made to the way that Word has implemented its conversion to HTML.

At Bridgewater College, we have the capability of editing web pages directly on our web server through the w-drive. For minor changes simply open the web page in the w-drive directly in Word and save the file back on itself. However it is good practice to do major editing of a web page not directly on the web server. If necessary, copy the file from the w-drive to your x-drive and edit it from there. This allows the web author to do major restructuring without concern for how the web page is looking, in the interim time, to the rest of the world.

When saving an HTML file in Word 97 to a new location, a dialog box may show up asking about how to handle hyperlinks. This actually occurs only if graphics/pictures are included on the web page. In most cases, the web author should go with the default actions of "copying the graphics to the location of the document" and "updating the associated hyperlinks."

VII. Experience HTML Editing In Word

With your sample web page in Word, experiment using a few of the editing techniques described below to enhance your web page.

Creating headlines of varying font sizes

Move your mouse to the headline at the top of your web page and click one, if the cursor is not already there. Note that the "Style" window on the toolbar displays "Heading 1, H1." Move to the end of your top headline and press Enter. Notice that the "Style" now changes to "Normal" which indicates that Word is ready to construct a normal paragraph at this point.

Select the style "Heading 2, H2" and then center it using the "Center" button on the toolbar. Enter some text and observe the smaller font size compared to the top headline.

Separating sections of text with a horizontal line

A horizontal rule (simply a horizontal line) can be used to divide a web page into sections for easier browsing and separation of topics. To insert a horizontal line at any point, simply select the "Horizontal Rule" button from the toolbar. Give it a try.

Adding a hyperlink to another web site

One of the advantages of using the Internet to store and locate information is the ease of connecting various sources together. A word or group of words that are "clickable" and send the viewer to another web site is called a hyperlink.

Locate a web site you would like to link to (or use Bridgewater's Academic Computing web pages at:

http://www.bridgewater.edu/cescc/acadcomp/

Then position the cursor on your web page in Word at the point at which you want to locate the hyperlink. Select the "Hyperlink" button from the toolbar and insert the necessary address and other information into the dialog box.

In the "Text to Display" window, type the word or words you want highlighted on your web page, e. g. "Academic Computing" for the above example. In the "File or URL" window, enter the address of the site to be linked. Do not enter anything in the "Bookmark" area. Finally, press "OK." The hyperlink will be automatically created in your web page document.

Putting information into a table

Word supports the construction of tables in a web page. Tables provide more formatting capabilities for web page authors. To insert a table into your web page, move the cursor to the place on your web page where the table should be located. From the Table menu, select "Insert Table" and then specify the number of rows and columns needed. Text, hyperlinks or graphics can all be inserted into any of the cells of the resulting table.

For More Experiences

To further explore the use Word as an HTML editor, follow the tutorial entitled "Publishing Course Materials On The Web" available at Bridgewater's Academic Computing web pages. Also, check out the Help menu for in Word. Word is a WYSIWYG web page editor allowing the author to use word-processing techniques to format the page as desired. It will automatically generate the correct HTML code in the background.

VIII. Follow Good Web Authoring Protocol

There are a number of general principles one should follow to make an attractive and readable web page.

Use a background color and text color that contrast well with each other.

The intrinsic color expression by a monitor and the contrast and brightness adjustments set by a user may affect how your page looks to different viewers. Thus background and text colors that are both light or both dark may make for low readability on some computers. Have friends view your pages and give you feedback.

Include only modest-size graphics so that your web page loads in a reasonable period of time.

Here at the college we have a fast Internet connection and so even large graphical images load rapidly. However, a lot of the world (particularly perspective students and their families) will have much slower links. Test the speed of loading your web pages by having someone (yourself?) connect to them via a modem.

Date of creation/modification and author's name should be on each web page.

When publishing articles or papers, educators would never consider not including their name. The publishing date or copyright date is also included. Web pages need to have the same information. If a web page is cited, it is good to know the date of its construction. A particularly good habit is to make the author's name a hyperlink to a web page where the email or regular mailing address of the author is available.

Use only standard HTML code or broadly implemented extensions.

Unless the resulting web pages are only going to be used "in house," the authors of web pages will do well to limit themselves to using the standard components and those extensions most widely implemented. The purpose of writing a web page is to convey information to a broad audience. That goal becomes unreachable if a fraction of the potential audience cannot read a web page due to their not having the "right" browser.

View the finished web page in more than one browser.

To ensure that the visual effect desired on a web page is in fact the result, it is a good habit to view the authored web pages in more than one type of browser. My procedure is to at least use Internet Explorer and Netscape Navigator to look at my new pages. Often I also check how Lynx (a text-only browser) presents the pages. This browser is the one used mainly by the visually handicapped and persons with slow modems.

IX. Let's "Publish It!"

When the web page looks good when viewed using a browser, then it is ready to be "published." This involves transferring all HTML files and graphics files into the appropriate directory on the computer acting as the web server for our college. Since late August 1997, this simply means copying all of the files from your X-drive to the W-drive. Some necessary links may have to be added to your departmental web page. Talk to your department's web "guru" or contact Academic Computing to have these links installed.

X. Enjoy The Journey

One of the best ways to learn how to implement a particular component of HTML is to look at how others have done it. (Note: IT IS UNETHICAL TO USE COPYRIGHTED WORKS WHEREVER THEY ARE FOUND. However, since HTML is a standardized language, we may usually use the general techniques employed in other web pages, at least at our own college's site.)

-- (c) Richard L. Bowman (3-Feb-00)