Fonts and Color
6.1 Applying FontsAs 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.
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>
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.
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>
6.3 Background and Text ColorNow 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.
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 ColorIn 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">
About the labs:
These labs were developed in conjunction with the Jones and Bartlett textbook Computer Science Illuminated by Nell Dale and John Lewis.
Lab content developed by Pete DePasquale and John Lewis.