Making a Web Page

Basic Principles

A Web Page is a document read with a program called a browser. There are several popular browsers, including Netscape and Internet Explorer. The browser reads the information in a file and displays it on a screen. The file must contain both We will begin by examining some Web pages. As you look at these pages, notice the content, the way the content is displayed, and the use of non-text items on the page. The most common non-text items are pictures, but there are other possibilities.

Start with the Villanova Home Page. When you start Netscape on the machines in most Villanova computing sites, the Villanova Home Page will display (if you are in a computing site maintained by one of the academic departments, a different page may display). We will look at the elements of Netscape that will be used to view pages, and the composition of the Villanova Page.

First Netscape:

At the top of the screen is a blue bar with a title in the middle. This is the title of the page that is displayed. The Villanova Page has the title
Villanova University Home Page
Below the title bar is a menu bar. Each word that appears on the menu bar represents a list of choices of actions you might wish to perform. For example, in the menu headed by the word File several entries are of interest: Below the menu bar is a collection of icons. These are shortcuts to options that are usually available through the menu items. For example, the icon that shows a printer is a short way to tell Netscape to print the current document. Other buttons of interest include the following:
(left pointing arrow)
Allows the user to return to the previous page displayed
House shape
Return to the home page -- the page displayed when you start Netscape.
Stop
The red button labeled STOP will terminate the loading of a page. This is useful if you change your mind or if the page loading is taking a very long time and you want to give up.
The next line on the screen has a white box labeled "Location." This box contains the URL (Uniform Resource Locator) that identifies the page you wish to see. When you first start Netscape in this room, the box will contain the following URL:
http://www.villanova.edu/
Other machines may be set to load a different page initially. (If your Location box does not contain this string of characters, you can edit it. Put this string of characters in the box and press the Enter key.)

Finally, the rest of the screen is used to display the page. Notice that there is limited space available. A page that is too long to fit on the screen can still be seen. The scroll bar on the right side of the screen allows you to look at the rest of the page. Some "pages" are very long. In designing your page, be careful to put what you most want seen on the top of the page where it will be noticed without scrolling.

Some Sample Web Pages

The Villanova page consists of a background picture and a number of items suggesting that more information is available. You can see this additional information by clicking on one of the boxes. Try the box labeled Academics. Notice the format of this page. Click on the line College of Liberal Arts and Sciences. Note that the format of this page is similar to the format of the previous page. Villanova University has established a style guide for Web pages. The style guide is recent and some groups who have had pages for a long time do not conform to this style. To see some examples, look at the pages of the Art and Art History Department (uses the style guide) and the Astronomy Department (does not use the style guide). Take a moment to look at other pages. If your department's page is not completed, you might ask why. Now let's make a page.

The HyperText Markup Language (HTML)

HTML is a language for describing a hypertext document. Hypertext documents consist of any combination of text, images, sounds, and links to other documents or components. We begin with the basic outline of an HTML document: 
<HTML>
<HEAD>
<TITLE> Title 
</HEAD>
<BODY>
<H1> Principal Heading < /H1>
Content of the page
</BODY>
</HTML>
After the Principal Heading, which usually repeats the title, any content to the document is described. Each section heading begins and ends with a heading definition:... where x is the level of the heading. H1 is the major heading and is displayed in the largest, boldest type. H2 is somewhat smaller, H3 is still smaller, etc. You do not have to use the heading levels in order; you use them according to the appearance you want. We begin with a very basic web page. While Netscape is still open, use the ALT-TAB combination to switch to the Program Manager. At the Program Manager, open the Main group and double click on MS-DOS. At the prompt, type edit. In the editor, use the file menu to open the file you saved (A:mypage.htm or C:mypage.htm). Use the cursor keys or the mouse to move around the file and change what you see to suit you. (You may use a different editor if you prefer. Be sure that you can save the file as a text file, not Word Perfect or other binary format.)

Type the following lines to make your basic web page: 

<HTML>
<HEAD>
<TITLE> First trial document < /TITLE>
</HEAD>
<BODY>
<H1> Document Title < /H1>

<H2> This is how a level 2 header is displayed < /H2>

<H3> This is how a level 3 header is displayed < /H3>

<H4> This is how a level 4 header is displayed < /H4>

<H5> This is how a level 5 header is displayed < /H5>

<H6> This is how a level 6 header is displayed < /H6>

<P>This is ordinary text as displayed by the browser.  Paragraphs are separated by the
tags P and /P.< /P>

<P> Actually, the ending /P tag can usually be skipped as the new P tag is sufficient to
inform the browser that a new paragraph is beginning.  

If you find your text all running together when you thought you had separate
paragraphs, check for a missing P tag.
</BODY>
</HTML>
Save the file using the name BASIC.Htm

After you type in the lines given, use the ALT-TAB combination to switch back to Netscape. In Netscape, use the File menu to Open File. Give the name of the file you just created. Look at your handiwork as displayed by Netscape. If you need to change your file, use ALT-TAB to return to the DOS editor, make the change, SAVE THE CHANGED FILE, and return to Netscape. In Netscape, be sure to RELOAD the file to see the revisions you just made. You can go back and forth between the editor and Netscape to make changes and see how the changed file looks. Just be sure to save the changes you make and reload the file in Netscape so the changes are read.

Links to other things make the document hyper. A link is defined with an A (for anchor) tag. Its format follows:

<A HREF=location of linked item> text to highlight </A>
The location of linked item is its URL (Uniform Resource Locator). An example is
<h5> http://www.vill.edu/ academic/artsci/arts/modlang.htm</h5>

It consists of three parts:

access method: http://
This tells the method to use to transfer the item into this document. Http is the most common method. The letters stand for the Hyper Text Transport Protocol
what machine: www.vill.edu
This tells on which machine the desired item is stored.
what file: academic/artsci/arts/modlang.htm
This tells where on the specified machine the file is found.
To include an image in your document, you must specify the source (location) of the image. The format is similar to the A tag, but the tag is IMG SRC for image source:
<IMG SRC="http://www.vill.edu/XXXXXXX.gif">
where the XXXXXX must be replaced by the location and name of a file containing an image. A .gif file has an image stored in a format that all browsers can display. There are other formats for storing images. Not all of them are recognized by all browsers.

There is no closing tag for an image source. An image may be included in an A tag, in which case the image will serve as the link to some other item.

For example, the following tag would display the ACM student chapter scrapbook banner as a gif. Clinking on the image of the seal would cause the scrapbook page to be displayed.

<A HREF="http://www.cscvill.edu/~acm/scrapbook.html"> <IMG SRC= "http://www.csc.vill.edu/~acm/gifs/banners/scrapbook.gif"> </A>

Go back to the DOS editor and make a new file. In the file put a brief description of your hometown or a hobby or something of interest to you. Be sure to use the basic HTML format for this file. Don't make it long now, just a few lines will do. Now go back to your original file and make a link to the new file. Use the A tag and HREF entry. Use Netscape to view your page.

Tables

 A table is introduced by the tag <TABLE> and closed by the tag </TABLE>. A table row is introduced by the tag <TR> and closed by the tag </TR>. Within a table row, there are table headings (<TH>...</TH>) and table column entry definitions (<TD>...</TD>). A simple table definition looks like this: 
<TABLE BORDER=1 CELLPADDING=5>
<TR>
<TH> Column 1 heading </TH>
<TH> Column 2 heading </TH>
<TH> Column 3 heading </TH>
</TR>
<TR>
<TD> Column 1 entry </TD>
<TD> Column 2 entry </TD>
<TD> Column 3 entry </TD>
</TR>
<TR>
<TD> Column 1 entry </TD>
<TD> Column 2 entry </TD>
<TD> Column 3 entry </TD>
</TR>
<TR>
<TD> Column 1 entry </TD>
<TD> Column 2 entry </TD>
<TD> Column 3 entry </TD>
</TR>
<TR>
<TD> Column 1 entry </TD>
<TD> Column 2 entry </TD>
<TD> Column 3 entry </TD>
</TR>
</TABLE>
Most of the HTML elements that we have seen have optional parts. For example, the 
<TABLE>
tag is shown with optional entries BORDER, and CELL PADDING. The best way to learn to use them is to understand the basics, then look at a page you like and examine its source. You can even copy the source and modify it to suit your needs.

. ***** NOTE:  Some page designs are copyrighted.  DO NOT COPY ANY COPYRIGHTED PAGE.  *******
It is ok to look at pages and get a general idea of what you like and what you don't like, but using an existing page as a template for your own is not OK if the page is copyrighted.

Be sure to include a signature to your page. This allows people who see your page to know who created it, how to reach you, and when the page was last updated. Here is a sample signature section for a web page: 

<ADDRESS>
Lillian N. (Boots) Cassel>
Department of Computing Sciences>
Villanova University>
Villanova, PA  19085-1699>
+1 610 519 7341<br>
<a href="mailto:cassel@acm.org">Mail contact </a> <br>
18 January 2000
</ADDRESS>
This has been a brief introduction to web pages and HTML; I hope it has been useful.
Feel free to contact me, preferably by e-mail, if you would like some additional help with this subject.
Lillian N. (Boots) Cassel

Department of Computing Sciences
Villanova University
Villanova, PA 19085-1699
+1 610 519 7341

cassel@acm.org
18 January 2000