Lab 2: Basic Web Pages

due 11:59 PM October 3

If you didn't get a confirmation message from OIT about your new cPanel account, check your Gmail spam folder. Google thinks the confirmation is spam in some cases.

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

• Create a simple web page
• Add images, sound and links to your web page
• Make your web page 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 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: Making Your Page Visible with cPanel
Part 8: Submitting your work

Checklist for submission
List of HTML tags and attributes
Barebones Guide to HTML
W3Schools web development tutorials and reference

Web Pages and HTML

A web page is a text document similar to lab1.txt but with two important differences. First, a web page is stored in a specific folder where it is visible on the web. Second, whereas lab1.txt is written so that it's easy for a person to read, a web page is written so that a browser can format it the way you want.

A web page is a text file written in HTML ("HyperText Markup Language"); it contains a mixture of content to be displayed and information about how to display it. As in the first lab you must use an editor like TextEdit or Notepad, this time to make a simple page by writing the text and markup directly. Web designers use CSS (Cascading Style Sheets) to ensure that all pages have a uniform appearance, and Javascript for dynamic effects. Both of these are beyond the scope of this lab, which focuses on what's really going on underneath.

You can use any browser. For the most part, browsers display straightforward HTML pages in the same way, but there are annoying differences in how various browsers treat complicated pages. Whether these differences arise from bugs or failure to follow standards, web designers must work around the differences, usually by sticking to things that work the same in all browsers.

index.html

Your first web page will be stored in a file called index.html. The name index.html is special: it is the default file that browsers use if you don't name a specific file.

HTML files are plain text files. Don't use Word. You can use Notepad or Textpad 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, or set "Plain text" in Preferences. When you do this, the ruler at the top of the window should disappear. You should also check "Ignore rich text commands in HTML files" under Preferences | Open and Save in TextEdit to allow you to reopen lab1.html as a text file if you have saved and closed it. From now on, we will use "editor" to mean "Notepad on Windows or TextEdit on MacOSX or any equivalent program."

[Some lab assistants recommend TextWrangler as a good editor for Macs. You might give it a try. You could also use pico, via the Terminal window.]

You will develop the contents of the web page on your own computer, then upload the final result to an OIT computer that will make it visible to other people. Remember that any information on your web page is by default visible to the entire world. At the least, this strongly suggests that you should not put anything on 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 help with incantations upon request.)

Viewing Your Work

It's dead easy to view the contents of an HTML file in a browser: use the File / Open File menu to navigate to your file, or type its filename in the URL entry box as file:///path_to_file.

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 on your computer ("cached") rather than retrieving a new version. Caching is generally helpful, but sometimes it gets in the way. To be absolutely sure you're looking at the latest version, you may have to force the browser to reload in spite of its cache; indeed, under some unusual circumstances, you might need to hold down the Shift key while Reloading to force an uncached copy of images.

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.

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 a <BR> tag, which causes a line break: text after it will be on a separate line. 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 chunks of text it separates. Here's an example:

Escape Codes

At this point you might wonder how we display <BR> and <P> tags in plain text. 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. For example, to display <BR> in an HTML document you 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 א.

Headings

To include headings in your web pages, with larger and bolder text that stands out, use the <Hn> </Hn> tags. Replace "n" 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. 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, as in <P ALIGN=CENTER>.

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

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

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

Add a link near 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, so you can add, 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 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:

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.

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 you want to use an object or work, which may include an image, a background pattern, a section of text or a musical, film, television show, 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. (A few sites may try to prevent you from linking, however.)

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 Images

One of the things that distinguishes an eye-catching site from a mundane one is the clever use of pictures, or images. These images can come from many different places -- you might draw them yourself, you might upload photographs, and under some circumstances you can take them from other web sites.

In an upcoming lab you will learn more about how images work. For now you can use images you find on the Web, or any other picture you have on a computer, perhaps from your phone or camera. As long as the filenames of the pictures you are using end in ".gif", ".jpg" or ".png", the pictures will be displayable.

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

Find an image you like somewhere on the web. Determine the URL. For example, in Firefox, control-click or right-click on the image and select "Copy Image Location", then paste into your document. In Chrome, it's "Copy Image URL" and it's "Copy Image Address" in Safari. 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 locally:

Find an image you like somewhere, subject to the copyright concerns discussed above; images from any Princeton web site should be fine, and your own pictures are fine. Control-click or right-click as above, but save the picture in the same folder as your HTML file. Type a line like this into your HTML file to include the image: <IMG SRC="image_filename.jpg"> 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 MacOSX; 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 a 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, use MP3 or MIDI files because they're smaller. 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 .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 file in the same folder as your HTML file. Type 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 Images 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 some other page. Place the attribute BORDER=0 inside the IMG tag to see what happens to your graphic link.

You have to set up your cPanel site before you can make your index.html visible. Begin by reading http://helpdesk.princeton.edu/kb/display.plx?ID=1123. You can then request access with this link: http://oitdas.mycpanel.princeton.edu/mycpanel_request.php.

Once this has been set up (which should take only a few minutes), you can access your cPanel control page at

	your_netid.mycpanel.princeton.edu/cpanel

Use the Getting Started Wizard on that page. You can safely ignore almost all of the decisions; just click through to see what's involved. You could include "Access Web Disk" for later use, but it's not required. Skip webmail and ssh keys for now.

Use the File Manager icon to upload your index.html file. Do these steps to put upload a new file:

	log in to your_netid.mycpanel.princeton.edu/cpanel
	click File Manager
	select Web Root (public_html/www)
	click public_html on left
	upload file to that (leave the modes alone)

Once you have uploaded the file, it should be visible to the whole world as

	your_netid.mycpanel.princeton.edu/filename

Again, make sure that the uploaded files only contain information that you wish to share with the whole world.

For now, it's easiest to put your files at the top level in your cPanel file system, though ultimately it might make more sense to have separate folders for different labs.

You will notice that there are several icons for creating new files and for editing files that have been uploaded. Feel free to experiment with these, but don't use the HTML Editor to edit your own files for this lab; the goal here is for you to learn what's happening underneath. Plain "Edit" is best. Bear in mind that if you edit the uploaded version, your changes won't have any effect on the file on your own machine, so watch out for inconsistent versions.

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 achieves a certain look, examine its HTML code by selecting "View | Page Source" or equivalent 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 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 grossly different, you might want to try to make it more uniform.

We will do more HTML in later labs, especially for images. 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 your page, including the images and sound, is accessible at http://your_netid.mycpanel.princeton.edu. Ask a friend to view your page and check all the links from his or her computer. You will have to make sure that any image or sound files that you added are also readable. Use the cPanel web interface to adjust permissions if necessary.

When you are sure that your page is displaying correctly, upload your index.html file to the CS dropbox at http://dropbox.cs.princeton.edu/COS109_F2014/Lab2. There's no need to upload the other files; we'll look at your cPanel page.
 

© Bill Amend