CPSC 120: Principles of Computer Science, Fall 2002

Lab 4: More About Web Pages, plus Some Linux


IN THIS LAB, we take a break from The Most Complex Machine to spend more time learning about Web pages. You should already know the basics of HTML from Lab #1. If you haven't already done it, you should read about HTML in Section 6.2 of my on-line Java textbook.

The exercise for this lab is to construct a Web page that uses at least one HTML <table> and that uses a background image that has been modified using the Gimp image processing program. This page must be linked to your main web page, index.html. That is, I should be able to go to your main Web page and click on an obvious link to get to the new page. For full credit, the way the table is used should not be too simple, and the background image and text color should be chosen so that the text is easily readable. The information you need to do all this is contained in the rest of this Web page. I will not grade this exercise until Saturday, October 5.

The Linux Operating System

Computers are used to run applications such as word processing programs and Web browsers. But in addition to these "applications programs," a computer also needs an operating system. Operating systems are one of the topics in Chapter 5 of the textbook. An operating system is the basic software that has ultimate control of the computer. The operating system starts running when the computer is turned on. It is responsible for communicating with the user, and it makes it possible for the CPU to work with all the other devices in the computer. Most people use the Macintosh operating system or one of the many different Windows operating systems. Linux is another operating system. Linux is free both in the sense that you can use it without paying any money for it and in the more important sense that it can't be taken over or controlled by anyone. (Linux users like to talk about the difference between free as in "free beer" and free as in "free speech.")

Linux is used by the Computer Science Department, and the computer that holds your www and homework directories runs Linux. You've already used Linux indirectly when you used those directories under Windows. As part of the lab today, you'll get some experience using Linux. You can log on to Linux in much the same way as you can log onto the Windows network. Your Linux user name is the same as your Windows user name. However, you will need a different password. At the lab, you will be given a card with your password.

The Computer has a small lab of Linux computers in Room 310 Lansing Hall. You will be able to log on to those computers using your Linux password. However, in this lab, you will be accessing Linux from your Windows account, using a program called X-Win32. To start this program, find it in the "Programs" sub-menu of the Windows "Start" window. When you select the "X-Win32" command from the menu, a small "X" should appear on the right end of the task bar at the bottom of the screen. When you click on the "X", you should see a menu of computer names. The Computer Science Department's computers are called CSLAB0, CSLAB1, ..., CSLAB9. Select one of these computers from the menu. (Try to pick one at random, so we don't get too many people using the same computer.) You should get a log-in screen with a place to enter your user name and password. This is the same screen that you would see if you used the computers in Lasing 310. In fact, you are actually using one of those computers. The Windows computer is just acting as an interface.

Enter your user name and assigned Linux password. Press return, or click the "Go" button. After a short delay, you will see the Linux desktop. Actually, Linux has a choice of several desktops. The one that we use by default is called the KDE. KDE is highly configurable, which is fortunate since I find the default configuration to be rather ugly. A lot of applications are available. You might want to explore the pop-up menu at the lower left of the desktop. This menu plays the same role as the Start menu in Windows. We will look at only a very few aspects of Linux in this lab. If you want to learn more, take a look at http://math.hws.edu/eck/about_linux/. One bit of configuration that I recommend is this: Go to the Linux Start menu, and select the "Control Center" command. In the window that opens, click on "Look & Feel" and then on "Menu settings" under that. Change the setting "SuSE menu" to "Standard KDE menu" and click "Apply" at the bottom of the window. This will change the Linux Start menu to a "K" menu that contains more commands. (If you want the desktop to look better, try the "Theme Manager" under "Look & Feel" in the Control Center.")

home directory icon When you first log in, you will see some windows that allow you to configure Linux. You can close them (or take a look at what they have to offer). To see the contents of your Linux account, click the Home Directory icon, which is shown to the left. You'll find it at the bottom of the screen. This will open a directory window that will contain your homework and www folders and a few other things. Click once on a folder to see what's inside it. (KDE is, by default, a single-click environment. You should single-click on things to open them, not double-click.) The directory will look something like this:

home directory

Click once on www to open your www folder and see the files that it contains. If you want to organize your work into sub-folders, you can create a new folder as follows: Right-click a blank area in the directory window. In the pop-up menu, go to "Create New" and then select "Directory" in the sub-menu. Similarly, you can create a new text file by selecting "Text File" from the sub-menu. If you want the text file to be a Web page, give it a name that ends in ".html", and don't use any spaces or other funny characters in the name.

If you want to edit a file, right-click on its icon, and select "Open with" from the pop-up menu. This will make a dialog box appear. There are several editors that you can use, or you can enter the name of an editor in the text-input area at the top of the dialog box. I like an editor named nedit. To use it, type nedit into the dialog box an press return. When you use nedit with an html file, you'll notice that it uses colors to make it easier to see the structure of the html code. You can use nedit to create your web page for this lab (although you can also do it from Windows if you want).

Linux has several different Web browsers. There should be a link on your KDE desktop that will open the KDE's own Web-browsing program, Konqueror. There should also be a link to Mozilla, a free Web browser similar to Netscape. You can use one of these browsers to view this page and possibly to download images for your Web page.

Very Basic Image Editing

Part of the assignment for this lab is to make a web page that has a background image. Any image file whose name ends in jpeg, jpg, gif, or png should be usable as a background image. However, a good background image should not interfere with the text on a page. A image that is too colorful is likely to make any text displayed over the image almost unreadable. If you view this page on-line, you'll see that it has a rather subtle background image. This image was made from a brightly colored original by adjust its color levels. I did this using a free program named Gimp (the GNU Image Processing program). Gimp is a free program (in both senses) that is available for both Windows and Linux and offers many of the same capabilities as the commercial program, Photoshop.

To make the background image for your page, you should obtain an image and adjust its colors using the Gimp. One place to get some nice free photographs is http://www.3dcafe.com/asp/photographs.asp. To save an image off a Web page, right-click the image and choose a command such as "Save Image As" from the pop-up menu. For use on a Web page, save the image in your WWW directory.

To edit an image with the Gimp under Linux, right-click the icon of the image file and choose "Open with" from the pop-up menu. Enter "gimp" in the dialog box that appears, and press return.

A lot of the functionality of the Gimp is hidden in a pop-up menu that appears when you right-click on an image window. This is a hierarchical menu with many options. Here, for example, the pop-up menu is being used to select the "Levels" dialog box, which you will need for adjusting the colors in your image:

Gimp Pop-up menu

Part of the Levels dialog The "faded" background image for this page was made using Gimp "Levels" dialog. To do this, I opened the original picture. I then opened the Levels dialog by right-clicking on the image and selecting "Image" then "Colors" then "Levels" from the pop-up menu (as shown in the above illustration). In this dialog, I adjusted the color levels by dragging the little triangular arrows, below the two "gradients", as shown at the right. The lower set of arrows controls the colors in the modified image. The middle arrow in the upper set can be adjusted to improve the balance of colors. You can try it yourself on your own image. If you are using dark text on your page, make an image that is faded almost to white using Levels settings like those shown here. To save the result, right-click the image and select the "Save" command from the "File" menu. This will replace the original file. (Use "Save As" if you want to make a new file.)

To use the image as a background on a Web page, you have to add the image name to the <body> tag in the HTML file. Here, for example, is the <body> tag for this page:

      <BODY bgcolor=white background="faded_flower.jpg" 
            text=black link=blue alink=red vlink="#666666">

The image name, faded_flower.jpg, is specified as the value of the the background attribute.

Directories and Relative Links in HTML

Any serious Web site contains more than one Web page. You can have as many web pages on your site as you want, as long as you store them in your WWW folder. You can also make sub-folders inside your WWW directory and put Web pages in the sub-folders. For example, you might want to store all your CS 120 pages in a sub-folder named cs120. That way, if you continue to take computer science courses, it will be easy to organize all your work into a Web portfolio. The main page for your site should always be named index.html, and it should be in the WWW folder, not in a sub-folder. You can add links to index.html that lead to other pages on your site. In fact, of course, you can put a link from any page on your site to any other page.

Every page on your site has a URL that identifies its location. For example if you have an HTML file named elvis.html and it is in a sub-folder named urbanmyths, then the complete URL for the page would be of the form

http://math.hws.edu/~username/urbmanmyths/elvis.html

with username replaced by your own user name. You could use this URL to make a link to the page, such as with the HTML code

<a href="http://math.hws.edu/~username/urbmanmyths/elvis.html">The King</a>

However, when linking to a page on the same site, it's better to use a relative URL. A relative URL in a link gives the location of the file relative to the location of the HTML file in which the link appears. If both files are in the same folder, then the relative link consists simply of the file name, such as

<a href="elvis.html">The King</a>

If you want to link to a file that is in a sub-folder of the of the folder that contains the HTML file, you can just include the folder name in the relative URL. For example,

<a href="urbanmyths/elvis.html">The King</a>

If you use relative links, it will be easier to move your files to different folders or to a different Web server. The relative links will continue to function correctly in the new location, as long as you move the folders and files as a group.

Tables in HTML

An HTML table displays items in neat rows and columns. Fundamentally, tables are a simple idea. A table is created using the <table>...</table> element. Inside this element are the rows of the table. Each row is created using the <tr>...</tr> element (where "tr" stands for "table row"). Inside a <tr> element are the individual items that go in the cells of the table. Each item is created with a <td>...</td> element (where "td" stands for "table data"). You can put anything at all inside a <td> element: simple text, paragraphs, lists, images, even another table. So, the outline of the HTML code to create a table looks like this: 

      <table>

         <tr>
            <td> ... </td>
            <td> ... </td>
               .
               .
         </tr>

         <tr>
            <td> ... </td>
            <td> ... </td>
               .
               .
         </tr>
         
           .
           .
           .

      </table>

Here, for example, is a very simple table and the HTML source code that creates it:

<table border=1>
   <tr>
      <td>(Row 1, Column 1)</td>
      <td>(Row 1, Column 2)</td>
      <td>(Row 1, Column 3)</td>
   </tr>
   <tr>
      <td>(Row 2, Column 1)</td>
      <td>(Row 2, Column 2)</td>
      <td>(Row 2, Column 3)</td>
   </tr>
</table>
(Row 1, Column 1) (Row 1, Column 2) (Row 1, Column 3)
(Row 2, Column 1) (Row 2, Column 2) (Row 2, Column 3)

The "border=1" attribute on the <table> tag adds the thin border around the table. There are a lot of optional attributes that you can add to the <table>, <tr>, and <td> tags. Some of the more useful options are listed below.

You might want to look at some pages that use tables. You can use your browser's "View Source" command to see the HTML source code of these examples, or of any page on the Web. Here are three of my examples:



Options for the <table> Tag

There are several useful attributes that can be used in the table tag. You can see some of the more common attributes demonstrated on my TableDemo page at

http://math.hws.edu/eck/cs120/s02/lab5/tabledemo.php.

Attributes include:



Options for the <tr> Tag

Options specified in a <tr> tag affect all the cells in the row. The most useful attributes are align, valign, and bgcolor, which simply set the default values for these attributes for all the <td> tags in the row. See the next section for their meaning.


Options for the <td> Tag

The options in a <td> tag affect just one cell in the table, except for width and height, which can have implied effects on other cells in the same column or row.

One final note on cells: It's generally not a good idea to have cells that don't contain any data at all. If you want an empty cell, put a non-breaking space in the <td>. This would look like <td>&nbsp;</td> in the HTML source code. (If you don't do this, the empty cell won't have any border.)

--David Eck (eck@hws.edu), September 2002