Lab 2: HTML and Web Page Design

By the end of this lab, you will be able to:

• Create simple and attractive web pages
• Add graphics, sound and links to other pages
• Make your web pages visible to the world

As you've explored the World Wide Web (WWW), you've probably found pictures, sounds, and graphics that you like. In this lab, you will learn how to create your own web pages, and incorporate some of what you saw on the other pages into your own. We'll go over some of the basics of web page design and HTML. Then you can get started writing your own pages with text, images, sounds and more.

Part 1: HTML and Web Page Design
Part 2: The Framework of an HTML File
Part 3: Formatting Text
Part 4: Using Lists
Part 5: Adding Graphics and Sound
Part 6: Adding HyperText Links
Part 7: Submitting your work

Part 1: HTML and Web Page Design

Designing a Web Page

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 web pages. We're doing the basics here, creating straightforward pages by hand, using a rudimentary text editor like Notepad. There are plenty of tools like Front Page and Composer that will automate parts of this for you and give you special effects, but it's important to understand what's really going on underneath.

What is HTML?

HTML is an acronym for Hyper-Text Markup Language. "Hypertext" suggests "more than text", and "markup" implies that the contents are marked with extra information about how they should be presented. HTML files are ordinary text, but contain additional information called tags that indicates how the text should be displayed by a browser, and how special material like images, sound, and links to other pages should be handled. Browsers like Netscape and Internet Explorer use HTML tags to display text properly.

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.

We use "Netscape" throughout this lab as a shorthand for "Netscape, Internet Explorer, or any other browser". Netscape and Internet Explorer and other browsers all handle the core parts of HTML from this lab in almost the same way, but they sometimes diverge when it comes to fancy features. If you want people to be able to view your pages regardless of their choice of browser, stick to the straightforward stuff for now.

What's a tag?

Tags are codes within an HTML file that give special instructions to a browser about how to display your text. Tags begin with a left angle-bracket (<), include a name and sometimes other information, and end with a right angle-bracket (>). Tags can be written in upper case or lower case; you should pick whichever you prefer and then use it consistently.

Some tags come in pairs and others stand by themselves. Paired tags have one start tag (such as <h1>) and one matching end tag (</h1>) that is identical except for a /. For example, the tag pair <i>...</i> italicizes whatever it surrounds:

In this example, the tags around "dog" in the HTML code cause it to be italicized when it is interpreted by a browser. 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 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 <br> has an instantaneous result, there is no need to use a stop tag. Once your browser has produced 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 tags 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. One of the better ones is The Bare Bones Guide to HTML. You might also find this introduction helpful. The official HTML home page is here.

Creating your Web Directory

• SSH to arizona and log yourself in.
• Type the command    mkdir public_html   .
• Type the command    chmod 755 public_html   .

Note added a bit later: you can do the same thing more easily with a single command provided by OIT. After logging in,

• Type the command    wwwpublic  

As you do this lab, bear in mind that everything you put in your web directory is visible to the whole world. Make sure it says only what you would be willing to say to the world.

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 is just text, you can use Notepad to do this.

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

• Save all files in the public_html directory you just created.
• Save your main web page as index.html NOTE: If you already have a home page, it is probably called "index.html". If so, talk to a TA, and name your COS109 home page something different; a TA can help you make that page refer to your 109/111 page if you like.
• Put a ".html" at the end of the name of each HTML file you create; Netscape and IE expect that. (".htm" is allowed as an alternative but don't use it here.)
• 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 making a whole lot of additions or changes all at once before looking. This incremental 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. If you make a lot of changes at one time, it's harder to blame a problem on any particular change.

You might think that changes you make in your Notepad window should immediately show up in Netscape's view of the page, or at least as soon as you save the file. Sadly, 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 at some point during this lab that you will be staring at your page in Netscape, jaws agape, wondering what in the world happened to the changes you just make in Notepad. When this happens, smack yourself on the forehead and do a Save and Reload. (This is analogous to the fact that Windows Explorer 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 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 because in an attempt to be efficient, Netscape often uses a copy of the page that it has stored locally ("cached") rather than retrieving a new version. To be absolutely sure you're looking at the latest version, rely on Reload.

Part 2: The Framework of an HTML file

The next few sections will help you create your own web page. Open Notepad and follow the instructions given for using each tag.

• The HTML tag
• The HEAD and TITLE tags
• The BODY tag
• The Entire Framework

The HTML tag

Every HTML file must begin with <HTML> and end with </HTML>.

These two tags tell your browser that the file is written in HTML and that it should translate every tag it finds between them into the proper effect. Everything you put in your HTML file must go between these two tags so you'll probably want to leave some space to work with.

1. Type <HTML> at the very top of your file.
2. Press Enter a few times to make some space in the middle.
3. Type </HTML> at the very bottom of your file.

The HEAD and TITLE tags

There are two separate parts to an HTML file, the HEAD and the BODY. The HEAD comes first, is surrounded by the <HEAD> and </HEAD> tags, and usually contains information about the HTML file that is not displayed as normal text. Often, it will include the author's name, keywords, and a summary of the file, though these things are never displayed by the browser. Instead, they are used by search engines and other programs to categorize or list the page. Since none of this information is displayed, you do not need to include it.

One exception to this invisibility rule, however, is the title of your page. If you look in the Titlebar of your Netscape window, you should see the title of the page you are on. If you were to find the page in a search engine or among your Netscape bookmarks, it would have the same title. You can use the <TITLE> and </TITLE> tags (within the HEAD section) to indicate the title of your web page.

1. Type <HEAD> underneath the <HTML> tag to begin the HEAD section.
2. On the line below that, type <TITLE> to begin the title of your page.
3. Type in a title.
4. Type </TITLE> to indicate the end of your title.
5. Type </HEAD> underneath that to end the HEAD section.

The BODY tag

Finally, it is time to create the BODY section of your file. Everything you place in this section will be displayed in the main window of your browser.

Unlike the other tags you've seen so far, the BODY tag has a few options, called attributes. These are special instructions which you can include inside the tag to customize your page. Each attribute is written as name = value where name is the name of the attribute and value is what you set it to be. You are never obligated to include these attribute pairs; they are completely optional.

For example, typing in <BODY BGCOLOR="blue"> instead of just <BODY> will make the background color of your page blue. (Note that there is a space between BODY and BGCOLOR.)

The most popular attributes of the BODY tag are:

Thus, if you want a black page with white text, use <BODY BGCOLOR="black" TEXT="white"> If, on the other hand, you had a picture of cats named "cat.gif", you might try <BODY BACKGROUND="cat.gif" TEXT="red"> That would tile the cat picture over and over as the background of your page, and all your text would appear in red!

Here's a list of the available named colors; you can get others by specifying their red, green and blue components.

The Entire Framework

Here is what you should have so far. Don't worry if the spacing is a little bit different, or if you've chosen different colors. Just make sure you understand what each tag does. If you're confused, ask a TA for assistance.

(If you would like, you can copy all of this by highlighting it and choosing "Edit|Copy". Then you can paste it into your HTML file in Notepad instead of typing in each of the codes yourself.)

Part 3: Formatting Text

Regular Text and Paragraphs

Most importantly, HTML browsers ignore all "white space". They do not pay attention to how many spaces you've put between two words, or whether those words are on different lines. All consecutive blank lines, empty spaces and returns are condensed into a single space.

One side effect is that you cannot end a paragraph or create a blank line without typing a special tag. For example, the text in the following example is broken onto many lines with many spaces, but is not displayed that way:

While at first this may seem annoying, it is actually very useful. Thanks to this strange feature, you can use blank lines, tabs, and spaces to make your HTML code neat and easy to edit without worrying about the extra spaces showing up when your page is displayed.

Of course there will be many occasions when you want blank lines and the following tags may help:

<BR> This tag creates a line break wherever you place it.

<P> This tag should precede every paragraph. It will automatically put in an empty line to make your text look neat.

Take a look at the following example

Notice how everything seems neater on the right side. If you use paragraph tags properly, all of your text should come out as nicely, even if the HTML file is messy.

1. Underneath the <BODY> tag, type in a few paragraphs about yourself, with a <P> at the beginning of each paragraph.
2. Try using a few <BR> tags to create extra blank lines or force your lines to break at specific places.

It is important to note that there are several symbols which HTML will not display properly. If your web page does not display correctly, make sure you haven't used any of the following symbols.

There are, of course, other symbols which cause trouble. Still others are not found on the keyboard and so are difficult to include. The strange-looking codes in the rightmost column above are called "escape codes" and are used to represent these difficult characters. There are many pages on the Web with complete lists of these escape codes.

Here is one more common example of an escape code:

Headings

You will often want to include headings in your web pages with larger and bolder text that stands out from the page. For this, we have the <H#> </H#> tags. Simply replace "#" with a number from 1-6 and surround your heading with these two tags. The text inside will be bold, usually larger (depending on the number -- H1 is the largest), and surrounded by empty lines.

Here's an example of the different levels of headings:

Always be sure to close your header tag (using the appropriate ending tag) or the rest of your page will be displayed in the larger, bolder text. It is very important that you use an ending tag that matches your opening tag. If you opened with <H2>, you must close with </H2>.

1. Create a title for your page by placing the following line right under the <BODY> tag.
   <H1>My Name's Web Page</H1>
2. Right before the paragraphs you wrote in the last section, put in an H2 header that describes it (such as "All about me").

Fancier Text

Now that you know how to display normal text, paragraphs and headings, it's time to get a little bit fancier. Using just a few tags, we can make that text bolder, italicized, underlined, bigger, smaller or even a different color.

Notice how the following tags work:

Of course, the best ways to make something stand out are c o l o r and s i z e!

For this, we use the <font> </font> tags. Inside this tag, you can specify a color, a size, or both in the following way:

The color you use should be one from the table provided on the last page (as background colors for your BODY tag). The size can range from 1-7 with 1 the smallest and 7 being very, very large.

1. Change the color of the title heading you created on your page
2. Change the size of that title to be even larger than the H1 tag makes it (by using SIZE=7).

Other Tricks with Text

Bars: In several places on this page, you've probably noticed the horizontal lines stretching across the screen. You can include these lines in your page by typing <HR> ("horizontal rule") at each place where you would like one to appear. Like <BR>, <HR> does not require a closing tag since it has an instantaneous effect.

The line need not stretch across the whole page; try <HR width=75%>.

Alignment: To center a heading, or right-justify a paragraph, use one of the following two methods:

• The <CENTER> </CENTER> tags: Surround whatever you would like to be centered with these two tags.
• The ALIGN attribute: If you want to align a paragraph or heading, include the ALIGN attribute in the tag. For example, <P ALIGN=RIGHT> will begin a right-aligned paragraph. Be sure to end such a paragraph using a normal <P> tag, or everything else on your page will be right-aligned as well. The possible alignments are "RIGHT", "LEFT" and "CENTER".

Pre-formatted Text: If you cannot find a way to make your text appear correctly, you can always resort to using the <PRE> </PRE> tags. Any text placed between these two tags will appear exactly as you type it, including spaces, indentation and empty lines. Try not to use it very often, however, since the text will appear in a fixed-width font, will not flow naturally, and won't wrap at the edge of your window.

1. Center your title using either the <CENTER> </CENTER> tags or the ALIGN attribute in the header tag.
2. Place a bar underneath it by typing <HR> on the line below your title.

What you've done so far

At this point, you should have a web page that looks something like the one below. Don't forget to save your file and load it in Netscape to see what it looks like, as often as you like. If you don't understand one of the tags we've used below, or something is wrong with your web page, ask a TA for assistance.

What you write in HTML
<HTML> <HEAD> <TITLE> My Fabulous Web Page </TITLE> </HEAD> <BODY BGCOLOR="white" TEXT="black"> <H1 ALIGN=CENTER><FONT COLOR=BLUE SIZE=7>My Web Page</FONT></H1> <HR> <BR> <H2>All About Me</H2> <P>Hi. I'm a student in COS 109/111 at Princeton University. Studying takes up most of my day, but in my spare time I like to solve crossword puzzles and play the viola.</P> <P> Right now I'm learning how to make web pages so that I can go work for AOL and make millions.</P> </BODY> </HTML>
How it looks on your web page
My Web Page All About Me Hi. I'm a student in COS 109/111 at Princeton University. Studying takes up most of my day, but in my spare time I like to solve crossword puzzles and play the viola. Right now I'm learning how to make web pages so that I can go work for AOL and make millions.

If your page looks similar and you understand everything so far, go on to learn about lists, images, links, and sound.

Part 4: Using Lists

Lists are one of the best organizational tools that HTML provides for use on your web pages. They group text items into numbered, bulleted or indented lists, like this one:

• Ordered Lists
• Unordered Lists
• Definition, or Glossary, Lists
• Other Facts About Lists
• Adding lists to your page

Ordered Lists

Perhaps the most common type of list is the "ordered list." Within such a list, the web browser will automatically number and indent each list item for you. This way, you can add and remove and rearrange items without having to change your entire numbering scheme.

The first step in using any list is to let the browser know that you want to begin a list. For an ordered list, this is done by typing the <ol> tag in your HTML file. Usually, you'll just want to put it alone on an otherwise blank line.

Next, type <li> to indicate a list item. When displayed, this will start a new line with the correct number and indentation. Also on that line, type whatever you would like to appear next to that number.

When you have finished your first list item, you can follow it with however many others you wish by typing a <li> and some text for each.

Finally, when you are ready to finish the list, type in </ol> to close it.

Here is an example of an ordered list:

Unordered Lists

Unordered lists are nearly identical to ordered lists, except the browser does not automatically number the list items for you. Instead, it uses symbols such as a little box or a circle to mark each list item.

You can create an unordered list in the exact same way as an ordered list. Just use the <ul> </ul> tags instead of <ol> </ol>.

Here's a sample unordered list:

Definition Lists

Definition lists are somewhat different than ordered and unordered lists. Rather than long indented, bulleted lists, definition lists usually alternate between terms (enclosed in <DT> and </DT>) and indented definitions associated with those terms (enclosed in <DD> and </DD>).

Opening and closing a definition list is much like opening and closing any other list. Simply type <DL> to open one and </DL> to close it.

Within the list, you can use two different types of list items. To create a non-indented list item, surround some text with <DT> and </DT>. To create an indented list item, surround it with <DD> and </DD>.

Here's an example of a definition list. Note that the /DT and /DD tags can be omitted; the next DT or DD tag terminates the previous one.

Other Facts About Lists

• You can use any of the fancy text techniques (e.g., bold, italics, etc.) on the text in lists.
  
  
• Lists can be embedded within one another. That is, you can have lists within lists. This is done by opening the second list within a list item of the first list.
  
  
• Lists can be used to keep a group of hypertext links organized (just like at the top of each of these lab pages). You'll learn how to make hypertext links in the next section.

Here is a giant list sampler:

Adding lists to your page

Part 5: Adding Graphics and Sound

http://www.microsoft.com

Adding Graphics

One of the things that distinguishes an eye-catching sight from a mundane one is the clever use of pictures, or graphics. These graphics can come from many different places - you might draw them yourself on the computer using an art program, you might scan photographs, or under some circumstances you can take them from other web sites.

Important: Material on other web sites may be subject to copyright, and there are University restrictions on what you can do with copyrighted material, including images and sound. The law is evolving in this area and copyright holders are becoming more aggressive in asserting their rights (and sometimes more than their rights). You should be aware of the University's policy on fair use of electronic materials; in part, this says that although making copies of small segments of another's works for projects or papers is fair use, "Students may not display the segments publicly. For example, students may not place them on a personal, course, or group Web page that is unrestricted in access." You should be especially careful of images that might be of significant commercial value to their copyright owners.

For purposes of this lab, and in creating other web pages, you should add a citation for each image that comes from somewhere else, whether you link to it or use a local copy; this is directly equivalent to citing sources of quotations in a paper. This is also true for the sounds that you will add shortly.

In an upcoming lab you will learn more about graphics. For now you can just use some of the ones you've found on the Web, or any other picture you have on a computer. As long as the filenames of the pictures you are using end in ".gif" or ".jpg" the pictures should be able to be displayed.

First, you'll make a link to someone else's image without copying it onto your computer.

1. Find a graphic you like somewhere on the web.
2. Right-click on it and choose "View this Image"
3. Copy the URL listed in the "Location" box of your Netscape window
4. Type the following line into your HTML file to include this image:
   <IMG SRC = "The URL goes here">
5. Insert the URL you copied into the correct place.
6. If the image is copyrighted, add text that gives the location from which the file is being loaded.
7. Save and view your web page to make sure the picture appears correctly.

Next, you're going to display a picture which you've saved onto your computer.

1. Find a graphic you like somewhere on the web.
2. Right-click on it and choose "Save Image As..." in Netscape, or "Properties" in IE.
3. Save the picture in the same folder as your HTML file.
4. Type the following line into your HTML file to include this image:
   <IMG SRC = "the filename goes here">
5. Type in the name of the picture file in the appropriate place.
6. If the image is copyrighted, add text that gives the location from which the file came.
7. Save and view your web page to make sure your picture appears correctly.

Adding Sound to Your Web Site

In a later lab, you'll learn how to record, capture, and edit your own sounds. For now, however, we will be working with sounds that you find somewhere on the Web.

If you don't have the URLs for any sounds, go to a search engine and attempt to locate one. Good things to search for are the names of favorite music groups, movies, and television shows. There are usually many sites for such entertainment-related topics, and often they will contain sound files. There are also sound files on Windows; use Find / Files to look for possibilities.

CAUTION - you are only looking for ".WAV" files. Just as the web browser is only able to display certain kinds of picture files, by default it can only play sounds from certain kinds of sound files as well. You will know that you have an appropriate file (a "wav" file) because the last three letters of its filename (its extension) will be .WAV .

When you find a sound you like, use the following instructions to include it in your web page.

1. Move the mouse over the hypertext link which leads to the sound file
2. Right-click and choose "Save Link As..."
3. Save the sound in the same folder as your HTML file.
4. Type one of the following line into your web page to include it in your web page:
   • If you want it to be a link, type:
     <A HREF = "filename.wav">Here's a sound</A>
   • If you want it to play automatically, type:
     <EMBED SRC = "filename.wav">
5. Replace "filename.wav" with the name of your sound file.
6. Save your file and load it into Netscape to make sure it works properly.

Part 6: Adding Hypertext Links

Text Links within a page

Sometimes when you have a long web page, you may wish to make a relative link to another place on the page. The links in the list at the top of this page all link to headers within the page. This is accomplished with the <A> (anchor) tag.

Make a relative link by following these directions:

1. Right before your list of hobbies/interests, type in the following line:
   <A NAME = "hobbies">
   This will create an anchor called "hobbies".
2. Somewhere near the top of your page type in the following line:
   <A HREF = "#hobbies">A Link to my hobbies</A>
   This creates a link, or hypertext reference, to the "hobbies" anchor.
3. Save and reload your page to try out your new link.

Text Links to other pages

More often, you will want to link to other interesting sites. You should have a few URLs of web sites you think are interesting. To add a link to one of these URLs from your web site, type in the following: <A HREF="url"> Type your text here </A>

Any text that you type between the <A HREF> and </A> tags will be displayed in blue and be underlined. If the user clicks on this text, he or she will be brought to the URL you specified after HREF. For instance, to make a link to the White House, type in:

<A HREF="http://www.whitehouse.gov"> Click here for the White House! </A>

which will produce: Click here for the White House!

Try adding at least three hypertext links to your web site. If you have created more than one HTML file, you can link those together. You can also make a link from your pages to the CS109/111 home page, or to any other interesting web sites you have found. Don't forget that you can use a list to organize these links neatly.

Using Graphics as Hypertext Links

The final topic for this section is how to use pictures as hypertext links. You've already seen how to use the < A HREF> tag to turn text into a hypertext link. But what would happen if, instead of text, you used those tags to surround a picture?

<A HREF="http://www.princeton.edu"> <IMG SRC="pulogotrans.gif"></A>

would produce

"pulogotrans.gif" is the name of the file that the Princeton logo is stored under in our directory. We downloaded it from the University Center for Human Values web page .

The concept of using an image as a link is exactly the same as that of using text. There is something on the web page which the viewer can click on to go to the new location. From the technical viewpoint, there is no difference between it being a picture and it being text -- you just use slightly different tags.

1. Make one of the images on your page link to another page.
2. Try placing the attribute BORDER=0 inside the image tag to see what happens to your graphic link.

Part 7: Submitting Your Work

At this point, you should have a full-featured page with lists, links, headers, graphics, sounds and other neat things. At a minimum, the web page you create must have the following:

• A header with title
• A few paragraphs of text
• Your picture (or another photo)
• A relative link to another spot on the page
• At least three hypertext links
• A list (ordered, unordered or definition)

Take this time to fix up your web page and change it to look more like some of the ones you found attractive. If you want to know how a web site achieved a certain look, try viewing its HTML code by selecting "View | Page Source" in your Netscape Window while you are visiting that page.

As an added web experience, you are to take the file that you handed in for lab 1 and convert it into a web page. You can follow (or modify as needed) the steps above to create a basic web page. You will want to call this web page lab1.html and store it in the same directory where you stored index.html. You should add a link from index.html to lab1.html so that someone browsing your home page can read the results you got on lab 1. The text of lab 1 will make for a boring web page. To make things more interesting, play with colors, fonts, backgrounds, ..., to produce a more appealing web page displaying your results from lab 1.

If there are tags you do not understand or things you cannot figure out how to do, ask a TA for assistance. It takes a bit of experience to learn the HTML tricks used on the most attractive pages.

We will do some more work on HTML, especially for graphics, sound, and video, in later labs. Meanwhile, we will post links to all the web pages created for this lab so you can see what your friends have done (and vice versa).

Transferring saved work

You must also make sure your page is accessible. Be sure the file permissions are set properly on Unix. The best way to be sure is to ask a friend to view your page from their computer.

Submitting your work

When you are sure that your page is displaying correctly, send an email to cs109@princeton.edu or cs111@princeton.edu, telling us the URL of your page.. That URL should be "http://www.princeton.edu/~username" if you named your main page "index.html".

As usual:

• The subject of the message should be "Lab 2 - Your Name"
• Make sure that you are logged in as yourself when you send mail
• If you are using Netscape Mail, be sure to set your Identity first
• Make sure that you did the chmod commmand in Part 2
• If you used a different filename than index.html, please tell us so we don't have to hunt.

Logging off of Windows NT

If you've completed the lab, sent your email to cs109@princeton.edu or cs111@princeton.edu and transferred your work to your Unix account, then you are finished. Don't forget to log out.