Libraries began using Internet filters in the late 1990's due to community pressure and the Children's Internet Protection Act (CIPA). CIPA [75] is a federal law that requires all computers in a public library to be filtered if that library accepts any federal funds for computers that access the Internet or the costs associated with the connection to the Internet. It took effect on July 1, 2004.

According to the National Conference of State Legislatures [76], "twenty-one states have Internet filtering laws that apply to public schools or libraries." While most of these laws require publicly funded institutions to adopt Internet use policies, some mandate filters. Legislators are convinced that filters effectively protect minors from harmful, web-bourne Internet content. To the extent that filters are expensive and may pose a threat to free speech or open access, legislators (and much of the public) have decided that the protections for children outweigh any such concerns. The use of filters in libraries has increased steadily. Library Journal [77] reported that the percentage of libraries filtering increased from 25% in 2000 [78] to 65% in 2005 [78], yet many librarians argue that filters have no place in a library.

The American Library Association fought CIPA in the Courts and took the position that "the use of filtering software by libraries to block access to constitutionally protected speech violates the Library Bill of Rights [79]". Some libraries chose not to install filters [80] and gave up CIPA funds instead. Filters were seen as antithetical to the mission of the library.

While some libraries were developing Internet policies explaining their reasons for not [81] using filters, other libraries [82] were quietly installing them. The libraries installing the filters soon found that filters alleviated many thorny problems they'd been grappling with. It turned out that filters did prevent children from bumping into unexpected and unwanted websites and advertisements. Filters served as a deterrent for public porn browsers. Libraries found that with some effort, they could implement and enforce their Internet Use policy. For the first time, libraries had a way to control how their public computers were being used. The filters didn't do the job perfectly, but the fact was, some libraries found there were many fewer Internet-related complaints from patrons after the filters were installed.

More public libraries are using filters [78] than are not using filters. How they are implemented varies from state to state and library to library. Some libraries filter all computers [83]. Some libraries filter only the children's computers [84]. Some libraries utilize filters offered at the state level [85]. Others install them in individual branches. It can be done in any number of ways.

Filters today are powerful and feature-rich. They are a far cry from the simplistic filters that blocked an entire site because of an "offensive" word though they are still far from perfect. Today's filters are much better at evaluating content and the features provide the library with many options for how to implement them.

If your library is using a filter, it is your responsibility to do so with integrity and transparency. Work closely with patrons and staff and library boards to agree on a policy of filtering and then implement that policy. Monitor the performance of your filter, make adjustments, and work closely with your community.

Take advantage of the today's broad range of features [86] to provide a flexible filtering environment for your patrons. The requirement to filter may have been mandated by legislators, but the implementation of your filter need not be so unyielding.

Filters operate on a system of categories. Websites, or sometimes individual web pages, are categorized by filter companies. The library's filter administrator utilizes the categories to build filter profiles. For example, the adult filter profile might allow all categories of content to pass through except items categorized as "sexually explicit." The children's filter profile would undoubtedly block the "sexually explicit" content as well as other categories deemed inappropriate for children such as "hate," "firearms," and "violence." The filter company decides how each site will be categorized.

Filter companies fiercely protect their process for categorizing websites and equally fiercely protect the websites identified within each category. Part of the value of the filter is in the number of websites categorized, because sites that have yet not been categorized will not necessarily be blocked. Ironically, librarians - professionals trained to catalog and evaluate content - subcontract their cataloging job to Internet filter companies when they install a filter. Unlike librarians, the subcontractors are not information professionals, they typically use automated methods to classify the 3 billion web pages on the Internet.

The features available in state-of-the-art filters are too numerous to recount here.  For a thorough summary of filter features and to compare filters, feature-by-feature, visit libraryfiltering.org [86].   However, certain features are particularly important for libraries, such as the ability to control what is blocked, how overriding blocked pages is handled, how granular the blocking is (page, site, domain, IP address), and what information is presented to the end users when a blocked page is encountered.  

Most library filters leave the choice of what to block in the hands of the filter administrator who selects the categories to block. The filters that don't allow the administrator to set up filter profiles and the categories that will be blocked for each profile are generally not used in the library. Such products might be suitable for home use but are not appropriate in a library setting.

Most filters provide some mechanism for overriding blocked pages either on-the-fly using an administrator password, or by adding sites to an "always allow" list which supersedes the block on a page caused by its categorization. This override capability provides the local administrator the ability to fix errors the filter company has made in their classification process, or to modify the filter company's classification system to more closely match the library's policies.

Because most filters do not disclose the websites contained within each category, these adjustments to the filter categories must be made by the filter administrator as they are discovered. Some filters provide more granularity in their blocking behavior than others. For example, a small number of filters allow the administrator to block certain file types (such as GIF, JPG, BMP, TIFF) within a category. Such granularity enables the filter administrator to block images within a category without blocking the text on the page.

Other filters are more gross in their blocking behavior and block the entire page, or even the entire domain. Some filters convert the domain to an IP address and block any websites sharing that IP address. Blocking shared IP addresses [87] always results in over blocking.

Some filters rely solely on lists of URLs within categories. Other filters use a system of dynamic filtering. Dynamic filters analyze websites as they are accessed by the end-user and based on the analysis, categorize the page. As filters become more sophisticated, companies are using a dynamic filtering process to supplement their URL lists, if not replace them entirely.

When the end users encounter a blocked page, they are usually presented with a message advising them so. The default block page is often customizable and can be used to provide useful information to the patron about why the page has been blocked and what to do if they'd like the page unblocked. Filters that block pages without advising the patron that they've been blocked by the filter [86] should be avoided.

Libraries using filters should take special precautions to do so in accordance with the library's mission. The following guidelines are provided to assist libraries implementing filters.

Protect Patron Privacy

Because of the way filters work, it is easy to accidentally invade patron privacy. Many of the filters have real-time monitoring features that should be turned off. Filters generate logs containing websites visited by patrons and these logs should be erased according to a written retention policy.

It is important to understand all the features associated with the filter you are using and turn off the unwanted features. Library administrators should also ensure that only authorized filter administrators have access to the filter server.

Minimize Blocking

By default, most filters will block far more content than is appropriate in a library setting. It is important to cycle through several iterations of tweaking and tuning your filter configuration before determining that your filter is set to block as little content as necessary to comply with your Internet Use Policy.

Monitor Blocking Accuracy

Ensure that the monitoring of blocked sites in your library is someone's job and that they are adjusting the filter as needed when sites that should be allowed are being blocked. Do not rely upon patron complaints to tell you whether your filter is working because experience shows that most patrons do not complain when a site is blocked.

Make Unblocking Easy and Quick

Many filters provide features that enable adult patrons to turn off blocking for themselves either for a single site or for all sites for the duration of their session. Use these auto-selection features as much as possible to accommodate all patrons.

If patrons cannot unblock the sites for themselves, there must be a way for staff to quickly and easily perform this function for them. Some filters enable the user to request a site be unblocked via the blocked page itself. Others will require the patron to locate a staff person to unblock the site by entering a password or changing a setting on the server. Be sure your library has established a policy for handling unblocking requests swiftly and that the process is easy for both patrons and staff.

Keep Patrons Informed

Regardless of what your filter policy is, or which filter you use, or how you handle unblocking sites, it is important to keep your patrons informed of the underlying reasons for filtering the Internet and all the procedures associated with implementing that policy. The Internet Use Policy should be readily available for all users accessing the Internet on library computers. Handouts about the filter and how to turn off filtering or request that a page be unblocked should also be readily available to patrons. If multiple filter profiles are available to choose from, make sure that guidance is provided so that patrons can make the choices that suit them.

Filters and Filtering [88]. Maintained by the American Library Association's Office of Intellectual Freedom, this resource contains news, ALA policies and statements on filtering, Internet Toolkit, legal information, and more.

CIPA [89]. Maintained by the American Library Association, this resource contains information about implementing filtering to comply with CIPA, legislative history of CIPA, and ALA's position on CIPA.

CIPA FAQ [90]. Bob Bocher's excellent summary of everything you need to know about CIPA. Bob Bocher is a Technology Consultant at Wisconsin Dept. of Public Instruction.

libraryfiltering.org. [86] Maintained by Lori Bowen Ayre, this website provides a matrix of filters available for libraries including contact information, pricing, and product features. Visitors can select products and features to compare side-by-side.

The first tag in any HTML file is the <HTML> tag. This tells web browsers that the document is an HTML file.

The second tag is a <HEAD> tag. Information between the HEAD tags doesn't appear in the browser window, but is still important. It is called meta information. The most important meta information in the HEAD tag is the <TITLE> tag. All HTML documents must have a title. Generally, the title should reflect the contents of the page (like a book's title reflects the contents of the book), so you will be changing this title to better describe whatever sort of web page you are creating. The document title will appear in the title bar (the bar at the top of your browser window). Look up at the top of your browser window right now. It says "basic html tags". The title text doesn't show up in the main browser window (where the text you are now reading is located).

The true content of your web page starts after the HTML, HEAD and TITLE tags. It is contained inside the <BODY> </BODY> tags.

So the basic skeleton of every web page looks like this (the tags will always appear in this order) and you will have one only of each of these tags on your web page):

<HTML>
 

   <HEAD>

      <TITLE>

      </TITLE>

   </HEAD>
 

     <BODY>

     </BODY>
 

</HTML>

Notice that all the tags have these <  > around them? These brackets tell the browser that the text inside the brackets is to be read as an HTML command. Look at <HTML> and </HTML>. Do you see the difference? The first one, <HTML>, has no / (forward slash). It is the opening tag. The second one, </HTML>, has a / (this is called a forward slash). It is the closing tag. You need to be very careful about closing your HTML tags.

There are very few HTML tags that don't require a closing tag, so be sure you get into the habit of closing your tags.

Now we are ready to start creating the true content of the web page by putting information between the <BODY></BODY> tags. Generally, the first line of an HTML page will be a HEADING tag. If you think about a HEADING as part of an outline of a document, the first HEADING (<H1></H1>) tag is roman numeral one, a second level heading (<H2></H2>) would be roman numeral two, and so on. In most cases, the first heading on a web page will be the same as, or similar to, the document title to let people know right off what the page is about.

<H1> is the largest size heading, which you would normally use at the start of a document. <H6> is the smallest, with <H2> to <H5> of varying sizes in between them.

This text is an example of an H1 heading

here is the HTML for this: <H1>This text is an example of an H1 heading</H1>

This text is an example of an H6 heading

here is the HTML for this: <H6>This text is an example of an H6 heading</H6>

Always remember to CLOSE your HTML tags!

Style Elements:

When we talk about style elements in HTML, we mean tags that affect the appearance of the text on a page. That can mean how the text is spaced, and also how the text looks.

Page formatting tags:

These tags affect how the text is spaced on a page:

<P> </P> - Paragraph. Inserts an empty line (it's like double-spacing in word processing).

The spaces between this line and the line above and below are examples of paragraph tags.

<HR> - Horizontal line. Useful for breaking up sections of your page. Creates a shadowed line across the page. The shadowed line you see below this text is an example of the <HR> tag. The <HR> tag is one of those exceptions I mentioned, and doesn't need a closing tag.

---

<BR> - Line break. Doesn't insert a space between lines, just forces a break between lines of text. TIP: if you want to create blank lines on your page, use multiple <BR> tags, not the <P> tag as the browser only sees the first <P> tag and ignores the others but sees and creates a line break for all <BR> tags.
The space (or lack of it, actually) between this line and the line above it is an example of a line break. The <BR> tag doesn't need a closing tag.

Text style tags:

Text style tags affect the appearance of text on a page. You already know about text style tags as you use them all the time in word processors like MS Word. When you select text and click on the B button in MS Word your text turns bold, right? HTML works the same way, but we need to use HTML tags to tell the browser what text style to use.

The two most useful text style tags are:

<B> ... </B> - Bold
<B>Example of bold text tag.</B>

<I> ... </I> - Italics
<I>Example of italicized text tag at work.</I>

Remember: you have to CLOSE the text style tags just like you have to close heading tags.

Now let's start the actual building of a web page.

To begin your page:

1. Open Notepad (it is usually found from the Start button, under Programs in the Accessories folder). Mac users: open TextEdit or SimpleText.
2. Create your "template" (basic page) which must contain the tags we discussed at the beginning of this section by typing the following HTML tags that make up the structure of every web page.

<HTML>

<HEAD>

<TITLE> XYZ Library </TITLE>

</HEAD>

<BODY>

<H1>XYZ Library</H1>
The actual content of your page will go between the opening and closing BODY tags. Everything before the <BODY> is information that describes your document to web browser and server software. It doesn't appear in the browser window.

</BODY>

</HTML>

TIP: If you are comfortable copying and pasting, you can copy and paste the tags into Notepad. To copy and paste on a PC:

1. Take your mouse and place your cursor at the beginning of the text, click the left mouse button then pull your mouse over the text. This highlights the text.
2. Release the left mouse button.
3. With the cursor over the highlighted text, right click the mouse for options, and select Copy or use the keyboard shortcut CTRL+C to copy the selected text.
4. Go to your open Notepad window and make sure your cursor is in the Notepad window.
5. Right-click your mouse again and select Paste or use the keyboard shortcut CTRL+V to paste the copied text.
6. The text you copied will be pasted into the Notepad window.

To copy and paste on a Mac:

1. Take your mouse and place your cursor at the beginning of the text, click and hold the mouse button then pull your mouse over the text. This highlights the text.
2. With the cursor over the highlighted text, press the Control key and click and hold the mouse down on the highlighted text and select Copy from the menu or use the keyboard shortcut Apple+C to copy the selected text.
3. Go to your TextEdit or SimpleText window and click inside it so your cursor is in the right place.
4. Control-click your mouse again and select Paste or use the keyboard shortcut Apple+V to paste the copied text.

Note on using TextEdit (Mac OS X users): Before you start creating your HTML page using TextEdit, change the preferences by going to the TextEdit menu and selecting Preferences. Under New Document Attributes, check Make Plain Text and Wrap Text. Under Saving, uncheck the Append ".txt" extension to plain text files button. Then click the red button in the upper left corner of the Preferences window to save these changes. If you don't do this it will make your page RTF (Rich Text Format) which will destroy all your HTML coding.

A note about copying and pasting: the tags may not be aligned to the left of the Notepad window after you paste them in. While this won't affect the HTML, it may be confusing for you visually, so feel free to clean up the tags and line them up to the left in your Notepad window.

Next: Saving Your Work [201]

An HTML file is nothing more than plain ASCII text, but all HTML files must have a special file extension for web browsers to recognize them. This extension is either .htm OR .html. The reason why there are two possible extensions goes back to the early days of the web. People were still using Windows 3.1 and DOS then, and Windows 3.1 and DOS file extensions could only be 3 letters long, hence .htm. Now .html is the more commonly accepted extension. For this course, we will be using the .html extension.

As you create web pages, it is important to keep them all together. This makes them easier to find on your computer, and makes it easier when you are ready to make your website go "live" on the Internet. So before we start saving files, let's create a folder where they will go.

1. Open Windows Explorer (you can usually find Windows Explorer by right-clicking the Start button and selecting Explore).
2. Left-click once on the C: drive (or whatever drive you will save your files to), then go to the File menu of Windows Explorer and select New/Folder. In the File Name box, type a name for this new directory. I am calling my folder xyzlibrary.

Now you are ready to save the file:

1. Be sure you are in your Notepad window and that the skeleton web page you created is visible.
2. Go to the File menu in Notepad and select Save.
3. In the dialog box that pops up, make sure the Look in: box is pointing to the folder you created in the previous step.
4. Type the file name in the File Name box. The first page of a website should always be called index.html, so that is what we will call this first file.
5. After you check to see that the location for saving is correct and you have typed index.html in as the file name, click the Save button to complete the process.

You should always check your web page in a browser to make sure it looks okay.

To Preview Your File in Internet Explorer:

1. Click the File menu, choose Open.
2. Click the Browse button in the Open dialog box that pops up and navigate to the directory where you saved your index.html file.
3. Double-click on the index.html file, then click the OK button in the Open dialog box.
4. Your index.html file is now displayed in Internet Explorer.

(Most browsers use similar commands to open a file - start with the File menu and look for "Open Page" or "Open File".)

Look at my index.html [202]. When the page opens, click the View menu and select Source to see the HTML code.

Note: As you work on your web page, you should keep your web browser and Notepad open. If you keep your index.html file open in your web browser, all you need to do after saving any changes you make to the file in Notepad is click the Reload or Refresh button in your browser window to see the changed index.html file. This means that you should have two windows open:

• One web browser for previewing your web page.
• One Notepad window, for editing your HTML code.

Next: Adding Lists [203]

There are three basic list types in HTML:

1. The unordered list: This list has bullets (usually round) before each item in the list.
2. The ordered list: This list has numbers before each item in the list.
3. The definition list: This list has nothing before each item in the list.

The Unordered List:

The opening and closing tags for an unordered list are <UL> ...</UL>

Each item inside the list must also have a tag. This tag is the line item tag and it looks like this: <LI>

Here is a sample unordered list in HTML:

<UL>

<LI>apples

<LI>oranges

<LI>bananas

</UL>

Here is what that HTML looks like in a web browser:

• apples
• oranges
• bananas

Notice that you must close the list with the </UL> tag, but you don't have to close the list item tags. Not too tough, huh? You can make the bullets into squares by adding an attribute to the opening <UL> tag. An attribute is something that is added to a tag to make it do something different, and you add a value to the attribute to tell the browser exactly what sort of attribute you want. To make squares, your HTML code will look like this:

<UL type="square">

<LI>apples

<LI>oranges

<LI>bananas

</UL>

Here is what that HTML looks like in a web browser:

• apples
• oranges
• bananas

So the attribute type="square" (the value in this tag is "square") turns the round bullets into squares. Sorry, there are no values for triangles or polygons!

Notice that I typed the tag <UL> in uppercase and the attribute and its value type="square" in lowercase. This is so that I can immediately tell the tag from the attribute when I am looking at my HTML code.

The Ordered List:

The ordered list is a sequential list, using either numbers or letters. The opening and closing tags for an ordered list are <OL> ...</OL> (that's the letter O, not the number zero).

Like the unordered list, each item in the ordered list must also have a line item tag before each item.

Here is a sample ordered list in HTML:

<OL>

<LI>apples

<LI>oranges

<LI>bananas

</OL>

Here is what that HTML looks like in a web browser:

1. apples
2. oranges
3. bananas

There are some attributes you can add to the opening <OL> tag. To make roman numerals, your HTML code will look like this:

<OL type="I">

<LI>apples

<LI>oranges

<LI>bananas

</OL>

Here is what that HTML looks like in a web browser:

1. apples
2. oranges
3. bananas

So the attribute type="I" (that's a capital "I" for the value) turns the regular numbers into roman numerals.

Another attribute for the <OL> list is type="A". This turns the numbers in an ordered list into capital letters. Your code will look like this:

<OL type="A">

<LI>apples

<LI>oranges

<LI>bananas

</OL>

Here is what that HTML looks like in a web browser:

1. apples
2. oranges
3. bananas

Remember, as with the unordered list you must close the list with the </OL> tag, but you don't need to close the list item tags.

The Definition List:

The definition list is a little different. It starts with this tag: <DL>, and the closing tag looks like this: </DL>. There are two item tags in a definition list; one indents the items and the other doesn't. They look like this:

<DT> - doesn't indent item

<DD> - indents items

So the HTML code for a definition list will look like this:

<DL>

<DT>apples

<DT>oranges

<DD>bananas

</DL>

And the list will look like this in a web browser:

apples

oranges

bananas

See how the word "bananas" is indented? That is what the <DD> item tag does.

Remember, as with the ordered and unordered lists you must close the list with the </DL> tag, but you don't need to close the item tags.

Okay, you are now ready to add some more HTML code to your web page. I am going to create a list of items that you would find on a library page. But you can substitute whatever items you feel belong on the page you are creating.

The following code will go between the <BODY>...</BODY> tags of your index.html file (so you need to make sure that Notepad is open and you can see your index.html file).

<UL>

<LI>Google

<LI>Librarians' Index to the Internet

<LI>Yahoo!

</UL>

After you have typed (or pasted) this code into your index.html file, be sure to SAVE your work in Notepad, then preview your index.html file in your web browser.

See my unordered list [204] and check your page against it.

If you do not see the changes you made to your index.html file, go back to Notepad and be sure to Save. Once you are sure you saved your changes, come back to the browser and open or reload the index.html page.

Try changing the list in your index.html to an ordered list, then try a definition list. Here are variations of my index.html file using both types of lists:

• An ordered list [205]
• A definition list [206]

The web wouldn't be the web if you couldn't go from one page to another. You do that via hypertext links. A web browser highlights text or images with color and/or underlines to indicate that it is a hypertext link (often shortened to hyperlink or just link).

The HTML tag for a hypertext link is <A>, which stands for anchor. The anchor tag is useless without the href attribute that tells the browser where to actually go to find the link. To create a hypertext link in your document:

Let's say you wanted to create a hypertext link to the search engine Google. You would type this in your index.html file:

<A href="http://www.google.com/ [207]">Google</A>

All you would see on the web page is the word Google and it would be in blue and underlined to signify that it is a link. What makes the word Google a link is the <A> tag with the href attribute that tells the link where to go.

So to create a hypertext link you do the following:

1. Start the anchor with <A (you must include a space after the A).
2. Specify the document you're linking to by entering the attribute href="filename" followed by a closing bracket: > (note that whatever follows the href= has to be in quotes: "..." as href is an attribute and needs a value).
3. Enter the text or information that will serve as the hypertext link in the current document (this text will be in regular language usually, like my home page or Yahoo!.
4. Enter the closing anchor tag: </A> (notice that you DON'T repeat the href portion of the opening tag in the closing </A> tag).

Okay, now let's add some hypertext links to the list we created in the previous session. On my page, I will have three links. Here is what the HTML code for the links will look like (I am retyping the list HTML code as well -- in my index.html file I will replace the current unlinked list with this new, hypertext linked list):

<UL>

<LI><A href="http://www.google.com/ [207]">Google</A>

<LI><A href="http://www.worldcat.org/ [208]">WorldCat</A>

<LI><A href="http://www.yahoo.com/ [209]">Yahoo!</A>

</UL>

The HTML code will look like this in a web browser:

• Google [207]
• WorldCat [208]
• Yahoo! [72]

Save your file in Notepad and preview it in a web browser. Not bad, huh? Take a look at my index.html [210] file for reference and comparison.

Relative Paths Versus Absolute Paths

You don't always have to type http://www.address.com/blahblahblah [211] when creating a hypertext link. If you are linking to a file that is part of your own website, you can specify the relative path from the current document to the linked document.

This may seem like an abstract concept. But think about a local phone call and a long distance phone call. To make a local call, you simply punch in seven numbers, and that's it. For long distance, you need to punch in a 1, then an area code, then the seven digit phone number. A relative link is like the local phone number; you're dialing a local number, so the address is shorter. The absolute link is further away, so like a long distance call, it needs more information to make the connection.

Here's an example: a link to a file anaheim_branch.html located in a folder called branches inside my xyzlibrary folder on my computer would look like this:

<A href="branches/anaheim_branch.html">Anaheim Public Library</A>

This is a relative link because you are specifying the path to the linked file relative to the location of the current file. You can also use the absolute pathname (the complete URL) of the local file, but relative links are more efficient in accessing a server. They also have the advantage of making your documents more "portable" -- for instance, we are creating all the web pages for this course in one folder on our computers (remember mine? it's called xyzlibrary) -- using relative links to hyperlink one page to another, and then upload the entire folder of web pages to your server.

In general, you should use relative links whenever possible because:

1. It's easier to move a group of documents to another location (because the relative path names will still be valid)
2. It's more efficient connecting to the server
3. There is less to type

You will notice that in the sample code I provided, there were only absolute hypertext links (remember, they all had http:// at the start of the A href tag). A website is made up of many pages, and we are creating the first page (sometimes called a "home page") for a website. You will probably have additional HTML files for other information, maybe a page with directions, or a page about services that your library provides. Those would be relative links, local phone calls versus long distance.

File and Folder Namimg

This is a good time to talk about file and folder names. Most servers (where your files will ultimately be kept) are case-sensitive where filenames are concerned, so you must be consistent when you use uppercase and lowercase file and folder names. Try to always use lowercase names for files and directories--it's easier to type! And don't put spaces in the file names:

• myfirstfile.html is correct
• my first file.html is incorrect

Servers don't like spaces in file names and will ignore them. This can cause you much annoyance, so get into the habit now of never putting spaces in your web file and folder names.

A Shortcut for Creating New HTML Pages

Let's create some new pages for those relative links you want to add to your website. Here's a shortcut to creating new pages from scratch:

1. Open your index.html page in Notepad.
2. Open the File menu and select Save As.
3. In the Save dialog box, make sure that you are saving the file in the same directory that contains your index.html file.
4. Give the file a new name. In my case, I need two more files: one called about.html and another called services.html.
5. Click the Save button to save the new file.

BE SURE to give the file a new name when using this procedure! If you forget, you may accidentally overwrite your index.html file!

You will also need to change the list code on the new files, as it will be different in content from your index.html file. Here are my two new files:

• about.html [212]
• services.html [213]

Open the View menu and select Source to see the HTML tags for these page(s).

Notice that I have changed the <TITLE></TITLE> and <H1></H1> tags to reflect the new content (and also added new content!).

Now I need to add links to these new files in my index.html file:

• index.html [214] with absolute and relative links

Notice that the links for about.html and services.html don't have http://... in the hypertext link? They are relative links. The links to Google, WorldCat, and Yahoo! are absolute (they do have the http://...).

To change the background color, you need to add an attribute and a color value to the opening BODY tag (you never add an attribute to a closing tag!). Here is what the attribute looks like:

bgcolor="#ffffff"

Here is what it looks like in the BODY tag:

<BODY bgcolor="#ffffff">

The "#ffffff" value is a hex code. There are literally hundreds of possible hex codes you can apply to a background. Click here [215] to see some of the possibilities. "#ffffff" is the code for white, and you need to always use the "#" and enclose the hex code in quotations (it's a value of an attribute, remember).

This is a good time to put in a word about color choices. Subtle is good. You don't want to overwhelm people with your color choices, so bright yellow is probably not a good background color. Always preview your choices in a web browser!

There are more attributes we can put in the BODY tag that will affect the color of text and links on a web page. These attributes are:

text="#000000"

link="#0033cc"

vlink="#ff0000"

The text attribute affects the color of regular text (text that is not linked) on a page. The link attribute affects the color of the linked text on a page (the default color for links is blue). The vlink attribute affects the color of links that have been visited on a web page (the default color for visited links is purple).

If I add these attributes to the BODY tag, it will look like this:

<BODY bgcolor="#ffffff" text="#000000" link="#0033cc" vlink="#ff0000">

The background for the page will be white (the bgcolor attribute, "#ffffff" is the hex code for white), the text (the text value, "#000000", is the hex code for black) will be black, links (the link attribute) will be blue, and visited links (the vlink attribute) will be red.

Let's go ahead and add attributes to the BODY tag of our index.html file.

1. Open the index.html file in Notepad.
2. Replace the opening <BODY> tag with this tag:
   <BODY bgcolor="#ffffff" text="#000000" link="#0033cc" vlink="#ff0000">
3. Save the file in Notepad then preview it with a web browser.

Not too tough, huh? But these BODY attributes affect all the text on a web page. What if you wanted control over the colors of specific pieces of text on your page? For that you need to learn about the FONT tag.

Introduction to Fonts

All text on a web page is in a font. A font is basically a text style. You know font faces by name: Arial, Courier, Times. Fonts also have sizes and colors. Your browser uses some default font settings: the default face is usually Times and the default size is 3, and the default color is black.

But the FONT tag allows you to override those defaults, and display text in special ways.

Here's an example from Webmonkey (an excellent HTML tutorial website from Wired magazine). Take the word:

TECHNICOLOR

If I do nothing to it, it is just plain black text, size 3. But if I add a FONT tag to it, and add the attributes color (use bgcolor only in the BODY tag) and size I can change the look of the word:

<FONT color="#ff0000" size="5">TECHNICOLOR</FONT>

which looks like this in a web browser:

TECHNICOLOR

You notice that adding the size="5" attribute with value 5 made the text larger? Font sizes range from 1 to 6:

<FONT size="6"> is large

<FONT size="1"> is tiny

The face attribute is trickier; you should only use font faces that everybody has on their computers. Arial is a safe font face to use, and is very readable which makes it very popular. Courier and Times are also safe choices. You should stick with these font faces for now.

Here is an example of the FONT attributes color, size, and face in action:

<FONT color="#ff0000" size="3" face="Courier">TECHNICOLOR</FONT>

which looks like this in a web browser (notice that I reduced the size of the font, and changed the face to a typewriter-like font face called Courier):

TECHNICOLOR

You could even make each letter in a word a distinct color:

<FONT color="#ff0000">T</FONT>
<FONT color="#ff7f00">E</FONT>
<FONT color="#ffff00">C</FONT>
<FONT color="#00ff00">H</FONT>

<FONT color="#0000ff">N</FONT>
<FONT color="#6b238e">I</FONT>
<FONT color="#9932cd">C</FONT>
<FONT color="#ff0000">O</FONT>
<FONT color="#ff7f00">L</FONT>

<FONT color="#ffff00">O</FONT>
<FONT color="#00ff00">R</FONT> 

which looks like this in a web browser:

T E C H N I C O L O R

If you use the FONT tag to assign colors, those colors will override any colors you assigned in the BODY tag.

Now let's add some font colors to the index.html page.

1. Open the index.html file in Notepad (if it isn't already open!).
2. Let's add some contact information to the page. Since my page is for a library, I'm going to add the street address and phone number and I want it to be dark green (hex code is #006633):
   

   <DL>

   <DD><FONT color="#006633">123 Main Street</FONT>

   <DD><FONT color="#006633">Los Angeles, CA</FONT>

   <DD><FONT color="#006633">ph: 213-555-1122</FONT>

   </DL>

   I am going to place it in my index.html file above the links to Google, etc. and here is what it will look like in a web browser:
   

   123 Main Street

   Los Angeles, CA

   ph: 213-555-1122

After you have added these tags, be sure to save your file then preview it in a web browser. It looks like a real web page! Click here [216] to see my index.html file in its entirety. Notice that my background is now white, and the address text is green. If you click on a link and go back to my index.html page, you will see that the visited links are red. Remember, to see the code of my (or any) web page, open the View menu in your browser and select Source.

A web page without an image or two is liable to seem pretty dry and dull. Now that you have mastered lists and links, you are ready to dress your page up a bit. But before we move on to the HTML tags for adding images to web pages, we will need some images to work with, so first let's cover downloading and saving images from web pages.

The good news is that almost any image on the web can be saved to your hard drive. The bad news is that you need to be careful, as many images on the web are the property of the web page designers and they may get very upset if people start stealing their images willy-nilly. There are plenty of free web image libraries on the web (here is a good link [107] for library-related graphics, it's also on the Helpful Links page). On these sorts of sites, it is perfectly okay to download the images. All of the images I have provided in this tutorial are freely available for use by everyone.

Before we get down to saving some images, let's create a folder to put them in. Since the images are going to be used with my index.html file, I want the images folder to be near the index.html file on my computer. So I am going to create a folder inside my xyzlibrary folder called images. To do this:

1. Right-click once on the Start button and select Explore.
2. In the Explorer window's left hand pane, find the web page folder you created in the earlier section, Saving Your Work [217]. Left-click once on the folder in the left hand pane of Explorer.
3. Right-click once in the right hand pane of Explorer (where you see your index.html file) and select New Folder in the pop-up menu.
4. Change New Folder's name to images (make it lowercase) and hit the Enter key to save the folder name.
5. Close the Explorer window.

Mac users: You can do the same thing, just use the Control key rather than the right mouse button.

Now we are ready to get down to business. To save an image, just right-click on it:

When you right-click on this image, a menu of choices will pop up (Mac users: just click and hold on an image to see the menu of choices). To save the image to your computer, select Save Image As. In the Save dialog box, point to the images directory that you created in the previous section. You can keep the image name, or change it in the File Name box then click the Save button.

If you change the file name, be sure to keep the same file extension that it had on the web. All images for use on the web will be in one of two formats: .gif or .jpg (sometimes you will see .jpeg - it's the same kind of file, it just has a slightly different extension). These formats (.gif and .jpg) are not interchangeable. If a file started life as a GIF file, it has to stay a GIF file. Image formats like .bmp will NOT work on the web.

Here are a few more images for you to practice saving to your computer:

Okay, now we have some images! Let's move on to placing an image in a web page.

To add an image to a web page, you need to know the following tag:

<IMG src="file.gif">

IMG is the tag and src is an attribute, but src must always be used with the IMG tag. As is usual with tags and attributes, there must always be a space between IMG and src, and the image file name must be in quotations as it is a value. There are some important additional attributes for the IMG tag:

align="left" OR align="right" OR align="center"

The align attribute tells the web page where to put the image in relation to the text it is near, based on the value you specify. So:

<IMG src="images/imagine.gif" align="left">Once upon a time in a galaxy far, far away there were three bears.

would look like this on a web page:

Once upon a time in a galaxy far, far away there were three bears.

Note that the image is to the left of the text.

If you type:

<IMG src="images/imagine.gif" align="right">Once upon a time in a galaxy far, far away there were three bears.

it would look like this:

Once upon a time in a galaxy far, far away there were three bears.

Note that the image is now located to the right of the text.

If you type:

<IMG src="images/imagine.gif" align="middle">Once upon a time in a galaxy far, far away there were three bears.

it would look like this:

Once upon a time in a galaxy far, far away there were three bears.

Now the image is centered vertically with the text.

The ALT Attribute

The last attribute is alt and it is in many ways the most important attribute. ALT stands for alternate text, and you use it to describe your images for people who can't see them. So when, say, a blind person reaches your web page, and the text of the page is read to them by a screen reader, the alt text you provide will describe the image that they can't see to them. You should always provide alt text for your images. If we add alt text to the example above, it would look like this:

<IMG src="images/imagine.gif" align="left" alt="imagine at the library">

The alt text should be brief and descriptive. The alt attribute has no effect on the physical appearance of the image. If you are using a graphic as spacing or decoration only (it has no real meaning on the page) you should use the alt attribute with what is called a null value: alt="". Screen readers skip over these tags altogether, which makes it much easier for the user listening to the screen reader.

Now let's put this new knowledge to work on your index.html file. For the following example code, I am going to put an image called reads.gif that is located in the folder images in my index.html file.

1. Open your index.html file in Notepad.
2. Add the following code below the <P> tag):
   <IMG src="images/reads.gif">
   Remember: I am using the image I saved earlier, and that I placed in the folder called images. You can use any image you want in your index.html file -- as long as you actually saved the image!

   My HTML code now looks like this:

   <HTML>

   <HEAD>

   <TITLE> XYZ Library </TITLE>

   </HEAD>

   <BODY>

   <H1>XYZ Library</H1>

   <P>

   <IMG src="images/reads.gif" alt="read at the library">

   <UL>

   <LI><A href="http://www.google.com/ [207]">Google</A>

   <LI><A href="http://www.lii.org/ [218]">Librarians' Index to the Internet</A>

   <LI><A href="http://www.yahoo.com/ [209]">Yahoo!</A>

   </UL>

   </P>

   </BODY>

   </HTML>

   When previewed in a web browser my page now looks like this:

   XYZ Library

   

   • Google
   • Librarians' Index to the Internet
   • Yahoo!
      
3. After typing or pasting the HTML code into your index.html file, remember to save the file and preview it in your web browser.

Now try changing the alignment of the image. Use align="left" then save and preview the file in your web browser.

It should look like this:

• Google
• Librarians' Index to the Internet
• Yahoo!

Using an Image as a Hypertext Link

An image can be a hypertext link just like text can.

Let's add a hypertext link to the Library of Congress to the America Reads at the Library image by adding the following example code:

<a href="http://www.loc.gov/ [219]"><IMG src="images/reads.gif" alt="read at the library"></A>

This code will look like this in a web browser:

[220]

Notice that the image is now a link (put your mouse on the image and watch it turn into a hand). The HTML code for a hypertext link is the same whether you use text or an image as the link.

Take a look at my index.html [221] file to see these tags in action. To view the HTML code for a web page, click the View menu and choose Source (this works for most web browsers, the wording may vary slightly).

You can align text left, right, or center. To do this, you use the attribute align. This attribute can be applied to HEADING tags, PARAGRAPH tags, or DIV tags. The DIV tag makes parts of a page look a certain way, but doesn't change spacing like the <P> tag. Use the <DIV align="center"></DIV> tag in place of the <CENTER></CENTER> tag.

Here are possible combinations for the <P> tag:

<P align="left"> aligns a paragraph to the left

<P align="right"> aligns a paragraph to the right

<P align="center"> centers a paragraph

Here are possible combinations for a heading:

<H1 align="left"> aligns a heading to the left

<H1 align="right"> aligns a heading to the right

<H1 align="center"> centers a heading

Here are possible combinations for the <DIV> tag:

<DIV align="left"> aligns a DIV area to the left

<DIV align="right"> aligns a DIV area to the right

<DIV align="center"> centers a DIV area

Use the DIV tag as you would the CENTER tag (it is the more accepted method).

This paragraph is an example of align="right".

This paragraph is an example of align="center".

Okay, let's go back to the index.html file and center the <H1> tag (and adjust the alignment of any other text you like).

1. Open the index.html file in your text editor.
2. After the H1 in the <H1>tag type or paste this attribute:
   

   align="center"

   Now your opening <H1> tag should look like this: <H1 align="center">

3. Save the file and preview it in your web browser.

Take a look at my file [222] if you want to make sure you're doing this correctly.

There are a few things that you should put on your main (home) page regardless:

• Navigation links (and be sure to provide navigation links on the second and third level pages as well! Think of them as a bread crumb trail for visitors)
• Contact information (address, phone, email in an obvious location)

Take a look at my index.html [223] file to see all of this in action.

Notice that I made the update information at the bottom a smaller font size? This is common practice when you are adding "small print" text -- it isn't the most important information on the web page, so you make it smaller. People's eyes are attracted to the larger text first.

Notice that the update information is sitting to the right of the graphic? It would look better flush to the left. To do that, you need to learn an attribute for the BR (line break) tag:

<BR clear="all">

Here is my file [223] before I used the <BR clear="all"> tag, and here it is after [224] I used the <BR clear="all"> tag.

Now here's a list of things to avoid:

1. Huge graphics! Your web page should load quickly--if it takes too long, nobody will ever visit it. The content should be what matters--don't let a big graphic take space away from the important information on your web page.
2. Flashy tricks like blinking or scrolling text or too many animated GIFs. A little bit goes a long way with this sort of stuff and after the first few seconds this sort of stuff just annoys people. Basic rule: keep it simple!
3. Weird background or text colors. You want people to be able to actually read the contents of your page. If the background is too loud or the text too light, you will not get many repeat visitors.
4. Too many font faces. While it may be fun to changes font faces a lot, it is very distracting when trying to read a page. So keep the font changes to about two per page--and it is also good, if you're going to use a font, to keep the them going throughout your site's pages.
5. Long pages. If people have to scroll very far to read your page studies have shown that they often give up and click off--go to another website. For instance: if, say, you have a library web page and the first page has all sorts of textual information about the history of the library, library services, and library circulation policies all on one long, wordy page, it is too long. it would make more sense to have four pages:This will keep people from being inundated with text right off the bat.
   1. The main page with hypertext links to the other pages
   2. A page about the history of the library
   3. A page about library services
   4. A page about circulation policies
6. View the source of web pages you like. Imitation is, after all, the sincerest form of flattery. And viewing HTML source code is the best way I know of to pick up new ideas and learn new HTML tricks. We've done it several times in this tutorial, but as a refresher: With your web browser displaying the page you like, open the View menu, then select Source. Voila! You will see the source code.
7. A note on email addresses: You can add a mailto link on your web page so people can click on your email address and open a mail program (see: https://www.wired.com/webmonkey/teachingtool/mailto.html [225]), but this is one of the easiest ways spammers (junk emailers) have of "harvesting" (or gathering) email addrresses. Better to just put you email address on the web page and let people copy and paste it into the email program of their choice. You can read more about spam and how to protect yourself here: http://www.keynote.com [226].

We need to add one last bit of coding to our web pages. This is the DOCTYPE tag, and tells web browsers what sort of web page you have created. The tag for our pages looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd [227]">

What this says to web browsers is that this is a World Wide Web Consortium-okay document that is using HTML 4.01 transitional coding. You can copy and paste this into your index.html, as well as any other pages you may have created. It goes at the very top of your file, above the opening HTML tag. See my index.html [228] file for an example.

As you write HTML code, you will make mistakes -- everybody does. That is why there are HTML Validators (or checkers). They look at your HTML code and find errors like missing or misplaced tags.

To check your index.html file, you will use W3C HTML Validation Service because it will check the HTML code for files that are on your local computer.

1. Click on this link (it will open in a new window): W3C HTML Validation Service [109]
2. In the W3C HTML Validation Service browser window, click the upload files link below the Validate this page button.
3. Click the Browse button next to the Local File: box to find the index.html file you have been building on your computer.
4. Doubleclick index.html
5. Click the Validate File button on the W3C HTML Validation Service page.
6. The W3C HTML Validation Service will display a page listing any potential problems in your HTML.
7. If there are errors, open the index.html file in Notepad and fix them.
8. Resubmit the page to the W3C HTML Validation Service following steps 2-5.
9. Preview the corrected page in your web browser.

Congratulations! You now have an error free web page!

Checking for Accessibility

Another issue to think about when you build web pages is accessibility. Special needs users may not be able to see pictures on your pages, or may use special web browsers that don't display code the way most web browsers do. You should be designing pages that can be used by everybody.

To read more about current standards and how to make your pages accessible, check out the Usability.gov website [229]. You will find useful links to design guidelines, checklists, and advice on what you can do to your pages to make them more accessible.

1. DO Learn Basic HTML (HyperText Mark-up Language)

There's no such thing as WYSIWYG (What You See Is What You Get) in HTML. Every browser interprets HTML in a slightly different or outdated fashion. Many users of HTML assistants or editors are stunned when they find out their web pages appear different or even garbled when viewed by a different browser.

Learning HTML (and CSS) on the Web

HTML Tutorials (Case Western) [230] - www.cwru.edu/help/introHTML/toc.html [231] - Includes great tutorials on image maps and tables in HTML 3.2 and on forms in HTML 2.0.

Eric Meyer on CSS: Links [232] - www.ericmeyeroncss.com/links/ [232] - CSS expert Eric Meyer's Recommended Links to Everything about Cascading Style Sheets.

HyperText Markup Language (HTML) Home Page [200] - www.w3.org/MarkUp/ [200] - Current official information on HTML and XHTML and their specifications.

Cascading Style Sheets (CSS) Home Page [233] - www.w3.org/Style/CSS/ [233] - "Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to web documents. Tutorials, books, mailing lists for users, etc. can be found on the 'learning CSS' page." There is also a CSS Validator at this official CSS site.

2. Design for the user!

Designing for the user means that the pages you design will be accessible and easily navigated by the user. When users look at your page they will develop the use model of your page from what they see. If you did your job well, they will be able to navigate and locate the information they desire with ease.

• Not all browsers support graphics!
  • Many people searching the web don't ever see your graphics. Some are using browsers that don't support graphics, others have turned them off. This is something you MUST consider when designing your pages.
  • Always offer text alternatives to everything. If you use an image map, be sure to provide a text version as well. It may not look as nice, but try turning off graphics and see how far you can get!
• Not all browsers support TABLES the same way!
  • There are some dangers with tables. First of all, we do not know the size of the person's screen who will be looking at our web document. Thus we should be careful in using TABLES to control the location of elements on the screen.
  • Most importantly, however, we should be aware of what happens when a browser does not support TABLES: All the text runs together- A fix for this is to add <BR> tags to the beginning of each Table section.
  • The Case Western HTML Tutorial listed above has a great section on tables [230].

3. Validate your HTML

Reasons

• There is no such thing as WYSIWYG (What You See Is What You Get) in HTML.
• Not all the browsers implement HTML in the same way.
• Some tags pertain to only one browser.
• What looks good in the browser of your choice may be unreadable in a different browser.
• Not supporting a browser can cause millions of people to not be able to see your site.
• Some browsers are more forgiving than others. You trust your browser. But what if there's a typo that your browser lets by, but other browsers choke on? This happens!

How to validate - We suggest using the following site:

• W3C HTML Validation Service [109] - validator.w3.org/
  • We recommend putting the document type declaration [234] (identifying the version of HTML you are writing) in your web pages. For example, the following line goes beforethe beginning <HTML> tag for this page, which is using XHTML 1.0 Strict:
    

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd [235]" >

  • If any errors are found in your HTML document, they will be listed by line number with a link to an explanation of the error. Understanding this report can be difficult at times, but stick with it.
  • You can even check files still on your computer from this service.

4. Check your pages in as many browsers as possible

At a minimum, check with MSIE, Netscape, Firefox, and Lynx (a non-graphical browser and useful for simulating what a person having a web page read to them with text-reading software would "see").

To check with Lynx from the web, go to - lynx me [236] at: ugweb.cs.ualberta.ca/~gerald/lynx-me.cgi

5. Know the <IMG> tag

Always use ALT

• Every time Lynx finds an <IMG> tag without an ALT attribute, it will display the following to the user: [IMAGE]
• Sometimes ALT tag descriptions aren't needed. Rather than leaving the ALT tag out, use ALT=" ". This will suppress the [IMAGE] seen by lynx users.

Use WIDTH and HEIGHT

• By adding the WIDTH and HEIGHT attributes to your <IMG> tags, you can decrease quite dramatically the amount of time users have to sit and wait for graphics to download. WIDTH and HEIGHT attributes allow the browser to determine the layout of your document. By knowing how large each graphic is going to be, the browser can display your document in its entirety with gaps left where the graphics will appear. As each graphic downloads, it is displayed in those gaps. The user can now scroll around and read the text while the graphics download! Bring up your graphic in the Netscape window to find out its size in pixels - it is displayed in the title bar. If you are using MSIE, right click on the graphic and select Properties to see the dimensions in pixels.

  How the tag would look - <IMG SRC="library.gif"ALT="Library" WIDTH="300" HEIGHT="200">

Avoid "Coming Soon" and "Under Construction" signs

When something is "published" for the web it isn't static. It can be changed any time to add or update information. This is the power of the web. Indicating that things may change is only stating the obvious. On the other hand, when you put pages up they should be correct, with all links working. Anything less is like printing a book with pages missing, the user is not getting what you have promised. If you do use "Coming Soon," make sure to include a date.

Click here - assumes that everyone is using a mouse with their browser.

Don't use Header tags to change font size

This confuses adaptive technology and indexing software.

Headers - <H1>text</H1> through <H6>text</H6> should be used in order - not <H1> then <H4> then <H2>. Again, it confuses other software that uses your page.

If you want to control font size, use the font size=n tag - with n being 1 through 7 - 1 = smallest and 7 = largest and 3 = the base size. They aren't seen by some other browsers, but it doesn't hurt them.
For example:
<FONT SIZE=5>Infopeople</FONT> =Infopeople.
or
<FONT SIZE=2>Infopeople</FONT> = Infopeople.

You can also use the size tags <BIG> & <SMALL>. These are now used by Netscape 2.0 and up and will be the standard as newer versions of browsers implement them.
For example:
<BIG>Infopeople</BIG> = Infopeople. This is cumulative, so
<BIG><BIG>Infopeople</BIG></BIG> = Infopeople
or
<SMALL>Infopeople</SMALL> = Infopeople. This is cumulative, so
<SMALL><SMALL>Infopeople</SMALL></SMALL> = Infopeople

Physical character highlighting

Use the tags:
<B></B> for bold and
<I></I> for italic.

Paragraphs <P>

In certain contexts, use of <P> should be avoided, such as directly before any other element which already implies a paragraph break.

To wit, the <P> element should not be placed before <H1>, etc., HR, ADDRESS, BLOCKQUOTE, or PRE elements.

It should also not be placed before or after a list element.
That is, a <P> should not be used to mark the end-of-text for <LI>, <DT> or <DD>. These elements already imply paragraph breaks.

While it is true that all of the entities mentioned above imply a paragraph break, this only occasionally means that they also imply white space between sections -- this depends on the browser. So, an alternative is to use the <BR> tag. In Netscape multiple instances of <BR> will create multiple line spaces.

Don't use the Netscapism <CENTER> tag

Use <P ALIGN=CENTER> </P>, <H1 ALIGN=CENTER> </H1>, etc. rather than <CENTER> </CENTER>

We recommend surrounding a table with <DIV ALIGN=CENTER> </DIV>

Directory Reference Errors

It is possible to request an index of a directory from an HTTP server. The typical response from the server is to either return a pre-generated index document (which is often the document "index.html" in the referenced directory), or to construct an HTML document on the fly which contains a listing of all files in the directory. However, when making such a directory reference, it is important to make sure to have a trailing slash on the URL. That is, if you were to request the index of Infopeople's directory of HTML documentation, you would want to refer to it as
infopeople.org/
not as
infopeople.org (missing the end )

Many servers are able to catch these errors, and provide redirection to the proper URL, but it's best to get the URL right in the first place -- notably because not all browsers support transparent redirection. Also, getting this correct the first time means it will take less time for the page to be loaded; your readers won't have to wait through the time needed to open two (or more) HTTP connections.

Missing quotes in start tags

This reference to the Cerritos Public Library Home Page should look like:
<A HREF="library.ci.cerritos.ca.us/">
but people composing "raw" HTML from a text editor will often instead type:
<A HREF="library.ci.cerritos.ca.us/> (missing the end ")

The behavior of browsers upon encountering this varies -- some display a proper link, but you can't follow it, while others actually eat up huge portions of the following text, thinking everything up until the next quotation mark to be part of the URL.

Missed end tags

Many of the HTML elements contain information within them. For example, <EM>emphasized text</EM> would be rendered as emphasized text. There is a start tag (<EM>), some content (which may include text, and in some cases, other nested elements), and an end tag (</EM>, indicated by the /). A common mistake is to miss the / in the end tag.

FTP stands for File Transfer Protocol. You have created a web page that currently lives on your hard drive or maybe on a floppy disk. To let the world see your web page, you need to move it to a remote computer that will host your page and give it an address (something like this: http://www.library.org/services/library.html [237]).

FTP is like a mailman in that it takes your file from your local computer and delivers the file to the host computer (this is called uploading), and it can do the reverse as well: it can deliver files to your local computer from a remote computer (this is called downloading).

You will need some FTP software to act as your mailman. A free Windows FTP program is called Core FTP. For Mac users there are two very nice shareware FTP programs called Fetch and Transmit.

The following links will take you to information on using these applications:

• Beginner's Guide to FTP [92]
• Core FTP [93] (free FTP client)
• Transmit [238] (for OS X users)

You have now reached the end of this tutorial. Congratulations!

You may find this webliography on creating web pages [70] useful as you strike out on your own. Good luck!