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. If you already have a web page, you can link to your lab work from it.

This lab can be done from any computer.

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

Designing a Web Page

A web page is a text document written in a language called HTML; it contains a mixture of content to be displayed and information about how to display it. In this lab, we'll explain how to use HTML to create your own web pages. We're only covering 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 valuable to understand what's really going on underneath.

What is HTML?

HTML is an acronym for Hypertext 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 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 / before the name. For example, the tag pair <i>...</i> italicizes whatever it surrounds:

In this example, the tags around "lazy" 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 the browser to start italicizing all text. The second one (with the forward slash "/" before the "i") tells the browser to stop italicizing. 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, stand by themselves. 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 these two commands exactly as written here

  	mkdir public_html .
  	chmod 755 public_html
  

OIT provides further advice on setting up the directory and setting permissions; if you're having trouble, check it out.

As you do this lab, bear in mind that everything you put in your public_html 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 on Windows, or if you're using a Mac, you can use the standard text editor there.

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

• Save all files in the public_html directory you just created. If you only save them locally or on a cluster machine, no one else can see your web page, including the grader, and you will lose them if they're only on a cluster machine.
• 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 at the URL http://www.princeton.edu/~yourname/index.html.
• Once you have accessed your web page in Netscape and you wish to revise 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 if something is not working right.
• Have fun!

Important Advice

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. (This is analogous to the fact that Windows Explorer may not show you the latest file you created unless you press View | Refresh.) It is very likely that at some point during this lab you will find yourself staring at your page in Netscape, wondering why the changes you just made had no effect. When this happens, smack yourself on the forehead and do a Save and Reload.

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, it ain't necessarily 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; indeed, under some unusual circumstances, you might need to hold down the Shift key while Reloading to force an uncached copy.

• 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 named cat.jpg, you might try <BODY BACKGROUND="cat.jpg" 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 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.)

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 insert 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. Use 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 other symbols which can cause trouble. Still others, including accented letters like é and ñ, 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. One especialy useful escape is &nbsp;, which produces a "non-breakable space", that is, a blank that does not go away. You can use it to force a blank or to keep two words together.

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 of background colors for the 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.

Tables: Our tabular displays are created with the <TABLE> tag; it's one of the topics of the next lab.

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 Microsoft 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 Microsoft and make millions.

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

• 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 <li> and some text for each.

Finally, when you are ready to finish the list, type </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 the same list, unordered:

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 section of this lab). You'll learn how to make hypertext links in the next section.

Here is a list sampler:

Adding lists to your page

http://www.microsoft.com

Very Important: Material on other web sites may be subject to copyright, and there are both legal and 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 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 "15. With regard to material on the World Wide Web, if there is an image, a background pattern, a section of text or a musical, film or video selection which you would like to publish yourself on the Web (or elsewhere), you must first obtain permission of the owner or copyright-holder. You are free to establish links to Web pages you enjoy and which you would like to share with others. But you are not free to copy the work of others to publish yourself on the World Wide Web (or elsewhere) or to redistribute the work of others via servers, e-mail or other means without authorization and proper attribution."

You should be especially careful of images or sounds that might be of commercial value to their copyright owners. If a site has an explicit copyright notice, you should not copy anything from it.

For purposes of this lab, and in creating other web pages, you should add a citation for each image or sound that you link to or copy; this is directly equivalent to citing sources of quotations in a paper. If there is any ambiguity in whether a sound or image is copyrighted, use a link, not a local copy.

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.

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 an 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. 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, subject to the copyright concerns discussed above.
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, that is, public_html.
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. 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

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 Search / Files to look for possibilities. And of course there are file-sharing systems like Kazaa; re-read the discussion of copyright above.

Sound files come in a variety of formats, including .WAV ("wave") and .MP3. For this lab, please restrict yourself to .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 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.

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, like the links before each part of this document, so that readers may move around easily. This is accomplished with another form of 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, add 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, add:

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

which will produce: Click here for the White House!

Add 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. 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="pusmall.gif"></A>

would produce

"pusmall.gif" is the name of the file that contains the Princeton name and logo. We downloaded it from the University's web site.

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

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

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

	~cs109/check2

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, or "http://www.princeton.edu/~username/lab2.html" if you named it lab2.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 mkdir and chmod commmands in Part 2
• If you used a different filename than index.html, please tell us so we don't have to hunt.

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 if you're using a cluster computer.