Computer Science Illuminated, Third Edition

eLearning

Animated Flashcards
Live Wire
Cryptic Crossword Puzzles
Ethical Issues
Biographical Sketches
Did You Know
Goin Live
Google Code Digital Lab Manual
Online Glossary
The Learning Store
Language Library
Download PEP/7
Instructor Resources
Student Resources

eLearning Home

Lab #6

Fonts and Color


6.1 Applying Fonts

As with many word processed documents, you likely will want to change the appearance of your web page by changing the font that is used to render the text.  This is easily done by using the font tag in HTML, which has the following syntax:
<font size="value" face="font_name, font_name" color="color_name">text to modify</font>
We will discuss the size and face attributes of the font tag in this section, and leave our coverage of the color attribute to Section 6.2 (below).

The size attribute works in two ways.  First, you can specify a number between 1 and 7 as an attribute which represents the size of the text.  The value 1 represents the smallest size, and 7 the largest.  The value of 3 is used as the default value when the size is not specified.  Alternatively, you can precede the value with a plus or minus sign, resulting in a size that is relative to the default size of 3.  In the example below, we have used the relative size value to increase the size of the text in the first paragraph of our store's main page.  In addition, we used an absolute value to modify the appearance of the copyright information at the bottom of the page.  Our results can be seen in Figure 1.
<html>
<head>
<title>
Pete's Pet Store</title>
</head>
<body>
<center><img src="storeLogo.gif"></center>
<hr width="75%">
<p><font size="+2">
Welcome to Pete's Pet Store!  Located in the heart of the old city, we specialize in unique and unusual products for your cherished friend.  Pete's Pets started in 1975 with just products for cats, however in 1990 we expanded our location and opened up our canine department.</font></p>

<p>
We feature on-site grooming for your pet, and also obedience and training classes for both cats and dogs.</p>

<p>
We're currently working to expand our on-line presence with this store, so please bear with us.  Below, you can find a link to our current offerings via the Internet.  We ship anywhere in the continental United States, Europe and Canada!</font></p>

<hr width="75%">
<center><b>
Our products</b></center>
<p><a tabindex="5" href="catLounger.html">
Cat Window Lounger</a> - A rest area for your feline which mounts on the sill of a window.</p>

<p><a tabindex="4" href="catnipToy.html">
Deluxe Catnip Toy</a> - Our own special blend of catnip grown on the roof of our store in a delightful soft playtoy!</p>

<p><a tabindex="3" href="litterScoop.html">
Cat Litter Scooper</a> - Our most popular item!  No home should be without one!</p>

<hr width="75%">
<center><b>
Our Favorite Links</b></center>
<p><a tabindex="2" href="http://www.petswelcome.com">
PetsWelcome.com</a> - A pet/travel resource to help you find pet friendly accommodations.</p>

<p><a tabindex="1" target="_blank" href="http://www.petdental.com">
PetDental.com</a> - Information about caring for your pet's teeth and gums.</p>

<hr>
<font size="1">
Pete's Pet Store
<i>&copy; 2002</i></font>
</body>
</html>
Applying the size attribute to the font tag.
Figure 1: Applying the size attribute to the font tag.

The face attribute of the font tag allows us to provide a selection of one or more font choices in rendering our text. However, the fonts that you specify in this attribute must reside on the computer of the person viewing the web page.  Thus, some careful thought must go into how you use the face attribute.  Generally speaking though, the Times, Courier and Helvetica fonts are found on most all modern computers.  So you can use at least these font names in your selection.  You can list a selection of several candidate fonts for the browser to use (in preferred order) by listing them in the face attribute separated by commas.

We will use the Helvetica font in our main page to modify the third paragraph and the Courier font for the links to our products and favorite web sites.  The affected sections of our source code are show below, and the results are shown in Figure 2.
<p><font face="Helvetica">We're currently working to expand our on-line presence with this store, so please bear with us.  Below, you can find a link to our current offerings via the Internet.  We ship anywhere in the continental United States, Europe and Canada!</font></p>

<p><font face="Courier"><a tabindex="5" href="catLounger.html">Cat Window Lounger</font></a> - A rest area for your feline which mounts on the sill of a window.</p>

<p><font face="Courier"><a tabindex="4" href="catnipToy.html">Deluxe Catnip Toy</font></a> - Our own special blend of catnip grown on the roof of our store in a delightful soft playtoy!</p>

<p><font face="Courier"><a tabindex="3" href="litterScoop.html">Cat Litter Scooper</font></a> - Our most popular item!  No home should be without one!</p>

<p><a tabindex="2" href="http://www.petswelcome.com"><font face="Courier">PetsWelcome.com</font></a> - A pet/travel resource to help you find pet friendly accommodations.</p>

<p><a tabindex="1" target="_blank" href="http://www.petdental.com"><font face="Courier">PetDental.com</font></a> - Information about caring for your pet's teeth and gums.</p>
Applying the face attribute to the font tag.
Figure 2: Applying the face attribute to the font tag.

Lab Activity #1:
Incorporate the use of the font tag into your web pages.  Be sure to use absolute and relative size changes, as well as at least two different font faces.

Note: The HTML 4.0 standard has deprecated the font tag in favor of placing formatting information in Cascading Style Sheets (CSS), discussed in Lab 11.  However, as most browsers continue to support the use of this tag, we will continue to use it until we cover CSS.

6.2 Specifying Color

We also can specify the color of text, by using the color attribute in the font tag.  Before we detail the attribute, however, we first need to discuss colors in HTML.  There are 16 colors which are defined by name in HTML.  Each color, in turn,  has a corresponding hexadecimal (hex) code used to identify the amount of red, green, and blue contained in the color.  For example, the color fuchsia is defined by the hexadecimal code FF00FF.  Here (reading left to right), the FF in hexadecimal code indicates the amount of red (255 on a scale of 0-255, where the higher the number the greater the content of the color) in the fuchsia.  Similarly the 00 represents the amount of green in fuchsia, and the last pair (FF) indicates the amount of blue.  The 16 colors defined by name are listed in Table 1 along with their hex codes.

Color sample
Color name and hex code
Color sample
Color name and hex code

Black (#000000)
Maroon (#800000)

Silver (#C0C0C0)
Red (#FF0000)

Gray (#808080)
Purple (#800080)

White (#FFFFFF)
Fuchsia (#FF00FF)

Green (#008000)

Navy (#000080)

Lime (#00FF00)

Blue (#0000FF)

Olive (#808000)

Teal (#008080)

Yellow (#FFFF00)

Aqua (#00FFFF)
Table 1: HTML colors listed by text name and hex code

You are not, however, limited to these 16 colors.  You can use the hexadecimal codes to create any of 16,000,000+ possible combinations.  The monitor the colors are viewed on (via the browser) will decide how well each of these colors are displayed.  Thus, it's not likely that you actually would be able to represent each of the 16 million colors. Some may be combined depending on the quality of the monitor and graphics card of the computer that is displaying the web page.

As we mentioned, a color can be represented by its name or by hexadecimal code preceded by a pound sign (#).  The color attribute of the font tag allows us to specify the color of the text that is enclosed by the opening and closing font tags.  In the example below, we have modified the three regions of the world that our store will ship its products to.  The resulting change is illustrated in Figure 3.

Note that at the end of the paragraph we needed to use two font closing tags, the first to close the color change (from red), and the second (just before the closing paragraph tag) to close the opening font tag at the start of the paragraph, used to change the font's face.  As long as we close all of our opening tags in the reverse order they were opened, our HTML source code will be fine!
<p><font face="Helvetica">We're currently working to expand our on-line presence with this store, so please bear with us.  Below, you can find a link to our current offerings via the Internet.  We ship anywhere in the continental <font color="blue">United States</font>, <font color="#00AA00">Europe</font> and <font color="red">Canada</font>!</font></p>
Applying colors to text on our web page.
Figure 3: Applying colors to text on our web page.

Lab Activity #2:
Apply at least 4 different colors to selected text on your web pages.  In two of the color selections, use the name of a color from Table 1.

In the remaining two selections, use a hexadecimal code to specify colors which are not defined in Table 1.

6.3 Background and Text Color

Now that you know how to specify colors, we should show you how to set the background color for your web pages.  Revisiting the body HTML tag, we find that there is a background color attribute (bgcolor) which can be used to specify a single color for a web page.  Applying this attribute modifies the syntax for the background to be the following:
<body bgcolor="color_value">body of web page</body>
By setting the background color of our web pages to #FFFFEE, we will set the background color to a light beige.  The results of this change is shown in Figure 4.

Applying a background color to a web page.
Figure 4: Applying a background color to a web page.

Lab Activity #3:
Apply a background color to each of the web pages that you have created thus far.

What is the hexadecimal value for the color(s) you have chosen? ______


Note: The HTML 4.0 standard has deprecated the bgcolor attribute in favor of placing formatting information in Cascading Style Sheets.  However, as most browsers continue to support the use of this attribute, we will continue to use it until we cover CSS.

6.4 Link Color

In addition to the bgcolor attribute in the body tag, there are three other attributes that can affect the colors of links in your web pages.  The attributes are: alink (active link - used to change the color of a link while it's being clicked), link (used to change the color of unvisited links), and vlink (visited link - used to change the color of links which have been visited previously).  Each attribute is used exactly like the bgcolor attribute, where you specify the attribute name and the color (either by name or hexadecimal value).

In our example from the main page of our web site, we'll use these attributes to change the color of the link to our products, making unvisited links green and visited links red.  (We will skip demonstrating the alink attribute in action, since we can not capture the screen at the same time we click a link.  However, we are confident you'll get the idea.)  The changes to our main web page are shown below, followed by Figure 5 showing a close of up the affected area of the web page.
<body bgcolor="color_value" link="green" vlink="red">

  Setting the color of unvisited and visited links.
Figure 5: Setting the color of unvisited and visited links.
Lab Activity #4:
Add each of the link coloring attributes to the web pages you have created.  Be sure to use colors that are easy to distinguish, especially when considering the background color in use.

Don't forget to check your active link (alink) attribute by clicking on the links and observing their behavior while you click them!

Note: The HTML 4.0 standard has deprecated the alink, link, and vlink attributes in favor of placing formatting information in Cascading Style Sheets.  However, as most browsers continue to support the use of this attribute, we will continue to use it until we cover CSS.


About the labs:
These labs were developed in conjunction with the Jones and Bartlett textbook Computer Science Illuminated by Nell Dale and John Lewis.
ISBN:  0-7637-1760-6
Lab content developed by Pete DePasquale and John Lewis.
 
Educators: More Information About This Text Other Computer Science Titles at Jones and Bartlett
Copyright 2019 Jones and Bartlett PublishersContact webmaster