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 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. |
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.
<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.
<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.
<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.
<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.
<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.
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>
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.
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:
Red | Aqua | Green | Silver |
Maroon | Navy | Purple | Grey |
Black | Yellow | Blue | Teal |
Lime | White | Fuchsia | 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 |
Name of Color | |
Aquamarine | |
Baker's Chocolate | |
Black | |
Blue | |
Blue Violet | |
Brass | |
Bright Gold | |
Brown | |
Bronze | |
Bronze II | |
Cadet Blue | |
Cool Copper | |
Copper | |
Coral | |
Cyan | |
Corn Flower Blue | |
Dark Brown | |
Dark Green | |
Dark Green Copper | |
Dark Olive Green | |
Dark Orchid | |
Dark Purple | |
Dark Slate Blue | |
Dark Slate Grey | |
Dark Tan | |
Dark Turquoise | |
Dark Wood | |
Dim Grey | |
Dusty Rose | |
Feldspar | |
Firebrick | |
Forest Green | |
Gold | |
Goldenrod | |
Grey | |
Green | |
Green Copper | |
Green Yellow | |
Hunter Green | |
Indian Red | |
Khaki | |
Light Blue | |
Light Grey | |
Light Steel Blue | |
Light Wood | |
Lime Green | |
Magenta | |
Mandarin Orange | |
Maroon | |
Medium Aquamarine | |
Medium Blue | |
Medium Forest Green | |
Medium Goldenrod | |
Medium Orchid | |
Medium Sea Green | |
Medium Slate Blue | |
Medium Spring Green | |
Medium Turquoise | |
Medium Violet Red | |
Medium Wood | |
Midnight Blue | |
Navy Blue | |
Neon Blue | |
Neon Pink | |
New Midnight Blue | |
New Tan | |
Old Gold | |
Orange | |
Orange Red | |
Orchid | |
Pale Green | |
Pink | |
Plum | |
Quartz | |
Red | |
Rich Blue | |
Salmon | |
Scarlet | |
Sea Green | |
Semi-Sweet Chocolate | |
Sienna | |
Silver | |
Sky Blue | |
Slate Blue | |
Spicy Pink | |
Spring Green | |
Steel Blue | |
Summer Sky | |
Tan | |
Thistle | |
Turquoise | |
Very Dark Brown | |
Very Light Grey | |
Violet | |
Violet Red | |
Wheat | |
White | |
Yellow | |
Yellow Green |
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>
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.
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.
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.
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 |
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>
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.
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 |
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>
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 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>
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).
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>
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>
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 |
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 |
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.
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.