Lab 3
Page 3

HTML and Web Page Design

Designing a Web Page

If you remember from last week, a web page is a text document written in a language called Hyper-Text Markup Language (HTML). In this lab, we'll be explaining how you can use this language to create your own page. Once you understand the basic techniques, however, you may want to revisit the design portion of last week's lab. Once you've learned what you can do, it is very important to decide what you should do!

What is HTML?

HTML is an acronym for Hyper-Text Markup Language.

• Hyper-Text: HTML files look like text, but actually contain more information (in codes). This is known as hyper-text which means "more than words".
• Markup: HTML and other markup language use codes, or tags to format text. These tags are placed within the text to explain how to display that text. Netscape knows how to read HTML tags and use them to display text properly.
• Language: Even though it is much easier to learn and use, HTML is a programming language just like C or Java. Like Java, you need an interpreter to translate the codes and properly display the text. You'll learn more about other programming languages in future labs.

While Netscape can display text and image files by themselves, the only way to use text, images and links together is to write your pages in HTML and save them with the file extension ".html". Once you've done this, Netscape will know that it should look for and interpret HTML tags in your page.

It is important to realize that HTML is merely a text file. It uses tags (which you'll see very soon) in order to use links, images and so on. It is also important to remember to save the file with the extension ".html".

First, however, you need to learn how to use tags...

What's a tag?

Tags are small codes within your HTML file that give special instructions to Netscape (or another HTML interpreter) about how to display your text. Tags begin with a left angle-bracket (<) have some name inside and end with a right angle-bracket (>). Some tags come in pairs and others stand by themselves. The paired tags will have one start tag (such as <h1>) and one matching end tag (</h1>). Last week, we gave the following example:

In this example, the two tags around "dog" in the HTML code cause it to be italicized when it is interpreted by Netscape. This is an example of a tag that works in pairs. The first one tells Netscape to start italicizing all text. The second one (with the forward slash "/" before the "i") tells Netscape when to stop italicizing text. Generally, when you want to affect the way that a portion of text is displayed, you will surround it with a pair of start/stop tags.

Some tags, however do not have a stop version. One example is <br> which causes a line break:

Because it has an instantaneous result, there is no need to use a stop tag. Once your interpreter has caused a line break, there is no reason to tell it to stop doing so.

In a few moments, you will learn how to use quite a few different tags. The number of them may seem overwhelming at first, but you can always refer back to these pages or other online guides if you cannot recall how to do something.

Creating and Saving HTML files

As you experiment with HTML, you will be creating at least one, and possibly more than one HTML file. Since HTML code is just a special kind of text, you can use Notepad to do this.

Keep the following things in mind as you create your web site:

• Save all of your files in the "public_html" directory you created on your network drive in the first part of this lab.
• Save your main page as index.html (SPECIAL NOTE: If you already have a homepage, it is probably called "index.html". If so, talk to a TA, and name your COS 111 homepage something different. Also, feel free to make your COS 111 page be about something other than you; just make sure it includes all the elements we ask for in the lab.)
• Put a ".html" at the end of the name of each HTML file you create
• If you are working on several files at once, you can open a separate Notepad for each of them and use the TaskBar at the bottom of your screen to switch between them.
• You can view your HTML file by selecting "File | Open Page" in Netscape and then choosing your file.
• If you have opened your file in Netscape and you wish to make more changes to it, do the following:
  1. Make changes to your file within Notepad.
  2. Save the file in Notepad.
  3. Switch to your Netscape window.
  4. Click on the "Reload" button
  This should reload the page and show you any changes.
• Ask a TA for assistance if you feel lost or something is not working right.
• Have fun!

Important Advice from Headquarters

As you develop your web page, you should frequently check its appearance in Netscape, rather than make a whole lot of additions or changes all at once and then take a peek. This approach will let you see the effect of each new addition or change right away, and help you quickly isolate the source of any problem you might see in your page. If you make a lot of changes at one time, it may be harder to blame a problem on any particular change.

Many students imagine that changes they make in their Notepad window should immediately show up in Netscape's view of the page. Well, perhaps they should but they won't. To see the effect of the most recent change you must first Save the file in Notepad, and then Reload the just-saved file in Netscape. It is very very likely that at some point during this lab you will be staring at your page in Netscape, jaws agape, wondering what in the world happened to that thing you just typed in Notepad. When this happens, just smack yourself on the forehead and go Save and Reload. It is sometimes necessary, for reasons unknown to Headquarters, to hold down the shift key when you click on Reload.

In a very similar vein, a folder may not show you the latest file you created unless you press View | Refresh.

Finally, you might think that if you start up a new copy of Netscape, you will certainly see the newest version of any page you visit. Alas, this isn't so. You may end up looking at an out-of-date version which Netscape in its wisdom keeps around in a special computer-closet of its own (there are good reasons for this). To be absolutely sure you're looking at the latest version, rely on Reload.