|
|
by William Robert Stanek
The HTML standard is advancing at an explosive pace. Since 1990, when the World Wide Web initiative began, three major specifications for HTML have been defined. The current specification for HTML 3 has taken many twists along the road. First came HTML 3.0, a version of HTML too far ahead of its time; next came HTML 3.2-an attempt to put the future of HTML back on track and also a major success.
HTML 3.2 incorporates and standardizes many extensions of leading browsers such as Netscape Navigator and Internet Explorer. These extensions have long been favorites for cutting-edge Web publishing, and now they're finally moving toward full standardization. This chapter explains how you can use HTML 3.2 in your documents and what design issues you, as a Web publisher, should focus on.
Even before the HTML 2.0 draft was ratified, Web publishers, eager to create better and more powerful documents, started looking to the advanced features offered by HTML version 3. HTML 3 is the next level in HTML publishing.
The original specification for HTML version 3 was called HTML 3.0. HTML 3.0 offered these powerful features:
Although HTML 3.0 was widely written about, the specification was never fully carried out in client browsers, mostly because of the complexities in using the advanced features found in HTML 3.0. Instead of fully implementing HTML 3.0, many browsers, including Netscape Navigator, Internet Explorer, and ncSA Mosaic, supported only key enhancements of the HTML 3.0 specification.
As you might expect, the supported enhancements are those high on most Web publishers' wish lists, but not extremely difficult to use. The supported enhancements include the following:
Advanced layout control
Client-side handling of hot spots in images
Customized lists
Dynamic documents with client-push/server-pull
Tables
Tables within forms
This subset of the original HTML 3.0 specification was reworked into a new specification called HTML 3.2. Just as HTML 2.0 is based on the features and extensions used in documents before June 1994, HTML 3.2 is based on features and extensions used in documents before May 1996. HTML 3.2 is designed as a replacement for HTML 2.0 and as such is fully backward-compliant with HTML 2.0 features.
| Note |
The subset of enhancements supported by HTML 3.2 doesn't include all the extensions proposed in HTML 3.0. For example, HTML 3.2 doesn't use the full HTML 3 table model. Instead, HTML 3.2 implements tables as supported by browsers like Netscape and Internet Explorer. |
The features HTML 3.0 promised to bring to Web publishing aren't gone with the death of HTML 3.0. Instead, many advanced features are being developed as separate specifications. For example, there's a complete specification for style sheets and one for the HTML 3 table model.
| Note |
You'll explore publishing with style sheets in Chapter 8 "Using Style Sheets." The HTML 3 table model is examined in Chapter 6 "Effective Use of Tables." |
A growing number of HTML documents have features defined in the HTML 3.2 specification; you will find thousands of documents featuring tables, client-side image maps, and client-pull/server-push. If you plan to publish HTML documents on the Web, you should definitely consider using HTML 3.2 enhancements.
| Note |
The next version of HTML after HTML 3.2 adds support for embedded multimedia objects, client-side scripting, style sheets, and extensions to fill-out forms. This upcoming version of HTML, code-named Cougar, is currently available as an experimental specification at http://www.w3.org/. |
Helping you unleash the power of your ideas is what document backgrounds are all about. Most browsers display text on a slate-gray background, but HTML 3.2 lets you add images and color to the background. You can also specify the color of text and links.
Document backgrounds are a graphic designer's dream come true. To add a background image, all you have to do is specify an image to be used as the document's background with the BACKGROUND attribute of the <BODY> tag. The image is tiled, or repeated, to fill the background area. You can use tiling to create design effects with small images. The best image formats to use for background images are gif and JPEG, which are fully supported by leading browsers such as Netscape Navigator and Internet Explorer.
Here's an example of a background image inserted in a Web page:
<HTML> <HEAD> <TITLE>Sample Page</TITLE> </HEAD> <BODY BACKGROUND="sample.gif"> . . . </BODY> </HTML>
The key to using backgrounds in your pages is to make sure the background doesn't interfere with the page's readability. Figure 5.1 shows how background images can add pizazz to your Web pages without affecting the page's readability. The background image is a grouping of five animals: an eagle, a seal, an ape, a wolf, and a polar bear. Because the image didn't fill the browser's window, it's tiled. Here's how the background image was added to the page:
<BODY BACKGROUND="wildlifa.gif">
Figure 5.1 : Add pizazz to your pages with background images.
A popular technique to use when adding backgrounds is to create the illusion that the image runs along the margin. (See Figure 5.2.) When the graphic is in the margin, it won't interfere with how easily the page can be read. The trick to the illusion is a spacing technique that makes it seem as though the background image is only in the left margin, when it really extends across the full width of the browser's window.
Figure 5.2 : Vertical tiling, a popular technique for backgrounds.
To tile the background image vertically, make sure the image is at least 800 pixels wide-600¥800 is the most popular high-end screen resolution. Next, put dark graphics in the left margin that are 100 to 200 pixels wide and combine them with a light (usually white) graphic 600 to 700 pixels wide that completes the effect. You could also reverse this and put the light graphics in the left margin.
Sometimes what your pages need is a splash of color. With the BGCOLOR attribute, you can specify a color for the background. The background color can be expressed as a hexadecimal value or a color name:
<BODY BGCOLOR="#00FF00"> <BODY BGCOLOR="BLUE">
Basic color combinations using hexadecimal values are shown in
Table 5.1. Hexadecimal color values are different from the decimal
color values you may be used to seeing. Decimal values allow for
256 colors by using the values 0 to 255, but hexadecimal values
allow for 256 colors by using the base 16 numbering system from
00 to FF. For example, the decimal value 0 in hexadecimal is 00,
and the decimal value 255 in hexadecimal is FF. By combining values
or slightly altering them to create darker or lighter shades,
you can create a rainbow of colors.
| Color | |
| Black | |
| Blue | |
| Brown | |
| Cream | |
| Cyan | |
| Dark Blue | |
| Dark Gray | |
| Dark Green | |
| Dark Purple | |
| Dark Red | |
| Dark Yellow | |
| Grass Green | |
| Green | |
| Light Gray | |
| Medium Gray | |
| Purple | |
| Red | |
| Sky Blue | |
| White | |
| Yellow |
The following pages use a background color specified as a hexadecimal value:
<HTML> <HEAD> <TITLE>Sample Page 2</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> . . . </BODY> </HTML>
Using a predefined color name is the easiest option; you simply
select a color name from a list of accepted ones, shown in Table
5.2.
Aqua |
Navy |
This page uses a background color specified as a color name:
<HTML> <HEAD> <TITLE>Sample Page 2</TITLE> </HEAD> <BODY BGCOLOR="WHITE"> . . . </BODY> </HTML>
| Tip |
You can use the BGCOLOR attribute with the BACKGROUND attribute to specify which color to use when the background image can't be displayed. If the background image can't be displayed for some reason, such as the user turning off the browser's auto-load image feature, the background color you specified is displayed. Also, if you don't specify a background color and the image you specified can't be displayed, the browser won't use your color assignments for text and links. This is a fail-safe to make sure you didn't specify text and link colors that would conflict with the standard gray background. |
As with background images, the key to using background colors is to make sure the background color doesn't interfere with the page's readability. Figure 5.3 shows what a page showcased earlier in the chapter would look like with white as the background color. As you can see, the impact of the page isn't quite the same. However, a page with a colorful background certainly has more appeal than a plain gray background.
Figure 5.3 : Using a background color.
Obviously, black text on a black background is unreadable, so when you use background images or colors, you need to specify the color for text and links to make sure they're readable. The page shown in Figure 5.4 has a black background with white text and red links.
Figure 5.4 : Adding color to text and links.
To assign colors to text and links, HTML 3.2 supports four additional
attributes for the <BODY>
tag. You can enter the colors as RGB values:
| Specifies the color for normal text | |
| Specifies the color for links that are unvisited | |
| Specifies the color for active links | |
| Specifies the color for visited links |
You can also specify any of the defined color names instead of
a hexadecimal value:
| Specifies the color for normal text as white | |
| Specifies that unvisited links are yellow | |
| Specifies that active links are red | |
| Specifies that visited links are blue |
Color name values could be used in a sample page as follows:
<HTML> <HEAD> <TITLE>Sample Page 3</TITLE> </HEAD> <BODY BGCOLOR="BLUE" TEXT="WHITE" LINK="YELLOW" ALINK="GRAY" VLINK="SILVER"> . . . </BODY> </HTML>
| Tip |
Using the Internet Explorer 2.0/3.0 extension for background properties, you can create background patterns that don't scroll. Nonscrolling background patterns are called watermarks, which are much more effective than the traditional scrolling backgrounds. To create a watermark, you specify a background image and set the BGPROPERTIES attribute as follows: <BODY BACKGROUND="dazzle.gif" BGPROPERTIES=FIXED> |
HTML 3.2 supports many extensions for document layout. These extras include the following:
HTML 3.2 supports powerful enhancements for images that help you precisely place images in your page. For example, the LEFT and RIGHT values can be used to align an image and a paragraph of associated text into columns. The LEFT value puts the image in the left margin and wraps the text around the right-hand side of the image. Conversely, the RIGHT value puts the image in the right margin and wraps the text around the left-hand side of the image.
By aligning text and images into columns with ALIGN=LEFT or ALIGN=RIGHT, you can lay out documents with styles that merge the image into the text of the document in more effective ways than were previously possible. To get the text to wrap around only the left or right side of the image, place the <IMG> tag as the first element in a short paragraph of text, as shown in Listing 5.1. A sample page using image alignment is shown in Figure 5.5.
Listing 5.1. imageal.htm.
<HTML> <HEAD> <TITLE>Aligning Images</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <P><IMG SRC="Scompass.gif" ALIGN="RIGHT"> Text flows around the image on the left.</P> <P><IMG SRC="Scompass.gif" ALIGN="LEFT"> Text flows around the image on the right.</P> <P><IMG SRC="Scompass.gif" ALIGN="RIGHT"> Text flows around the image on the left.</P> <P><IMG SRC="Scompass.gif" ALIGN="LEFT"> Text flows around the image on the right.</P> </BODY> </HTML>
Figure 5.5 : Text flows around left-or right-aligned images.
Images and text are aligned with minimal spacing, which sometimes makes the text difficult to read. One way to increase the spacing and make the image more useful is to include the image in a hypertext reference. The image will then have a border around it that clearly separates it from the associated text, and it can also be clicked on.
The WIDTH and HEIGHT attributes can also be used to create better Web publications. Generally, these attributes are used together to resize an image according to the values you assign. By default, the numeric value you associate with the width and height for an image is a number of pixels.
The original size of the compass shown in Figure 5.5 is 150¥119. By defining a new width and height, the image can be shrunk:
<IMG SRC="scompass.gif" ALT="" WIDTH=100 HEIGHT=75>
You can also enlarge it:
<IMG SRC="scompass.gif" ALT="" WIDTH=200 HEIGHT=150>
The ability to shrink or enlarge images on the fly is very useful. You can create a menu of consistently sized images without having to create new files containing the resized images. You can then reuse the same images later in the document at their original size or sized to suit your needs, without having to load new image files. This is convenient for you and reduces your document's download time.
| Note |
In addition to the HTML 2.0 and 3.2 alignment values, Netscape and Internet Explorer supports the following unique extensions: ALIGN=TEXTTOP The Netscape image alignment values behave exactly as their names imply they should. The value of TEXTTOP aligns the top of the image with the top of the tallest element in the line of text associated with the image; the value of ABSMIDDLE aligns the center of the image with the center of the line of text associated with it; the value of ABSBOTTOM aligns the bottom of the image with the bottom of the line of text associated with the image; and the value of BASELINE aligns the base of the image with the baseline of the text associated with the image, which is exactly how the value of BOTTOM handles text and image alignment. Internet Explorer doesn't recognize these alignment values. Keep in mind that other browsers might ignore the unique alignment values and display your images with the default alignment value of BOTTOM. Consequently, you should use the Netscape alignment values only on pages that will be displayed by the Netscape browser or when the alignment of the image and text isn't critical. |
Other HTML 3.2 innovations for images include these attributes:
BORDER
HSPACE
VSPACE
The BORDER attribute specifies the pixel size of the border to be drawn around an image. Here's how you can add an image with a border five pixels wide surrounding it:
<IMG SRC="../graphics/windows.jpeg" BORDER=5>
Generally, borders are visible if the image is anchored to the page as a hypertext link and invisible if the image isn't anchored to the page. You can use the BORDER attribute to add white space around images that aren't links and to build a picture frame around images that are links. Although both techniques enhance the image's impact, you can also remove the border around linked images by specifying the value of BORDER=0.
Figure 5.6 shows a 10-pixel-wide border around an image. Here is the markup for this page:
<HTML> <HEAD> <TITLE>The Cool Cars Page</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <CENTER> <H2>Cool Cars</H2> <IMG SRC="coo1.jpg" BORDER="10"> </CENTER> </BODY> </HTML>
Figure 5.6 : Using borders around your images.
| Note |
The way borders are displayed is browser-dependent. For example, Internet Explorer 3.0 doesn't display borders around images that aren't links, but Netscape Navigator 3.0 does. |
The attributes HSPACE and VSPACE are used to increase the amount of white space surrounding the image. HSPACE increases the pixel size of the horizontal margins surrounding the image, and VSPACE increases the pixel size of the vertical margins. These attributes are used to put white space between multiple images or text. You can use these attributes as follows:
<IMG SRC="sunset.gif" HSPACE=12 VSPACE=6>
| Note |
The discussion on images in this section is only a preliminary one. After reading this section, you should be familiar with the attributes used with images, but not necessarily a design expert. For detailed coverage of images and graphic design, refer to Part IV, "Enhancing Web Pages with Graphics." |
Centered text and graphics is a Netscape innovation fully supported by HTML 3.2. With the <CENTER> tag, you can center any objects defined between the begin and end <CENTER> tags. The <CENTER> tag is useful for centering sections of your page that include text and objects.
Many of the previous examples in this chapter use the <CENTER> tag. Listing 5.2 shows how the text and images in the Earth!First example are centered.
Listing 5.2. earth.htm.
<HTML> <HEAD> <TITLE>Wildlife Educational Center</TITLE> </HEAD> <BODY BGCOLOR="White"> <CENTER> <IMG SRC="Gold1e.gif"> <IMG SRC="Gold1a.gif"> <IMG SRC="Gold1r.gif"> <IMG SRC="Gold1t.gif"> <IMG SRC="Gold1h.gif"> <IMG SRC="Gold1_!.gif"> <IMG SRC="Gold1f.gif"> <IMG SRC="Gold1i.gif"> <IMG SRC="Gold1r.gif"> <IMG SRC="Gold1s.gif"> <IMG SRC="Gold1t.gif"> <P ALIGN="CENTER"> <IMG SRC="Earth1.gif"></P> <CENTER> <H1><A HREF="enter.htm">Join Us!</A></H1> </CENTER> </BODY> </HTML>
Figure 5.7 shows another use of the <CENTER>
tag; the markup for this page is given in
Listing 5.3.
Listing 5.3. coffee.htm.
<HTML> <HEAD> <TITLE>Java World Coffee</TITLE> </HEAD> <BODY BACKGROUND="BACK/coffee_g.gif" TEXT="#FFFFFF"> <CENTER> <IMG SRC="IMAGES/coffee_a.gif" ALIGN="bottom" ALT=" [ Java World Coffee ]"><BR> <I>"The Juice that fuels the World<I>"</I><BR> <A HREF="products.htm"> <IMG SRC="IMAGES/coffee_e.gif" ALIGN="bottom" ALT="[ Products ]" BORDER="0"> </A> <A HREF="location.htm"> <IMG SRC="IMAGES/coffee_d.gif" ALIGN="bottom" ALT="[ Locations] " BORDER="0"> </A> <A HREF="hot.htm"> <IMG SRC="IMAGES/coffee_f.gif" ALIGN="bottom" ALT="[ What's Hot ]" BORDER="0"> </A> <A HREF="contact.htm"> <IMG SRC="IMAGES/coffee_c.gif" ALIGN="bottom" ALT="[ Contact ]" BORDER="0"> </A> </CENTER> </BODY> </HTML>
Figure 5.7 : The <center> tag is great for centering text and graphics.
With HTML 3.2, you can more precisely align elements on the page. Take a look at element alignments for page divisions, headers, and paragraphs.
Traditional documents are divided into a table of contents, chapters, appendixes, bibliographies, and glossaries. These major sections are usually broken down into subsections corresponding to major topics. In HTML 2.0, there's no way to represent these traditional document sections by using formats specific to the section element. HTML 3.2 corrects this shortcoming with the <DIV> tag to specify sections of the document.
Using the ALIGN attribute with the <DIV> tag, you can specify the alignment for a section of your document. The capability to align an entire section is a feature in high demand by Web publishers.
| Note |
According to the HTML 3.2 specification, the alignment of a division applies only to text associated with block elements, which includes paragraphs and lists but not headings and images. This is supposed to let you align headings and images as needed, without worrying whether you're going to conflict with the alignment of the division. However, most current browsers align all elements in a division, meaning that all block text, headings, and graphics follow the division's alignment. |
HTML 3.2 specifies three values for the ALIGN attribute. All elements in this division are flush left:
<DIV ALIGN=LEFT> . . . </DIV>
All elements in this division are flush right:
<DIV ALIGN=RIGHT> . . . </DIV>
All elements in this division are centered:
<DIV ALIGN=CENTER> . . . </DIV>
| Note |
The alignment assigned to elements in the division always overrides the alignment set for the division. This means that if the division alignment is flush right and you use the <CENTER> tag to center an image in the division, the image will be centered. |
In HTML 3.2, you can align headings and paragraphs, too, with the three alignment values. The default alignment for headings and paragraphs is flush left.
To center a heading, you could use the following:
<H1 ALIGN=CENTER> A centered heading </H1>
To right-align a paragraph, you could use this:
<P ALIGN=RIGHT> This paragraph is aligned with the right margin. </P>
| Note |
Because paragraph text can be aligned based on the ALIGN attribute, I recommend you use the begin and end paragraph tags so you have a clear understanding of what text will be aligned and what text won't be aligned. |
Figure 5.8 shows a cool HTML 3.2-enhanced page that uses division, heading, and paragraph alignment. The markup for the page is shown in Listing 5.4.
Listing 5.4. htmlfaq.htm.
<HTML> <HEAD> <TITLE>The HTML Publishing FAQ</TITLE> </HEAD> <BODY BACKGROUND="BACK/FAQS.gif" TEXT="#000000"> <DIV ALIGN=CENTER> <IMG SRC="IMAGES/FAQTITLE.gif" BORDER="0"> <H2>The HTML Publishing FAQ</H2> <IMG SRC="DIVIDERS/LINE2.gif" BORDER="0" HEIGHT="5" WIDTH="400"> <H3 ALIGN="LEFT"> <IMG BORDER="0" ALIGN="MIDDLE" HSPACE="20" SRC="IMAGES/REDQ.gif"> <A HREF="#TOPIC1">What is HTML?</A></H3> <H3 ALIGN="RIGHT"> <A HREF="#TOPIC2">What are the Features of HTML?</A> <IMG BORDER="0" ALIGN="MIDDLE" HSPACE="20" SRC="IMAGES/YELQ.gif"> </H3> <H3 ALIGN="LEFT"> <IMG BORDER="0" ALIGN="MIDDLE" HSPACE="20" SRC="IMAGES/BLUEQ.gif"> <A HREF="#TOPIC3">What is Netscape?</A> </H3> <IMG BORDER="0" HEIGHT="5" WIDTH="400" SRC="DIVIDERS/LINE2.gif"> </DIV> <DIV ALIGN=CENTER> <P>The Full Text of the FAQ</P> </DIV> </BODY> </HTML>
Figure 5.8 : Aligning elements on the page.
The <BR> tag is useful when you're aligning images and text. Using the <BR> tag and the new CLEAR attribute, you can insert a clean break into the column of text associated with the image. The text before the <BR> tag will be aligned with the image in a column, and the text after the <BR> tag will be inserted after the margin is clear.
HTML 3.2 supports these values for clearing margins:
<BR CLEAR=LEFT>
<BR CLEAR=RIGHT>
<BR CLEAR=ALL>
An example using line breaks is shown in Figure 5.9. As you can see, if an image is aligned with the left margin, you should use a value of CLEAR=LEFT with the <BR> tag. This ensures that text following the line break clears the left margin. Similarly, if the image is aligned with the right margin, you should use a value of CLEAR=RIGHT with the <BR> tag to make sure the text following the line break clears the right margin. To clear both margins, use a value of CLEAR=ALL.
Figure 5.9 : Using line breaks with images.
Horizontal rules become helpful design tools with HTML 3.2. You can use the SIZE attribute to make the separation of topics and subtopics on your pages more distinct. The size of a horizontal rule is defined in terms of pixels, as in the following:
<HR SIZE=5>
A five-pixel size for the horizontal rule isn't very thick. To get a thicker rule, try using a size of 10:
<HR SIZE=10>
To separate topics and subtopics visually, you could use one size value for main topics and another size value for each level of subtopics. You should experiment with rule sizes in your publications. Five pixels is usually enough to separate main topics, and two pixels is enough for subtopics. Figure 5.10 shows a sample page with horizontal rules of different sizes.
Figure 5.10: The size of horizontal rules is in pixels.
Horizontal rules normally look engraved on the page, but you can define rules without shading by using the NOSHADE attribute. You could create a nonshaded rule as follows:
<HR SIZE=2 NOSHADE>
Other unique attributes for horizontal rules include ALIGN and WIDTH. These attributes are best used with each other. Using the ALIGN attribute, you can align a horizontal rule with the left margin, right margin, or center of the page with the values ALIGN=LEFT, ALIGN=RIGHT, and ALIGN=CENTER, respectively. Using the WIDTH attribute, you can define the length of the horizontal rule in pixels or as a percentage of the browser's window width:
<HR WIDTH=10> <HR WIDTH=5%>
More examples of horizontal rules are shown in Figure 5.11. The markup for this page is shown in Listing 5.5.
Listing 5.5. morehr.htm.
<HTML> <HEAD> <TITLE>More Horizontal Rule Examples</TITLE> </HEAD> <BODY BGCOLOR="#000000" TEXT="#FFFFFF"> <P>These horizontal rules have no shading:</P> <HR SIZE="5" NOSHADE> <HR SIZE="5" NOSHADE> <P>A horizontal rule 50 pixels in length:</P> <HR SIZE="5" WIDTH=50> <P>The length of this horizontal rule is 50 percent of the current window size:</P> <HR SIZE="5" WIDTH=50%> <P>By default, horizontal rules are centered, you can change this if you want:</P> <HR SIZE="5" ALIGN=LEFT WIDTH=50%> <HR SIZE="5" ALIGN=RIGHT WIDTH=50%> <HR SIZE="5" ALIGN=LEFT WIDTH=50%> <HR SIZE="5" ALIGN=RIGHT WIDTH=50%> </BODY> </HTML>
Figure 5.11: Adjusting the length of horizontal rules in your pages.
By combining the horizontal rule attributes, you can create powerful effects, such as the one shown in Figure 5.12. The code for the example is shown in Listing 5.6.
Listing 5.6. fancyhr.htm.
<HTML> <HEAD> <TITLE>Fancy Horizontal Rules</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <HR ALIGN=CENTER SIZE=2 WIDTH=65> <HR ALIGN=CENTER SIZE=3 WIDTH=75> <HR ALIGN=CENTER SIZE=4 WIDTH=85> <HR ALIGN=CENTER SIZE=5 WIDTH=95> <HR ALIGN=CENTER SIZE=4 WIDTH=105> <HR ALIGN=CENTER SIZE=3 WIDTH=115> <HR ALIGN=CENTER SIZE=2 WIDTH=125> <H1 ALIGN=CENTER>Welcome!</H1> <HR ALIGN=CENTER SIZE=2 WIDTH=125> <HR ALIGN=CENTER SIZE=3 WIDTH=115> <HR ALIGN=CENTER SIZE=4 WIDTH=105> <HR ALIGN=CENTER SIZE=5 WIDTH=95> <HR ALIGN=CENTER SIZE=4 WIDTH=85> <HR ALIGN=CENTER SIZE=3 WIDTH=75> <HR ALIGN=CENTER SIZE=2 WIDTH=65> </BODY> </HTML>
Figure 5.12: Using fancy horizontal rules.
| Note |
Remember, browsers that aren't HTML 3.2-compliant ignore the sizing and alignment values for horizontal rules. These browsers display the multiple horizontal rules in the example as ordinary horizontal rules. Therefore, it's best to use multiple horizontal rules only on pages that will be displayed by HTML 3.2-compliant browsers. |
HTML 3.2 introduces many useful font enhancements. All these enhancements are defined for use with the <FONT> tag, which is used with a begin and end tag. The next sections explore enhancements for the <FONT> tag one by one.
In the HTML 2.0 specification, there's no way to define a specific font size to use, primarily because the font size is controlled by configurations in the user's browser, and the user is the one who selects the font size she wants to use for viewing Web documents. Using different heading levels, Web publishers had some control over font size in graphical browsers. Generally, a Level One heading could be used to create text 8 to 10 point sizes larger than regular text, a Level Two heading for text 6 to 8 point sizes larger than regular text, and so on. However, this still didn't give Web publishers accurate control over font sizes, especially if the publisher wanted to change font size in the middle of a line of text.
HTML 3.2 corrects this shortcoming by allowing Web publishers to finally define font size. All font sizes are specified as relative values between 1 and 7. A value of 1 is used for the smallest text, and a value of 7 is used for the largest text. The default value for font size is 3, which corresponds to the size of standard text.
The following example shows how to set the font size to a specific value:
<FONT SIZE=4><P>This line of text is larger than normal</P></FONT>
You can also set the font size in relation to the size used with the current text element. To do this, precede the size value by + or - to indicate a relative change in the font size. Here, two relative font sizes are used to adjust the size of the text:
<P>Normal text is displayed in font size 3. <FONT SIZE=-2><P>Text is displayed in font size 1.</P></FONT> <FONT SIZE=+2><P>Text is displayed in font size 5.</P></FONT>
Being able to adjust the font size is very handy. A small font size is useful for disclaimers or copyright notices that you want to display but not take up too much space on the page. A large font size is useful when you want to draw attention to specific keywords or paragraphs of text. You can adjust the font size to create a large first letter for keywords or the first word in a paragraph, which is called a drop cap, a design technique used by many Web publishers. These effects are shown in Figure 5.13. The markup for the example is listed in Listing 5.7.
Listing 5.7. fontex.htm.
<HTML> <HEAD> <TITLE>Using Font Sizes</TITLE> </HEAD> <BODY TEXT="#000000" BGCOLOR="#FFFFFF"> <P>Being able to <FONT SIZE="+3">adjust</FONT> the font size is very handy.</P> <P></P> <P><FONT SIZE="2">A small font size is useful for disclaimers or copyright notices you want to place on the page, but do not want to eat up page space.</FONT></P> <P></P> <P><FONT SIZE="5">A large font size is useful when you want to draw attention to specific keywords or paragraphs of text.</FONT></P> <P></P> <P><FONT SIZE="+7">Y</FONT>ou can adjust the font size to create a large first letter for keywords or the first word in a paragraph, which is called a drop cap. </P> <P><FONT SIZE="+7">D</FONT>rop caps are a design technique used by many Web publishers.</P> </BODY> </HTML>
Figure 5.13: Using different font sizes.
As shown in Figure 5.14, you can also create word art by adjusting the font size within words or sentences. Listing 5.8 contains the markup for the word art example.
Listing 5.8. relfonts.htm.
<HTML> <HEAD> <TITLE>Using Relative Font Sizes</TITLE> </HEAD> <BODY BGCOLOR="#000000" TEXT="#FFFFFF"> <HR SIZE=5 NOSHADE WIDTH=50%> <HR SIZE=5 NOSHADE WIDTH=75%> <CENTER> <H1> <FONT SIZE=-2>T</FONT> <FONT SIZE=-1>H</FONT> <FONT SIZE=+0>E</FONT> <FONT SIZE=+1>H</FONT> <FONT SIZE=+2>O</FONT> <FONT SIZE=+3>T</FONT> <FONT SIZE=+4>T</FONT> <FONT SIZE=+4>E</FONT> <FONT SIZE=+3>S</FONT> <FONT SIZE=+2>T</FONT> <FONT SIZE=+1>P</FONT> <FONT SIZE=+0>A</FONT> <FONT SIZE=-1>G</FONT> <FONT SIZE=-2>E</FONT> </H1> <H1> <FONT SIZE=+4>H</FONT> <FONT SIZE=+3>T</FONT> <FONT SIZE=+2>M</FONT> <FONT SIZE=+1>L</FONT> <FONT SIZE=+1>3</FONT> <FONT SIZE=+2>.</FONT> <FONT SIZE=+3>2</FONT> </H1> <H1> <FONT SIZE=+1>E</FONT> <FONT SIZE=+2>N</FONT> <FONT SIZE=+3>H</FONT> <FONT SIZE=+4>A</FONT> <FONT SIZE=+4>N</FONT> <FONT SIZE=+3>C</FONT> <FONT SIZE=+2>E</FONT> <FONT SIZE=+1>D</FONT> </H1> </CENTER> <HR SIZE=5 NOSHADE WIDTH=75%> <HR SIZE=5 NOSHADE WIDTH=50%> </BODY> </HTML>
Figure 5.14: Creating word art with relative fonts.
Until recently, the font color used in your documents was either black by default or set by users to a specific color, if their browsers supported a color option. HTML 3.2 has a way for Web publishers to control font color anywhere in the text of the document. Using the COLOR attribute for the <FONT> tag, you can set the color in one of two ways:
| Using Colorful Fonts |
Although the capability to assign font colors is useful, using color in publications has always caused problems. Some color combinations just don't go together-such as purple, green, and hot pink text all on the same Web page. Don't use color in your publication just because you can-rather, use color as a design technique to enhance your page. When using colorful text in Web publications, you should follow three general rules:
|
With HTML 3.2, you can add more variety to the text part of your page by using strikethrough, big, small, superscript, and subscript text. The associated tags highlight your text, but they don't insert white space into the document. This makes it possible to use character style tags within other tags to highlight a single word or a group of words.
When you're creating a document, often you want some text to be larger than the surrounding text. The only way you could do this in HTML 2.0 was to use a header tag, which isn't how header tags are intended to be used and could cause problems with older browsers, such as Lynx. In HTML 3.2, Web publishers no longer have this problem. Text highlighted with <BIG> is displayed in a larger-than-normal font on the page:
<BIG> Large text </BIG>
As a Web publisher, sometimes you want sections of small text for copyright notices, disclaimers, or other legal notes in your documents. Text highlighted with <SMALL> is displayed in a smaller-than-normal font on the page:
<SMALL> Small text </SMALL>
A basic addition to HTML 3.2 is strikethrough text, which is displayed by browsers as text with a line drawn through it. You can define strikethrough text as follows:
<S> Strikethrough text </S>
Another useful addition to HTML 3.2 is subscripts and superscripts. Subscript text, displayed by browsers in a subscript font, is defined by using the begin and end <SUB> tags; superscript text, displayed by browsers in a superscript font, is defined by using the begin and end <SUP> tags. You can use subscript and superscript as follows:
<SUB> Subscript text </SUB> <SUP> Superscript text </SUP>
Figure 5.15 shows an example of the new HTML 3.2 text styles. The markup for the example is given in Listing 5.9.
Listing 5.9. newstyle.htm.
<HTML> <HEAD> <TITLE>Using New HTML 3.2 Text Styles</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <HR SIZE=5 NOSHADE> <P>Text highlighted with <BIG> is displayed in a larger font than normal paragraph text on the page: <P>While this is normal text, <BIG> this is large text.</BIG> <HR SIZE=5 NOSHADE> <P>Text highlighted with <SMALL> is displayed in a smaller font than normal paragraph text on the page: <P>See the difference between normal text <SMALL> and small text.</SMALL> Yes? <HR SIZE=5 NOSHADE> <P><S>Strikethrough text should be displayed by browsers with a line through it.</S> <HR SIZE=5 NOSHADE> <P>Another useful addition to HTML 3.2 are su<SUB>bscrip</SUB>ts and su<SUP>perscrip</SUP>ts. Subscript text is displayed by browsers in a <SUB>subscript</SUB> font. Superscript text is displayed by browsers in a <SUP>superscript</SUP> font. <HR SIZE=5 NOSHADE> </BODY> </HTML>
Figure 5.15: New text styles in HTML 3.2.
HTML 3.2 offers several useful extensions for lists. Using the TYPE attribute, you define the bullet shape to use for unordered lists and the style of lettering or numbering to use for ordered lists.
For unordered lists, you can use these values with the unordered list tag:
<UL TYPE=CIRCLE> Use an open circle for the bullet
<UL TYPE=SQUARE> Use a square for the bullet
<UL TYPE=DISC> Use a solid circle for the bullet, which is the default
An unordered list using these attributes is shown in Figure 5.16.
As you can see from the
example, each type of bullet-the open circle, square, and solid
circle-has a distinct
appearance.
Figure 5.16: Defining bullet shapes for unordered lists in HTML 3.2.
The default values used for ordered lists are numerals. When you
nest ordered lists, the numerals change to an appropriate level
for outlines. You can override this sequencing with the following
attributes:
| Use capital letters for the ordered list elements | |
| Use lowercase letters for the ordered list elements | |
| Use Roman numerals for the ordered list elements | |
| Use lowercase Roman numerals for the ordered list elements | |
| Use numerals for the ordered list elements, which is the default |
Figure 5.17 shows two ordered lists-the first uses Roman numerals and the second capital letters.
Figure 5.17: Ordered lists in HTML 3.2.
You can set items in an ordered list to start at a specific value by using the START attribute. You assign a numeric value to the START attribute even if you're using letters or Roman numerals for your ordered list. This code specifies that the list will start with the capital letter D:
<OL TYPE=A START=4>
As you have seen in this chapter, designing with HTML 3.2 is easy. HTML 3.2 features hot enhancements to the HTML specification that you can use to dramatically improve your documents' impact. Image enhancements allow you to create text flow around images, layout extras offer better control over positioning text and objects, font enhancements let you select font color and relative size, and body tag extensions allow you to use background images and colors.
