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 anything 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 on any computer. But see the notes below if you are a Mac user and are having trouble making your web pages visible.

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

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

Web Pages and 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 -- Firefox, Internet Explorer, Safari, Opera -- 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.

public_html and index.html

The steps you took to create the HTML file during the first lab will be your starting point for this lab. This file is on your H: drive, which refers to a folder on an OIT Unix system. Princeton's servers are set up so that browsers can look at files stored in specific locations. The public_html directory that you set up last week is one such location.

In the first lab you created a file called lab1.html, which was accessed as http://www.princeton.edu/~your_netid/lab1.html. In this lab you're going to create and edit a file called index.html that will be stored in the same public_html folder. The name index.html is special because it is the default file that your browser will look for if you don't name a specific one. In other words, if you visit http://www.princeton.edu/~your_netid, the browser will automatically look for index.html because no other file is specified.

As we mentioned in Lab 1, HTML files are simply text files. This means you can use Notepad to edit and save them on Windows, or TextEdit on a Mac. If the latter, you must 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 "editor" to mean "Notepad on Windows or TextEdit on Mac OS X or any equivalent program."

Your index.html file has to be readable by everyone. There were some startup troubles in the first lab with making web pages visible, especially for Mac users; OIT describes this as "an outstanding issue", a euphemism for "a problem that we haven't been able to fix yet." If you are having trouble, here are some things to try:

1. Drag and drop your index.html file to your login directory on arizona. So far as I can see, this works if your "H:" drive is available, which it should be if you followed last week's instructions.
2. Log in to arizona with Terminal, and run the command

   ls -l

   to list the contents of your top-level dirctory on arizona. You should see index.html among the files.
3. Move the file to the public_html directory by running the command

   mv index.html public_html

4. Run the command

   wwwpublic

   to set the proper permissions on your web-page files so they can be read by anyone. You can run ls -l public_html to see if the files have the proper permissions, which should be something like rw-r--r--.

Remember that any information in your web page is by default visible to the entire world. At the least, this strongly suggests that you not put anything in your web page that you would not also publish on the front page of the New York Times. (It is also possible, by murmuring a suitable incantation, to limit access to computers on the Princeton network; I will be happy to provide the incantation upon request.)

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 your editor, 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, a browser may display 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.

Your home page will normally be called index.html, so if you already have a home page, it is probably already called index.html. In that case, name your COS 109 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. (The extension .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 for this lab.

Make sure you are saving your web page on your H: drive in your public_html folder. If you don't save it there, we can't find it and if you're on a cluster machine, you may lose your work.

BODY Attributes

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 never have to include attributes; 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. The file name can be a link instead, as described later.

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.

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, as shown in Lab 1. 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 wonder how we manage to display <BR> and <P> tags in plain text here. It would seem that if we were to write <BR> in an 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

To include headings in your web pages, with larger and bolder text that stands out, use 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, you 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 &). But 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 definitely 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 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, 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!</A>	Click here for Google!

Add two or more links to any sites you like; each link should include some text saying what the link is. Show the text of each 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

One 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.

An ordered list begins with the <ol> tag.

Each list item begins with the tag <li> ("list item"). When displayed, this will start a new line with the correct number and indentation. There can be any number of <li> tags.

Finally, the list ends with the tag </ol>:

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 or unordered list to add a "Top 5" list to your page. It can be anything: your top five movies, albums, books, food, or whatever.

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, you might upload 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...") Add an IMG tag that refers to the image: <IMG SRC="URL/filename"> (You can also get this name with Properties on Firefox.) Add text that cites 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 and Mac OS X; use Search / Files or Finder 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"), .MP3, and .MID. For this lab, please restrict yourself to WAV, MP3 or MIDI 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 or .MID (or maybe .MIDI).

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 originally 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 except for 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 four 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 find 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 in later labs, especially for graphics. Meanwhile, we will post links to the web pages created for this lab so you can see what your friends have done (and vice versa).

Submission

Make sure that everything you did is in public_html on your Unix account and that you have not accidentally saved any files only onto the Desktop or C: drive. (If you did the lab on a cluster machine, you can mail your index.html to yourself as a precaution.) Once you are sure that all of your files are in the correct place, view your web page in your browser by opening the following location:

http://www.princeton.edu/~your_netid

Make sure your page is accessible. Ask a friend to view your page from his or her computer. In case of trouble, review the suggestions at the beginning of this lab; in particular, you might have to run wwwpublic again.

When you are sure that your page is displaying correctly, send email to cos109@princeton.edu, telling us the URL of your page. That URL should be "http://www.princeton.edu/~your_netid" if you named your main page index.html, or "http://www.princeton.edu/~your_netid/lab2.html" if you named it lab2.html. The subject of the message should be "Lab 2 - Your Name".

© Bill Amend