Web Page Authoring Basics

International Association of Boards
of Examiners in Optometry

Web Page Authoring Basics

Before You Begin

Before you begin authoring Web pages, you should be familiar with Netscape and the World Wide Web. You should be comfortable using Windows or the Macintosh and have word-processing experience. It's best if you also know how to manage your files, including how to move a file from one directory or folder to another. ATN offers classes and documents that give you the foundation you need to become a Web author. In this document you'll build on what you know to create and edit Web documents.

Steps For Making Your Web Page Available

You'll get your Web page on-line and available to other people in a series of steps:
  1. Plan your Web page. Who is your audience? What messages do you want to communicate? Sketch out your ideas. Outlining skills help here.
  2. Create a draft of your Web page.
  3. Test your Web page locally from your computer desktop or file server. Use a graphical browser, like Netscape, as well as a text-only browser, like Lynx, to see how your page looks and works.
  4. Put your Web page on the internet server where you have made arrangements to store your pages and set the appropriate access privileges for your Web files and directories.
  5. Test your page with available browsers.
  6. Revise your Web page as needed.
  7. Notify other people that your Web page is open for business.
We'll talk about these steps more in this document, and we'll let you know when you need to refer to other documents for more in-depth treatment of some steps. Let's start by looking at step one, planning your page. You'll get some ideas from other pages you've seen, and you'll come up with new ideas on your own.

Style Guidelines for Web Pages

What makes a good Web page? The Univeristy of North Carolina at Chapel Hill Style Guidelines committee has a WEB page with some ideas on what one should consider when developing a WEB pageHTML Guidelines page at
http://www.unc.edu/campus/aboutweb/howto/guidehtml.html
In addition you will find that for many state governmental orginizations, you state has set up a standard for govermental WEB pages and you should follow them if you are creating a WEB page for your orginization. The example below trys to follow the UN guidelines to show you how to create your own Web page and continues with Web Page Advanced Design Let's look now at how to create your Web page.

Writing in the Language of Browsers: HTML

The basic tool for transforming text, graphics, and multi-media files into a completed Web page is the Hypertext Markup Language (HTML). Netscape, Mosaic, Lynx, and other browsers read HTML "tags". Tags are commands that tell browsers what to do, such as where to insert line breaks in text, where to show a link, or what file to display when a reader selects a link. To create a Web page, you put together text and HTML tags in a text file, called the "source" file. Web browsers interpret this source file, and display it on the Web. Each browser may interpret and display the source file a bit differently. In this document and in the corresponding class, we will be using Netscape as our primary browser.

Basics Format of HTML Tags

Generally, to give a browser a command, you sandwich text between two tags; a beginning tag turns the command on, and a corresponding end tag turns the command off. For example, you might want to make a heading for a paragraph, as in this example:
   <h1>A Few Of My Favorite Things</h1> 
The browser displays only the text between the tags <h1></h1> ("A Few Of My Favorite Things"), not the tags themselves. Notice that beginning tags are in the format <tag>, and end tags are in the format </tag>. Some commands do not use end tags, as you'll see later in this document. HTML tags, by the way, are not case-sensitive, so you can type them in uppercase (ABC) or lower case (abc). The best way to learn to use tags is to put together a Web document. Let's begin one now.

Creating a Simple Web Document

Creating and Saving the File

You can create your file with a simple word processor (like Note Pad for Windows or Simple Text for the Macintosh) or an online text editor (like pico or ne in UNIX). You can also use a more powerful word-processor than the ones we've mentioned, but it's not necessary. When you save your file, it's critical that you do the following: We'll use Note Pad for the PC and Simple Text for the Macintosh in our examples. For this example, begin by saving the file as "MyPage.html" to a folder (or directory) you've named "HTML". Remember that directory name: you need to keep all files related to your page in the same folder or directory so that file references and links work properly on your page.

Basic Page Structure

Let's look at the tags that are the bare bones of your page: Try using these tags in your new Mypage.html file. Add the following text to the file, substituting your own information for the text in italics :
   <HTML>
   <Head><Title>Your Name </Title></head>
   <body>
You'll add the closing </body> and </html> tags to the very end of your document. Now it's time to begin fleshing out your page.

Formatting Your Page

Add text to your document between the <body></body> tag set. Keep in mind that none of the spacing or formatting your word-processor uses will be read by a browser. To format text, you must use HTML formatting tags. Without these, your page will be appear as one continuous block of text with single spacing between words. With a Web browser, you can't take any formatting for granted, even paragraph breaks and tabs. Let's look at some ways to format your page.

Controlling Text Style

Authoring on the World Wide Web can be like living in a Wild West town. Oh sure, you have a sheriff of sorts, in the form of the folks who come up with HTML standards and try to keep the peace, but there is a certain degree of lawlessness. Perhaps most surpising is that, as a Web author, you don't control the specific font visitors to your page see; individual browsers have that control. In addition, not all browser programs read tags the same way, and some tags only work with a particular browser type. For example, Netscape may read a tag differently than the Mosaic browser, while Lynx reads the tag yet another way.

You do have somewhat limited control of text styles. To control text styles, you can use two basic types of character tags. A "physical" character tag is comparable to styles you're used to using with word-processors; you specify that a block of text is bold or italic, for example. With a "logical" tag, on the other hand, you control the way certain text looks relative to other text in your document. Logical tags make text stand out, but the browser program and/or the browser user determine(s) exactly how it stands out. We recommend logical tags for one reason: HTML standards are moving toward logical styles and away from physical styles. New browsing programs will probably be geared toward logical styles, and may eventually ignore physical styles altogether. Here are some ways you can change text styles with logical tags:

Checking Your Work with a Browser

Before you get too far, it's a good idea to check how your file looks with a browser. First, save your document again, and then start Netscape. From the Netscape File menu, select Open file ... and open your file (MyPage.html in the folder HTML). Your page should look something like this:

*Graphics here*

If you have trouble, make sure that the file is Text Only, and that you actually saved the file. Also, try clicking on the Reload button in Netscape. Each time you make a change or addition to your page, save the change, switch back to the Netscape window, and click on the Reload button to view the new version of your file. Get in the habit of checking your page as you add to it.

Controlling Spacing

Use the following tags to control paragraph and line spacing on your page: Let's try adding some text to your practice document. Return to Myfile.html, and after the </em> tag, add the following information to your page:
   <p>My favorite way to spend a Saturday night is fill in the blank.  
   <h2>Music</h2>
   <blockquote>I prefer your favorite type of music here and 
   another favorite here.  I can't stand your least favorite music here.
   </blockquote>  

One More Way to Control Spacing: Pre-formatted Text

Use this tag set to preserve the tabs, indentations, and line spacing in your original source text.
   <pre>Preformatted Text goes here</pre>
Graphical browsers like Netscape display pre-formatted text in a fixed font, such as Courier. The browser user controls which specific font displays by selecting an option in the Netscape Preferences menu.

Try adding this text to your document, and see how it looks on Netscape:

   <h2>Pre-Formatting Text</h2>
   <pre>I will start a new line of text right here
   and it will stay when I look at my page in Netscape.  
   I can put a tab right here,	and it stays put, too.</pre>

Ordered and Unordered Lists

Web authors frequently use these two basic list types on their pages:
  1. Unordered lists are bulleted. Use unordered lists when you want to list parts of a whole, but don't want to imply a sequence of steps or a specific order.
  2. Ordered lists are numbered. Use ordered lists when the list has an order or sequence; for example, a list of steps or a "Top 10" list.
To create a list, you use two types of tags. The first set of tags defines the list itself. The next set of tags defines the items in the list.

Adding an Unordered List

To add an unordered (bulleted) list to your page, you first define the list itself with <ul></ul>, and then specify the items in the list with <li>, as shown here:
   <ul>
   <li> List item
   <li> List item
   </ul>
Notice that we used a closing tag for the list itself, but not for the list items. In this example, we also put each part of our list on a separate line. This helps us keep track of the list in the source file, but the browser ignores these line breaks. We could have put all this information on one line. Remember, only the markup tags determine formatting.

Now try adding the following unordered list to your practice Web page and review your work:

   <h2>Things I Do</h2>
   I stay busy at my job/as a student.  Things I do in a week include:
   <ul>
   <li>Task/study area
   <li>Task/study area
   <li>Task/study area
   </ul>

Adding an ordered list

Set up an ordered list the same way as an unordered list, with one exception: in an ordered list, the list tag set is <ol></ol>. Here's an example:
   <ol><li> List item1  <li> List item2 <li> List itemx  </ol>
Even though we didn't separate each item this time, the browser displays each item on a separate line. Try adding the following list to your practice page:
   <h2>Restaurants</h2>
   My 3 favorite places to eat in Chapel Hill, in order, are:
   <ol> <li>Favorite #1 <li>Favorite #2 <li>Favorite #3 </ol>
How does your list look?

A Third List Type: Definition Lists

Definition lists are intended for definitions, but you can use them anytime you want to put a paragraph with a heading on your page. You begin the definition list itself with the <dl> tag. Then add the <dt> tag and the term to be defined, or any heading text. Next add the <dd> tag and the text of the definition or paragraph. Finally, add the </dl> end tag. Here's an example of a defintion list:
   <dl>
   <dt>My Life:  The Early Years
   <dd>I think Bill Cosby said it best:  I started my life as a child.
   </dl>
Try adding a definition list to your page on your own, and take a look at how it looks with Netscape.

Adding a Horizontal Line

If you want to visually separate text, you can add a horizontal line anywhere in your document with the <hr> tag . Let's try it in your practice document. Add this tag to the end of Mypage.html, just before the </body> tag:
    <hr>
Review your work just as you have previously.

Providing Text Links to Other Pages and Files

One of the great features of the World Wide Web is its inter-connectivity. You can provide links to other pages around the world by using this basic tag format:
 <a href="target of the link">link the user sees</a>
The link (link the user sees) is also called the "anchor." In this document, our link examples will use anchor text; in the next document, you'll learn how to make graphics into links.

Providing Text Links to Other Pages

To provide a text link to another Web page anywhere in the world, use this format:
   <a href="full URL address">anchor text</a>
where full URL address is the URL of the page the browser displays when the user clicks on the anchor text, (that is, the link). (Note: URL addresses are case sensitive, so be careful typing the URL. When possible, visit the page to which you're linking, copy the URL from the Location field, and paste the URL into your document.) Give your links meaningful names, so users can quickly scan your page to find the links they want.

Try adding this link to your practice page:

   <h2>I Have Connections in High Places</h2>
   I hope one day to be a <a href="http://www.whitehouse.gov">
   top executive</a>.
View your work as before. Click on the anchor text to verify that the URL is correct and your link takes you where you want to go.

Adding Sound

Add a sound file to your document using the now-familiar anchor tags, substituting the sound file address for the URL of the external reference, like this:
<a href="sound file URL or path/file name">text the user sees</a>
Let's add a sound file from an external source to your practice document:
   <h2>A sound from another site</h2> 
   <a href="http://www.unc.edu/student/orgs/uncbands/songs/tag.au">
   From Carolina to you.</a>
Check your work with Netscape. When you click on the link, you start a sound player defined in your helper applications in Netscape, which enables you to play the sound. If you don't have a sound player, visit Netscapes's Netscape Helper Application page at
http://http://home.netscape.com/comprod/mirror/navcomponents_download.html
to download a shareware sound player.

Adding an In-line Image

An "in-line" image is a graphics file that displays as part of your HTML document. It appears automatically if the user turns on "Auto-Load images" in the Options menu. If that option isn't turned on, a place holder appears instead, and the graphics file can be downloaded later. To add an in-line image, you specify the image source using this format:
   <img src="filename.gif">
where filename.gif is the name of the graphics file. Be sure to include the quotation marks around the graphic file name. Note: store your in-line graphics files in the same folder as the HTML document; otherwise, you need to include the path in the file name.

Let's try adding a graphic to your page. At the end of your practice file, add the following:

   <img src="me.gif"><p>
View your file as before (remember to save the file and reload it in Netscape.) If "Auto-Load images" is turned on, you'll see the graphic itself; if it's turned off, you'll see a place holder, which you can click to view the graphic. (Note: You must have "me.gif" in the same directory as the HTML document for this link to work.)

Providing Links to Different Sections of Your Page

If your Web page is long, you'll need to break it into logical sections, and provide links that make it easy to move from section to section. To see what we mean, take a look at the GLOSSARY of INTERNET TERMS at
http://sunsite.unc.edu/iab/iabclass/glossary.htmn
Click on a letter in the alaphabet. Each letter in the line is a link to a major category within the document.

Let's look at how to provide links within a document, using a the alaphabet selection as an example. First, you create the link to the LETTER entry. Next, you create the target of the link somewhere in your document. The format for a link to an internal section of your document is very similar to other links:

   <a href = "#name">anchor text user sees </a>
"Name" is the the target of your link, which we specify in the second step. Note: "#" is crucial here.

We'll use the following format to add the name somewhere else in the document:

   <a name = "name">Text user sees </a>
The "name" is the one we use in the anchor reference, but this time, we don't type "#" before it. Now when you follow the link, the browser displays this section of your page. Notice that, unlike the table of contents reference text, your "named" text does not appear as a hyperlink.

Finishing Touches

Signing Your Work

Signing your work tells visitors to your page who is responsible for its content. Web authors often sign their pages with an e-mail address, which enables people to contact them with questions or suggestions about their pages. You can either provide only your e-mail address, or your e-mail address with a link to a form readers can use to send mail directly from their browser to your e-mail account. Try adding an e-mail link to your page:
   <a href = "mailto: your_email@address">your_email@address</a>
Readers can follow the link to a form that sends e-mail to the address specified in the tag. This form works with most browsers, including Netscape and Lynx. Try adding an e-mail link to your practice document.

Completing Your Page

Because the Web changes constantly, it's a good idea to let your readers know how current your information is. Include the date that you last revised the source document at the end of your page. See the HTML Guidelines page for the suggested date format. Finally, complete your page by adding these two closing tags to the end:
   </body></html>

Making Your Page Available to Other People

Follow your Internet Service Provider's (ISP) instructions on where and how to place your page on the WEB.

Summary of Tags Discussed in This Document

Tag Pair or Group               Purpose                                    
<html>page</html>                    Identifies page as html.  Required.        
<head>title tags</head>              Identifies heading area.  Required         
<title>title of page</title>         Title of page.  Appears in title bar.      
                                     Required                                   
<body>body of page</body>            Body text of page.  Required               
<h1>text</h1>                        Heading text.  Can use h1-h6.              
<strong>text</strong>                Boldface (most browsers)                   
<em>text</em>                        Italic (most browsers)                     
<br>                                 Line Break                                 
<p>                                  Paragraph Break                            
<blockquote>text</blockquote>        Indents text and inserts line space        
                                     before and after                           
<pre>text</pre>                      Retains paragraph formatting of original   
                                     file.  Fixed font.                         
<ul></ul>                            Unordered list (bulleted).                 
<ol>/ol>                             Ordered list (numbered)                    
<li>text                             List item (for <ul> and <ol>               
<dl></dl>                            Definition list.  .                        
<dt>text                             Definition term (for <dl>)                 
<dd>text                             Definition (for <dl>)                      
<hr>                                 Horizontal line (rule)                     
<a href="file_location"></a>         Link to location enclosed by quotation     
                                     marks                                      
<img src="file_location">            Display image.                            
<a href="file_location#name">text    Link to location on current 
page.      
or graphic</a>                                                                  
<a name="name">text or graphic</a>   Target of link to location on page.        

The IAB Data Collection wishes to thank the University of North Carolina for provding the basic layout for these web pages