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 progra mming 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 (& gt;). 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:

1. Save all of your files in the "public_html" directory you created on your network drive in the first part of this lab.
2. 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 COS111 homepage something different)
3. Put a ".html" at the end of the name of each HTML file you create
4. 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.
5. You can view your HTML file by selecting "File | Open Page" in Netscape and then choosing your file.
6. 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.
7. Ask a TA for assistance if you feel lost or something is not working right.
8. Have fun!