Basic Tips for Constructing a Simple Web Page

(Tim Hagle - Political Science)

[divider bar]

The primary purpose of this page is to offer you, the folks in my Department, a few tips to aid you in constructing your own web pages. As such, some of the material will be specific to the Department of Political Science and the University of Iowa. (Still, I hope that others just starting out might find something of interest as well.)

I indicate that my tips will be "basic" for several reasons, not the least of which is that I am far from an expert on web page construction. It may seem a bit presumptuous for a nonexpert to be offering a page on web tips, but my goal is only to get you over some of the initial bumps and rough spots I experienced in starting up and maintaining a set of web pages.

Everyone in our Department uses one version or another of Netscape on PCs. My experience with other browsers is fairly limited. As such, although one of the topics below makes a few comments about other browsers, all my references will assume access to or a familiarity with Netscape. As I have no experience on Macs, all my comments will assume a Windows environment. (My apologies if you are using a Mac or a browser other than Netscape.)

[divider bar]


Topics

  1. Some Acronyms and Terms
  2. Resources for Learning How to Build a Web Page
  3. How Much HTML Do You Need to Know?
  4. Basic Web Page Structure
  5. Attributes for the Body Tag
  6. Basic Formatting Tags and Elements
  7. Headers and Type Size
  8. Lists
  9. Links
  10. Images
  11. Style and Composition
  12. Working With Other Browsers
  13. Testing and Production
  14. Additions and Corrections

[divider bar]


Some Acronyms and Terms

There are several acronyms that are frequently used on the web. Knowing what the acronyms stand for is less important than knowing what they do (and that may not be all that important). Actually, being able to use some of these acronyms may allow you to do one of two things: 1) keep people from trying to intimidate you because you are a "newbie" (see below), or 2) allow you to intimidate newbies. Either way, here is a short list of acronyms you are likely to run across. (Note: the acronyms and terms are not in alphabetical order, but rather in a loose what-you-need-to-know-if-you-are-just-starting-out order.)

WWW
World Wide Web. If you are reading this, you've found it and that's all that matters.
HTML
HyperText Markup Language. The essential idea behind hypertext is that related topics and locations are "linked" to the document you are reading. Words, phrases, or graphics so linked are generally displayed in a different color (and the color usually changes after you have accessed the link). Clicking on these linked items will take you to another section of the document, another document, or even a completely different web site. (Some books use the term "hypermedia" because the links and such can be to sounds and graphics as well as text.) HTML is basically the name of the particular set of commands that tell "browsers" how to display the contents of a "page" (which usually contains hypertext links).
HTTP
HyperText Transfer Protocol. This is the language that clients and servers use to send and receive hypertext documents. You may have noticed that Netscape displays the location of the page you are viewing. This location generally begins with the letters "http." (There are some exceptions. For example, if you open a file on a hard or network drive the location will begin with "file" rather than "http." Addititional exceptions are shown in the Links topic.)
URL
Uniform Resource Locator. This is the address that tells a browser where a particular document is located (so you need not be offended when someone asks for your URL). For example, the URL for the Department of Political Science is www.uiowa.edu/~polisci. Directing your browser to go to this location will cause it to attempt to connect to the web server at the University of Iowa and to look in the ~polisci directory. Because you did not specify a particular document in the directory, by default it looks for a file called index.html (or index.htm on some systems). As another example, the URL for this page is the somewhat longer and more specific www.uiowa.edu/~polisci/hagle/webtips.htm.
CGI
Common Gateway Interface. This is the specification for how HTTP servers communicate with gateway programs. It is basically a way to run certain types of programs from a web site. Common examples involve counters and the use of forms for submitting information.
GIF and JPEG (or JPG), AVI and MPEG (or MPG), AU and WAV
Although most of these actually stand for something (e.g., GIF = Graphics Interchange Format), unless you are an expert you probably do not care. What is important is to recognize these as common extensions for different types of files. GIFs and JPGs are image files that are automatically displayed by Netscape (unless you have a slow computer or connection and do not automatically load images). AVIs and MPGs are video files that you may have installed a helper application to handle. AUs and WAVs are audio files that may also need a helper application to hear. Other file types exist, but these are the most common.
WYSIWYG
What You See Is What You Get. This acronym is not specific to HTML and the Web.  Early on, word processors could only represent special formatting by using a variety of colors and symbols.  For example, bold-faced text might be one color and text in italics might be another, both different from the default color, and so on.  Word processor became more popular and much easier to use when what you saw on the screen was what you got when you printed the page.  In the context of the Web, WYSIWYG is still in its early stages.  Although web page editors now exist that have this capability, there are still sufficient differences between browsers such that what you see in one browser is not necessarily what you will get in another (WYSIOBINNWYWGIA?).
FAQ
Frequently Asked Questions. Newsgroups, in particular, are known for having FAQs that provide basic information about the group. Aside from providing this basic information, it is intended to keep regulars from having to answer the same question from every newbie that happens along. Unfortunately, it doesn't work all that well as newbies are often so new that they don't even know to look for a FAQ. Depending on the nature of the web site you are visiting, you may find FAQs or something similar that answers basic questions. For example, my Prelaw FAQ provides information for my advisees.
VRML
Virtual Reality Modeling Language. VRML is used for disigning and using three-dimensional, multi-person, distributed interactive simuilations.

Now on to brief descriptions of some basic terms.

Newbie
Someone new to the web, internet, etc. Often, but not always, used in a negative way (sometimes deservedly so).
Links
These are the hypertext links between documents. For example, were I to have occasion to mention that I am an alumnus of Michigan State University, it would be appropriate to include a link to MSU's web site. You can go to MSU's web site by clicking on the highlighted text and return to this page by clicking "Back" on the Netscape tool bar. When you return, notice that the color of the highlighted text has changed to indicate that you have visited this site recently. (How recently depends on the time specified in the Appearance section of your General Preferences before your Followed (or "visited") Links "expire." I believe the default is 30 days. The color change does not prevent you from going to the site again, but does help to prevent you from getting into a loop if you are searching for some particular bit of information. (It's a "been there, done that" kind of thing.) You should also see that the color changes for any other links to the same address even if you see the link on a different page or if the highlighted text is different. For example, if you clicked on the highlighted "Michigan State University" above then this additional link to the Spartans will also have changed color (but feel free to take another look: Go Green! Go White!). Both the Links and Style and Composition topics below will have examples and suggestions on links and link ettiquette.
Web Page
A web "page" is simply the contents of one HTML file or document. A web page can actually contain several or dozens of pages of printed matter. Netscape 2.0x has a Print Preview feature that allows you to see how many printed pages will be required for a particular web page. If you do not want to print the entire web page, you can either select a range or save the web page as a file and edit out the material you do not want.
Browsers
A web browser is simply the software you use to view HTML documents. There are several browsers available. Most will easily handle basic commands. Some will have additional capabilities that others do not. (More on this appears in a later topics, including the one on Working With Other Browsers.) Some of the most common browsers are Netscape, Mosaic, and Microsoft Explorer. There is also a text-based browser called Lynx.
Helper Applications, Plug-Ins, and Add-Ons
On its own Netscape is equipped to handle a variety of file types. It can, for example, recognize and properly display an image file in GIF format. For some file types Netscape uses a "helper application." By installing a helper application, Netscape will know to open a particular application when you click on a file type associated with that application. For example, to view a QuickTime video in a file with the extension .mov, you will need to have installed QuickTime for Windows (or another application that can handle .mov files) and set your preferences in Netscape to start that program when you click on such a file. If no application is associated with a file type, Netscape will "ask user" what to do with the file. The main choices are to install a helper application, save the file to disk, and cancel. (Click on Options|General Preferences|Helpers to see what helper applications you have installed.) Plug-ins, according to one book, are new to Netscape 2.0 and are designed to expand Netscape's multimedia capabilities by allowing you to, for example, hear an audio file without having to launch a helper application. Add-ons primarily refer to software that is "added on" to an existing program (usually a word processor) to aid in web page construction.
Bookmarks
Netscape and (I assume) other browsers allow you to keep a list of your frequently visited or favorite web sites. By keeping such a list you do not have to type in the address (URL) each time you want to go there. In Netscape, when you want to "bookmark" your current site you just click on Bookmarks|Add Bookmark. This puts your newest entry at the bottom of your bookmarks list. Clicking on Bookmarks also calls up your current list of bookmarks. If you have many bookmarks, they may not all be visible on this list and you will need to click on More Bookmarks at the bottom of the visible list to see the rest. Clicking on More Bookmarks opens a separate window for the bookmarks. From this window you can rearrange or otherwise edit your bookmarks.
Java and Perl
It is unlikely that beginners will need to know much about either Java or Perl, but you will undoubtedly hear the names. Perl is a computer language used to write CGI scripts (programs). Unless you are planning to write or adapt CGI scripts for your own use, you probably do not need to worry about Perl. Java is also a computer language. It is a new programming language and has generated much excitement because it supports many useful features. Some browsers and computer setups may not be able to handle Java scripts or "applets" (small applications). Unlike CGI scripts that run programs on the web server, Java applets are designed to download and run on your computer. Safeguards built into the applets are intended to ensure that they do not harm your computer. Netscape 2.0 issues a warning when you enter a web site that uses Java scripts. I also have my security preferences set to give me a warning when I'm about to transmit unsecured information (which quickly becomes annoying if I am moving between various pages containing Java scripts). Netscape 2.0 can be set to disable Java scripts and security warnings by opening Options|Security Preferences and clicking on the Disable JavaScript and security boxes.

[divider bar]


Resources for Learning How to Build a Web Page

Aside from the tips I offer here, there are five basic sources of information that you can draw upon to learn the basics of building a web page:

Books
There are books available for every level of user. I purchased three books pitched at various levels and found each useful for different topics. Some of the more expensive books come with a CD-ROM that contains various helper apps, plug-ins, and web page builders/converters.
Web Clinics
The University of Iowa offers web clinics to instruct users on various aspects of building and maintaining web pages. Some of these clinics are aimed at beginners, while others are for a more specialized audience (e.g., those interested in graphics). The clinics are conducted at the Information Arcade in the Main Library. The clinics usually use Macintosh computers, but my understanding is that some PCs are available. The clinics also attempt to expose users to more than one browser, mainly so you can see how a page looks with each . The web clinic schedule is usually available in advance, but you might want to call the Information Arcade to make a reservation or to check on the availability at a particular clinic (335-6465).
Informational Web Sites
There are several web sites that offer different levels and types of assistance in constructing web pages. Your best bet might be to use one of the search engines such as Yahoo to find these sites. The University has a page containing Information for University of Iowa Web Content Providers. This page contains links to other pages with basic web page information. In addition, I found the following pages to be useful:
Examining Existing Web Pages
Once I learned some of the very basics of web construction, I probably learned more from examining the source code for other people's pages than from other all the other resources. As you visit other sites, if you find something interesting, click on View|Document Source (in Netscape 2.0) to see how it was done. The Document Source information is easier to read in Netscape 2.0 than in the earlier versions, but you still need to have some idea of what you are looking for. My strategy was (and is) to look for a particular phrase of text that I know is near the item I found interesting. As useful as I found this approach, I must admit that it might not be for everyone, particularly those who want to learn a minimum of HTML.
Ask Other Folks
In addition to (or in lieu of) the above, you can just ask someone how to do something. If you see something interesting on someone else's page and cannot get it to work for yours, send them an e-mail asking them about it. My guess is that individuals (as opposed to large commercial sites) are likely to be willing to help. Finally, there are lots of newsgroups and one or more ought to be the right place to ask a particular question.

[divider bar]


How Much HTML Do You Need to Know?

Naturally, that depends on what you want to do, but various programs and add-ons that aid in web page construction (or conversion from existing documents) may eventually mean that you need to know very little HTML. Even so, my belief is that someone building a web page ought to know the basics so that if something does not work correctly, he or she is not completely lost. I see this as being somewhat akin to dealing with your car. Unlike the days of the Model T, everyone no longer has to be a mechanic, but everyone using a car ought to know how to do a few simple things like changing a tire. In the case of HTML, this means knowing the basic structure of a web page and enough of the most common "tags" and "elements" to allow you to create an HTML document.

One person suggested to me that I am unlikely to convince many people that they should know much, if any, HTML.   He suggested that word processors did not become popular until they developed WYSIWYG capabilities.  I think he was correct, but I'm not really looking to convert anyone.  Even more WYSIWYG HTML editors are available now than when I first wrote these tips.  The two that I use, AOL's AOLpress (formerly GNNpress) and Microsoft's Internet Assistant for Word, both have some level of WYSIWYG capability, but neither completely matches how the page will look under Netscape.  AOLpress comes very close because it is a browser as well as an editor, but it has several quirks to it that require that I double-check pages under Netscape.  The main strength of IA for Word is that it fairly painlessly converts existing Word documents to HTML documents.  With both programs I still need to know enough HTML to tweak the code to get the page to appear the way I want.  I am sure, however, that as HTML editors become more sophisticated, the amount of HTML that one needs to know is likely to diminish.

[divider bar]


Basic Web Page Structure

As I indicated in the first topic, HTML is essentially a set of commands that a browser converts for viewing as a web page. HTML documents will have the extension .html or .htm. If you create your web page with Windows 3.x you should give it the .htm extension. The files can keep this extension when moved up to the university's web server, except for your index file (basically your "home page") which must be named index.html. (Actually, you can name the file for your home page something other than index--though it must have the .html or .htm extension. If a URL just points to a directory on a server, Netscape automatically looks for the file index.html. You can, however, simply specify the name of any other file in the URL. For more on this see the Links topic below.) In Windows 95 (or UNIX-based systems) you can create your document with the .html extension.

HTML commands are in ASCII (text) format and when you save your HTML document you must do so as a text file. (If you save your HTML document as, for example, a Word for Windows file, Netscape will not know how to interpret Word's control characters and they are likely to appear as gibberish on the screen.) Because of the text format, HTML documents are much like very early word processors that required you to enter some key combination to, for example, turn boldfacing on and off. You could see the special characters created by the key combination, but not the action that would be produced upon printing. Of course, word processing eventually developed WYSIWYG (What You See Is What You Get) viewing and some HTML creation programs and add-ons have this feature.

The specific HTML commands are usually referred to as tags. HTML tags are enclosed in less-than "<" and greater-than ">" symbols. Combinations of tags form elements, and some elements take attributes. The most basic tags are the ones that begin and end an HTML document. These are:

<HTML> and </HTML>

Your browser will recognize the beginning tag, <HTML>, and interpret it to mean that it is the start of your HTML document. Similarly, the end tag, </HTML>, indicates the end of your document. Notice the forward slash in the end tag. Many HTML tags come in pairs where the first turns on or begins some attribute or formatting and the second with the forward slash ends it. For example, I centered the above line by beginning the line with the tag to begin centering, <center>, and ended it with the tag to end centering, </center>. The combination of these start and end tags, along with what comes between them, is considered an element. Thus, the HTML element consists of your entire document. The centered element above consists of the start and end centering tags plus the (centered) text between them.

Notice that I used lower case to show the centering tags. HTML tags are not case sensitive. This means that Netscape will interpret <center>, <CENTER>, and even <CeNTeR> as the same thing. There are, however, some attributes where you will enter text as a value that will be case sensitive. One book I have recommends that you use caps for HTML tags to make them stand out more. I prefer lower case so I do not have to switch back and forth between tags and text. The choice is pretty much a matter of what works for you.

After the HTML element, you should include a head element (<head> and </head>). The head element contains information about the HTML document. Although some web authors put some comments in the head element, it usually just contains the title element. (One additional element put in the heal element has to do with creating dynamic documents and the use of the <meta http-equiv > element. Discussion of this element is beyond the scope of these web tips, but you can see it in action at the CNN web site.)

The title element uses the tags <title> and </title>. As the name suggests, the title element gives a title to your document. In Netscape, this title appears in the box at the very top of your screen. The title you give your document will need to be short to fit in this space and it should also be descriptive. If someone bookmarks your page, the title will appear on the person's bookmark list.

After the head element comes the body element. The body element begins with the <body> tag and ends with the </body> tag. Like the body of a letter, this is the section of your HTML document that contains the information you want to present on that page. Like the HTML element, the body element will contain many other tags and elements. (Note: The head and body tags are sometimes called section tags to distinguish them from formatting tags.)

With the HTML, head, title, and body elements, a very simple HTML document will have this structure:

<html>
<head>
<title>
The document title goes here.
</title>
</head>
<body>
The contents of the document go here.
</body>
</html>

[divider bar]


Attributes for the Body Tag

If you use the <body> tag without attributes, Netscape will use the default colors of white for the background, black for the text, blue for links, red for active links, and purple for visited links. You can, however, specify different colors or use an image for your background.

To see some of the many choices, your best bet is to visit the sites listed in the Resources section above. Nevertheless, here are descriptions of the attributes and a few examples.

Background
The background attribute, background=, loads a specified image and "tiles" it (copies it as many times across the page horizontally and vertically as is necessary to fill the page, just as Windows tiles small images for use as wallpaper). For example, if your system has sufficient graphics capabilities, you will see that the background for the Political Science home page is basically white with little blue dots to give it texture. If you check the source code for the document, you will see that the beginning body tag is <body background="images/backmain.gif">. This tag tells Netscape to use the image backmain.gif located in the images directory for the background, but the lack of other attributes indicates that the default colors are to be used for everything else. The actual backmain.gif image is relatively small, but when used as a background Netscape tiles it to fill the screen.

For a variety of reasons, many web pages use background images rather than a simple background color. One must be careful, however, to ensure that the selected style and color of text is readable against the background image. I have encountered more than a few web pages that use wonderful background images against which the chosen text is almost unreadable.

Background Color
One can avoid some readability problems by just using a simple background color for the document. (Using a background color rather than an image also means that it takes less time for the page to load.) Selecting a background color is done via the bgcolor= attribute. The values used for the attribute are six digit hexadecimal RGB color codes, which are preceded by the number sign (#).  ("Hexadecimal" means base 16, rather than the usual base 10 we use for counting.  Hexadecimal uses the digits 0 through 9 and the letters A through F.)  For example, if you check the source code for this document you will see that the beginning body tag is <body bgcolor=#00ff00>. The RGB code #00ff00 indicates that the background color is to be green. (The values for red and blue are zero and the value for green is ff, which in base 10 equals 255, the maximum value.) Netscape 2.0 uses white as the default background color but earlier versions and some other browsers do not. You can guarantee a white background for your page by including the RGB code for white, bgcolor=#ffffff, in the body tag. (Note: As discussed in the Images topic below, some readers do not automatically load images, including background images. The author of one book I have suggests that if you specify a background image, that you also specify a background color that is close to the color of the background image. This will help your page to have the look you want even if the background image is not loaded.) Again, the Background Colors page from InfiNet provides examples for many combinations of text and background color combinations, so I will only present one example of an alternate color scheme.
Text
Just as you can change the color of the background, you can also change the color of the text with the text= attribute. Like the bgcolor= attribute, the values for the text= attribute are the six-digit RGB color code preceded by the number sign (#). Here is one example of a different text color.
Link Colors
Three attributes specifiy different types of links. The basic link attribute, link=, is used for links that you have not yet accessed (visited, or followed). The visited link attribute, vlink=, indicates those links that you have accessed . Netscape allows you to set an expiration period for visited links. If it is set for 30 days, then a visited link will remain the vlink= color (specified or default) for that time and then return to the link= color. The active link attribute, alink=, indicates if a link is active. As far as I can tell, this means the link will change to the alink= color in the brief time between when you click on it and when the current page is replaced by the destination page on the screen. If you have a fast computer, this does not take long. One way to view the active link color is to click and hold on a particular link. Until you release the mouse button it will be the active link color.

One final comment on links. If the anchors for a link are correctly positioned (i.e., the syntax is correct), the link will have the appropriate color. This does not, however, necessarily mean that when you click on the link that it will work. Netscape (or any other browser) will not automatically know whether the URL in the beginning anchor tag is correct or even exists. Thus, it may appear that your links are correct if they are the correct color, but you still need to check them (and on a regular basis for links to other people's pages).

[divider bar]


Basic Formatting Tags and Elements

Several simple formatting commands come in pairs like the head and body elements. Others only require a single tag. The list below shows several tags used in formatting an HTML document.

Centering -- <center>, </center>

The centering tags will center text. This can be one or several lines of text. Although it may look a bit strange, I have centered this paragraph to demonstrate how centering works with several lines. Centering is often used for headers (see below) and images.

Boldfacing -- <b>, </b>
These tags will make text stand out by making it appear thicker and darker. It can be used with words, phrases, paragraphs, or even the entire document. (Note: The <strong> and </strong> tags can also be used to "strengthen" text. The difference is that the bold tags are "physical" tags and the strong tags are "logical" tags. In practical terms, there is likely to be more variation in how different browsers interpret logical tags, particularly the strong tags. I use the physical tags primarily because they are faster to type.)
Italics -- <i>, </i>
These tags will italicize text between them. (Note: The logical tags that perform essentially the same function are <em> and </em>. My understanding is that there is less variation in how other browsers interpret the "emphasis" tags than with the strong tags.)
Typewriter Font (fixed-width) --<tt>, </tt>
If for some reason you need to present text in a fixed width format (nostalgia?), you may do so using the typewriter font.
Blinking text -- <blink>, </blink>
You can make text blink by placing the blink tags around it. Many find blinking text annoying, so I suggest you use it sparingly, if at all.
Predefined Text--<pre>, </pre>
Netscape normally ignores how text is placed in your .htm file. Extra spaces, lines, carrage returns, and tabs are all ignored. You can, of course, use the various HTML tags to format a document, but there may be times when you just want to present information with simple formatting as you entered it in the text file. The <pre> and </pre> tags allow you to do so. For example, the basic elements of an HTML document shown in the Basic Web Page Structure topic might be easier to read if they were in outline form using the predefined text tags: 

<HTML> 
     <head> 
          <title> 
          The document title goes here.
          </title> 
     </head> 
     <body> 
     The contents of the document go here.
     </body> 
</HTML>

Notice that even within predefined text I can use other HTML tags such as boldfacing.

In addition to the above, there are a few more types of logical text formatting. I have created a page of examples of the various types of text formatting that seem to work properly in Netscape 2.0.

Unlike the above formatting tags that came in pairs, the next three formatting methods only require a single tag.

Line Break--<br>
As noted above, Netscape normally ignores the formatting of text in the HTML file. Thus, if the following words all appeared on separate lines in the file like this

First
Second
Third
Fourth

without line breaks Netscape would put them all on the same line like this

First Second Third Fourth

It is probably a good idea to format your text file to make it easily readable when you are working on it in your word processor, but if you so desired you could just type all the text and tags in one continuous bunch and let Netscape sort it out. For example, I could save three lines by entering

First<br>Second<br>Third<br>Fourth

in my file and let Netscape interpret it as

First
Second
Third
Fourth

Paragraph--<p>
Netscape presents text in a block paragraph style--the first line is not indented and a line is skipped between paragraphs. When you enter a paragraph tag in text, regardless of how the text is formatted in the ASCII file, Netscape will end that paragraph and skip a line before presenting the next material. For example, if I had the line

First<p>Second<p>Third<p>Fourth

in my file, Netscape would present it as

First

Second

Third

Fourth

Horizontal Rule--<hr>
If you have a long document (like this one!), it may make it easier to read if you use some type of separator between sections. In this document I have used a multicolor bar that is really just an image file. A simpler method is to use a horizontal rule like this

One advantage of the horizontal rule is that it does not require the loading of additional images. If you anticipate that many of your readers will have slow computers or connections, or have limited graphics capabilities (in which case my multicolored bar may just appear as the text "divider bar"), you may want to just use a horizontal rule.

Comments
Although not really a formatting tag, you can enter comments in your HTML document that browsers will ignore, but will allow you to make your text file more readable. (Basically the same idea as using REM in your autoexec.bat and config.sys files.) The comment tag is a single tag, but it must begin with <!-- (less-than sign, exclamation point, and two hyphens) and end with --> (two hyphens and the greater-than sign). Between these two parts you can put your comment. For example, if you check the source code for this document you will see that I have placed comments such as <!--=====END TOPIC=====--> in the text to help me determine where topics begin and end. (Note: One source says that some browsers have difficulty with multi-line comments, so it is best to limit them to one line, which just means using the comment tag for each line with long comments.)

[divider bar]


Headers and Type Size

Headers
Netscape supports six sizes of headers. Header elements require beginning and ending tags. All six of the header tags are of the form <hx> and </hx> where x is a number from 1 to 6. For example, to create the header for this topic I entered the line

<h3>Headers and Type Size</h3>

Notice that the header is in boldface and there is a space between it and the following text (which just happens to be the name of the first item in a descriptive list). The page of character formatting examples also contains examples of the six header sizes.

Type Size
A relatively new element to Netscape is the font size tag, <font size=x>, where x is a number between 1 and 7 (3 is the default). With this tag you can change the size of text relative to the "normal" text. For example, you could make the word "mountain" look a bit like a mountain by changing font sizes like this

mountain

Each size change required a separate tag and after the last letter I added a tag to return to the default size.

A second tag that can be used to adjust font size is the basefont size tag, <basefont size=x>, where x is a number between 1 and 7. If you set the basefont size at, for example, 4, you may then use the font size tag to change the size of the text relative to the basefont size by adding a plus (+) or minus (-) in front of the number in the font size tag. For example,

I have set the basefont size equal to 4 by using the tag <basefont size=4>. Notice that by itself this tag has not changed the size of the text.

For this line I used the tag <font size=-2> to reduce the font size by two relative to the basefont size of 4.

I have now used the tag <basefont size=3> to return to the default basefont size of 3, but, again, the size of the text does not change by just using the basefont tag.

To return to the normal size text for this page I used the tag <font size=+0>. (Minus zero (-0) also worked, the key being the plus or minus to indicate the change is relative to the basefont.)

The advantage of using the basefont and font size tags together is that if you make all your font size changes relative you can change them all at once and maintain the relative differences by changing the basefont size. (A caution for Microsoft Explorer users: Although this section of text is back to the normal size 3, for some reason the next section on Lists appeared as size 2 in MS Explorer until I added the tag <font size=3> at the end of this section.)

[divider bar]


Lists

Lists are a good way to organize information on a web page and I have made extensive use of them here. There are three basic types of lists that you can use: descriptive (or definition), unordered, and ordered (or numbered). Each list uses from two to four types of tags. One set begins and ends the list, another set begins and ends a header for the list, and the third type indicates the start and end of each list item. The descriptive list also uses a fourth type of tag. I have made an examples page for the various types of lists.

This is the header line for my descriptive list of list types.
Descriptive list
The first tags that begin and end a descriptive list are <dl> and </dl>. After beginning the descriptive list you can add a header for the list with the tags <lh> and </lh. The tags <dt> and </dt> begin and end the name of the item being described or defined. Finally, the tags <dd> and </dd> begin and end the description.

I can add paragraph breaks within a description (as I just did) and the new paragraph will maintain the margins for the current item. (I also added a paragraph break between the list header and the first item name, added a paragraph break after each description, and added boldfacing to the header and list items to make the list more readable.)

I should note that it does not appear that the </dt> and </dd> tags are necessary to end the item name and description. One book I have shows their use but two others do not. The end of the item name should be implied by the start of a list item and the end of one list item should be implied by the start of another or the end of the list.

Unordered Lists
Unordered lists begin and end with the tags <ul> and </ul>. Like descriptive lists, unordered lists may also contain a list header by using the <lh> and </lh> tags. Each item of the list is indicated by the <li> tag. In unordered lists, each list item is preceded by a bullet. When unordered lists are "nested" (lists within lists) the shape of the bullet changes-and this change occurs even if the first level of list is something other than an unordered list. (Note: I have discovered that how the bullets appear in Netscape is not necessarily how they will print on our departmental laser printer. Although I know our printer can print the small black circles of the first level bullets, when I printed the list examples page they appeared as small open squares, as did the second level bullets.)

The books I have also mention two other types of lists that appear to be related to the unordered list, the directory list and the menu list. As presented in these books, the main difference between the menu list and the unordered list is that the menu list does not have bullets preceding each list item. The differences between the directory list and the unordered list are less clear. In one book they appear to be the same and in another they are quite different. On my system, using Netscape 2.0, they all appear to be the same. I have included examples of the menu and directory lists on the examples page in case other browsers treat these lists differently (as Microsoft Explorer does). (If your browser treats them differently, you may still not want to use them unless you are relatively certain most visitors to your page will be using the browser you use.)

One final item to mention about unordered lists: I recently discovered that with Netscape 2.0 (this does not work with Microsoft Explorer) you can create an unordered list (of sorts) just by using the <li> tags (i.e., without the <ul> and </ul> tags). If you do not use the unordered list tags, the bulleted items are not indented. If a particular item is quite long, the text is also not indented on the second and following lines (i.e., the bullet is not treated as a hanging line or outdent as it is when using the unordered list tags). To end the last list item you must either use a line break (<br>) or paragraph tag (<p>) on the last item. There is an example of this on the list examples page.

Ordered Lists
Ordered lists (sometimes called numbered lists for obvious reasons) begin and end with the <ol> and </ol> tags. Like the other two types of lists, ordered lists may contain a list header by using the <lh> and </lh> tags. Like unordered lists, the start of each list item is indicated by the <li> tag.

The obvious difference from an unordered list is that each list item is preceded by a number rather than a bullet, as can be seen in the Topics list at the beginning of this page or on the list examples page. Although numbers are the default, in Netscape you can use upper or lowercase Roman numerals (I, II, III, etc., or i, ii, iii, etc.) or upper or lowercase letters by using the type= feature. (See the examples page for specifics.)

Changing the type in ordered lists is particularly useful when nesting such lists. As the default type does not change with nested lists, changing the type on the nested list will make the overall list easier to follow.

[divider bar]


Links

Links are what really make the Web a web, which is to say, a place where you can follow topics from one linked site to another. In general, in constructing your web page you should include links to related topics and sites whenever possible. Of course, this means that you may need to spend some time using Yahoo or some other search tool to find the links you need (or at least their correct URLs). (Ahem, I hope you noticed that I practiced what I'm preaching and added a link to Yahoo when I mentioned it. Of course, there was no need to add a second link the second time I mentioned it in the same paragraph.)

Link Anchors
Links are created by using the anchor tags, <a> and </a>. The beginning anchor tag also requires either the href= or name= attributes. (Both are demonstrated below.) Whatever is between the anchor tags is highlighted in some way, the most common being text that is underlined and a different color (and the color normally changes when the reader has previously visited the site to which a link points).

Things to Which You Can Link
Perhaps the most common type of link is to another web page. You can also link to specific items such as text, images, sound, and video, which may or may not be part of your current page. In addition, you can link to other types of resources. Here are some examples:
Web Page
<a href="http://www.uiowa.edu">The University of Iowa</a>: This creates a link to the University of Iowa home page. For links to other pages, the href= attribute will be followed by the URL for that page (and it must be in quotes!).
Files
<a href="file:///c:/images/picture.gif">picture.gif</a>:: If you had a directory on your hard drive called "images" and a file in it called "picture.gif," this is how you could create a link to it. (Although the link is highlighted, that just means I properly contstructed the link. Whether the destination actually exists is another matter that I will return to later.) You could also create links to files on network drives, which might be useful for course materials contained in a course account to which students have access. (They would, of course, need to be logged into the course account before attempting to access the materials with the link.) Note that three forward slashes follow file: in the attribute of the beginning anchor tag. At least one book I have shows only two, but Netscape (at least) requires three for the link to work.
Multimedia
<a href="images/oldcapd.gif">oldcapd.gif</a>: This link is just to a picture, but you can also provide links to sound (e.g., .au, .wav) and video (e.g., .avi) files.
E-Mail
<a href="mailto:polisci@uiowa.edu">Political Science</a>: This link allows you to send an e-mail message to someone (for this example the Political Science Department). Web page etiquette requires that you include a contact e-mail address at the bottom of your pages (or at least somewhere on your home page).
FTP
<a href="ftp://ftp.microsoft.com">download something from Microsoft</a>: This link takes you to an FTP server, in this case Microsoft's. Note: If a server does not allow anonymous FTP access one book I have indicates that you can still provide access by including a userid and password in the link such as:

<a href="ftp://userid:password@ftp.someserver.com">log into an FTP server</a>

I was unable to get this to work, which is probably just as well as this is a very unsecure way to allow someone to download a file.

Gopher
<a href="gopher://gopher.msu.edu">Michigan State's gopher server </a>: This link takes you to a gopher server, in this case Michigan State University's.
Newsgroup
<a href="news:alt.fan.monty-python">Monty Python newsgroup </a>: This link takes you to a newgroup, in this case the Monty Python newsgroup where one can discuss the merits of huge tracts of land (nudge, nudge), the payload capacity of swallows, and what the Witch said. (Note: This link will generate an error message if the reader's server does not carry the particular newsgroup indicated in the link.)
Telnet
<a href="telnet://blue.weeg.uiowa.edu">telenet to U Iowa</a>: This link allow you to telnet to another server, in this case the University of Iowa where you (i.e., those with accounts on this server) can login.

Links to Other Sites
As demonstrated above, a link to another web page consists of the start anchor tag, the highlighted text, and the end anchor tag. Again, to create a link to the home page for the University of Iowa one would place the start anchor tag before the phrase to be highlighted ("University of Iowa") and the end anchor tag after the phrase like this:

<a href="http://www.uiowa.edu">University of Iowa</a>

I did not specify a particular page in the above link. By default, browsers look for a file named index.html (index.htm on some servers). You can link to another page by including its name in the anchor. For example, here is a link to the <a href="http://www.uiowa.edu/~polisci/faculty.htm">Political Science Faculty</a> page in the Political Science area of the University of Iowa web server. (Keep in mind that the anchor tags are not normally visible. I include them here just to show what they will look like in your text file.)

Links to Other Pages at Your Site
Before continuing I need to explain what I mean by "site." Loosely speaking, a "web site" is any collection of related pages. How unrelated they need to be before they are considered a different site is not clear. Arguably, the University of Iowa, the Department of Political Science, and I all have separate web sites. On the other hand, my pages are really part of the Political Science web site in that if one has access to the portion of the server with the Political Science files, one also has access to my files. Of course, both my pages and those of Political Science are part of the University of Iowa's domain (i.e., www.uiowa.edu). In this section I am using the term "site" to pretty much mean "domain."

The Political Science Faculty page is actually another page within the same site. The link shown above will work from any location because it specifies the entire URL for that page. If, however, you are creating links within a particular web site you can shorten the href= portion of the start anchor tag. For example, the above link can be shortened to <a href="../faculty.htm">Political Science Faculty</a>. The href= portion of the anchor tag now just indicates where the desired page is relative to the current page within the current web site. In this case, the two dots indicate that the faculty.htm file is in a directory one level up from the current directory.

If the desired page is in a directory below the current directory, simply include that directory in the tag. For example, the page I created to demonstrate lists is in a lower directory so I would create the link like this: <a href="webtips/example2.htm">Examples of Lists</a>, where webtips is the name of the lower directory and example2.htm is the name of the page to which I want to create the link, also known as the "link target." (If I do not specify a file in the anchor tag the browser will look for the defult index.html file.)

Links Within a Page
If you have a long document, you may want to create links to particular sections within that page (as I have done with this one). Creating a link to another section of the same document is a two-step process. The first step uses the usual anchor tags to create the link. The second step is to create a "target" for the link. For example, if I thought it might be necessary for a reader to review the definitions pesented in the first topic on this page before reading this section, I might include a link to the <a href="#terms">terms</a> section. Notice the number sign (#) before the word "terms." This indicates that the link is to a target in the current document with "terms" being the name of that target.

The next step is to create the target, which is the place in the document to which the link takes you. If you examine the source code for this document, you will see that I identified the terms section by using the tag <a name="terms">. Notice that the number sign is not present in the target tag.

Note: All three books I have indicate that the end anchor tag, </a>, should be used with the target tag. I have found, however, that the end tag does not seem to be necessary (at least in the way I have used it in my own pages).  Since writing the preceeding sentence I have found one exception. Although Netscape does not highlight the name target, at least one other browser (GNNpress) does.  If the end anchor tag is not used, entire paragraphs and sections of the page will appear in the link color.  In addition, it is possible that some web page editors may attempt to correct the "problem" or at least notify you that it exists (and for every instance), so it may be better to just use the end anchor tag in the first place.

You can also create a link to a specific place in another page if a target is identified in that other page. If someone else created the page, you would need to examine the source code for the document to see if the author used the name attribute of the anchor tag to identify any sections of the document. Even if you find such named sections, they are more likely to be changed than file names and your links are more likely to become obsolete. You are, of course, less likely to have such problems in your own documents. For example, suppose I wanted to create a link to my example page of lists where I present <a href="webtips/example2.htm#unordered">unordered lists</a>. To do so I use the tags as you see them here, which takes me down to the webtips directory, opens the example2.htm file, and goes to the place in the document identified by the name unordered. If I had not already created the target in the example2.htm file, I would need to do so for the link to work properly. Notice that the target name, #unordered, follows immediately after the name of the file (i.e., no space, period, slash, or other symbol is between them).

[divider bar]


Images

The basic tag used to insert an image in a document is the <img> tag. For example, I would use the tag <img src="../images/oldcapd.gif"> to insert the image of the Old Capitol used in the Political Science pages. Notice that the information following the src= portion of the tag is much like what appears after the href= portion of the anchor tag. It indicates both the name of the image to be inserted and where it is located. In this case, the oldcapd.gif file is located by going up one directory level and then down to the images directory.

Several attributes can be used with the image element. To keep the amount of graphics in this document to a minimum I will demonstrate them in a separate image examples page. Clicking on the highlighted attribute name will take you to that portion of the image examples page.

Alternative Text
An important attribute of the image tag is alt=, which indicates alternative text for the image. Aside from a text-only browser like Lynx, some folks choose not to automatically display graphics as they visit various web pages. The alternative text attribute indicates the nature of the image so readers can decide whether to view it. For example, the tag above could also include alternative text to identify it such as <img src="../images/oldcapd.gif" alt="UI Old Capitol image">.
Alignment
The alignment attribute, align=, indicates how the image is to be aligned on the page. The choices are:

For example, the tag <img src="../images/oldcapd.gif" alt="UI Old Capitol image" align=left> indicates that the Old Cap image is to be aligned along the left margin. Notice that the value for the align= attribute does not require quotes around it.

Image Height and Width
Netscape allows you to specify the dimensions of an image (in pixels) as it will appear on the screen with the height= and width= attributes. A common use for specifying the dimensions of an image is to present the image in smaller form (a "thumbnail") to allow readers to have a basic idea of what the image looks like without having to download a really large image. Like the align= attribute, there are no quotes around the values for the dimension attributes.
Vertical and Horizontal Distance
The hspace= and vspace= attributes allow you to specify the amount of clear space around the image (in pixels). This ensures that text or other images are a reasonable distance from the image. Again, there are no quotes around the value for these attributes.
Borders
With the border= attribute you can have Netscape create a border around an image that ranges from 0 to 10 pixels (0 is the default). The color of the border will be the color of the text for that page. Again, the value for this attribute does not require quotes.

There are three final items to mention regarding images. First, it is relatively easy to wrap text around an image. You need only specify the align= attribute. The particular value chosen will determine how the text will be wrapped. Details and examples are contained in the image examples page.

Second, images can be used as links. This is easily done by inserting the image element between the start and end anchor tags. The image will have a slight border of the same color as other links (visited or not). If a border has been specified with border=, the border will be of the specified size and in the appropriate link color. One example of this is contained at the bottom of this page. Another is on the image examples page.

Third, a final comment about using images. As you visit other sites you may see images that you like and would like to include in your own pages. One way to include these images is to put a link in your document to the image at the other site. (You can check the document source code to find the image's name and specific location.) Adding such a link to a remote image may save some space on your server, but it is generally not a good idea. Anyone visiting your page must rely on the speed and reliability of both your server and the remote one to view the image. A better method for including the image is to download it and put it with the files for your web pages. In addition to having to rely on only one server, it guarantees that the image will be there until you change your pages and remove it. (This also means that, for example, if you find something you like at another University of Iowa web site--English's perhaps--you should copy it to your area. Although the English web pages are on the same server, there is no guarantee that a particular image will remain in that area for your use.)

[divider bar]


Style and Composition

The style and composition of web pages will obviously vary widely with the needs, desires, and imagination of the page author. Even so, here are a few items that may help to create a "better" web page:

[divider bar]


Working With Other Browsers

Various sources, including the University of Iowa web folks, suggest that you check to see how your pages will look under other browsers. As noted previously, some browsers present some formatting options differently and some tags and attributes perform differently (or not at all) with other browsers. As you surf the web you will no doubt notice that some sites allow visitors to indicate the browser they are using so they will be able to access pages that are designed for that particular browser. This is quite commendable, but I suspect that few us will have the time to maintain two (or more) separate sets of pages tailored to different browsers.

Although I agree that checking your pages with other browsers is a good idea, it may not be all that practical. At a minimum, it requires that you have access to another browser. Everyone at the University who has access to Netscape should also have access to the text-based browser Lynx, but the whole point of the Web is to use the colors, graphics, and other features that just are not available to a text-based browser (but one should make simple concessions, such as indicating alternate text for images).

Other than Lynx, I doubt that most folks will have more than one browser installed on their computers. (I have two now, but only because Microsoft Explorer was automatically installed when I upgraded to Windows 95.) The Information Arcade, located in the main library, has several browsers available on both Macs and PCs. They also conduct regular clinics on viewing and constructing pages for different browsers. Still, even if you can attend one of these clinics, it is unlikely that you will have the time and incliniation to go over to the Information Arcade every time you make changes to your web pages.

I suggest doing the best you can with the browser you have available and to not worry too much about other browsers until you get comments from visitors indicating that something did not appear correctly with some other browser. For our Department, you should be safe with Netscape as everyone here has it (though some still have slightly older versions) and it is available to our students in the ITCs (computer clusters). If you suspect that some visitors to your pages might not be using Netscape, at a minimum, you can choose to avoid using Netscape-only tags and attributes in your pages. (Several books that are available do a good job of indicating which tags and attributes are specific to particular browsers.)

Update: Since writing the above I've been watching the web statistics for our Departmental pages.  According to the available statistics, over 90% of the browsers that access our pages are either Netscape (about 80%) or Netscape compatible (about 10%, which I assume includes Internet Explorer).  The majority of the remaining browsers are search engines of one sort or another.  Lynx accounts for only 1% of the requests.  Thus, it seems that for now we need not worry too much about checking our pages with other browsers.

[divider bar]


Testing and Production

If you use one of the many web page creation tools or programs that allows you to see how your page will look as you create it, testing will be relatively easy. Even without such programs, however, it is not too difficult to create and test your pages. I use the following method.

Testing Links
You will obviously need to test your links before putting your page into production (i.e., moving it to the UI's web server). Links for which you have the complete URL in the anchor tag will work just as they will when the file is moved to the web server. So too, links to other pages that will be stored in the same directory (either on your hard drive or on the server), will also be easy to check.

If you plan to have subdirectories within your directory on the server, you will need to duplicate the structure on your hard drive for the links to work properly. For example, for this webtips page I created four additional pages to illustrate various items. I decided to put these example pages and several images associated with them into a separate directory on the web server. To ensure that the links I have created work properly, I also created a subdirectory on my hard drive, which has the same name as the one on the server. Thus, when I put a link to one of these example pages in this page the beginning anchor tag will be of the form <a href="webtips/example.htm>, indicating that the link is to a page in the webtips subdirectory--both on my hard drive and on the server.

Links to directories above the directory where your files will be stored may be more difficult to check. One option is to simply include the complete URL in the anchor tag. If you are sure that a particular document is located in the directory above where the page you are working on will be stored, you can allow your beginning anchor tag to have the form <a href="../filename.htm">. (If you are adding a link to the Political Science home page you only need to have <a href="../index.html">.)

Once your pages have been thoroughly checked and are ready to move to the server, put them in a directory on L:\SHARED and I will move them up to the server. Once the files are on the server, you should check them again (particularly the links) and make any necessary corrections to the files. (It is unfortunate that I have to function as the gatekeeper to the University's web server for all the members of the Department, but we do not have much choice until ITS sees fit to allow individuals to have their own space on the server.)

After your pages are in production, and even if you do not plan to make any changes to them, you should still regularly test the links to pages at other sites. For example, my visited links option expires after 30 days (i.e., if I have not visited a particular page in more than 30 days the color of the link changes from the vlink= to the link= color). When the color changes I know it is time to check that link again.

[divider bar]


Additions and Corrections

As much as I have tried to make these tips as accurate as possible, there are no doubt mistakes or items that need additional clarification. If you find a mistake of some sort, please let me know by sending me a message to the e-mail address listed below. Similarly, if you think I have left out some important bit of information basic to web page construction, please let me know.