A Balanced Introduction to Computer Science and Programming

David Reed
Creighton University

Copyright © 2004 by Prentice Hall


Chapter 2: HTML and Web Pages
Supplemental Material and Exercises


Background Color & Images

By default, most browsers will display a page with a white background (although this default value can be reset by the user's preferences). Sometimes, a little color can make a page more attractive and interesting. To change the background color in a page, you must assign the BGCOLOR attribute of the BODY tag. For example, the opening tag

<body bgcolor="lightgrey">

would cause the background of the page to be light gray. The following color names are among those predefined by HTML:

aqua darkgray green navy royalblue tan beige darkgreen greenyellow olive silver teal blue darkred lightblue orange skyblue violet black fuchsia lightgreen pink slateblue wheat brown gold lightgrey purple slategray yellow darkblue gray mediumblue red steelblue yellowgreen


EXERCISE 2.8:    Add a background color to your home page. Be careful in your choice of colors, though. Subtle colors such as lightgrey or lightblue can be attractive. Bright or dark colors such as yellow or darkblue can make reading the text in the page next to impossible. Remember that readability is the primary goal when designing a Web page -- if the user can't read it, it doesn't matter how pretty it is!


As you surf the Web, you may have noticed some Web pages with textured patterns or even photographic images in the background. An image can be specified as the background of a Web page using the BACKGROUND attribute of the BODY tag. For example, the opening tag

<body background="http://www.creighton.edu/~csc107/Images/yellow_rock.gif"> would cause the background of the page to have a yellow stone-like texture. Note that if the image is too small to fill the entire browser window (which is usually the case), then copies of the image are stamped out to fill the space. This is why simple, repetitive patterns are best.


EXERCISE 2.9:    If you would like, add a background image to your page (sample images can be found at various Web sites). However, be very selective in the use of images. While plastering your picture in the background of your page may seem like a neat idea, all but the simplest background images detract from the readability of the page.



Clickable Images

In all of the examples you have seen so far, links have been labeled with text. That is, only text appeared between the opening and closing ANCHOR tags. In reality, any HTML elements can appear between the ANCHOR tags, allowing for clickable elements of various forms. For example, the following defines a clickable image by placing the IMG tag inside the ANCHOR tags.

<a href="http://www.creighton.edu/~davereed"> <img src="http://www.creighton.edu/~davereed/Images/reed.gif" alt="Dave Reed" /> </a> When the user moves the mouse over the image, the cursor changes just as with any link. Likewise, clicking on the image will load the page specified by the HREF attribute. You may note that the image has a colored border around it, identifying it as a link. If you do not want any border at all, you can add attributes to the ANCHOR and IMG tags to remove it. <a href="http://www.creighton.edu/~davereed" style="text-decoration:none"> <img src="http://www.creighton.edu/~davereed/Images/reed.gif" alt="Dave Reed" border=0 /> </a>


EXERCISE 2.10:    Where desired, add clickable images to your home page. The images you select should have relevance to the link destination. That is, don't use a picture unless it intuitively leads the user to the appropriate destination. Also, unless you have a good reason not to, leave the border on clickable images so that their use as links is more obvious.



Lists

For displaying lists of items, HTML provides two different types of elements. An unordered list displays a collection of items where order is not important. By default, each item is preceded with a bullet (a filled-in circle) and indented to make the structure of the list apparent. For example,

<html> <!-- demo7.html Dave Reed --> <!-- This page demos unordered lists. --> <!-----------------------------------------> <head> <title> Demo of lists </title> </head> <body> My Hobbies <ul> <li> old movies <li> Celtic music <li> baseball <li> hacking around on the computer </ul> </body> </html>
       screen shot of demo7.html

An unordered list begins and ends with UL tags, and each list item begins with a LI tag. For an ordered list, OL tags should instead be used to begin and end the list. Using OL instead of UL, the items will be numbered starting at 1. For example,

<html> <!-- demo8.html Dave Reed --> <!-- This page demos ordered lists. --> <!-----------------------------------------> <head> <title> Demo of lists </title> </head> <body> States ranked by population <ol> <li> California <li> Texas <li> New York </ol> </body> </html>
       screen shot of demo8.html


EXERCISE 2.11:    Add a list to your home page. For example, you might list your favorite movies, current courses, your siblings, etc. Note that it is possible to nest lists. That is, you can have a list item be another list. When this occurs, the browser will use a new bullet or numbering style for the sublists.



Tables

While it is generally a good idea to let the browser decide the layout of text, there are times when you want things to line up just so. It is possible to align text and other elements in columns using a table. A table element begins and ends with TABLE tags, with additional tags identifying table rows (TR) and table data (TD). For example, the following produces a table with three rows, each containing two columns of data.

<html> <!-- demo9.html Dave Reed --> <!-- This page demos borderless table. --> <!------------------------------------------> <head> <title> Demo of tables </title> </head> <body> <table> <tr> <td>first column</td> <td>second column</td> </tr> <tr> <td>data in subsequent columns align</td> <td>see?</td> </tr> <tr> <td>column widths are automatically adjusted</td> <td>text is centered vertically in the column</td> </tr> </table> </body> </html>
       screen shot of demo9.html

If you would like a border between rows and columns in a table, this is accomplished using the BORDER attribute in the TABLE tag. The number assigned to the BORDER attribute specifies the thickness of the border, with a larger number implying greater thickness.

<html> <!-- demo10.html Dave Reed --> <!-- This page demos borderless table. --> <!------------------------------------------> <head> <title> Demo of tables </title> </head> <body> <table border=1> <tr> <td>first column</td> <td>second column</td> </tr> <tr> <td>data in subsequent columns align</td> <td>see?</td> </tr> <tr> <td>column widths are automatically adjusted</td> <td>text is centered vertically in the column</td> </tr> </table> </body> </html>
       screen shot of demo10.html

You should also note that a table can be used to align elements other than text. For example, the following table contains an image with text and a link to the right.

<html> <!-- demo11.html Dave Reed --> <!-- This page demos borderless table. --> <!------------------------------------------> <head> <title> Demo of tables </title> </head> <body> <table> <tr> <td><img src="seal.gif" alt="Creighton seal" /></td> <td><a href="http://www.creighton.edu"> <b>Creighton University</b></a><br /> 2500 California Plaza<br /> Omaha, NE &nbsp; 68178</td> </tr> </table> </body> </html>
       screen shot of demo11.html


EXERCISE 2.12:    Use a table to align text and/or images into rows and columns. For example, you might organize your class schedule into a table, with a row for each class and columns containing the course name, room number, and meeting times. Or, you might align names and email addresses of your friends.