Lab 2: HTML and Web Pages

Thu Oct 8 16:37:44 EDT 2009

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

If you had trouble making your web page visible in Lab 1, please consult with OIT's help desk, because you will have to make another page visible in this lab.

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 ideas that you could look up the details and work with them.

This lab can be done on any computer anywhere.

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.


Part 1: Introduction

Web Pages and HTML

As you saw in the first lab, 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 expand the web page you started in Lab 1. As in the first lab you'll use Notepad or another editor to make simple pages by writing the text and tags directly. There are tools like Dreamweaver and Front Page 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.

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, Chrome -- 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, 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 lab1.html 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 someone visits 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 or Wordpad 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 may have been some startup troubles in the first lab with making web pages visible, especially for Mac users. If you are having trouble, ask a TA to help you walk through the steps.

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 possible, by murmuring a suitable incantation, to limit access to computers on the Princeton network; I will be happy to provide an incantation upon request.)

Checking Your Work

As you develop your web page, you should check its appearance in your browser frequently. If you check each change as you make it, you can see its effect right away, and quickly isolate the source of any problem. If you make a lot of changes at one time, it's harder to trace a problem to any particular change.

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.


Part 2: HTML Framework

The next few sections will help you create your own web page. As noted in Lab 1, the skeleton of any web page is like this:

<html>
  <head>
    <title> Title of the Web Page Goes Here </title>
  </head>
  <body>
    Content of the Web Page Goes Here
  </body>
</html>
The text between < and > is called a "tag". Tags can be written in upper case or lower case; we will use upper case here to make them stand out.

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.

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. It might include the author's name, keywords, and a summary of the file. These things are not displayed by the browser, though they may be used by search engines and other programs.

One exception to this invisibility rule is the page title. If you look in the title bar 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.

Finally comes the BODY section. Everything in this section will be displayed in the main window of your browser.

Create your initial index.html file in public_html. You can copy and paste the template above and put it in a file as you did in Lab1, or you can copy your lab1.html and edit it, or you can re-type it yourself.

Home pages are normally called index.html, so if you created a home page from some other course or something else you did, you may already have a web page called index.html. (This is not the lab1.html file that you created in the first lab.) 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, that can be included 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, <BODY BGCOLOR="blue"> instead of just <BODY> will make the background color of your page blue.

The most popular attributes of the BODY tag are:

Name Value Effect
TEXT a color changes the color of all normal text
BGCOLOR a color changes the background color
BACKGROUND a filename displays an image file as the background

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 some named colors; you can get others by specifying their red, green and blue components, which we'll explore in the next lab.

Available Colors
YELLOW GREEN BLUE RED WHITE
GOLD AQUAMARINE MIDNIGHTBLUE PINK SILVER
ORANGE TURQUOISE PURPLE LAVENDER GRAY
BROWN SKYBLUE MAROON BEIGE BLACK

Add some attribute(s) to the BODY tag, for example <BODY BGCOLOR="white" TEXT="black">. If you prefer other colors or an image, change them now. You can try hexadecimal values for more color choices; use six hex digits for the color, as in BGCOLOR="00aaff".

The Entire Framework

That's everything you need to know to create a basic HTML file. Everything else in today's lab is about how to create actual content for your web page, all of which will go between the <BODY> and </BODY> tags.

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.

HTML Framework
<HTML>
<HEAD>
<TITLE>
Title of the Web Page Goes Here </TITLE>
</HEAD>
<BODY BGCOLOR="white" TEXT="black">

    (All the content of your web page - what you want your viewers to see in their main window - will go here.)
</BODY>
</HTML>


Part 3: Text

Regular Text and Paragraphs

Many web pages, including this one, mostly contain just plain text. So long as you keep a few important rules in mind, you can type text into the BODY section of your file, save it, and that text will be displayed on the web page.

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:

What you write in HTML How it appears on your web page
The     cat   sat

on   the
  mat.
The cat sat on the mat.
The cat sat <p> on the mat. The cat sat

on the mat.

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 code &lt; stands for < ("less than"), &gt; stands for > ("greater than"), and &amp; stands for & (ampersand).

Note that the semicolon is part of the escape code; if you omit it, things won't work.

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 space that does not go away. You can use it to force a space or to keep two words together on one line. There's a complete list of escapes at this site. Finally, you can include any Unicode character as &#xhhhh;, where hhhh is the hex value, or in decimal by omitting the x. For instance, &#x05D0; and &#1488; both produce the Hebrew character alef א; for more, see 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.

What you write in HTML How it appears on your web page
<H1>This is an H1 heading.</H1>
<H2>This is an H2 heading.</H2>
<H3>This is an H3 heading.</H3>
<H4>This is an H4 heading.</H4>
<H5>This is an H5 heading.</H5>
<H6>This is an H6 heading.</H6>

This is an H1 heading.

This is an H2 heading.

This is an H3 heading.

This is an H4 heading.

This is an H5 heading.
This is an H6 heading.

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.

What you write in HTML How it appears on your web page
<B>This tag makes text bold!</B> This tag makes text bold!
<I>This tag italicizes text!</I> This tag italicizes text!
<U>This tag underlines text!</U> This tag underlines text!
<TT>Here's some fixed width text!</TT> Here's some fixed width text!

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.

What you write in HTML How it appears on your web page
<FONT COLOR="blue">This is blue text!</FONT> This is blue text!
<FONT SIZE=5>This is big text!</FONT> This is big text!
<FONT COLOR="red" SIZE=6>This is really big red text!</FONT> This is really big red text!

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. You can also use relative sizes, like size=-1 and size=+1.

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. 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 (though 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.

Include some escape codes, and combine effects like style and color changes.


Part 4: Links

Now that your web page is 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 Resource Locator). A URL is a string of text consisting of a domain name like www.google.com, prefixed by http:/// and sometimes followed by other information, that tells the browser know where to go. To create a link in a web page, use the A ("anchor") tag and the HREF attribute:

     <A HREF="http://URL">Caption for link</A>
Any text that you type between the <A HREF...> and the </A> will be displayed in blue and be underlined. For instance, to make a link to Google, add:
     <A HREF="http://www.google.com">Click here for Google!</A>
which will produce Click here for Google!

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 sites you like; each link should include some text saying what the link is.

Text links within a page

Sometimes you want to make separate sections of a page directly accessible, for example to create an index of page contents with links (like the list of parts at the beginning of this lab). To do this, you must first mark the target of any links by creating an anchor. An anchor is an HTML tag that gives a specific place on your page a name so that it can be referred to from somewhere else. Anchors use the same <A> tag pair as regular links. To create an anchor, write
     <A NAME="anchorname"></A>
immediately in front of the place you want your link to point to. For example, the top of this page has an anchor called top before the introduction section. This anchor looks like this:
     <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 link, the browser 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.


Part 5: Lists

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, so 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>:

What you write in your HTML file
How it looks on your web page
<ol>
<li> COS 109 problem set
<li> Call home
<li> Sleep
</ol>
  1. COS 109 problem set
  2. Call home
  3. Sleep

Unordered Lists

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

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

What you write in your HTML file
How it looks on your web page
<ul>
<li> COS 109 problem set
<li> Call home
<li> Sleep
</ul>
  • COS 109 problem set
  • Call home
  • Sleep

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.


Part 6: Graphics and Sound

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 can be 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 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.

We won't do video in this lab, but everything here applies to video clips as well, though the file types will be different.

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", ".jpg" or ".png", 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">
    (You can also get this name with Properties on Firefox.)
  • Add text that cites the 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 that you have 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

    For now, we will be working with sounds that you find somewhere on the Web. If you don't have the URLs for any sounds, use a search engine to locate one. 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. Do not use any copy of a popular song, for example.

    Sound files come in a wide 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>
    
    would produce

    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 some other page.
  • Place the attribute BORDER=0 inside the IMG tag to see what happens to your graphic link.

  • Part 7: Submitting Your Work

    At this point, you should have a page with lists, links, headers, graphics, sounds and other neat things.

    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, one of which is an image
  • 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.

    You might also find it interesting and even instructive to view your web page with more than one browser; it's sometimes surprising 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 a local drive. (If you did the lab on a cluster machine, you can mail your index.html and other files 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
    (replacing your_netid with your own netid). If you already had a home page and named your file lab2.html, make sure that your original home page has a prominent link to lab2.html.

    Make sure your page, including the graphics and sound, is accessible. Ask a friend to view your page and check all the links from his or her computer. In case of trouble, review the suggestions in Lab 1. You will have to make sure that any image or sound files that you added are also readable. The wwwpublic command should do this, but you can also log in to Arizona via PuTTY or SSH and do this:

       cd public_html
       chmod +r *
    
    This makes all the files readable by anyone, so be sure that's your intent.

    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 and netid".

    Send the mail from your Princeton account, not your gmail account. That way we know who you are.
     


    © Bill Amend