Chapter 9

Advanced HTML Techniques


CONTENTS


As mentioned in the introduction, the purpose of this book is not to provide a comprehensive overview of various HTML tags. However, a few relatively new and useful HTML tags are discussed in the following sections. You can use these HTML tags to make a Web site easier and more interesting to navigate. An increasingly large amount of applications are being developed to create content for the World Wide Web in a WYSIWYG environment that utilizes various advanced HTML tags. However, knowing how these tags work comes in handy when it's necessary to fine-tune the HTML code. The advanced HTML tips and techniques presented shortly will help you make your Web +site easier and more interesting to browse by formatting its contents in an attractive manner. Refer to Teach Yourself Web Publishing with HTML 3, Premier Edition, by Laura Lemay, Sams.net Publishing (1-57521-014-2), for additional information about various HTML 3.0 tags.

Tables

Tables are very helpful for formatting the contents of a Web page. You can place various objects such as graphics, video clips, text, and Java applets in a certain part of a Web page by using tables. Many Web sites use tables to organize the contents of a Web page and make maximum use of Web browser space. In the next few sections, you learn how easy it is to use tables to format the contents of a Web site and to control where objects appear in a Web page.

The syntax of the HTML tag used to create tables is very simple. Listed next are descriptions of various HTML tags you can use to create and customize tables. At the time of this writing, the HTML 3.0 standard was not yet implemented on all Web browsers. However, Netscape Navigator and Internet Explorer are two of the most widely used Web browsers on the Internet, and they both support most proposed HTML 3.0 tags. The following sections list HTML tags you can use to create tables. These tags are compatible with both Internet Explorer and Netscape Navigator, with the exception of a few HTML tags.

Note
If you'd like to experiment with them, you can find the HTML examples listed next on the CD-ROM (Chapter-9) that accompanies this book.

Table Data Containers

The following HTML tags act as containers for table data. Text and other objects placed within these data containers appear inside the table. After table containers are discussed, the next section shows you how to change their attributes.

The <TABLE> </TABLE> Tag

<TABLE>
… contents of the table…
  <TABLE>
    … contents of embedded table…
  </TABLE>
</TABLE>

The <TABLE> </TABLE> tag is used to define a table. All contents of a table should appear inside the two HTML tags <TABLE> and </TABLE>. Note that it's possible to have one table embedded inside another table. Contents of objects contained in a table are left aligned by default.

The <TR> </TR> Tag

<TR>
  … contents of a table row
</TR>

You can create table rows with the two HTML tags <TR> and </TR>. Contents of objects contained in a row are left aligned by default.

The <TD> </TD> Tag

<TD> table data </TD>
<TD> table data </TD>

Table data is enclosed within the two HTML tags <TD> and </TD>. Objects inside the table data tag are left aligned by default.

The <TH> </TH> Tag

<TH>table header data</TH>
<TH>table header data</TH>

This tag is used to define table headers. Text defined in between the two HTML tags <TH> and </TH> are identical to text defined between the two HTML tags <TD> and </TD>. The only difference is the fact that text defined within table header tags appears in bold and is centered by default.

The <CAPTION> </CAPTION> Tag

<CAPTION>table caption</CAPTION>

The caption of a table can be defined with the two HTML tags <CAPTION> and </CAPTION>. By default, table captions appear horizontally centered, on top of a table. Table captions can be formatted as follows. Note that <ALIGN> and <VALIGN> can be used together.

<CAPTION ALIGN=LEFT>-Displays caption left aligned.
<CAPTION ALIGN=CENTER>-Displays caption centered between the left and right borders of a table.
<CAPTION ALIGN=RIGHT>-Displays caption right aligned.
<CAPTION VALIGN=TOP>-Displays caption above the table.
<CAPTION VALIGN=BOTTOM>-Displays caption below the table.

Note that Netscape Navigator handles caption alignment differently. Use <CAPTION ALIGN=TOP> to display a caption on top of a table, and use <CAPTION ALIGN=BOTTOM> to display a caption below a table in Netscape Navigator. Netscape does support VALIGN inside table cells, just not inside captions.

Using Table Data Containers

The following example shows how the HTML tags discussed earlier can be used to create a table with data. The HTML code of the table shown in Figure 9.1 is listed next.

Figure 9.1: Simple table created with various table data containers.

<HTML>
<HEAD><TITLE>HTML Table Demonstration</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000"
LINK="#0000FF" VLINK="#FF7500" ALINK="#FF4B9A">

<TABLE BORDER=1>
<CAPTION ALIGN=TOP>Caption of table</CAPTION>
<TR>
  <TH>Table</TH><TH>header</TH><TH>data</TH>
</TR>
<TR>
  <TD>Regular </TD><TD>table </TD><TD>data </TD>
</TR>
<TR>
  <TD>Hello </TD><TD>World! </TD>
</TR>
<TR>
  <TD>Tables </TD><TD>are </TD><TD>fun! </TD>
</TR>
</TABLE>

</BODY>
</HTML>

Formatting Attributes of Table Data Containers

You can modify the attributes of various table data containers by using the following HTML tags. A description of the tags that you can use to modify table attributes, as well as examples of how you can use them, are listed next.

Colors

Most HTML tags that take an RGB (Red, Green, Blue) color value also take predefined color names that are easy to remember. The following colors are supported by Internet Explorer:

RedAquaGreen Silver
MaroonNavyPurple Grey
BlackYellowBlue Teal
LimeWhiteFuchsia Olive

A few RGB color values that come in handy when assigning colors to HTML objects are listed next. You might want to bookmark this page so you can refer to the following table when assigning RGB colors to objects of Web pages such as table cells, frames, and so on. You can also use the following Web site to obtain RGB codes of various colors.

URL
You can obtain RGB codes of various colors from the following Web site:
http://www.infi.net/wwwimages/colorindex.html

Table 9.1. RGB colors and values.

Name of Color
RGB Color Code
Aquamarine
#70DB93
Baker's Chocolate
#5C3317
Black
#000000
Blue
#0000FF
Blue Violet
#9F5F9F
Brass
#B5A642
Bright Gold
#D9D919
Brown
#A62A2A
Bronze
#8C7853
Bronze II
#A67D3D
Cadet Blue
#5F9F9F
Cool Copper
#D98719
Copper
#B87333
Coral
#FF7F00
Cyan
#00FFFF
Corn Flower Blue
#42426F
Dark Brown
#5C4033
Dark Green
#2F4F2F
Dark Green Copper
#4A766E
Dark Olive Green
#4F4F2F
Dark Orchid
#9932CD
Dark Purple
#871F78
Dark Slate Blue
#6B238E
Dark Slate Grey
#2F4F4F
Dark Tan
#97694F
Dark Turquoise
#7093DB
Dark Wood
#855E42
Dim Grey
#545454
Dusty Rose
#856363
Feldspar
#D19275
Firebrick
#8E2323
Forest Green
#238E23
Gold
#CD7F32
Goldenrod
#DBDB70
Grey
#C0C0C0
Green
#00FF00
Green Copper
#527F76
Green Yellow
#93DB70
Hunter Green
#215E21
Indian Red
#4E2F2F
Khaki
#9F9F5F
Light Blue
#C0D9D9
Light Grey
#A8A8A8
Light Steel Blue
#8F8FBD
Light Wood
#E9C2A6
Lime Green
#32CD32
Magenta
#FF00FF
Mandarin Orange
#E47833
Maroon
#8E236B
Medium Aquamarine
#32CD99
Medium Blue
#3232CD
Medium Forest Green
#6B8E23
Medium Goldenrod
#EAEAAE
Medium Orchid
#9370DB
Medium Sea Green
#426F42
Medium Slate Blue
#7F00FF
Medium Spring Green
#7FFF00
Medium Turquoise
#70DBDB
Medium Violet Red
#DB7093
Medium Wood
#A68064
Midnight Blue
#2F2F4F
Navy Blue
#23238E
Neon Blue
#4D4DFF
Neon Pink
#FF6EC7
New Midnight Blue
#00009C
New Tan
#EBC79E
Old Gold
#CFB53B
Orange
#FF7F00
Orange Red
#FF2400
Orchid
#DB70DB
Pale Green
#8FBC8F
Pink
#BC8F8F
Plum
#EAADEA
Quartz
#D9D9F3
Red
#FF0000
Rich Blue
#5959AB
Salmon
#6F4242
Scarlet
#8C1717
Sea Green
#238E68
Semi-Sweet Chocolate
#6B4226
Sienna
#8E6B23
Silver
#E6E8FA
Sky Blue
#3299CC
Slate Blue
#007FFF
Spicy Pink
#FF1CAE
Spring Green
#00FF7F
Steel Blue
#236B8E
Summer Sky
#38B0DE
Tan
#DB9370
Thistle
#D8BFD8
Turquoise
#ADEAEA
Very Dark Brown
#5C4033
Very Light Grey
#CDCDCD
Violet
#4F2F4F
Violet Red
#CC3299
Wheat
#D8D8BF
White
#FFFFFF
Yellow
#FFFF00
Yellow Green
#99CC32

Borders

By using the <BORDER> tag, it's possible to control the appearance of a table border. Refer to Figure 9.2 for an example of what the following HTML code looks like.

Figure 9.2: The border of a table can be controlled with the <BORDER> tag.

<HTML>
<HEAD><TITLE>HTML Table Demonstration</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#FF7500" ALINK="#FF4B9A">

<TABLE BORDER=0>
<CAPTION ALIGN=TOP>Table with BORDER=0</CAPTION>
<TR><TD>This </TD><TD>is </TD><TD>a </TD></TR>
<TR><TD>demonstration of </TD><TD>table </TD><TD>borders</TD></TR>
</TABLE>

<TABLE BORDER=1>
<CAPTION ALIGN=TOP>Table with BORDER=1</CAPTION>
<TR><TD>This </TD><TD>is </TD><TD>a </TD></TR>
<TR><TD>demonstration of </TD><TD>table </TD><TD>borders</TD></TR>
</TABLE>

<TABLE BORDER=2>
<CAPTION ALIGN=TOP>Table with BORDER=2</CAPTION>
<TR><TD>This </TD><TD>is </TD><TD>a </TD></TR>
<TR><TD>demonstration of </TD><TD>table </TD><TD>borders</TD></TR>
</TABLE>

<TABLE BORDER=3>
<CAPTION ALIGN=TOP>Table with BORDER=3</CAPTION>
<TR><TD>This </TD><TD>is </TD><TD>a </TD></TR>
<TR><TD>demonstration of </TD><TD>table </TD><TD>borders</TD></TR>
</TABLE>

</BODY>
</HTML>

Border Colors

You can assign colors to various borders of tables by using the following HTML tags inside tags used to define various parts of a table, such as <TABLE> and <TD>. Border colors were not supported by Netscape Navigator at the time of this writing.

Background Colors

Internet Explorer supports various background colors in tables as well as table cells. The syntax of the background color tag is <BGCOLOR=<colorname>>. The color name can be either an RGB color code or a color name such as Black, White, Yellow, and so on. The following example demonstrates how background colors can be assigned to tables and table cells:

<HTML>
<HEAD><TITLE>Table Background Color Demonstration</TITLE>
</HEAD>
<BODY BGCOLOR="#BFBFBF" TEXT="#000000" LINK="#0000FF" VLINK="#FF7500" ÂALINK="#FF4B9A">

<TABLE BORDER=8 BGCOLOR=LIME >
<CAPTION ALIGN=TOP>This entire table is Lime</CAPTION>
<TR><TD>Table </TD><TD>with </TD><TD>lime background </TD></TR>
</TABLE>

<TABLE BORDER=8 BGCOLOR=Lime >
<CAPTION ALIGN=TOP>This entire table is Lime with multi colored cells</CAPTION>
<TR>
<TD BGCOLOR=Yellow> BGCOLOR = Yellow </TD>
<TD BGCOLOR=Aqua> BGCOLOR = Aqua </TD>
</TR>
<TR>
<TD BGCOLOR=White> BGCOLOR = White </TD>
<TD BGCOLOR=Silver> BGCOLOR = Silver </TD>
</TR>
</TABLE>

</BODY>
</HTML>

Figure 9.3: Background colors can be assigned to an entire table or individual cells of a table.

Background Images

In addition to background colors, you can assign background images to a table or individual cells of a table. The syntax of the background image tag is very similar to that of the background color tag. The only difference is the fact that a URL of a background image is specified in the background image tag. The syntax of the background image tag is BACKGROUND="URL of background image". An example of using background images in a table and cells of a table is listed next. If you wish to experiment with this example, you can find it in the CD-ROM (Chapter-9\Tables\Table4.htm).

<HTML>
<HEAD><TITLE>Table Background Image Demonstration</TITLE>
</HEAD>
<BODY BGCOLOR="#DFDFDF" TEXT="#000000" LINK="#0000FF" VLINK="#FF7500" ÂALINK="#FF4B9A">

<TABLE BORDER=8 BACKGROUND="GreenAndWhitePaper.gif" >
<CAPTION ALIGN=TOP>
<H2>A background image is used in this table</H2>
</CAPTION>

<TR>
<TD BACKGROUND="YellowStucco.gif" >
<H3>This cell has its own background image. A background image was added to
this cell with the BACKGROUND="YellowStucco.gif" HTML tag</H3></TD>
<TD BACKGROUND="BluePaper.gif" >
<H3>This cell has its own background image. A background image was added to
this cell with the BACKGROUND="BluePaper.gif" HTML tag</H3></TD>
</TR>
</TABLE>

</BODY>
</HTML>

Figure 9.4: A background image can be tiled in a table or cell of a table.

Aligning Contents of a Table

The data containers <TABLE>, <TR>, <TH>, and <TD> can be aligned with <ALIGN> and <VALIGN>. The <VALIGN> tag is used to align the contents of a container to its top or bottom. The default is center or middle aligned. The <ALIGN> tag is used to align the contents of a container to its left or right border. By default, the contents are center or middle aligned. A few examples of these two tags are listed next:

URL
Tables are implemented in Microsoft Internet Explorer according to the HTML specification at the following URL:
http://www.microsoft.com/ie/author/htmlspec/tables.htm

URL
Visit the following Web site for more information about how tables are implemented in Netscape Navigator:
http://home.netscape.com/assist/net_sites/tables.html

Merging Table Rows and Columns

Rows and columns of a table can be merged together by using the two HTML tags <COLSPAN> and <ROWSPAN>. These two tags can be used very easily to extend a row or column of a table. The following example demonstrates how rows and columns of a table can be joined together. Note that <COLSPAN> and <ROWSPAN> can be used only to extend areas of a table cell defined by the two HTML tags <TH> and <TD>.

<HTML>
<HEAD>
<TITLE>Table Column/Row merge demonstration</TITLE>
</HEAD>
<BODY BGCOLOR="#DFDFDF" Table Data="#000000" LINK="#0000FF"
VLINK="#FF7500" ALINK="#FF4B9A">

<TABLE BORDER=8>
<CAPTION ALIGN=TOP>
<H2>ROWSPAN / COLSPAN Demonstration</H2>
</CAPTION>

<TR>
  <TD ROWSPAN=2>Description</TD>
  <TD COLSPAN=2>Amount of Transaction</TD>
  <TD>Balance</TD>
</TR>
<TR>
  <TD>Withdrawal</TD><TD>Deposit</TD>
  <TD ALIGN=RIGHT>$ 150</TD>
</TR>
<TR>
  <TD>Won Publishers Clearinghouse Lottery </TD> <TD></TD>
  <TD>$ 1,000,000</TD><TD ALIGN=RIGHT>$ 1,000,150</TD>
</TR>
<TR>
  <TD>Paid off Washington DC parking tickets </TD> <TD ALIGN=RIGHT>$500,000</TD>
  <TD></TD><TD ALIGN=RIGHT>$ 500,150</TD>
</TR>
<TR>
  <TD>Bought MS Bob (For Windows NT) </TD> <TD ALIGN=RIGHT>$100</TD>
  <TD></TD><TD ALIGN=RIGHT>$ 500,050</TD>
</TR>
<TR>
  <TD>Closing balance</TD>
  <TD COLSPAN=3 ALIGN=RIGHT>$ 500,050</TD>
</TR>
</TABLE>

</BODY></HTML>

Figure 9.5: Rows and columns of a table can be made to span additional rows and columns by using <COLSPAN> and <ROWSPAN>.

Frames

When used properly, frames can make a Web site easier to navigate, as shown in Figure 9.6. Frames allow Web content developers to have more control over the layout of a Web page. For example, frames can be used to display an index of a Web site in one frame while users use another frame to browse various Web pages.

Figure 9.6: You can use frames to organize the contents of a Web site more efficiently and make it easier to navigate.

As you can see in this figure, the contents of a Web site can be broken down into various sections by using frames. In the example in Figure 9.6, A Java applet is used to display various messages at the top of the page. Because the Java applet is in a frame, when users navigate the Web site, they will still be able to view various messages that scroll on the Java applet's LED display. A help icon is also placed beside the Java applet in case a user needs help navigating a Web site that has frames. Note that the help icon is actually an animated GIF file with the four frames Click, Here, For, and Help. The Java applet was displaying the For frame when the screen capture was taken, just in case you were wondering what the For icon was for! If you're interested in creating animated GIF files for your Web site, refer to the section on animated GIF files in Chapter 11, "Adding Multimedia to Your Web Site."

The two middle frames display most of the data. The frame to the left side can be used as an index of Web pages, and the one to the right is used to display various pages selected by the user. The bottom frame can be used to perform common functions such as return to the main Web page, provide feedback, and so on. The following section demonstrates how easy it is to add frames to a Web site.

Before discussing various HTML tags used to create frames, a simple example is presented next to introduce you to frames. Then the HTML tags you can use to create frames are discussed. You then learn how to create a more complicated frame set.

URL
You can obtain more information about how frames are implemented in MS Internet Explorer from the following Web site:
http://www.microsoft.com/ie/author/html30/frames.htm

URL
You can obtain more information about how frames are implemented in Netscape Navigator from the following Web site:
http://home.netscape.com/assist/net_sites/frames.html

Adding Frames to a Web Site

The syntax of frames resembles the syntax of tables in many ways. Refer to Figure 9.7 for a simple example of a set of frames. The frames in Figure 9.7 were generated with the HTML code listed after the following two paragraphs.

Figure 9.7: Simple frames demonstration.

As you can see in the following code listing, the <BODY> tag of the Web page is replaced by the <FRAMESET> tag. The <FRAMESET> tag is used to specify frames in a frame set. HTML tags that you can use to create frame sets are discussed in detail in the "Syntax of Frames" section.

Use the two tags <NOFRAMES> and </NOFRAMES> to display a message to users using technologically challenged Web browsers. HTML code between these two tags are ignored by frames compatible Web browsers. You might want to include the same URLs contained in various frames here to make it easier for technologically challenged users to navigate your Web site.

<HTML>
<HEAD>
<TITLE>Simple Frame Demonstration</TITLE>
</HEAD>

<FRAMESET COLS="120,50%,*">

<NOFRAMES>
Please use a Web browser such as Internet Explorer 3.0 or
Netscape Navigator to view this page in frames!
</NOFRAMES>

    <FRAME SRC="contents.htm">
    <FRAME SRC="contents.htm">
    <FRAME SRC="contents.htm">

</FRAMESET>
</HTML>

The examples presented in this section refer to a file by the name of contents.htm. The
contents of the file contents.htm used in the examples of this section are listed next. When creating a frame set, a filename has to be specified for each frame. Please note that you may substitute contents.htm with another file you may have created when experimenting with various examples in this section. You can find all examples in this section on the CD-ROM (Chapter-9\Tables) that comes with this book.

<HTML>
<HEAD><TITLE>Contents of Frame</TITLE>
</HEAD>
<BODY BGCOLOR="#FAEFB6" TEXT="#000000"
LINK="#0000FF" VLINK="#AA21A5" ALINK="#FF0080">

<H3><B>Contents of Frame!</B></H3>

</BODY>
</HTML>

Syntax of Frames

The <FRAME> tag is used to define a frame in a frame set. You can use the following HTML tags inside the <FRAME> tag:

The <FRAMESET> tag is used to define various attributes of frames. HTML tags that can be used within the <FRAMESET> tag are listed here:

Because it can be used to display the contents of a URL a user clicks on one frame in another frame. The <TARGET> tag is especially useful. The <TARGET> tag can be used inside certain HTML tags as demonstrated next:

In addition to the name of a frame, the following values can be substituted with <TargetName>.

A More Complicated Demonstration of Frames

A slightly more complicated example of frames appears in Figure 9.8. The source code of the frame set in Figure 9.8 is listed here:

Figure 9.8: A more complicated demonstration of frames.

<HTML>
<head>
<title>simple frame demonstration</title>
</head>

<frameset rows="40,*,40>

<noframes>

Please use a Web browser such as Internet Explorer 3.0 or

Netscape Navigator to view this page in frames!

</NOFRAMES>

  <FRAME SRC="contents.htm">

  <FRAMESET COLS="120,*">

    <FRAME SRC="contents.htm">

    <FRAMESET ROWS=",50">
      <FRAME SRC="contents.htm">
      <FRAME SRC="contents.htm">
    </FRAMESET>

  </FRAMESET>

  <FRAME SRC="contents.htm">

</FRAMESET>

</HTML>

Text Special Effects

Several HTML tags introduced by Microsoft and Netscape give content developers more control over various typefaces they can use in documents published on the Web. Some of the more useful HTML tags that can be used to control various attributes of typefaces in Web pages are listed next. Although, at the time of this writing, Internet Explorer was the only Web browser that could display TrueType fonts, this might have changed by the time you've read this. All examples in the following sections can be found on the CD-ROM (Chapter-9\Fonts).

Font Sizes

By using <FONT SIZE=<Size Of Font>>, it's possible to change the size of a font. As shown in the following example, <Size Of Font> can be used to increment and decrement a number from the base font size with + and -. Refer to Figure 9.9 for an example of how you can use the preceding HTML tag to control font sizes. The HTML code used to generate the Web page shown in Figure 9.9 is also listed next for your reference:

Figure 9.9: You can control font sizes by using the <FONT SIZE=#> HTML tag.

<HTML>
<head>
   <title>Font Size Demonstration</title>
</head>

<body text="#000000" bgcolor="#FFFFFF" link="#0000EE"
vlink="#551A8B" alink="#FF0000">

<font SIZE=-2>Font Size - 2</font><BR>

<font SIZE=-1>Font Size - 1</font><BR>

Regular Font Size <BR>

<font SIZE=+1>Font Size + 1</font><BR>

<font SIZE=+2>Font Size + 2</font><BR>

<font SIZE=+3>Font Size + 3</font><BR>

<font SIZE=+4>Font Size + 4</font><BR>

</body>
</HTML>

Text Colors

You can specify text colors by using the <font COLOR="#<RGB Color value>"> HTML tag. An example of how this is accomplished appears in Figure 9.10. You might want to look at the file Chapter-9\Fonts\Fonts2.htm on the CD-ROM that comes with this book and experiment with it; you probably can't tell the difference between colors too much from the grayscale figure shown next. The HTML source code of Figure 9.10 is also provided for your reference:

Figure 9.10: Colors can be assigned to text by using the <FONT COLOR=#RGB_CODE> HTML tag.

<HTML>
<head>
   <title>Font Color Demonstration</title>
</head>

<body text="#000000" bgcolor="#FFFFFF" link="#0000EE"
vlink="#551A8B" alink="#FF0000">

<H3><font COLOR="#008000">Font COLOR="#008000"</font><BR>

<font COLOR="#808000">Font COLOR="#808000"</font><BR>

<font COLOR="#FF0000">Font COLOR="#FF0000"</font><BR>

<font COLOR="#0000FF">Font COLOR="#0000FF"</font><BR>

<font COLOR="#FF00FF">Font COLOR="#FF00FF"</font><BR>

<font COLOR="#800080">Font COLOR="#800080"</font><BR>

<font COLOR="#000040">Font COLOR="#000040"</font><BR></H3>

</body>
</HTML>

Using TrueType Fonts

At the time of this writing, MS Internet Explorer is the only Web browser that supports TrueType fonts. However, by the time you read this, several other Web browsers would have started supporting TrueType fonts, as well. Prior to Web browsers that support TrueType fonts, Web content developers had no way of controlling the appearance of a certain typeface. Web browsers that support TrueType fonts lift this restriction by giving Web content developers full control over the appearance of text in a Web page. Text of a Web page can be assigned a certain font by using the <FONT FACE> extension to HTML. This extension can be used to specify a primary font and several secondary fonts. If the primary font is not available on the user's system, a secondary font specified in the <FONT FACE> tag will be used. If you're confused, the following syntax definition and example of the <FONT FACE> tag should make this clearer:

Syntax: <FONT FACE="<Font-1>,<Font-2>,<Font-3>">

In the preceding syntax definition, if <Font-1> is unavailable, <Font-2> will be used, and if <Font-2> is unavailable as well, <Font-3> will be used.

An example of the <FONT FACE> tag appears in Figure 9.11.

Figure 9.11: You can use the <FONT FACE> HTML tag to assign True Type fonts to text in a Web page.

URL
Visit the Microsoft Typography Web page at the following URL for more information about TrueType fonts on the Web:
http://www.microsoft.com/truetype/content.htm

HTML 2.0 Specification

Although there is no official HTML at the time of this writing, an official standard exists for HTML 2.0. Because HTML 2.0 tags are understood by virtually all Web browsers, it is beneficial to be familiar with various standard HTML 2.0 tags. Browse the following Web page to learn more about various HTML tags defined in the HTML 2.0 specification and how these tags can be used to format the contents of a Web page.

URL
Official HTML 2.0 specification:
http://www.w3.org/pub/WWW/MarkUp/html-spec/html-spec_toc.html

Summary

You can make a Web site more interesting to navigate by utilizing a number of advanced HTML techniques. For example, you can use tables to format objects of a Web page such as text, video clips, and Java applets. You can use frames to make it easier to navigate a Web site. You can make a Web page's text more attractive to read by applying special attributes such as colors and fonts.

What's Next?

This chapter discussed a number of advanced HTML tags in detail. However, the HTML tags discussed in this chapter had to be manually added to a Web page. This can be frustrating as well as time consuming when working on a large project. The next chapter discusses a number of applications that you can use to create content for the Internet. Because most of these applications take care of HTML details, they help content developers concentrate more on the content they are publishing rather than on the intrinsic details of HTML.