Authoring Web Pages

Introduction

The purpose of this document is to show you how to create simple Web pages. For example, you could create a Web page on your computer that enables your students to click user-friendly names to access sites, rather than type long addresses.

Web pages consist of text, so you can use any text editor to create and modify them. On Windows, you can use Wordpad or Notepad. (Wordpad and Notepad are both available under Start/All Programs/Accessories.) On Macintosh systems, you can use SimpleText or TextEdit. To create a simple Web page that consists of a list of links:

  1. Copy the text below by highlighting it and clicking Control-C on a Windows computer or Command-C on a Macintosh.
  2. Open a new text document with your text editor of choice: Wordpad, Notepad, TextEdit, etc.
  3. Paste the text you copied into the new text document.
  4. Modify the text for your pages by entering an appropriate title, a heading between the <h1> and </h1> tags, and Web addresses and user-friendly names. This sample page has a list of five links. If you don't use them all, you can delete a link by deleting one of the lines that begins with <li>. If you need more links, just duplicate this line and modify it.
  5. Tip: You can copy and paste URL addresses. Open a Web browser, navigate to the page to which you want to create a link, then click once in your browser's address bar to highlight the address. Copy the address (Control-C or Command-C), then switch to your text editor and paste the copied text between the quotation marks that follow href=.
  6. Save your text document as a text file with an htm or html extension; e.g., mathlinks.htm.
  7. Double-click your new HTML file and test it by clicking the links. Your browser should take you to those pages.

Best Practices

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Type the title of your page here</title>
</head>
<body>
<h1>Type the heading for your page here</h1>
<ul>
<li><a href="URL goes here">Put a user-friendly name here</a></li>
<li><a href="URL goes here">Put a user-friendly name here</a></li>
<li><a href="URL goes here">Put a user-friendly name here</a></li>
<li><a href="URL goes here">Put a user-friendly name here</a></li>
<li><a href="URL goes here">Put a user-friendly name here</a></li>
</ul>
</body>
</html>

As you can see from the sample above, an HTML page consists of the text that appears on the page, along with tags that are enclosed within less than (<) and greater than (>) brackets. Your browser uses these tags to format the page. Note that the opening and closing tags are identical, except that the closing tag contains a forward slash (/).

The purpose of HTML tags is to identify the function of text, not its appearance. Thus the <h1> tag in the sample above indicates a Heading 1, or highest-level heading, in your document. The appearance of h1-level text is determined by your browser's default settings or, as in the case of the page you are reading, by a stylesheet. It is possible to enter HTML tags that change the appearance of a document, but this is not a smart practice. HTML pages can be viewed on a variety of devices; attempting to hard-code their appearance can create problems when they are viewed on devices other than the one on which you created them. If you are interested in controlling the appearance of your Web pages, I suggest you use Cascading Stylesheets to accomplish this.

The Filename Extension Problem

The designers of both Windows and Macintosh computers assume that users don't know how to manage filename extensions. By default, Windows systems hide filename extensions from the user, so when you use Wordpad or Notepad to create a text file named mathlinks.htm, it actually creates a file named mathlinks.htm.txt. If you double-click that file, Windows will open it with Notepad, which is the registered program for files with a txt extension. To prevent this on Windows systems, you can put the filename inside quotes; e.g., "mathlinks.htm". You can eliminate this problem once and for all by doing the following:

  1. Open Windows Explorer (click Windows-E or click Start/Programs/Accessories, or just Start/Programs, depending on your version of Windows.
  2. Click Tools/Folder Options.
  3. Click the View Tab.
  4. Uncheck the box beside "Hide extensions for known file types."
  5. Click the Apply to All Folders button. (This may be slightly different, depending on your version of Windows.)

If you create a filename with an extension under Macintosh OS X, the Mac will note that the filename appears to have an extension and ask if you want to append another one. Say no.

HTML Tips

  1. Name your home page default.htm, default.html, index.htm, or index.html. This enables users to retrieve your page without having to type its full URL. For example, a user can retrieve the home page for Atkins Elementary School by entering http://www.scsb.org/aes/ if the school's home page is named default.htm.
  2. Use lowercase letters for all filenames. Windows Web servers are not case-sensitive, but Unix and Linux Web servers are. On a Windows system, myfile.htm and MyFile.htm are the same file. On Unix and Linux Web servers, they are not. The majority of Web servers are Linux and Unix.
  3. Don't use spaces in your filenames. The following link points to a non-existent file that has a space in its name. When you click it, your browser will display a Page 404 (file not found) error. Please note the weird characters your browser has to insert in place of the spaces. file name with spaces
  4. Please place your images in a subdirectory called images. To link an image, use the following HTML syntax: <img src="images/mypicture.jpg">. Using an images subdirectory makes your site easier to maintain.
  5. Please use relative addressing for your internal links. If you are not sure of the difference between relative and absolute addressing, please contact Terry Hawthorne.
  6. Use banners sparingly. While it may look impressive to have text scrolling across the screen, remember that it is easier for your audience to read what you have to say if it is not moving around.
  7. If you use a colored background or background image, use a text color that contrasts strongly with the background.
  8. Use Cascading Style Sheets (CSS) to control colors, fonts, margins, borders, and other presentational information. All non-CSS presentational tags, such as bgcolor and font tags, are deprecated, meaning they will not be supported in future versions of HTML and XHTML.
  9. People visit your visit for information. A plain-looking site that has useful, frequently updated content will attract many more visitors than a site that is long on looks and short on content. The best sites look good and satisfy the audience's need for information.
  10. Don't needlessly retype information. For example, if your cafeteria staff or school secretary uses a word processor to create the weekly menus, get a copy of that file and copy and paste its contents into your Web page. The same goes for honor rolls and other school announcements.
  11. HTML elements and attributes should be lowercase and attribute values should be enclosed in quotes; e.g.:

    12. <img src="images/mypicture.jpg" width="320" height="240" alt="Information about this picture" />

    Note the /> at the end of the img tag. The next point provides the explanation.

  12. Every HTML element tag must have a corresponding closing tag; e.g.:

    13. <p>This is a paragraph enclosed by opening and closing paragraph tags.</p>

  13. Tags that don't enclose content, such as line break (<br>), should be written as follows:
ElementFormAlternate Form
Line Break<br/><br></br>
Horizontal Rule<hr/><hr></hr>

Policies for Smyth County Schools Web Page Authors

Please observe the following guidelines when authoring Web pages that are to be posted on the Smyth County School Board's World Wide Web server.

Common HTML Tags

The following table lists the commonly used HTML tags.

Tag Purpose
html Used to mark the beginning of a Web page.
head Used to mark the beginning of the header section of a Web page.
title Used in the header of a Web page to store the page's title, which will appear in the title bar of your browser window.
body Used to mark the beginning of the body of a Web page.
h1 Used to identify and format the top-level heading in a document. The headline of this Web page is formatted with an H1 tag.
h2-h6 Lower-level headings in a document.
p Used to mark the beginning of a new paragraph.
hr Used to insert a line, or horizontal rule. Because the hr tag does not enclose any content, you should write it as follows: <hr/>.
table Used to mark the beginning of a table.
tr Used to mark the beginning of a row in a table.
td Used to mark the beginning of a cell in a table.
ol Used to mark the beginning of a numbered list. 
ul Used to mark the beginning of a bulleted list.
li Used to enclose individual list items in a numbered or bulleted list.
a

Used to insert a hyperlink. The full format is <a href="hyperlink file">, where hyperlink file is the name of the file you are linking to. For example, the following could be used to code a link to the Smyth County School Board's calendar page:

Click <a href="http://www.scsb.org/calendar.html">here</a> to view our calendar.

This produces:

Click here to view our calendar.

If the page you linking to is located on the same Web server as the page that contains the link, it is a good practice to eliminate the reference to the Web server, or the http://www.scsb.org in our example. This enables you to move your Web pages from one computer to another without having to recode your links.
img Used to insert an image. Remember that Web pages are text files. You cannot insert pictures directly into Web pages. To have a browser render a picture as part of a Web page, you insert a reference to the picture. The full format is

<img src="picture filename"> where picture filename is the name of the of the JPEG, GIF, or other picture file. Note that the img tag does not have a closing form.

Learning More

--By Terry Hawthorne