Lab 2: HTML and Web Pages

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

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

In this lab and the next you will be given a lot of information. You don't have to memorize the nitty gritty details of every part but you should become comfortable enough with the material that you could look up the details and work with them.

This lab can be done from any computer. If you use a Mac, here's how to connect to your H: drive.

Part 1: Introduction
Part 2: HTML Framework
Part 3: Text
Part 4: Links
Part 5: Lists
Part 6: Graphics and Sound
Part 7: Submitting your work

Checklist for submission
List of HTML tags and attributes
Barebones Guide to HTML
OIT's Web publishing page

In this lab, we will highlight instructions for what you have to submit in a yellow box like this one.

What is a Web Page and What is HTML

With that in mind, we're going to show you how to build up a web page while explaining how web pages work. You can use any browser -- Netscape, Internet Explorer, Safari, Opera, Mozilla, to taste. For the most part, browsers display straightforward HTML pages in the same way. However, there are annoying differences in how various browsers work when it comes to complicated pages. Whether these differences arise from mistakes or failure to follow standards is irrelevant. In the end, web designers must work around the differences, usually by sticking to things that work the same in all browsers.

Where Are Web Pages

Editing HTML Files

Note: If you are using Mac OS X's standard text editor (TextEdit) you must change one setting. TextEdit uses the RTF format. This allows TextEdit to provide functionality that is normally limited to word processors like Microsoft Word; however, files saved in RTF cannot directly be used as web pages. If you are using Mac OS X, you must first tell TextEdit to use plain text format. Do this by opening a new text file, then select "make plain text" from the Format menu. When you do this, the ruler at the top of the window should disappear. From now on, we will use the word "Notepad" to mean "Notepad on Windows or TextEdit on Mac OS X or any equivalent program."

Open Notepad. Select "Save as" from the File menu. Navigate to your public_html directory on your H: drive and save the file as index.html.

Your index.html file has to be readable by everyone. If it is not, you can make it readable by running the Unix command chmod +r index.html. If you have not previously made a web page, or are having trouble making the page visible, run the Unix command wwwpublic once to set things up correctly. Ask one of the TAs for help if things aren't working.

Checking Your Work

It is very likely that at some point during this lab you will find yourself staring at your page in your browser, wondering why the changes you just made had no effect. When this happens, recall that to see the effect of the most recent changes, you must first save the file in Notepad, and then reload the just-saved file in your browser.

Finally, you might think that if you start up a new copy of a browser, 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, browsers often use 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 of graphics.

Make sure you are saving your web page on your H: drive in the public_html folder. If you don't save it there, your grader will not be able to find it and (much worse) you may lose your work.

Save your main web page as index.html. NOTE: If you already have a home page, it is probably already called index.html. If so, you can name your COS109 home page lab2.html and make your original home page link to it (as described here).

Each HTML filename must end with .html; browsers expect that. (.htm is often allowed as an alternative but don't use it here.) Also note that Unix file names are case sensitive. Use lower case in this lab.

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 not displayed by the browser, though they may be 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 browser 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 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.

Type <HEAD> underneath the <HTML> tag to begin the HEAD section. On the line below that, type <TITLE> to begin the title of your page. Type in a title. Type </TITLE> to indicate the end of your title. 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, which we'll explore in the next lab.

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 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 tag yourself.)

Regular Text and Paragraphs

However, there are some key differences. First and foremost is the fact that line breaks have to be explicitly marked with the <BR> tag. Since we went over this in Lab 1, we won't dwell on this point. Besides using <BR> to separate text you can also use the <P> or paragraph tag, which not only starts a new line but also puts an empty line between the two bodies of text it separates. Here's an example:

At this point you might be asking yourself how we manage to display <BR> and <P> tags in plain text here. It would seem that if we were to write <BR> in our HTML file, it would insert a break rather than showing the literal text "<BR>". The secret is to use "escape codes" to represent certain symbols that have special meanings in HTML. These codes simply replace the character you want to write, so, for example, to display <BR> in an HTML document you would actually write "&lt;BR&gt;". The escape &lt; stands for <, &gt; stands for >, and &amp; stands for &.

Other symbols, including accented letters like é and ñ and symbols like ©, are not found on the keyboard and so are difficult to include. Again, we use escape codes like &eacute;, &ntilde; and &copy;. One especially 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 on one line. There's a complete list of escapes at this site.

Headings

You will often want to include headings in your web pages, with larger and bolder text that stands out. 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.

Always close your header tag (using the appropriate closing tag) or the rest of your page will be displayed in the larger, bolder text. The closing tag must match the opening tag. If you open with <H2>, you must close with </H2>.

Text Style, Size and Color

With a few tags, we can make text bold, italicized, underlined, bigger, smaller or even a different color.

To display colored text or change the size of the text, use <FONT>. The <FONT> tag doesn't do anything by itself, but it allows you to set the size and color of text through its attributes. The following table shows how to use the <FONT> tag.

The color 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.

Other Text Tags

Lines: You've probably noticed the horizontal lines that separate sections of these instructions. You can include such 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 a paragraph, use the <CENTER> </CENTER> tags to surround whatever you would like to be centered. You can also use the ALIGN=RIGHT or ALIGN=CENTER attribute with headings and paragraphs.

Pre-formatted Text: If you cannot find a way to make your text appear the way you want, 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 (but you need escape codes for <, > and &). 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.

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

Using these tags write two or three paragraphs about yourself or some fictional person. It's quite ok to invent a persona if you prefer not to publish personal information on the web; this part is just to use some of the things that you've learned during this section of the lab. Try to use the tags outlined above whenever appropriate. For example, you can title your page and make that title stand out by using the header tags in combination with the alignment tag. Include some use of escape codes, and combine effects like style and color changes.

Part 4: Links

Now that you've got your web page up and running with a colorful background and formatted text, it's time to learn what makes the World Wide Web a "web". Hyperlinks, or more commonly just "links," are cross-references from one web page to another, or to another part of the same page. They form the foundation of the Internet because they allow you to navigate and find information without knowing the exact location of what you're looking for. For example, you may not know the name of the file on www.cnn.com that contains an article you want to read, but you can still get to it by clicking on the link to www.cnn.com.

Text Links to Other Pages

Most often, you will want to link to other interesting sites. The address of a site is called its URL (Universal Record Locator). A URL is a string of text consisting of a domain name like www.google.com, sometimes followed by other information, that tells the browser know where to go. To create a link in a web page, you use the A tag and the HREF attribute:

     <A HREF="http://URL">Caption for link</A>

     <A HREF="http://www.google.com">Click here for Google!</A>

What you write in HTML	How it appears on your web page
<A HREF="http://www.google.com>	Click here for Google!

Find a web site related to your home town or any other interesting place. Write a sentence describing what the site is and make that sentence or part of that sentence a link to the site. (This should be in a separate paragraph from your earlier paragraphs.) Show the text of the link as well, as in the left side of the table immediately above.

Text links within a page

     <A NAME="anchorname"></A>

     <A NAME="top"></A>

To link to an anchor, use an HREF with a # and the anchor name you want to point to, as in the table below. When you click on the following link, it will find the "top" anchor and send you directly there.

What you write in HTML	How it appears on your web page
<A HREF="#top">Click here for the top of this page.</A>	Click here for the top of this page.

Note that the # is included in the HREF link, but not the anchor NAME itself. You can also link to an anchor in another page; just add the #name to the end of the link, like this link to the first lab's section on Unix.

Add a link to the bottom of your page that returns you to the top.

We will be using two different kinds of lists in this lab, ordered and unordered. Both have beginning and ending tags that bracket the entire list, and inside those tags they have tags that mark individual items. All of the techniques for formatting text that you've learned above can be applied to text in lists, including lists within lists, and of course there can be links in lists.

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.

To begin a list, type the <ol> tag. Usually, you'll just want to put it 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 as many others as you wish by typing <li> and some text for each.

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

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 box or a circle to mark each list item.

You can create an unordered list in the same way as an ordered list. Just use the <ul> </ul> tags instead of <ol> </ol>. Here's the same list, unordered:

Use an ordered list to add a "Top 5" list to your page. It can be anything: your top five movies, albums, books, food, ...; feel free to come up with your own. If you can't bring yourself to say that one thing is better than another, use an unordered list to write down 5 things you like in any category.

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 very aggressive in asserting their rights (and sometimes more than their rights). You should be aware of the University's policy on intellectual property rights.

In part, this says

"If there is an image, a background pattern, a section of text or a musical, film or video selection that you would like to use, you should make a good faith effort to determine that such use constitutes a "fair use" under copyright law or you must obtain permission of the owner or copyright-holder. As a general matter, you are free to establish links to Web pages you enjoy and which you would like to share with others. But you are not generally free to copy or redistribute the work of others on World Wide Web (or elsewhere) without authorization and proper attribution."

Accordingly, 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 about 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 site 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 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 displayable.

First, make a link to an image without copying it onto your computer:

Find a graphic you like somewhere on the web. Right-click on it to determine the file name (e.g., by selecting "Save Picture As...") Copy the URL of the page containing the image and append the file name of the image itself into the HTML file you are creating: <IMG SRC="the URL goes here/the file name goes here"> Add text that gives URL from which the image file is being loaded.

Save and view your web page to make sure the picture appears correctly.

Next, display a picture which you've saved onto your computer:

Find a graphic you like somewhere, subject to the copyright concerns discussed above; graphics from any Princeton web site should be fine. Right-click on it and save it locally (e.g., by selecting "Save Picture As..."). Save the picture in the same folder as your HTML file, that is, in public_html. Type the following line into your HTML file to include this image: <IMG SRC="the image file name goes here"> Add text that gives the URL from which the image file came.

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. Re-read the discussion of copyright above before you choose a sound file.

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

When you find a sound you like that raises no copyright issues, use the following instructions to include it in your web page.

Right-click on the link which leads to the sound file, and save the sound in the public_html folder. Type either one of the following lines into your web page to include the sound file in your web page, where filename.mp3 is the name of the file: If you want it to be a link, type: <A HREF="filename.mp3">Here's a sound</A> If you want it to play automatically, type: <EMBED SRC="filename.mp3"> Add text that gives the URL from which the sound file came.

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>

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.

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

At a minimum, the web page you submit must have the following: A header with title A few paragraphs of text with style, size and color changes At least three hypertext links A relative link to another spot on the page An ordered or unordered list Some image Some sound

If your page looks a bit lame, you're welcome to fix it up and make it look more like ones you found attractive. If you want to know how a web site achieved a certain look, examine its HTML code by selecting "View | Page Source" in your browser window while you are visiting that page. 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.

You might also find it interesting and even instructive to view your web page with more than one browser; it's sometimes surprising to see how even simple things look different, and if something is really different, you might want to try to make it more uniform.

We will do some more work on HTML, especially for graphics and sound 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).

Transfer saved work

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 his or her computer.

Submit

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

As usual:

• Make sure that you are logged in as yourself when you send mail.
• The subject of the message should be "Lab 2 - Your Name".
• Make sure that you did the mkdir and chmod or wwwpublic commmands in Lab 1.

If you've completed the lab, sent your email to cos109@princeton.edu and transferred your work to your Unix account, then you are finished. Log out if you're using a cluster computer.