Shree M .& N.

Virani Science College

BY MILAN KOTHARI

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 1

 Shree M .& N. Virani Science College

CHAPTER 1................................................................... 11
What is HTML? ....................................................................................11
HTML at a Crossroads..........................................................................11
HTML is not a Programming Language ................................................11
A Short HTML History ..........................................................................12
Marking Up Text ..................................................................................13
Who Decides What HTML Is?...............................................................13
The HTML Working Group....................................................................14
The World Wide Web Consortium ........................................................14
Individual Companies and HTML .........................................................14
Additional Information on HTML Standards and Organizations ...........15
Summary.............................................................................................15
Review Questions................................................................................15
CHAPTER 2................................................................... 16
The World Wide Web and Web Servers ...............................................16
What's the World Wide Web? ..............................................................16
The Hypertext Concept: Web Links......................................................16
Example: Thinking in Hypertext ..........................................................17
The Web Page ..................................................................................17
The Web Site .......................................................................................17
Example: A Corporate Web Site ........................................................18
Intranets vs. the Internet ...................................................................18
Hypermedia: Text and Graphics on the Web........................................18
Helper Applications ..........................................................................19
Common Multimedia Formats..............................................................19
Internet Services and Addresses.........................................................20
Internet E-mail.................................................................................20
Table 2.2 Common First-Level Domain Names.................................21
UseNet Newsgroups .........................................................................22
Table 2.3 Common UseNet First-Level Newsgroup Names...............23
Gopher and WAIS .............................................................................23
FTP ...................................................................................................23
Summary.............................................................................................24
Review Questions................................................................................24
Review Exercises ................................................................................25
CHAPTER 3................................................................... 26
How Web Browsers Work....................................................................26
Web Browser Applications ..................................................................26
NCSA Mosaic .......................................................................................26
Netscape Navigator.............................................................................26
Microsoft Internet Explorer.................................................................28
Lynx ....................................................................................................28

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 2

 Shree M .& N. Virani Science College

Uniform Resource Locators .................................................................29

Example: The URL Advantage..............................................................30
The Different Protocols for URLs .........................................................31
Table 3.1 Possible Protocols for an URL ..........................................31
Example: Accessing Other Internet Services with URLs ...................31
How Web Browsers Access HTML Documents .....................................32
Example: Watching the Link .............................................................32
What Can Be Sent on the Web? ...........................................................33
Binaries on the Web .........................................................................33
Everything is Downloaded ................................................................34
Summary.............................................................................................35
Review Questions................................................................................35
Review Exercises ................................................................................35
CHAPTER 4................................................................... 36
Creating Basic HTML Documents .........................................................36
Listing 4.1 The Simplest HTML Document...........................................36
The Document Heading .......................................................................37
Naming Your Document ......................................................................38
Creating a Document Hierarchy ..........................................................38
Customized Heading Information .....................................................41
Other Heading Elements...................................................................43
The Document Body ............................................................................43
Starting with the Required Elements ................................................43
Attributes of the BODY Element ..........................................................44
Coloring Your Documents .................................................................44
Table 4.4 Standard Colors and Their Values ....................................45
Filling in the Background..................................................................46
Commenting Your HTML Documents ...................................................47
The Address Element........................................................................47
Creating a Document Template ...........................................................48
CHAPTER 5................................................................... 50
Formatting Text as Paragraphs ...........................................................50
Table 5.1 ALIGN Values and Their Functions ...................................50
Adding and Preventing Line Breaks ..................................................51
Creating a Text Outline .......................................................................52
Adding Headings .................................................................................52
Adding Horizontal Lines ......................................................................53
Table 5.2 <HR> Attributes and Their Functions...............................54
Using Preformatted Text .....................................................................55
The <DIV> Tag ...................................................................................56
Layout Tips .........................................................................................56
A Specialized Template .......................................................................57
CHAPTER 6................................................................... 59
Applying Charcter Formatting .............................................................59
Logical Formatting ..............................................................................59

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 3

 Shree M .& N. Virani Science College

The <BLOCKQUOTE> Element ..........................................................60

Physical Format Elements ...................................................................61
Fonts ...................................................................................................62
The FONT Element...............................................................................62
The FACE Attribute ...........................................................................63
The SIZE Attribute............................................................................63
The COLOR Attribute ........................................................................64
The <BASEFONT> Tag ......................................................................64
Text Formatting Tips ...........................................................................65
Creating Special Characters .............................................................65
Table 6.1 Some Symbols Defined in HTML 4.0 .................................66
CHAPTER 7................................................................... 67
Adding Graphics to a Web Page ..........................................................67
Understanding the Issues ................................................................67
What Should I Know When Using Images?.......................................67
Do I Have to Worry About an Image's Copyright? ............................68
Can I Get into Trouble for Pornographic Images? ............................69
Picking the Right Graphics File Format.............................................69
Colors ...............................................................................................70
Loss..................................................................................................70
Table 7.1 Compression Schemes .....................................................70
Browser Support ..............................................................................70
Adding Inline Images to Your HTML Document ...................................70
Aligning Text with an Inline Image ..................................................71
Table 7.2 Values for the ALIGN Attribute ........................................71
Positioning an Image on the Web Page ............................................72
Table 7.3 Values for the ALIGN Attribute ........................................72
Giving the Browser Size Hints .............................................................73
Providing Alternative Text................................................................74
Framing an Image with a Border......................................................75
Giving an Image Space.....................................................................75
Using an Image as an Anchor ...........................................................76
CHAPTER 8................................................................... 77
Linking Documents Together...............................................................77
Understanding Hypertext and Hypermedia .........................................77
Understanding Links.........................................................................77
Anchors ............................................................................................77
URL References ................................................................................78
Linking to Documents and Files...........................................................79
Internal Links .....................................................................................80
Files, Plug-In Content, and So On.....................................................81
The LINK Element ...............................................................................81
Linking to Other Net Resources ........................................................83
Creating a Link to E-Mail ..................................................................83
Creating a Link to Usenet News........................................................84

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 4

 Shree M .& N. Virani Science College

Making FTP Available on Your Site ...................................................85

Linking Your Home Page to a Gopher Site ........................................86
Providing Access to a Large Database with a WAIS Link ..................86
Accessing Remote Computers with Telnet Links...............................87
How Links Work Together ...................................................................88
Table 8.1 Sample Formats for Creating Links ..................................88
CHAPTER 9................................................................... 90
Adding Lists to a Web Page .................................................................90
Creating an Ordered List ..................................................................90
Using the <OL> Tag .........................................................................90
Additional <OL> Attributes ..............................................................91
Creating an Unordered List...............................................................93
Using the <UL> Tag .........................................................................93
Additional <UL> Attributes ..............................................................94
Creating Menu Lists..........................................................................95
Creating Directory Lists....................................................................96
Creating Definition Lists ...................................................................97
Combining List Types ..........................................................................98
Manually Formatting Lists ................................................................99
CHAPTER 10............................................................... 101
Formatting Content with Tables ........................................................ 101
Introducing Tables ......................................................................... 101
Understanding the Basic Tags ........................................................ 101
Aligning Table Elements ................................................................. 103
CHAR Alignment ............................................................................. 106
Table 11.1 HTML Width Definition Values ...................................... 107
Working with Advanced Tables ......................................................... 107
HTML 4.0 RULES and FRAME Attributes .......................................... 107
Creating Borderless Tables............................................................. 108
Spanning Rows and Columns.......................................................... 109
Grouping Rows and Columns .......................................................... 111
Understanding Empty Cells............................................................. 112
Controlling Table Layout ................................................................ 112
Using Color in Tables...................................................................... 113
Using a Table Alternative ............................................................... 114
Table Examples ................................................................................. 116
Using Tables as a Layout Tool ........................................................ 117
Combining Text and Lists ............................................................... 117
Nesting HTML Tables ...................................................................... 118
Using an Image as a Table Header ................................................. 119
Using a Table to Lay Out a Home Page ........................................... 120
CHAPTER 11............................................................... 121
Framing Your Web Site ..................................................................... 121
The Frames Concept ....................................................................... 121
Netscape's DevEdge Site ................................................................ 121

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 5

 Shree M .& N. Virani Science College

The CyberDungeon ......................................................................... 122

The Mondrian Machine.................................................................... 122
Frame Creation Basics .................................................................... 123
The FRAMESET Container ............................................................... 123
Defining ROWS and COLS ............................................................... 124
The <FRAME> Tag............................................................................. 126
Going to the Source........................................................................ 126
Providing Alternate Content ........................................................... 127
A Simple Page with Two Frames..................................................... 128
A Simple Rectangular Grid of Frames ............................................. 128
Creating a Complex Grid of Frames ................................................ 129
Modifying a Frame's Look and Feel................................................. 131
Frame Margins ............................................................................... 131
Frame Scrollbars ............................................................................ 132
Frame Resizing............................................................................... 132
Frame Borders................................................................................ 133
Targeted Hyperlinks ....................................................................... 134
Naming and Targeting Frames ....................................................... 135
Legitimate Names .......................................................................... 135
Table 12.1 Reserved Implicit Frame Names .................................. 135
Updating More than One Frame at a Time ...................................... 136
CHAPTER 12............................................................... 139
Collecting Input with Forms .............................................................. 139
Introducing HTML Forms ................................................................ 139
Working with HTML Forms Tags ........................................................ 139
<FORM> ......................................................................................... 139
<TEXTAREA>.................................................................................. 140
<SELECT> ...................................................................................... 141
<INPUT>........................................................................................ 143
Setting the <INPUT> Tag's TYPE.................................................... 143
Formatting and Designing Forms ...................................................... 147
Using Line Break Tags .................................................................... 147
Using List Tags ............................................................................... 151
Check Box and Radio Button Layouts ............................................. 152
Multiple Forms in a Document ........................................................ 154
Combining Forms with Tables ........................................................ 156
Final Notes on Form Layouts .......................................................... 158
HTML 4.0 Forms Additions................................................................. 158
New Tag Attributes ........................................................................ 158
New HTML 4.0 Forms Tags ............................................................. 159
CHAPTER 13............................................................... 161
Inserting Objects into a Web Page.................................................... 161
Three Ways to Go ........................................................................... 161
Getting to Know Plug-ins................................................................ 161
Embedded Plug-ins......................................................................... 161

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 6

 Shree M .& N. Virani Science College

Full-Page Plug-ins .......................................................................... 162

Inserting Plug-ins into Your Web Page........................................... 162
<EMBED> ....................................................................................... 162
<OBJECT> ...................................................................................... 163
Some Real-World Plug-In Examples.................................................. 165
Audio.............................................................................................. 166
Video .............................................................................................. 167
Rewarding the User (Bandwidth) ................................................... 168
Finding Other Useful Plug-ins............................................................ 169
Inserting ActiveX Controls ................................................................ 169
Setting a Control's Properties with the PARAM Tag ........................ 170
More About the <OBJECT> Tag ...................................................... 171
Connecting Controls to Scripts .......................................................... 174
Handling an Event .......................................................................... 174
Changing an Object's Properties .................................................... 176
Adding Java Applets to Your Pages ................................................ 176
Using the <APPLET> Tag................................................................ 177
Using the <OBJECT> Tag to Insert Java Applets ............................ 179
CHAPTER 14............................................................... 180
Adding JavaScript and VBScript to HTML........................................... 180
Introducing Scripts ........................................................................ 180
Choosing Between Server- or Client-Side Scripts ........................... 180
Choosing Between JavaScript and VBScript.................................... 181
Understanding How Browsers Interpret Scripts ............................. 181
When a Browser Executes Scripts .................................................. 182
How a Browser Handles Events ...................................................... 182
Benefits of Event-Driven Programming .......................................... 183
Learning to Program: Writing Scripts................................................ 183
Variables ........................................................................................ 184
Mathematical Expressions .............................................................. 184
Boolean Expressions ...................................................................... 184
Decisions........................................................................................ 186
Loops ............................................................................................. 187
Functions ....................................................................................... 188
Adding Scripts to Your HTML File.................................................... 188
Specifying a Default Scripting Language ........................................ 189
Linking to Scripts Instead of Embedding Them .............................. 189
Hiding Scripts from Older Browsers ............................................... 190
Associating Scripts with Events...................................................... 190
Writing Scripts with the ActiveX Control Pad.................................. 192
Using Scripts from Other People ....................................................... 192
Fly-Over Help for a Link's Destination ............................................ 193
Using Forms and JavaScript for Navigation ....................................... 193
CHAPTER 15............................................................... 195
Applying Cascading Style Sheets....................................................... 195

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 7

 Shree M .& N. Virani Science College

Understanding Style Sheets ........................................................... 195

Attaching a Style Sheet to Your HTML Document ........................... 195
Linking a Style Sheet...................................................................... 195
Embedding a Style Sheet ................................................................ 196
Defining Styles Inline ..................................................................... 196
Importing Style Sheets................................................................... 197
Naming and Combining Style Sheets .............................................. 198
Creating Style Sheets for Each Type of Media................................. 199
Adding Rules to a Style Sheet......................................................... 199
Setting Multiple Properties in a Single Rule.................................... 200
Grouping Selectors Together in a Single Rule................................. 200
Defining Parent-Child Relationships in Rules.................................. 200
Understanding Inheritance ............................................................ 201
Working with Classes in Your Style Sheets..................................... 201
Defining a Style for a Specific Element ........................................... 202
Working with Special Elements such as Anchors ............................ 202
Adding Comments to Your Style Sheet ........................................... 203
Hiding Style Sheets from Older Browsers ....................................... 203
CHAPTER 16............................................................... 205
Positioning HTML Elements ............................................................... 205
Understanding CSS Positioning ...................................................... 205
Positioning an HTML Element ......................................................... 205
Changing the Size of an Element .................................................... 206
Overlapping Multiple Elements ....................................................... 207
Nesting Positioned Elements .......................................................... 209
Positioning Elements with Scripts .................................................. 209
Using a Script to Hide or Show an Element..................................... 210
Moving an Element with a Script .................................................... 211
Expanding Forms: An Example ....................................................... 213
APPENDIX .................................................................. 216
HTML Tags ........................................................................................ 216
<!--> and --> Comment ................................................................. 216
<A>: Anchor................................................................................... 216
<ABBREV>: Abbreviations.............................................................. 217
<ACRONYM>: Acronym .................................................................. 217
<ADDRESS>: Address .................................................................... 218
<APPLET>: JAVA Applet ................................................................. 218
<AREA>: Area for a Clickable Map.................................................. 219
<AU>: Author................................................................................. 220
<B>: Bold....................................................................................... 220
<BANNER>: Banner........................................................................ 220
<BASE>: Base URL ......................................................................... 221
<BASEFONT>: Default Font Size..................................................... 221
<BDO>: Directional Override ......................................................... 221
<BGSOUND>: Background Sound ................................................... 222

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 8

 Shree M .& N. Virani Science College

<BIG>: Big ..................................................................................... 222

<BLINK>: Blink .............................................................................. 223
<BLOCKQUOTE>: Blockquote ......................................................... 223
<BODY>: Body ............................................................................... 223
<BQ>: BlockQuote ......................................................................... 224
<BR>: Line Break ........................................................................... 224
<CAPTION>: Caption...................................................................... 225
<CENTER>: Center ......................................................................... 225
<CITE>: Citation ............................................................................ 226
<CODE>: Source Code .................................................................... 226
<COL>: Column Defaults ................................................................ 226
<COLGROUP>: Column Group ........................................................ 227
<CREDIT>: Credit........................................................................... 228
<DD>: Definition List Data ............................................................. 228
<DEL>: Delete................................................................................ 229
<DFN>: Definition .......................................................................... 229
<DIR>: Directory List..................................................................... 230
<DIV>: General Text Division ........................................................ 230
<DL>: Definition List...................................................................... 231
<DT>: Definition List Title .............................................................. 231
<EM>: Emphasis ............................................................................ 231
<EMBED>: Embed Netscape Plugin ................................................ 232
<FIG>: Figure ................................................................................ 232
<FN>: Footnote.............................................................................. 233
<FONT>: Font Size ......................................................................... 234
<FORM>: Fill Out Forms ................................................................. 234
<FRAME>: Frame ........................................................................... 234
<FRAMESET>: Frame Setup............................................................ 235
<H1>: Heading, Level 1 ................................................................. 235
<H2>: Heading, Level 2 ................................................................. 236
<H3>: Heading, Level 3 ................................................................. 237
<H4>: Heading, Level 4 ................................................................. 237
<H5>: Heading, Level 5 ................................................................. 238
<H6>: Heading, Level 6 ................................................................. 238
<HEAD>: Head ............................................................................... 239
<HR>: Horizontal Rule ................................................................... 239
<HTML>: HTML .............................................................................. 240
<I>: Italic ...................................................................................... 241
<IMG>: Image ............................................................................... 241
<INPUT>: Input ............................................................................. 242
<INS>: Insert ................................................................................ 243
<ISINDEX>: Searchable Index....................................................... 244
<KBD>: Keyboard .......................................................................... 244
<LANG>: Default Language............................................................ 245
<LH>: List Header .......................................................................... 245
<LI>: List Item .............................................................................. 246

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 9

 Shree M .& N. Virani Science College

<LINK>: Link ................................................................................. 246

<MAP>: Client-Side Imagemap ...................................................... 247
<MARQUEE>: Marquee ................................................................... 247
<MENU>: Menu .............................................................................. 248
<META>: Meta Information............................................................ 248
<NOBR>: No Line Break ................................................................. 248
<NOEMED>: Non-Embedded Text................................................... 249
<NOFRAMES>: Non-Frames Text.................................................... 249
<NOTE>: Note ................................................................................ 249
<OL>: Ordered List ........................................................................ 250
<OPTION>: Option Form ................................................................ 250
<OVERLAY>: Overlay a Graphic ..................................................... 251
<P>: Paragraph Break ................................................................... 252
<PARAM>: JAVA Parameter ........................................................... 252
<PERSON>: Person ........................................................................ 252
<PRE>: Preformatted Text ............................................................. 253
<Q>: Quotation .............................................................................. 253
<S>: Strikethrough ........................................................................ 254
<SAMP>: Sample ........................................................................... 254
<SELECT>: Select Menu ................................................................. 255
<SMALL>: Small............................................................................. 256
<SPAN>: Span Languages.............................................................. 256
<STRONG>: Strong Emphasis ........................................................ 257
<SUB>: Subscript........................................................................... 257
<SUP>: Superscript........................................................................ 257
<TAB>: Tab Alignment ................................................................... 258
<TABLE>: Table ............................................................................. 258
<TBODY>: Table Body .................................................................... 259
<TD>: Table Data ........................................................................... 260
<TEXTAREA>: Text Area Form........................................................ 261
<TFOOT>: Table Footer .................................................................. 261
<TH>: Table Header ....................................................................... 262
<THEAD>: Table Header................................................................. 263
<TITLE>: Title ................................................................................ 264
<TR>: Table Row ........................................................................... 264
<TT>: Teletype............................................................................... 264
<UL>: Unordered List..................................................................... 265
<VAR>: Variable ............................................................................ 266
<WBR>: Word Break ...................................................................... 266
<XMP>: Multi-Line Text ................................................................. 266
Special Characters.......................................................................... 267

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 10

 Shree M .& N. Virani Science College

Chapter 1
What is HTML?

The explosive growth of the World Wide Web is relatively unprecedented, although it resembles the
desktop publishing revolution of the early and mid-1980s. As personal computers became more
common in homes and offices, people began to learn to use them for document creation and page
layout. Although early word processing programs were not terribly intuitive and often required
memorizing bizarre codes, people still picked them up fairly easily and managed to create their own in-
house publications.

Suddenly, the same kind of growth is being seen as folks rush to create and publish pages of a different
sort. To do this, they need to learn to use something called the Hypertext Mark-up Language (HTML).

HTML at a Crossroads

HTML and the World Wide Web in general are currently in a stage of development similar to that of
the desktop publishing revolution. Still working to reach maturity as a standard, HTML is feeling the
same growing pains that early word processing programs did-as more users flock to HTML, there is a
growing need to standardize it and make it less complex to implement.

These days, word processors are much more intuitive than they were 15 years ago. There are fewer
codes and special keystrokes required to get something done. The applications have matured to the
point where most of the low-level formatting is kept hidden from the user of the application. At the
same time, the printed page is now more completely mirrored on the computer screen, with accurately
represented fonts, emphasis, line breaks, margins, and paragraph breaks.

Although programs are quickly being developed to offer similar features for HTML development,
these tend to be less than ideal solutions. Currently then, anyone who decides to learn HTML is going
to have to know some codes, memorize some syntax, and develop pages for the World Wide Web
without the benefit of seeing all the fonts, emphasis, and paragraph breaks beforehand.

But anyone who has had any success with word processing programs of ten or 15 years ago (or desktop
publishing programs as recently as five years ago) will have little or no trouble learning HTML.
Ultimately, you'll see that HTML's basic structure makes a lot of sense for this emerging medium-the
World Wide Web. And, as with most things computer-oriented, you'll find that once you've spent a few
moments with it, HTML isn't nearly as difficult as you might have originally imagined.

HTML is not a Programming Language

There's nothing I'd like more than to say: "Yes, HTML is a very difficult programming language that
has taken me years to master. So I'll have to charge $75 an hour to develop your Web pages for you."
Unfortunately, it's simply not the case. As I've already hinted, creating an HTML document is not
much more difficult than using a ten-year-old copy of WordPerfect with the Reveal Codes setting
engaged.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 11

 Shree M .& N. Virani Science College

Tip
Remember the definition of HTML: Hypertext Mark-up Language. In HTML
itself, there is no programming-just the "marking up" of regular text for emphasis
and organization.

In fact, I prefer to call people who work with HTML "designers" or "developers," and not
programmers. Actually, there's only limited design work that can be accomplished with HTML
(especially the most basic standards of HTML), and anyone used to working with FrameMaker,
QuarkXPress, or Adobe PageMaker will be more than a little frustrated. But the best pages are still
those created by professional artists, writers, and others with a strong sense of design.

As Web page development matures, we are starting to see more concessions to the professional
designers, as well as an expansion into realms that do require a certain level of computer programming
expertise. Creating scripts or applets (small programs) in the Java language, for instance, is an area
where Web page development meets computer programming. It's also a relatively distinct arena from
HTML, and you can easily be an expert in HTML without ever programming much of anything.

The basics of HTML are not programming, and, for the uninitiated in both realms, HTML is much
more easily grasped than are most programming languages. If you're familiar with the World Wide
Web, you've used a Web browser like Netscape, Mosaic, or Lynx; and if you have any experience with
a word processor or text editor like WordPad, Notepad, SimpleText, or Emacs, then you're familiar
with the basic tools required for learning HTML.

A Short HTML History

HTML developed a few years ago as a subset of SGML (Standard Generalized Mark-up Language)
which is a higher-level mark-up language that has long been a favorite of the Department of Defense.
Like HTML, it describes formatting and hypertext links, and it defines different components of a
document. HTML is definitely the simpler of the two, and although they are related, there are few
browsers that support both.

Because HTML was conceived for transmission over the Internet (in the form of Web pages), it is
much simpler than SGML, which is more of an application-oriented document format. While it's true
that many programs can load, edit, create, and save files in the SGML format (just as many programs
can create and save programs in the Microsoft Word format), SGML is not exactly ideal for
transmission across the Internet to many different types of computers, users, and browser applications.

HTML is more suited to this task. Designed with these considerations in mind, HTML lets you, the
designer, create pages that you are reasonably sure can be read by the entire population of the Web.
Even users who are unable to view your graphics, for instance, can experience the bulk of what you're
communicating if you design your HTML pages properly.

At the same time, HTML is a simple enough format (at least currently) that typical computer users can
generate HTML documents without the benefit of a special application. Creating a WordPerfect-format
document would be rather difficult by hand (including all of the required text size, fonts, page breaks,
columns, margins, and other information), even if it weren't a "proprietary"-that is, nonpublic-
document format.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 12

 Shree M .& N. Virani Science College
HTML is a public standard, and simple enough that you can get through a book like this one and have
a very strong ability to create HTML documents from scratch. This simplicity is part of a trade-off, as
HTML-format documents don't offer nearly the precision of control or depth of formatting options that
a WordPerfect- or Adobe PageMaker-formatted document would.

Marking Up Text

The most basic element of any HTML page (and, therefore, any page on the Web) is ASCII text. In
fact, although it's slightly bad form, a single paragraph of regular text-generated in a text editor and
saved as a text file-can be displayed in a Web browser with no additional codes or markings An
example of this might simply be:

Welcome to my home on the World Wide Web. As you can see, my page isn't
completely developed yet, but there were some things I simply had to say
before I could get anything else done. My name is Emmanuel Richards, and
I'm a real estate developer located in the San Fernando Valley. If you'd
like, you can reach my office at 555-4675.

Remember that HTML-formatted documents aren't that far removed from documents created by a
word processing program, which are also basically text. Marking up text, then, simply means you add
certain commands, or tags, to your document in order to tell a Web browser how you want the
document displayed.

One of the most basic uses for HTML tags is to tell a browser that you want certain text to be
emphasized on the page. The HTML document standard allows for a couple of different types of
emphasis including explicit formatting, where you choose to make something italic as opposed to bold,
or implicit formatting, where it's up to the browser to decide how to format the emphasized text.

Using part of the example above, then, an HTML tag used for emphasis might look something like
this:

Welcome to <EM>my home</EM> on the World Wide Web.

In this example, <EM> and </EM> are HTML tags that tell the Web browser which text (in this example,
my home) is to be emphasized when displayed.

The browser isn't just displaying regular text; it has also taken into account the way you want the text
to be displayed according to the HTML tags you've added. Tags are a lot like margin notes you might
make with a red pen when editing or correcting term papers or corporate reports. After you've entered
the basic text in a Web document, you add HTML mark-up elements to tell the browser how you want
things organized and displayed on the page.

In most word processing documents, the "mark up" that describes the emphasis and organization of
text is hidden from the user. HTML, however, is a little more primitive than that, as it allows you to
manually enter your text mark-up tags to determine how the text will appear. You can't do this with an
MS Word document, but, then again, MS Word documents aren't the standard for all Web pages and
browsers on the Internet!

Who Decides What HTML Is?

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 13

 Shree M .& N. Virani Science College
It's difficult to pin down exactly who is responsible for the HTML standard and its continued
evolution. While what may be the most important question is who uses HTML, and how they use it, a
number of groups exist to monitor, brainstorm, and try to pin down the standards as they evolve.

The HTML Working Group

The HTML standard is maintained and debated by a group called the HTML Working Group, which,
in turn, is a creation of the Internet Engineering Task Force. The Working Group was charged in 1994
with the task of defining the HTML standard that was in widespread use on the Web at the time
(known as HTML 2.0), and then submitting proposals for future standards, including the HTML 3.0
standard.

Up until the spring of 1996, the Working Group seemed to be the bearer of the basic standard for
HTML around the world, while others work to agree on standards for other Web-oriented technologies
that have a cursory relationship-like graphics formats, digital movies, sounds, and emerging Web
languages such as Java and VRML (Virtual Reality Modeling Language). Now, nearly all
responsibility for future Web development will most likely fall to an industry cooperative called the
W3 Consortium.

The World Wide Web Consortium

HTML was originated by Tim Berners-Lee, with revisions and editing by Dan Connolly and Karen
Muldrow. Up until the time when the Working Group took over responsibility for the standard, it was
largely an informal effort.

Still very much involved in the evolution of the standard is Tim Berners-Lee, who now serves as
director of the World Wide Web Consortium (W3C)-a group of corporations and other organizations
with an interest in the World Wide Web. The group is run by the Laboratory for Computer Science at
MIT, and includes members such as AT&T, America Online, CompuServe, Netscape Communications
Corp., Microsoft Corp., Hewlett Packard, IBM, and many others.

Here, member organizations get together to iron out differences over Web-related standards and
practices while working to maintain some level of standardization between their products. Corporate
self-interest can sometimes get in the way, but it is definitely of utmost importance to most of these
organizations that their products stay abreast of the most popular standards, and that their customers
are fully able to take advantage of the Web.

Individual Companies and HTML

In the meantime, HTML continues to evolve, sometimes in spite of standard-bearing organizations. As

more and more commercial companies take an interest in the HTML standard, it has become
increasingly difficult to know who, exactly, decides what HTML will become in the future.

Some notable deviations from the standard are the extensions, or additional commands, that Netscape
Communications Corp. has added to HTML 2.0 (see fig. 1.3). Only Netscape's browsers (and those
written to be compatible with Netscape's products) can view all of these extensions, and some of them
have yet to be recognized by the HTML Working Group. Netscape can get away with this, though,
since it controls somewhere around 60 percent of the World Wide Web browser market.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 14

 Shree M .& N. Virani Science College
With that sort of influence, Netscape can sway the hearts and minds of members of the W3 Consortium
to some degree-plans for future HTML specifications often take into account the additions made by
companies such as Netscape.

Other companies, notably Microsoft, have also distributed Web browsers-in Microsoft's case, the
Internet Explorer-that offer enhancements over the agreed-upon HTML standards, and acceptance of
those extensions by a majority of Web designers may further sway groups like the HTML Working
Group.

Additional Information on HTML Standards and Organizations

Most of the HTML standard bodies and organizations maintain an active presence on the World Wide
Web, and information about these groups and their work can be found in many places.

For more on the World Wide Web Consortium, consult the W3C Web site at http:/www.w3.org/. This
site will probably be the most useful as you continue to learn more about HTML and emerging new
standards.

Summary

HTML is a document format, somewhat like word processing or desktop publishing formats, but
considerably less complicated and based on more open standards. Creating HTML programs isn't
really programming-although some programming can be necessary in other aspects of Web page
creation. There are a few different organizations that make it their business to oversee the HTML
standard, but the standard can just as easily be affected by the software companies that write Web
browsers. The standard is also influenced very much by what commands and layout features Web
designers implement, and what commands they ignore.

Review Questions

1. Is HTML a programming language?

2. True or false. HTML documents can be created with nothing more than a text editing program.
3. What other mark-up language is HTML based on?
4. What's the difference between explicit formatting and implicit formatting?
5. True or false. You can directly edit a WordPerfect-format document.
6. Is the HTML Working Group a subsidiary of the World Wide Web Consortium?
7. Why is it important that HTML be a public standard?
8. How can individual Web designers affect the HTML standard?

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 15

 Shree M .& N. Virani Science College

Chapter 2
The World Wide Web and Web Servers

Probably the most important thing to remember about the World Wide Web and the Internet in general
is that they are global in scale and often a very cooperative venture. Information on the Web tends to
be distributed around the world, and it's just as easy for you to access a site in New Zealand or Japan as
it is to access Web information in your own state.

The basic reason for learning HTML is to create pages for the World Wide Web. Before you start,
though, you'll want to know a little about how this whole process works. We'll begin by taking a look
at Web browsing programs, then we'll talk about how the World Wide Web works, and we'll discuss
some of the terms associated with surfing the Web. Finally, we'll round out the discussion by talking
about the Internet in general and the different services available on the Internet and how they interact
with the Web.

What's the World Wide Web?

The World Wide Web is an Internet service, based on a common set of protocols, which allows a
particularly configured server computer to distribute documents across the Internet in a standard way.
This Web standard allows programs on many different computer platforms (such as UNIX, Windows
95, and the Mac OS) to properly format and display the information served. These programs are called
Web browsers.

The Web is fairly unique among Internet services (which include Internet e-mail, Gopher, and FTP) in
that its protocols allow for the Web server to send information of many different types (text, sound,
graphics), as well as offer access to those other Internet services. Most Web browsers are just as
capable of displaying UseNet newsgroup messages and Gopher sites as they are able to display Web
pages written in HTML.

This flexibility is part of what has fueled the success and popularity of the Web. Not only do the Web
protocols allow more interactive, multimedia presentations of information, but the typical Web
browser can also offer its user access to other Internet resources, making a Web browser perhaps a
user's most valuable Internet application.

The Hypertext Concept: Web Links

Unlike any other Internet service or protocol, the World Wide Web is based on a concept of
information retrieval called hypertext. In a hypertext document, certain words within the text are
marked as links to other areas of the current document or to other documents (see fig. 2.2). The basic
Windows help engine (and many other online help programs) uses this same hypertext concept to
distribute information.

As you can see in the figure, links can be text or graphics. The user moves to a related area by moving
his or her mouse pointer to the link and clicking once with the mouse button. This generally causes the
current Web document to be erased from the browser's window, and a new document is loaded in its
place.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 16

 Shree M .& N. Virani Science College
Consider then, that this hypertext concept will affect the way that information is presented and read on
the Web. A normal printed book (like this one) presents its information in a very linear way.
Hypertext, on the other hand, is a little more synergistic.

On the World Wide Web, this synergy can be taken to an extreme. For instance, you might use
hypertext to define a word within a sentence. If I see the following example on a Web page:

The majority of dinosaurs found in this region were herbivores, and surprisingly
docile.

then I can assume that the word herbivores is a hypertext link. That link might take me to a definition
of the word herbivore that this particular author has provided for his readers. This link might also take
me to a completely different Web site, written by another person or group altogether. It might take me
to a recent university study about herbivores in general, for instance, or a drawing of a plant-eating
dinosaur done by a ten-year-old student in Australia.

Example: Thinking in Hypertext

For just a moment, imagine you're reading a hypertext document instead of a printed page.

If, for instance you were reading a Web page about my personal hobbies, you'd find that one of the
things that interests me most is private airplanes. Clicking that link might take you to a new Web site
dedicated to the discussion of personal aircraft, including a link to Cessna Aircraft's Web site. Once
there, you could read about Cessna's particular offerings, prices, and perhaps a testimonial offered by
a recent satisfied customer. Clicking this link whisks you away to that customer's personal Web site,
where you read his accolades for Cessna, and then notice he's a professor at Yale, and has provided a
link for more information. Clicking the Yale link takes you to the university's Web site, where you can
see different sorts of information about registration, classes, research projects, alumni, faculty, and
other interesting tidbits.

This offers important implications for HTML writers. For one, you've got to take into consideration
this particular style of presenting information. Also, building a good Web site often means being aware
of other offerings on the Web, and creating links to other people's pages that coincide with or expand
upon the information you're presenting.

The Web Page

The World Wide Web is composed of millions of Web pages, each of which is served to a browser
(when requested) one page at a time. A Web page is generally a single HTML document, which might
include text, graphics, sound files, and hypertext links. Each HTML document you create is a single
Web page, regardless of the length of the document or the amount of information included.

The Web page in figure 2.3, for example, contains more information than can be shown on the screen
at one time, but scrolling down the page (by clicking the scroll bar to the right of the browser window)
reveals the rest of that particular Web document-note, though, that scrolling doesn't present you with a
new Web page.

The Web Site

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 17

 Shree M .& N. Virani Science College
A Web site, then, is a collection of Web pages under the control of a particular person or group.
Generally, a Web site offers a certain amount of organization of its internal information. You might
start with an index or default page for a Web site, and then use hypertext links to access more detailed
information. Another page within the Web site may offer links to other interesting sites on the Web,
information about the organization, or just about anything else.

Web site organization is an important consideration for any HTML designer, including those designing
and building corporate Web sites. The typical corporate Web site needs to offer a number of different
types of information, each of which might merit its own Web page or pages.

Example: A Corporate Web Site

The typical corporate Web site will start with an index page that quickly introduces users to the
information the site has to offer. Perhaps index is a misnomer, as this page will usually act as a sort of
table of contents for the Web site (see fig. 2.4).

The rest of the pages within a hypothetical corporate Web site will be accessed from a similar index
page, allowing users to move directly to the information they want. If users are interested in getting
phone numbers and addresses for a company, for instance, they might click a link that takes them to an
About the Company page. If they're interested in the company's products, they'd click another link that
would take them to a product demo page.

By organizing the site in this way, the designer makes sure that users can get to every Web page that's
part of the site, while allowing them to go directly to the pages that interest them most.

Intranets vs. the Internet

Another use of HTML and Web technology worth talking about is the growing
popularity of intranets, or Internet-like networks within companies. In the Web
organizational chart discussed in this section, notice that most of the information
presented is geared toward the external users.
This same technology can be applied to Web sites for internal uses, allowing
employees to access often used forms, company news, announcements, and
clarifications. For instance, the Human Resources department might make
available job listings and addresses on the Internet, but would discuss changes to
the company's health insurance policies on their intranet.
In fact, many companies are even using HTML to create "front ends" to corporate
databases and other shared resources. Using a Web browser application,
employees can access data stored on the company's internal network. This takes
some programming expertise (usually using CGI-BIN scripts, discussed in this
book), but the majority of the work is done in HTML.
Fortunately, designing intranet sites and Internet sites isn't overwhelmingly
different. The skills you'll gain in this text will be equally applicable to both. The
only real difference is a question of organization and the type of information
you'll want to offer on your intranet-generally, it's the sort of thing that's not for
public consumption.

Hypermedia: Text and Graphics on the Web

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 18

 Shree M .& N. Virani Science College
With graphical browsers such as NCSA Mosaic and Netscape Navigator, the hypertext concept of the
Web was introduced to the world of multimedia, resulting in the hypermedia links that are possible in
HTML.

Now, this really isn't much different from the hypertext links we talked about in the previous section-
the only difference is that hypermedia links point to files other than HTML documents. For instance, a
hypermedia link might point to an audio file, a QuickTime movie file, or a graphic file such as a GIF-
or JPEG-format graphic (see fig. 2.6).

Tip
A hypermedia link can be identified by the fact that the associated file has
something other than an .HTM or .HTML extension.

Because of the flexibility of the Web protocol, these files can be sent by a Web server just as easily as
can an HTML document. All you need to do is create the link to a multimedia file. When users click
that link, the multimedia file will be sent over the Web to their browser programs.

Helper Applications

Once the multimedia file is received by the user's Web browser, it's up to the browser to decide how to
display or use that multimedia file. Some browsers have certain abilities built in-especially the basics,
such as displaying graphics files or plain ASCII text files. At other times, browsers will employ the
services of a helper application.

Most of these helper applications will be add-on programs that are available as commercial or
shareware applications. The browser will generally need to be configured to recognize particular types
of multimedia files, which, in turn, will cause the browser to load the appropriate helper application.
Once loaded, the downloaded multimedia file will be fed to the helper applications, which can then
play or display the multimedia file.

Common Multimedia Formats

Although it seems that multimedia formats are constantly being added and improved for the Web,
some of the more common types of multimedia files are listed in Table 2.1 with their associated file
extensions. This list isn't exhaustive, but it should give you an idea of the types of files that can be
distributed on the Web.

Table 2.1 Multimedia Formats Common to the Web

File Format Type of File Extension
Sun Systems sound audio .au

Windows sound audio .wav

Audio Interchange audio .aiff, .aifc

MPEG audio audio .mpg, .mpeg
SoundBlaster VOiCe audio .voc

RealAudio audio .ra, .ram

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 19

 Shree M .& N. Virani Science College

CompuServe GIF graphics .gif

JPEG (compressed) graphics .jpg, .jpeg

TIFF graphics .tif, .tiff
Windows Bitmap graphics .bmp

Apple Picture graphics .pict

Fractal Animations animation .fli, .flc

VRML 3D world animation .wrl

MPEG video video .mpg, .mpeg

QuickTime video .mov, .moov, .qt
Video For Windows video .avi

Macromedia Shockwave multimedia presentation .dcr

ASCII text plain text .txt, .text

Postscript formatted text .ps

Adobe Acrobat formatted text .pdf

Not all of these different file formats necessarily require a special helper application. Many sound
helpers will play the majority of different sound files, for instance, and some graphics programs can
handle multiple file types. For the most part, you will need different helper applications for the various
video, animation, and formatted text file types.

Internet Services and Addresses

Aside from being hypertext-based and capable of transferring a number of multimedia file formats, the
Web is unique in its ability to access other Internet services. Being the youngest of the Internet
services, the Web can access all of its older siblings, including Internet e-mail, UseNet newsgroups,
Gopher servers, and FTP servers. Before we can access these services, though, we need to know what
they do and how their addressing schemes work.

Internet E-mail

Internet e-mail is designed for the transmission of ASCII text messages from one Internet user to
another, specified user. Like mail delivered by the U.S. Post Office, Internet e-mail allows you to
address your messages to a particular person. When sent, it eventually arrives in that person's e-mail
box (generally an Internet-connected computer where he or she has an account) and your recipient can
read, forward, or reply to the message.

Internet e-mail addresses follow a certain convention, as follows:

username@host.sub-domain.domain.first-level domain

where username is the name of the account with the computer, host is the name of the computer that
provides the Internet account, sub-domain is an optional internal designation, domain is the name

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 20

 Shree M .& N. Virani Science College
assigned to the host organization's Internet presence, and first-level domain is the two- or three-letter
code that identifies the type of organization that controls the host computer.

An example of a simple e-mail address (mine) is tstauffer@aol.com, where tstauffer is the username,
aol is the domain, and com is the first-level-domain. com is the three-letter code representing a
commercial entity. This e-mail address describes my account on the America Online service, which is
a commercial Internet site. (See Table 2.2 for some of the more common first-level domain names.)

Table 2.2 Common First-Level Domain Names

First-level domain Organization Type

.com Commercial
.edu Educational
.org Organization/Association
.net Computer Network
.gov Government
.mil Military Installation
.ca Canadian
.fr French
.au Austrailian
.uk United Kingdom
.jp Japanese

You may have also noticed that my address doesn't include a host name or a sub-domain. For this
particular address, it is unnecessary because America Online handles all incoming Internet e-mail
through a gateway. Once it receives the e-mail, it may indeed send it to another computer within its
online service, but this is an internal operation that doesn't require a specified host in the Internet
address.

Consider todd@lechery.isc.tamu.edu. This is an address I had a few years ago when I worked at
Texas A&M University. (I no longer receive e-mail at this address.) Notice how it uses all of the
possible parts of an Internet address. todd is the username, lechery is a host computer (in this case, an
actual, physical computer named "lechery"), isc is a sub-domain name that represents the computers in
the Institute for Scientific Computation, tamu is the domain name for all Internet-connected computers
at Texas A&M University, and edu is the three-letter code for educational, which is the type of
organization that Texas A&M is considered to be on the Internet.

When is a Host a Server?

The Internet community uses the words host and server when talking about the
type of computers you'll encounter. But what do these names mean?
I like to use the analogy of a party. At a party, a host or hostess will welcome you
into his or her home and point you to the various things you can do at the party.
He or she will show you where to put your coat, point you to the refreshments,

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 21

 Shree M .& N. Virani Science College

and tell you about their home.

Now, depending on how large or lavish the party is, you may also have servers.
Servers will perform more specific tasks, like bringing you beverages or food,
opening the door, taking your coat, or moving furniture around. At a small party,
the host may act as a server. At a larger party, the host will coordinate the servers.
That's how hosts and servers work on the Internet. A host computer is generally a
computer that allows its local users to gain access to Internet services. It may also
allow other users to gain access to information in its organization.
Depending on the size of the organization's Internet site, however, the host often
doesn't serve that information itself. Instead, it relies on server computers that
have more specific functions, like serving HTML documents, serving shareware
programs, or serving UseNet news. These servers will be accessed through the
host, though, so it's really only important to know the host's address on the
Internet-just like in the real world.

UseNet Newsgroups

The next Internet service we'll talk about is UseNet newsgroups. These are the discussion groups on
the Internet, where people gather to post messages and replies on thousands of topics ranging from
computing to popular entertainers, sports, dating, politics, and classified advertising. UseNet is a very
popular Internet service, and most Web browsers have some built-in ability to read UseNet discussion
groups.

Note
Although you'll hear the word "news" a lot when you talk about UseNet, there
isn't an overwhelming number of newsgroups that offer the kind of news you
expect from a newspaper or CNN. In general, UseNet is comprised of discussion
groups like the forums on CompuServe or the message areas on America Online.

Like Internet e-mail, UseNet discussion groups have their own system of organization to help you find
things. This system uses ideas and syntax that are similar to e-mail addresses, but you'll notice that
UseNet doesn't require that you find specific hosts and servers on the Internet-just a particular group.
UseNet newsgroup names use the following format:

first-level name.second-level.third.forth...

The first-level name indicates the type of UseNet group this is, the second narrows the subject a bit,
and the address continues on until it more or less completely describes the group. For instance, the
following are both examples of UseNet newsgroup addresses:

co.general
comp.sys.ibm.pc.misc

The first-level name co means this is a local UseNet group for the Colorado area, and general shows
that it's for discussion of general topics. comp is a common first-level name that suggests this is an
internationally available newsgroup about some sort of computing issue (see Table 2.3). The other
levels of the name tell you more about the group.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 22

 Shree M .& N. Virani Science College

Table 2.3 Common UseNet First-Level Newsgroup Names

First-Level Name Description

alt Alternative groups
biz Business issues
clari Clarinet news stories
comp Computing topics
misc Other general discussions
news General news and help about UseNet
rec Recreational topics
sci Scientific discussions
soc Social issues
talk Debate-oriented groups

Gopher and WAIS

Gopher has been described as the poor man's Web, and it's definitely true that Gopher is a precursor to
some of the Web's capabilities. Gopher is a system of menu items that link sites around the world for
the purpose of information retrieval. This isn't a hypertext system like the Web, but it is similar to the
Web in that it's designed for document retrieval.

While Gopher can only offer access to text files and allow you to download files using the FTP
protocol, it is still used occasionally by academic, government, and similar sites. Fortunately, your
Web browser can easily offer Gopher access too, so there's no need to have a separate application.

WAIS, or Wide Area Information Servers, are basically database servers that allow you to search
databases that are attached to Gopher menus. Library databases, academic phonebooks, and similar
information are kept in WAIS systems.

Gopher and WAIS both generally require that you have the exact address of the Gopher server
available to you. These addresses are in the following form:

host.sub-domain.domain.first-level domain

This works essentially like an e-mail address without a username. All the Gopher application needs to
know is the exact Internet location of the Gopher server computer you'd like to talk to. An example
might be marvel.loc.gov. This takes you to a Gopher menu for the Library of Congress.

FTP

The File Transfer Protocol (FTP) is the Internet service that allows computers to transfer binary files
(programs and documents) across the Internet. This is the uploading/downloading protocol that you
might use to obtain copies of shareware or freeware programs, or that might be useful for downloading
new software drivers from a particular computer hardware company.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 23

 Shree M .& N. Virani Science College
Using a model identical to the Gopher system, FTP addresses use the following format:

host.sub-domain.domain.first-level domain

Like Gopher addresses, an FTP address is simply the Internet address of a particular host computer. In
fact, the same host address can be used to serve you both Gopher documents and FTP file directories,
based on the type of protocol your access software requests. The following example is the FTP address
for downloading support and driver files for Apple Macintosh computers and Apple-created Mac and
Windows software:

ftp.support.apple.com

In most cases, FTP connections also require some sort of login procedure, which means you'll need a
username and password from the system administrator to gain access. The majority of public FTP
sites, however, are anonymous sites, which allow anyone access to their files. For these sites, the
username is generally anonymous, and you're asked to enter your e-mail address for the system's
password.

Note
Many Web browsers can access only anonymous FTP sites. You may still need a
dedicated FTP program to access FTP sites that require an account username and
password.

Summary

The World Wide Web is the youngest and most unique of the Internet services. Its protocols allow it to
transmit both text and multimedia file formats to users, while also enabling Web browsers to access
other Internet services. The Web is based on a concept called hypertext, which means that text within
the paragraphs on a Web page is designed to act as links to other Web pages. There is no hierarchy on
the Web, which is only loosely organized by this system of links.

Other services that can be accessed via the Web include Gopher, WAIS, UseNet, e-mail, and FTP.
Each of these older Internet services has its own scheme for formulating addresses. Most of these
services require a server computer of some sort to allow Internet applications to access their
information. These server computers have specific addresses on the Web which you need to know in
order to contact them.

Review Questions

1. The Web protocols are considered flexible by Internet standards. Why?

2. What does hypertext mean? Where else might the typical computer user encounter hypertext?
3. True or false. Hypermedia links are hypertext links to newswire stories.
4. What makes a Web site different from a Web page?
5. What is the purpose of having helper applications?
6. Why are file extensions important to Web browsers?
7. Among UseNet, Internet e-mail, Gopher, and FTP, what two Internet services use similar
addressing schemes?

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 24

 Shree M .& N. Virani Science College
8. What should you enter as the password to an anonymous FTP Site?

Review Exercises

1. If you have an Internet account or an account with an online service, use your e-mail address to
determine your service's domain name and first-level domain.
2. If you have an FTP application, see if your ISP offers an FTP site. Try the address:
ftp.ispdomain.first-level domain. An example might be ftp.service.net.
3. Using your Web browser, attempt to connect to a Gopher address like marvel.loc.gov. What
happens?

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 25

 Shree M .& N. Virani Science College

Chapter 3
How Web Browsers Work

HTML codes are written specifically for display in browser applications designed for the World Wide
Web. Unlike some other document formats or specifications, this is the only application for HTML
coding. So it's important to get to know these browsers.

In this chapter, you'll be learning about some popular Web browser applications, how Web browsers
interact with Web servers, and how browsers interact with the other Internet services that are available
to them.

Web Browser Applications

All Web browsers are capable of certain basic tasks, like finding and loading new Web pages, and
displaying them following HTML standards and conventions. There's enough freedom in HTML and
the Web standards in general, though, that each Web browser ends up being slightly unique.

As you look at these browsers, I'd like to make one point clear: although most of them display HTML
documents in a particular way, each browser application actually has quirks or features that you should
keep in mind while you're creating your documents.

Note
This book cannot provide an exhaustive survey of the Web browsers available. It
is fair to say that I'm covering about 90 percent of the current market, but you
should recognize that there are other browsers being used to access HTML pages.

NCSA Mosaic

Originally released by the National Center for Supercomputing Applications (NCSA) in 1993, Mosaic
was the first widely available graphical browser for Web users (see fig. 3.1). It is currently written for
Windows, Windows 95, Macintosh, and various UNIX platforms. It is also the basis of a number of
other browsers on the market-most notably those created and licensed by SpyGlass Corp.

Although definitely in widespread use, the Mosaic family of browsers is nowhere near the most
popular of Web browsers, losing by a significant share of the market to Netscape Navigator. Mosaic
has its merits, though, especially as a straight HTML standards-based Web browser known for being
relatively well-programmed and effective.

One of the most compelling reasons to use NCSA Mosaic might just be that some versions are free to
academic and nonprofit organizations and individuals. It can be downloaded from
http://www.ncsa.uiuc.edu/SDG/Software/SDGSoftDir.html or by FTP at ftp://ftp.ncsa.uiuc.edu/.

Netscape Navigator

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 26

 Shree M .& N. Virani Science College
Easily the most popular Web broswer currently available, Netscape Navigator (often simply referred to
as Netscape) made a splash on the Internet in 1995 with its totally free first version of the application.
Created in part by programmers who had worked on the original NCSA project, Netscape became
quickly known as the finest second-generation Web browser, noted for both its flexibility and speed
gains over Mosaic-especially for modem connections.

Another reason for Netscape's popularity is its ability to accept plug-ins, or helper applications, that
actually extend the abilities of the Netscape Navigator browser window. Netscape users who have the
Macromedia Shockwave plug-in, for instance, can view Macromedia presentation files that are
embedded within HTML documents in Navigator's window (instead of loading a separate helper
application).

Netscape is also available for Windows, Mac, and UNIX users and is available free to certain
qualifying (nonprofit and academic) users (see fig. 3.2). It can be downloaded on the Web from
http://home.netscape.com/comprod/mirror/client_download.html or by FTP at ftp.netscape.com.

When introduced, Netscape's main advantages were speed and the ability to display more graphics
formats than Mosaic. Since that time, however, Netscape has introduced security features and other
technologies (like a built-in e-mail program and built-in UseNet newsreader) that continue to set it
apart from other browsers.

Another advantage is the support of Java applets and JavaScript authoring within Netscape itself.
Again, Java applets can be embedded in the Netscape browser window, allowing the user access to
truly dynamic pages that can be an interface for anything from simple games to stock quotes to bank-
by-computer information. JavaScript gives Web designers programmatic control over their pages,
allowing them to check HTML form entries, load different pages based on user input, and much more.

Perhaps most significant to HTML writers, however, is yet another addition that Netscape offers
beyond Mosaic-Netscape HTML extensions. These are extra HTML-like elements that Netscape can
recognize in Web pages. Although a good deal of debate has raged about whether or not this is
ultimately a good thing for the Web (see sidebar), it remains a fact that a Web site can be designed in
such a way that although most browsers can display the page's basic text and graphics, it is best viewed
in Netscape Navigator.

Why is this? Netscape adds many HTML elements that offer more control over the layout of a page
than the HTML standard allows. This includes such features as centering text and graphics, wrapping
text around figures, and adding tables to Web pages. These elements are not found in HTML 2.0,
although their popularity on the Web has caused many of them to be incorporated into HTML 3.0 level
standards.

Are Netscape HTML Commands Good for the Web?

When Netscape first introduced its extensions to HTML, two strong reactions
came from opposite sides of the playing field. Experienced HTML designers-
especially those interested in more control over the pages-said, "Cool." Defenders
of the original HTML, however, were not as pleased.
Why would you be against HTML extensions? Because using them leaves a large
percentage of Web users out in the cold. If people begin to write their Web pages
using Netscape HTML extensions, suddenly at least 40 percent of the Web's users

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 27

 Shree M .& N. Virani Science College

will see a less-than-ideal version of the site.

Clearly, adding the extensions was shrewd marketing on Netscape's part. After all,
if you want to see the best layouts on the Web, all you have to do is get a copy of
Netscape.
But for some users, like those using NCSA Mosaic, the America Online Web
browser, or some other popular Web application, they're just out of luck. The
extension won't display correctly in their browsers and, in some cases, will cause
errors.
Purists will point to the Netscape HTML extension as going against the spirit of
HTML. HTML is supposed to offer less control over a page, so that it can be
platform- and application-independent. Netscape HTML, by definition, flies in the
face of this spirit.
Fortunately for everyone, new HTML 3.0 level standards are emerging that
support many of the Netscape HTML commands in a more "official" way. That
means the best of both worlds-layout features and total compatibility-as more
browsers come to support HTML 3.0 level additions.
In the meantime, will Netscape strike again with some other innovation? Don't be
too surprised if it does.

Microsoft Internet Explorer

Recently released for free to the general public is the Internet Explorer, a Web browser created by
Microsoft Corp (see fig. 3.3). Loosely based on the Mosaic technology, Internet Explorer is a
reasonably well-featured browser with decent speed for modem users. Microsoft's browser is available
for Windows 95, Windows 3.1, and Macintosh platforms. It can be found on the Web at
http://www.microsoft.com/IE/ or by FTP at ftp.microsoft.com.

Like Netscape, Internet Explorer also incorporates elements that are not compliant with the generally
accepted HTML standard. Again, these codes are geared more toward page layout than is the HTML
standard. More and more often, sites on the Web are recommending that you use Internet Explorer to
view the site because it uses the nonstandard HTML elements recognized by Internet Explorer.

Lynx

Lynx and similar browsers are a little different from the others discussed so far, because they lack the
ability to display graphics. It may be surprising that people still rely on text-based browsers to access
the Web, but it remains true that not everyone has a high-speed connection to the Internet. In fact,
many users don't even have a graphical operating system (such as Windows, Mac OS, or OS/2) for
their computer.

Lynx was originally written for the UNIX platform. In fact, it is the browser used by most service
providers for text-based accounts. There is also an MS-DOS version that offers users browsing
capabilities in a text-only format (see fig. 3.4).

Special considerations must go into your HTML documents if they're going to support text-based
browsers like Lynx. Fortunately, as you'll see in the HTML formatting chapters, the HTML 2.0 and 3.0
standards are heavily in favor of text-based browsers-in the spirit of not leaving anyone out.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 28

 Shree M .& N. Virani Science College
The individual HTML designer must be wary, though, especially when designing highly graphical
Web sites and interfaces. Something that you should constantly ask yourself while creating a Web site
is: Am I leaving out my text-based viewers? Is there anyone out there who can't get the full effect of
what I'm communicating because they can't see the graphics?

Inevitably, that will indeed be the case-but a good HTML designer works to minimize that possibility.

Tip
Many considerate Web designers go so far as to create two or more versions of
their Web site-one for graphical browsers, and one that offers only text.

Uniform Resource Locators

Now that you've looked at the various different Web browsers that might be accessing your Web site,
let's talk about something they all have in common: the use of Uniform Resource Locators (URLs).
What's an URL? If you remember our discussion from the last chapter, you may recall that I mentioned
that most Internet services have "addresses" for accessing information within that service.

Tip
Not everyone follows this convention, but this book is written in such a way that
it will be easier to read if you pronounce "URL" as you would the name "Earl."

Each of these addresses is a bit different. For instance, you would send an e-mail message to my
America Online account using tstauffer@aol.com in an e-mail application.

To acccess the AOL public FTP site, on the other hand, you would enter ftp.aol.com in the FTP
application you are using.

The World Wide Web also has its own addressing scheme, but it's slightly more advanced than the
schemes of its predecessors. Not only is the Web newer, but its addresses have to be more
sophisticated because of the Web's unique ability to access all of the different Internet services.

URLs are these special addresses. They follow a format like this:

protocol://host.domain.first-level domain/path/filename.ext

or

protocol:host.domain.first-level domain

An example of an URL to access a Web document would be

http://www.microsoft.com/windows/index.html.

Let's look at that address carefully. According to the format for an URL, then, http:// would be the
protocol, www is the host you're accessing, microsoft is the domain, and com is the first-level domain
type for this system. That's followed by / to suggest that a path statement is coming next.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 29

 Shree M .& N. Virani Science College
The path statement tells you that you're looking at the document index.html, located in the directory
windows.

Note
Those of you familiar with DOS, Windows, or UNIX will probably recognize
path statements right away. Mac OS users and others simply need to realize that a
path statement offers a "path" to a specific file on the server computer's hard
drive. A Web browser needs to know in exactly which directories and
subdirectories (folders and subfolders) a file can be found, so a path statement is a
standard part of any URL.

There are two basic advantages of the URL. First, it allows you to explicitly indicate the type of
Internet service involved. HTTP, for instance, indicates the HyperText Transfer Protocol-the basic
protocol for transferring Web documents. You'll look at this part of the URL in a moment.

Secondly, the URL system of addressing makes every single document, program, and file on the
Internet a separately addressable entity. Why is this useful?

Example: The URL Advantage

For this example, all you need to do is load your Web browser (whichever you happen to use) and find
the text box or similar interface element that allows you to enter an URL manually to access Web
pages (see fig. 3.5). The point of this example is to show the benefits of using URLs for the Web. With
Gopher and FTP, you really only need to know a host address. But, on the Web, knowing just the host
address often isn't enough.

Once you've located the appropriate entry box, enter www.mcp.com. Depending on the browser you're
using, you'll more than likely need to hit the Enter or Return key after typing this address.

What happens then depends on your Web browser. Some browsers will give an error, which isn't
exactly perfect for this example, but it does prove the point that you need more than just a server
address to get around on the Web. Others will take you directly to the Macmillan Computer Publishing
Web site.

Tip
If your browser gives you an error, enter http://www.mcp.com. Some browsers
require at least a partial URL. Others guess the protocol from the type of server
address entered.

Notice that www.mcp.com follows the addressing conventions established for Internet services like
FTP and Gopher. The problem is that, if the Web used this method for addresses, you'd have to begin
at the first page of the Web site every time you wanted to access one of the hundreds of pages available
from Macmillan.

To get around that, an URL provides your Web browser with more information.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 30

 Shree M .& N. Virani Science College
All Web browsers should easily handle this address. With an URL, you're able to be much more
specific about the document you want to see, since every document on the Internet has an individual
address. In this case, you've instructed your Web browser to go directly to the que directory on
Macmillan's Web site and load the HTML document called index.html.

The Different Protocols for URLs

You've already looked at Internet addresses such as www.mcp.com in depth, and you should be
familiar with the concept of a path statement. That just leaves one part of an URL that's new to you:
the protocol.

I've already mentioned that HTTP is the protocol most often used by Web browsers to access HTML
pages. Table 3.1 shows some of the other protocols that can be part of an URL.

Table 3.1 Possible Protocols for an URL

Protocol Accesses…
http:// HTML documents
https:// Some "secure" HTML documents
file:// HTML documents on your hard drive
ftp:// FTP sites and files
gopher:// Gopher menus and documents
news:// UseNet newsgroups on a particular news server
news: UseNet newsgroups
mailto: E-mail messages
telnet: Remote Telnet (login) session

By entering one of these protocols, followed by an Internet server address and a path statement, you
can access nearly any document, directory, file, or program available on the Internet or on your own
hard drive.

Note
The mailto:, news:, and telnet: protocols have slightly different requirements
to create an URL. mailto: is followed by a simple e-mail address, news: is
followed by just the newsgroup name, and telnet: is followed by just a server
address. Also notice that file:// is often slightly different for different browsers.

Example: Accessing Other Internet Services with URLs

Over time, applications designed to access non-Web Internet services (like FTP or Gopher programs)
will begin to use the URL system more and more. For now though, as a rule, basically only Web
browsers use URLs.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 31

 Shree M .& N. Virani Science College
Fortunately, by simply changing the protocol of a particular URL, you can access most Internet
services directly from your browser. For this example, you'll need to load your Web browser once
more and enter ftp://ftp.cdrom.com/pub/win95/demos/.

This should result in a listing of the subdirectory demos located on the FTP server ftp.cdrom.com.
Notice that you didn't enter a document name, because, if you're using the FTP protocol, the document
or file will be automatically downloaded.

Tip
If your browser tells you that there are too many users presently connected for
you to connect to this FTP site, wait a moment or two, then click your Reload
button or otherwise reload this URL with your browser.

Not all browsers support the mailto: command-let's see if yours does. In your browser's URL window,
type mailto:tstauffer@aol.com and hit Enter or Return if necessary.

If your browser supports the mailto: protocol command, you should be presented with a new window,
complete with my e-mail address in the Mail To field (see fig. 3.6).

How Web Browsers Access HTML Documents

When you enter an URL in the URL field on your browser, the browser goes through the following
three basic steps:

• The browser determines what protocol to use.

• It looks up and contacts the server at the address specified.
• The browser requests the specific document (including its path statement) from the server
computer.

Using all of this information, your browser was able to access the variety of Internet services discussed
previously in Table 3.1 and in the subsequent example. But what does this have to do with HTML
design? Just about everything.

In HTML, a hypertext link is simply a clickable URL. Every time you create a link in a Web
document, you assign an URL to that link. When that link is clicked by a user, the URL is fed to the
browser, which then goes through the procedure outlined above to try and retrieve it.

Example: Watching the Link

If you've used your Web browser much, then you've watched this happen countless times, even if you
didn't realize it. If you're using Netscape, Mosaic, or a similar browser, start by pointing your mouse
pointer at just about any link you can find. You may notice that when your mouse pointer is touching
the link, an URL appears in the status bar-probably at the bottom of the page (see fig. 3.7).

That's the URL associated with the link to which you're pointing. Clicking that link will cause the
browser to accept that URL as its next command, in much the same way that you manually entered
URLs in the earlier example. To see it happen, click the link once. Now check the URL field that you

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 32

 Shree M .& N. Virani Science College
used before to enter URLs (see fig. 3.8). You should see the same URL that was associated with the
link to which your mouse was pointing. Then, after a few seconds, you should be at the new page.

What Can Be Sent on the Web?

Part of the magic of the HTTP protocol is that it is fairly unlimited (by Internet standards) in the sort of
files that it can send and receive. For instance, like Internet e-mail, much of what is sent on the Web
(via the HTTP protocol) is ASCII text. But, unlike Internet e-mail, HTTP isn't limited to ASCII text.

Note
There are two different types of files that can be sent over various Internet
services. These are ASCII text files (plain text) and binary files. Binary files are
any documents created by applications (such as word processing or graphics
applications) or even the applications themselves. It's easiest to think of binary
files as anything that isn't an ASCII file.

In fact, HTTP can send both of the major types of files-ASCII and binary-using the same protocol.
This means that both plain text files (such as UseNet messages and HTML documents) and binaries
(such as downloadable programs or graphics files) can be sent via the Web without any major effort on
the part of the user. In certain cases, the HTML author will have to make a distinction (for instance, as
to whether or not a graphics file should be displayed or downloaded to the user's machine), but, for the
most part, HTTP figures this stuff out by itself.

How exactly does it figure these things out? Usually by a combination of the protocol selected and the
extension to the filename in question. For instance, a file called INDEX.HTML that's accessed using an
URL that starts with the http:// protocol will be displayed in a browser as an HTML file, complete
with formatting and hypertext links.

The same file, however, if it is renamed to be INDEX.TXT, even if it's loaded with an http:// protocol
URL, will be displayed in the browser as a simple ASCII file, just as if it were being displayed in
WordPad, SimpleText, or Emacs. Why is this? Because the extension tells the Web browser how to
display the file.

You may recall from Chapter 1 that much of an HTML document is "text" (the rest being HTML
codes). In fact, all of an HTML document is ASCII text, as is demonstrated in figure 3.9. It is only the
extension .HTML (or .HTM on DOS-based Web servers) that tells a Web browser that it needs to
interpret some of the text as HTML commands within a particular ASCII text document.

Tip
Because HTML documents are ASCII text, it's possible to create them in simple
text editor programs. A Microsoft Word document, on the other hand, is not
ASCII text-it's saved in a binary format. So, if you use a word processor to create
HTML documents, remember to use the Save As command to save the HTML
page in an ASCII format.

Binaries on the Web

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 33

 Shree M .& N. Virani Science College
When a binary document such as a graphics file is sent over the Web, it's important that it have the
appropriate extension. That's how Web browsers know whether a document should be viewed in the
browser window (like a JPEG- or GIF-format graphic) or whether it should be saved to the hard drive
(like a ZIP or StuffIt archive file).

To the HTML designer, this means two things. First of all, you should recognize that your HTML
pages can offer just about any other type of file for transport across the Web. If you want to send
graphics, games, WordPerfect documents, or just about anything else, just put a hypertext link to that
file on your Web page.

Second, you need to remember that the most important part of a filename is its extension. If you fail to
put the correct extension on a filename, your user's browser won't know what to do with it. If you're
trying to display a graphic on your Web page, for instance, but put a .TXT extension on it, it won't
display.

Everything is Downloaded

There's one other thing you should realize about the Web and Web browsers before you begin to
develop Web pages. Very simply, everything you view in a Web browser has to be downloaded from
the Web site first. What do I mean by this?

Whenever you enter an URL or click a hypertext link, the HTML document (or binary file) that you're
accessing is sent, in its entirety, from the Web server computer to your computer's hard drive. That's
why, for instance, Web pages with a lot of graphics files take longer to display than Web pages with
just text.

For the Web user, this is both good and bad. It's good because once a page is downloaded, it can be
placed in the cache, so that the next time you access the page, it will take much less time to display. It's
also good because anything that's currently displayed in your browser window, including the HTML
document and any graphics files, can be instantly renamed and filed on your hard drive for your
personal use.

Tip
If you use Netscape Navigator, click and hold the mouse button (on a Mac) or
click the right mouse button (in Win95) while pointing to a Web page graphic.
Notice that, after a few seconds, you can rename that graphic and save it to your
hard drive.

The bad side of downloading, though, is that every graphic and all of the text you include in an HTML
page has to be transmitted over the Internet to your user's computer. If your user is accessing the Web
over a modem, then downloading and displaying your page can take a long time-especially if your
Web page includes a lot of graphics. This means that HTML designers have to be constantly aware of
the size of their HTML documents and their Web page graphics in order to avoid causing their users
unnecessary irritation and wasted time.

Note
It takes 15 to 30 seconds (on average) for a 25 kilobyte graphic to be transmitted

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 34

 Shree M .& N. Virani Science College

over a 28.8 kbps modem connection. So a 100 kilobyte Web page could take
around two minutes to transfer-the length of four television commercials.

Summary

There are a number of popular Web browser applications that Web designers should take into
consideration when designing their Web pages. Each browser displays HTML codes in slightly
different ways and some-like Netscape and MS Internet Explorer-even add their own HTML-style
commands.

The Web uses a particular style of Internet address, called an URL, which allows it to address
individually any document on the Internet. This offers an advantage over other Internet address
schemes because it specifies the Internet service protocols desired and points directly at documents.

It's important for the Web designer to remember that everything on a Web page is downloaded,
including text and graphics. The larger the graphics on a Web page, the longer it will take to display.
This is also an advantage, though, since pages can be cached for future use.

Review Questions

1. Which browser was the first graphical browser on the market? Which is currently most
popular?
2. Most Netscape HTML extensions are designed to help with what aspect of Web pages?
3. What makes the Lynx browser different from the others discussed?
4. Is the following an URL, a server address, or a path statement?
www.mcp.com
5. What makes the mailto: command different from a standard URL?
6. What ASCII character comes between each folder or directory in a path statement?
7. If I entered the following in my browser's URL field (and hit Return, if necessary), would it
download a file?
http://ftp.cdrom.com/pub/win95/games/four.zip
8. True or false. Graphics displayed on a Web page are downloaded to the user's computer, which
is why they often take extra time to display.
9. Are the following files ASCII files or binary files? A CorelDRAW! picture, an HTML page, a
Microsoft Word document, and a WordPad document.

Review Exercises

1. Use your current Web browser to access one of the FTP sites mentioned in the "Web Browser
Applications" section of this chapter. Notice how browsers handle FTP connections.
2. Use an ftp:// URL to download one of those other Web browsers (or another file) directly.
Hint: you'll need to figure out the path to the file first.
3. If your ISP allows it, use a modem communications program to dial up your account, and then
use Lynx or a similar text browser through your ISP's connection. Notice how different the
Web is without graphics and a mouse!

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 35

 Shree M .& N. Virani Science College

Chapter 4
Creating Basic HTML Documents

It is important to realize that an HTML document must be built on a very specific framework. This
framework, in its simplest form, consists of three sets of matched container tags.

A tag is a simple markup element, and always takes the form <TAG>. A container is a pair of HTML
tags of the form <TAG> </TAG>. You can think of the <TAG> element as turning something on, while the
</TAG> turns that same thing off. For example, consider this line of HTML:

<I>This is in Italics.</I> But this isn't.

The first HTML tag, <I>, turns on italics. The second tag, </I>, turns them off. When displayed on-
screen, this line of text would look like this: This is in Italics. But this isn't. The tags themselves don't
appear on-screen. They just tell the browser program how to display the elements they contain.

The simplest possible HTML document is given in Listing 4.1. The entire document is enclosed in the
<HTML></HTML> container tags. The first part of the document is encapsulated in the <HEAD></HEAD>
container, which itself contains a <TITLE></TITLE> container. Finally, the body of the page is
contained in a <BODY></BODY> container.

Listing 4.1 The Simplest HTML Document

<HTML>
<HEAD>
<TITLE>A Very Basic HTML Document</TITLE>
</HEAD>
<BODY>
This is where the text of the document would be.
</BODY>
</HTML>

The most fundamental of all the tags used to create an HTML document is, not surprisingly, the
<HTML> tag. This tag should be the first item in your document and the corresponding end tag,
</HTML>, should be the last. Together, these tags indicate that the material contained between them
represents a single HTML document (refer to Listing 4.1). This is important because an HTML
document is a plain text ASCII file. Without these tags, a browser or other program isn't able to
identify the document format and interpret it correctly.

NOTE: While most of the recent browsers properly interpret a document that is not contained within
the <HTML> start and </HTML> end tags, it is still very important to use them. Many of the new uses for
HTML documents, such as e-mail and Usenet postings, do not necessarily involve browsers, and the
other programs are more likely to interpret an ASCII document as plain text without the hint that the
<HTML> tag provides.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 36

 Shree M .& N. Virani Science College

The </HTML> end tag is just as important as the start tag. It is becoming possible to include HTML
documents within e-mail messages and news postings. Without the </HTML>, the viewer does not know
when to stop interpreting the text as HTML code.

The Document Heading

The document head container is not a required element, but a proper head can greatly increase the
usefulness of a document. The purpose of the head is to provide information to the application that is
interpreting the document. With the exception of the TITLE element, the elements within the head
element are not seen by the reader of the document.

Elements within the head element do the following:

• Provide a title for the document.

• Lay out the relationships between multiple documents.

• Tell a browser to create a search form.

• Provide a method for sending special messages to a specific browser or other viewer.

Listing 4.2 shows an example of an HTML document with a proper HEAD element.

Listing 4.2 A Fairly Detailed HEAD Element

<HTML>
<HEAD>
<TITLE>General Officers of the US Army in the Civil War</TITLE>
<LINK HREF="mailto:rmeegan@ia.net" REV="made">
<BASE HREF="http://www.ia.net/~rmeegan/civil">
<ISINDEX PROMPT="Enter the desired name">
<META HTTP-EQUIV="EXPIRES" CONTENT="31 Dec 1997">
<META NAME="Last Modified" CONTENT="16 Dec 1996">
<META NAME="Keywords" CONTENT="Yankee, Grand Army of the Republic,
War Between the States">
<META NAME="Description" CONTENT="A listing of the general officers of the US
Army in the Civil WAR">
</HEAD>
<BODY BGCOLOR="NAVY" TEXT="WHITE" LINK="RED" VLINK="BLUE" ALINK="GREEN">
<BASEFONT SIZE=3 FONT="Georgia, Century Schoolbook, Times New Roman">
<H1><FONT COLOR="YELLOW">Union Generals of the American Civil War</FONT> </H1><BR>
This listing contains the names of the general officers of the Regular Army
and of the Volunteer Army, as well as the date of their appointment to the
rank.<BR><BR>
The names are taken from<BR>
<CITE>
Statistical Record by Frederick Phisterer<BR>
Published 1883, New York<BR><BR>
</CITE>
In all cases only the full rank is given. Many officers had a <EM>brevet</EM>
(or temporary) rank that was often one or two ranks higher than the full rank.
Remember also, that it was possible for an officer to have rank in a state
militia, the Volunteer Army, and the Regular Army; all at the same time. With
brevet ranks taken into account, it was possible for an individual to have as
many as six ranks simultaneously, depending upon who he was dealing with.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 37

 Shree M .& N. Virani Science College
</BODY>
</HTML>

The HEAD element is opened by the start tag, <HEAD>. This tag normally should immediately follow the
<HTML> start tag. The end tag, </HEAD>, is used to close the element. The rest of the head element tags
are located within this container.

Naming Your Document

The TITLE element is the only required element of the heading. It is used to give your document a
name. This title is generally displayed in the title bar of the browser. The TITLE should not be confused
with the file name of the document; instead, it is a text string that is completely independent of the
name and location of the file. This makes it highly useful, the file name is generally constrained by the
operating system of the computer that the file is located on.

The TITLE element is delimited by a <TITLE> start tag and a </TITLE> end tag. The actual title is
located between these tags. Do not enclose the title in quotation marks unless you want it to appear
with the quotes. It is most common for the TITLE element to be all on one line.

The title text is a string of unlimited length that can include any text except for the few special
characters that are restricted in HTML. In practice, it is a good idea to keep the length of the title fairly
short so that it fits on the title bar. Another thought to keep in mind when making up a title is that
many browsers use the title as the caption for the icon when the browser is minimized. Try to make the
first few characters particularly meaningful.

NOTE: The TITLE is normally used as the default name when a user creates a bookmark or Favorites
link to the document. To make this default as useful as possible, avoid having a title like Home Page or
Index. Entries like this are nearly useless in a bookmark list.

Listing 4.3 is an example of a document TITLE. Figure 4.1 shows how Microsoft Internet Explorer
uses the document TITLE as the title of the browser window.

Listing 4.3 An Example of the TITLE Element

<HTML>
<HEAD>
<TITLE>General Officers of the US Army in the Civil War</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

FIG. 4.1
Titles provide your readers with a way to identify your documents.

Creating a Document Hierarchy

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 38

 Shree M .& N. Virani Science College
HTML documents often have a relationship with other documents. This relationship is most frequently
in terms of a link to another document. Links to other documents can be relative or absolute (see
Listing 4.4). Each of these links poses its own problems. Absolute links can be long, cumbersome, and
prone to breakage when the child document is moved. Relative links are easier to type and update, but
they break when the parent document is moved.

Listing 4.4 Absolute and Relative Links

<HTML>
<HEAD>
<TITLE>News Links</TITLE>
</HEAD>
<BODY>
<IMG SRC=/gifs/news.gif ALT="News"> <-- Relative Link -->
<UL>
<BR><A HREF=http://www.cnn.com>CNN Interactive</A>
<BR><A HREF=http://www.usatoday.com>USA Today</A>
</UL>
<P>
<IMG SRC=//www.ia.net/~rmeegan/gifs/mags.gif ALT="mags"> <-- Absolute Link -->
<UL>
<BR><A HREF=http://www.infoworld.com>Infoworld Magazine</A>
<BR><A HREF=http://www.zdnet.com>Ziff-Davis Publications</A>
</UL>
<P>
</BODY>
</HTML>

This might sound unlikely, but consider that a long document might be downloaded to a user's machine
so that he might read it when offline. Any links, such as a bibliography, would be unusable when the
local copy was viewed. If the user wanted to link to other documents or images, he would first need to
reopen the first document on the computer where it normally resides.

Fortunately, the designers of HTML anticipated this problem and have added two elements, BASE and
LINK, that can be placed in a document head to help keep a document relationship straight.

NOTE: If you're just learning HTML, you might want to skim through this section. It isn't necessary to
use the BASE and LINK elements until you start developing complicated documents that require many
pages.

The BASE Element The BASE element is used to specify the full original URL of the document. This
allows relative links to work, even if a document has been moved to another directory (or even to
another machine!). In this way, a BASE element allows the viewing software to find a document link,
even when directed from a parent in a different location. The BASE element has a single required
attribute which provides the full URL of the document: HREF. Listing 4.5 provides an example of how
the <BASE> tag is used.

Listing 4.5 Using the <BASE> Tag

<HTML>
<HEAD>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 39

 Shree M .& N. Virani Science College
<TITLE>News Links</TITLE>
<BASE HREF="//www.ia.net/~rmeegan">
</HEAD>
<BODY>
<IMG SRC=/gifs/news.gif ALT="News">
<UL>
<BR><A HREF=http://www.cnn.com>CNN Interactive</A>
<BR><A HREF=http://www.usatoday.com>USA Today</A>
</UL>
<P>
<IMG SRC=/gifs/mags.gif ALT="mags">
<UL>
<BR><A HREF=http://www.infoworld.com>Infoworld Magazine</A>
<BR><A HREF=http://www.zdnet.com>Ziff-Davis Publications</A>
</UL>
<P>
</BODY>
</HTML>

Notice that the BASE element directs the viewer software where to look for the files. Even if a person
has downloaded the file to his local machine, the little images for News and Mags can still be found,
assuming that the reader's machine has access to the Internet.

The LINK Element If the BASE element allows a browser to locate a document, there still exists the
question of what the relationship between two documents might be. This becomes even more
important as the complexity of your HTML document increases. To connect documents together
logically, HTML includes the LINK element. The LINK element indicates the relationship between the
document that contains the <LINK> tag and another document (or other object). It consists of an URL
that points to the reference object and an attribute that serves as a description of the relationship. In
other words, if a parent HTML document provided a link to the current child HTML document, the
current document could provide a <LINK> tag back to the parent to indicate that relationship. A
document can contain as many LINK elements as needed to describe all of the relationships. Table 4.1
lists all of the attributes and their functions.

Table 4.1 LINK Attributes and Their Functions

Attribute Function
HREF Points to the URL of the other document.
REL Defines the relationship between the current document and persons who have contributed to
its existence.
REV Defines the relationship between another HTML document and the current document.
TYPE Specifies the type and parameters for a linked style sheet.

There are many different relationships possible, and the list is not well defined in the HTML
specification. The most common REV relationship is "made", which provides a link for e-mailing a
document's author, as shown in the following example:

<LINK HREF="mailto:nul@utexas.edu" REV="made">

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 40

 Shree M .& N. Virani Science College
This gives the URL for communicating with the document author. The URL in this instance is the
instruction to open an e-mail message addressed to nul@utexas.edu. Sandia National Laboratories,
which is on the forefront of HTML document publishing, also recommends the following REV
relationships to individuals with a connection with an HTML document: "author", "editor",
"publisher", and "owner".

Some examples of relationships to other HTML documents that can be indicated with the REL attribute
are "bookmark", "copyright", "glossary", "help", "home", "index", and "toc".

There are also two relationships that are most commonly used in ordered documents: "next" and
"previous". These are particularly useful relationships. Listing 4.6 shows the HEAD element for a
document that is a chapter in an online manual.

Listing 4.6 Using the <LINK> Tag

<HTML>
<HEAD>
<TITLE>Using the Satellite Identification and Tracking System (SITS)</TITLE>
<LINK REV="made" HREF="mailto:rmeegan@ia.net">
<LINK REL="toc" HREF="contents.htm">
<LINK REL="index" HREF="index.htm">
<LINK REL="copyright" HREF="copyright.htm">
<META NAME="Description" CONTENT="An on-line manual for the SITS">
</HEAD>
<BODY>
</BODY>
</HTML>

Customized Heading Information

Although it might seem that the elements that can be placed in a document heading already cover
every imaginable possibility, the truth is that they barely begin to scratch the surface. Because the
procedure for the development and approval of a new HTML specification is rather slow, the
companies that produce browser software often create several releases in the time between
specification versions. To provide additional functionality, one final element is provided for the
heading.

The META element allows a document author to define information that is outside of HTML. This meta-
information can be used by the browser software to perform activities that are not yet supported by the
official HTML specification. As a rule, META elements are not needed for a basic HTML document, but
you should keep these elements in mind as you gain experience and as your pages become more
sophisticated.

Figure 4.2 is an example of how the META element can be used to have the browser perform an action.

Looking at the example, you can see the following line:

<META HTTP-EQUIV=refresh" CONTENT="60" URL="www.fdline.org/homepage.html">

This is interpreted by Netscape Navigator and Microsoft Internet Explorer as the instruction to wait 60
seconds and then load a new document. This kind of instruction is often used when a document is

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 41

 Shree M .& N. Virani Science College
moved from one location to another. A small document can be left at the previous location to serve as
an automatic pointer to the new location.

A similar command line

<META HTTP-EQUIV=refresh" CONTENT="60">

can be used to have the browser reload the page every 60 seconds. This is useful for a page that has
frequently updated information, such as a stock price ticker.

NOTE: Both of these techniques are known as client pull because the client, your browser, requests
the new document from the server. These are advanced techniques, and you don't need to use them
except in circumstances when data is changing or the page needs to be reloaded.

Finally, the most popular use of a META element at the present is to use the Keywords property. Many
search engines preferentially use the words defined in this element to index the document. This can be
used to provide additional keys to an index that might not actually appear in the document verbatim.
Listing 4.7 shows how this works.

Listing 4.7 Using META Elements

<HTML>
<HEAD>
<TITLE>General Officers of the US Army in the Civil War</TITLE>
<META NAME="Keywords" CONTENT="Yankee, Grand Army of the Republic,
War Between the States">
<META NAME="Description" CONTENT="A listing of the general officers of the US
Army in the Civil WAR">
</HEAD>
<BODY BGCOLOR="NAVY" TEXT="WHITE" LINK="RED" VLINK="BLUE" ALINK="GREEN">
</BODY>
</HTML>

When designing a document that will be indexed by a search engine, it is also a good idea to use the
Description property. Most indexes use this description for your page, if it is present. If no
description is present, the index uses the first text available on the page, which can be confusing to
some using the index.

For more on the topic of search engines, see Chapter 40, "Listing Your Web Site in the Search Tools."

NOTE: The Keywords and Description properties are good first choices when you start to use META
elements. Both of them are easy to understand, and they add a lot of value to your documents.

The syntax for the META element includes the attributes shown in Table 4.2. Much like the relationships
in the LINK element, the properties of the META element are not clearly defined in the current version of
the HTML specification.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 42

 Shree M .& N. Virani Science College

Table 4.2 META Attributes and Their Functions

Attribute Function
HTTP- Defines the property for the element.
EQUIV
NAME Provides an additional description of the element. If this attribute is missing, it is assumed
to be the same as HTTP-EQUIV.
URL Defines a target document for the property.
CONTENT Provides the response value for the property.

Other Heading Elements

There are two additional elements that can be found in the document heading. The first is the SCRIPT
element and the second is the STYLE element. The former is used to add interactive control scripts to
pages, while the latter adds various styles to page content.

The Document Body

Although the nature of the World Wide Web appears to be changing in the direction of increasing
active content, most people who view your documents will still be interested in your text. This will be
especially true for documents that are created for corporate intranets and for documents that serve as
online manuals and texts. Because of this, whether you are converting existing documents or creating
new ones, you will spend much of your time working in the body.

Starting with the Required Elements

Before you can fill in your document, you need to lay out a basic working framework. HTML
documents must follow a defined pattern of elements if they are to be interpreted correctly. Rather than
retype the elements that are used in every HTML document, it is a good idea for you to create a
template to use for each of your pages so that you are less likely to leave out an important detail. At the
end of this chapter, we build a template that you can use as a starter. Until then, we'll use the example
presented in Listing 4.8.

Listing 4.8 A Basic HTML Document

<HTML>
<HEAD>
<TITLE>This is an example document</TITLE>
</HEAD>
<BODY>
Enter body text here.
</BODY>
</HTML>

This example begins with the <HTML> tag, which, as you have read, is necessary for every HTML
document. Next is the <HEAD> tag, which opens up the heading part of the document. This contains the
TITLE element. We've titled the document "This is an example document." The heading is closed with
the </HEAD> tag. Finally, the <BODY> element follows. This is where you place the bulk of the material

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 43

 Shree M .& N. Virani Science College
in your document. Remember to close the body element with the </BODY> tag and finish the page with
the </HTML> tag.

Because HTML is a markup language, the body of your document is turned on with the start tag,
<BODY>. Everything that follows this tag is interpreted according to a strict set of rules that tell the
browser about the contents. The body element is closed with the end tag, </BODY>.

NOTE: Strictly speaking, it isn't absolutely necessary to use the <BODY> start and end tags; HTML
allows you to skip a tag if it is obvious from the context. (In this case, <BODY> would be implied after
the ending </HEAD> tag, and </BODY> would be implied before the ending </HMTL> tag or the end of
the document.) However, it's still a good idea to use them. Some older browsers and other HTML
programs can become confused without them and may not display the document correctly.

In the preceding basic document, the body text is a single line. In your document, you replace this line
with the main text of your document. Unless you are using a special HTML editor, you must enter your
text using a strict ASCII format. This limits you to a common set of characters that can be interpreted
by computers throughout the world.

NOTE: Most browsers consider all nonblank white space (tabs, end-of-line characters, and so on) as a
single blank. Multiple white spaces are normally condensed to a single blank.

Attributes of the BODY Element

The BODY element supports a large number of attributes. These are all important for determining the
general appearance of your document. Table 4.3 lists these attributes and their functions for your
convenience, but we cover each of them in more detail.

Table 4.3 BODY Attributes and Their Functions

Attribute Function
ALINK Defines the color of an active link.
BACKGROUND Points to the URL of an image to use for the document background.
BGCOLOR Defines the color of the document background.
BGPROPERTIES If this is set to FIXED, the background image does not scroll.
LEFTMARGIN Sets the width of the left margin in pixels.
LINK Defines the color of an unvisited link.
TEXT Defines the color of the text.
TOPMARGIN Sets the width of the top margin in pixels.
VLINK Defines the color of an already visited link.

Coloring Your Documents

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 44

 Shree M .& N. Virani Science College
The first small step toward creating a document is to define the colors that will be used for the various
text components. If you do not specify any colors, the default colors are used. These are normally set
by the reader on her viewer.

Cascading Style Sheets, which are discussed in Chapter 17, "Applying Cascading Style Sheets," are the
latest and greatest way to adjust a page's colors and other styles. However, there are easy-to-use
<BODY> tag attributes that can also give you elementary control over the colors of your page elements.

NOTE: Because you have no way of knowing which colors have been selected as defaults by the
reader, it is considered good HTML practice to set all of the colors, if you set any. This way, the same
color isn't used for more than one component.

There is no simple rule that can be used to define a well-balanced palette, but remember that your
readers must actually read your document. Try to maintain a high contrast between the text and the
background and don't make the color differences too subtle.

Color Definitions Colors are defined in HTML using a hexadecimal coding system. The system is
based upon the three components--Red, Green, and Blue--which leads to the common name of RGB.
Each of the components is assigned a hexadecimal value between 00 and FF (0 and 255 in decimal
numbers). These three values are then concatenated into a single value that is preceded by a pound sign
(#). An example of such a value is #800080, which is purple. Because few people can visualize colors
based solely on a hexadecimal value, HTML defines 16 standard color names, which are listed along
with their hexadecimal values, in Table 4.4. Yahoo! maintains an extensive list of Web sites which
feature color table information at
http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Page_Design_and_
Layout/Color_Information/.

Table 4.4 Standard Colors and Their Values

Color Value
Black #000000
Maroon #800000
Green #008000
Olive #808000
Navy #000080
Purple #800080
Teal #008080
Gray #808080
Silver #C0C0C0
Red #FF0000
Lime #00FF00
Yellow #FFFF00
Blue #0000FF
Fuchsia #FF00FF

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 45

 Shree M .& N. Virani Science College

Aqua #00FFFF
White #FFFFFF

You can use either these color names or their values when defining colors for HTML document
elements. For example, the following lines are equivalent:

<BODY BGCOLOR="#FFFFFF">
<BODY BGCOLOR="WHITE">

The Body Color Attributes The BGCOLOR attribute is used for the document background color. If
your document has a background image, the BGCOLOR should be as close the primary color of the image
as possible. This allows readers who may not be downloading images to see your text clearly. Many
authors make this common mistake, which is particularly bad if the background image is primarily
black and the text color that you selected was white. In this case, the reader of your document is
greeted by the sight of what is apparently a blank page! For example, if you are using a background
graphic that is mostly black, you should also add the BGCOLOR="black" attribute to your page's <BODY>
tag.

The TEXT attribute is the color used for the text in the document. Because most of your text appears in
this color, it should be chosen to provide the reader with sufficient contrast. If you have elected to set
the font, be aware that fonts with fine detail are often easier to read when they are dark against a bright
background.

The LINK attribute is used by the browser for links that have not yet been followed. This color should
be obviously different from the TEXT color, so that readers can identify links.

The VLINK attribute is used to identify links that have already been visited. A common choice for
VLINK is to use a darker version of the LINK color.

The ALINK attribute marks links that are currently active. This is a relatively recent development and is
normally used for documents that have multiple frames. Quite frankly, choose your other colors first;
the reader is least likely to see this color than any of the others. See Chapter 12, "Framing Your Web
Site," for more information about frames.

Having seen all of the things that can be colored in an HTML document, you might wonder if the
results justify the effort. If you are creating a static document--such as a manual or a textbook--you
might be best off to let the reader set the colors that she wishes to use. On the other hand, if your
document is a high-energy page with a lot of graphics, then it is certainly worth the time to find the
right blend of colors.

Filling in the Background

One popular way to dress up an HTML document is to add a background image. A background image
is a graphics file that is visible under the document text. Using a background can help provide
continuity to a document, or it can also serve to differentiate the various pages.

Most background images are small and are tiled across the viewer window like wallpaper. Images of
textures are particularly popular for this purpose; bricks, marble, and cloth are often seen on HTML

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 46

 Shree M .& N. Virani Science College
documents. Most of these serve only to fill in the blank space on the document, though. More
interesting documents have a background that fits the theme of the page. Figure 4.3 shows an example
of an astronomy page that uses a pattern of stars as the wallpaper.

Other types of wallpaper that can make a document look good include a corporate logo or other image.
These should be very subdued, almost monochrome, so as not to interfere with the foreground text or
distract from your document's message. One way to accomplish this is to emboss an existing image
using a graphics program. Chapter 22, "Graphics," discusses some of the tools available for creating
these images. Figure 4.4 is an example of how this can be used.

A background can also be created to watermark a document. This type of background can be used for
an official seal or for a text message such as Draft or Confidential.

Background images look good, but they won't be seen by someone who's turned off the automatic
loading of images. Remember the advice in the BGCOLOR section and set the background color to match
the primary color of the image, so that your page is readable even if the reader doesn't get to see the
background.

NOTE: The BGPROPERTIES attribute is unique to Microsoft Internet Explorer. The only acceptable
value for this attribute is FIXED. If BGPROPERTIES=FIXED, the background image does not scroll with
the text. This is a nice effect with a wallpaper background and is useful if you've created a watermark
background.

Commenting Your HTML Documents

It is possible to add comments to your HTML document that aren't seen by a reader. The syntax for
this is to begin your comment with the <!-- tag and to end it with the --> tag. Anything located
between the two tags is not displayed in the browser. This is a convenient way to leave notes for
yourself or others. For example, you can enter a comment when new material is added to a document
that shows the date of the new addition.

CAUTION: Don't assume your comments can't be seen by your readers. Most browsers allow the
source of your document to be viewed directly, including any comments that you have added.

On the other hand, don't try to use comments to "comment out" any HTML elements in production
documents. Some browsers interpret any > as the end of the comment. In any case, the chances of an
older browser becoming confused are pretty good, resulting in the rest of your document being badly
scrambled. If you are going to use comments to cut out HTML elements while you are testing the
document, you should remove them in the final release.

The Address Element

One of the most important elements for your documents is the ADDRESS element. This is where you
identify yourself as the author of the document and (optionally) let people know how they can get in

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 47

 Shree M .& N. Virani Science College
touch with you. Any copyright information for the material in the page can be placed here as well. The
address element is normally placed at either the top or bottom of a document.

The ADDRESS element consists of text enclosed by an <ADDRESS> start tag and an </ADDRESS> end tag.
The text within an ADDRESS element is normally displayed in italics.

Listing 4.9 is an example of one such address element, and Figure 4.5 shows how it looks.

Listing 4.9 Using the ADDRESS Element

<HTML>
<HEAD>
<TITLE>Amateur Astronomy on the World Wide Web</TITLE>
<META NAME="Keywords" CONTENT="Astronomy, Telescope, Stargazing">
<META NAME="Description" CONTENT="Amateur Astronomy resources available on the
Web">
</HEAD>
<BODY BGCOLOR="WHITE" TEXT="BLACK" LINK="RED" VLINK="GREEN" ALINK="YELLOW" >
</HEAD>
<BODY>
<FONT SIZE=3 FACE="Verdana, Arial, Helvetica">
<BR>
<H1>Amateur Astronomy on the World Wide Web</H1>
<HR>
<H2>Magazines</H2>
<OL>
<LI><A HREF=http://www.astronomy-mall.com/Astronomy-Mall/?190,54>The Astronomy
Mall</A> - A place to find many amateur astronomy companies.
<LI><A HREF=http://www.skypub.com>Sky On-line</A> - Publishers of <I>Sky and
Telescope</I> and <I>CCD</I> magazines.
</OL>
<HR>
<ADDRESS>
Created by Robert Meegan<BR>
Last Modified on 16 Dec 1996
</ADDRESS>
</BODY>
</HTML>

NOTE: A very important addition to the address is to indicate the date you created the document and
the date of the last revision. This helps people determine if they have already seen the most up-to-date
version of the document.

Creating a Document Template

Now, let's build a basic document template that you can use with your documents. This template
allows you to start converting some of your existing documents to HTML. In the following chapters,
you will see how to expand upon this template.

Let's begin with the required tags: <HTML>, <HEAD>, </HEAD>, <BODY>, </BODY>, and </HTML>. You
also need to include the TITLE element, as this is a required element in HTML. Finally, put in a
dummy line of text to remind yourself where to put the text. This gives you Listing 4.10.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 48

 Shree M .& N. Virani Science College

Listing 4.10 A First Pass at a Basic Document Template

<HTML>
<HEAD>
<TITLE> A Basic Document Template </TITLE>
<HEAD>
<BODY>
Put the body text in here.
</BODY>
</HTML>

This would certainly suffice for a basic document, but you can do a lot better without much effort.
First, let's add a simple gray textured background to the document, which changes the <BODY> tag to:

<BODY BACKGROUND="greybg.jpg">

Earlier in the chapter you read that if you add a background image to a document, you should set the
colors so that the reader can see your text. First, set the BGCOLOR attribute to GRAY. This is the closest
match to the background. We'll also set the TEXT to BLACK, and LINK, ALINK, and VLINK to BLUE,
GREEN, and RED, respectively. These additions change the <BODY> tag to

<BODY BACKGROUND="greybg.jpg" BGCOLOR="GRAY", TEXT="BLACK",

LINK="BLUE", ALINK="GREEN", VLINK="RED">

You should have an ADDRESS element for the document, so add the following:

<ADDRESS>Created by Robert Meegan<BR>

Created on 16 December 1996</ADDRESS>

Of course, you'll want to put your own name in the ADDRESS.

When all of these are added to the first pass of the template, you get Listing 4.11.

Listing 4.11 Your Final Basic Document Template

<HTML>
<HEAD>
<TITLE> A Basic Document Template </TITLE>
<HEAD>
<BODY BACKGROUND="greybg.jpg" BGCOLOR="GRAY", TEXT="BLACK",
LINK="BLUE", ALINK="GREEN", VLINK="RED">
Put the body text in here.
<ADDRESS>Created by Robert Meegan<BR>
Created on 16 December 1996</ADDRESS>
</BODY>
</HTML>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 49

 Shree M .& N. Virani Science College

Chapter 5
Formatting Text as Paragraphs

Your old English teacher taught you to break your writing up into paragraphs that expressed complete
thoughts, and an HTML document shouldn't be an exception. Unfortunately, line and paragraph breaks
are a little more complicated in HTML than you might expect.

As a markup language, HTML requires that you make no assumptions about your reader's machine.
Your document's readers can set whatever margins and fonts they want to use. This means that text
wrapping must be determined by the viewer software, as it is the only part of the system that knows
about the reader's setup. Line feeds in the original document are ignored by the viewer, which then
reformats the text to fit the context. This means that a document that's perfectly legible in your editor is
badly mashed together in the viewer.

NOTE: Different viewers display the same pages in different ways, depending on their default settings
and user options. In this chapter, we've used examples from different browsers to mix things up a bit.

The proper way to break text into paragraphs is by using paragraph elements. Place a paragraph start
tag, <P>, at the beginning of each new paragraph, and the viewer knows to separate the paragraphs.
Adding a paragraph end tag, </P>, is optional, as it is normally implied by the next start tag that comes
along. Still, adding the </P> tag at the end of a paragraph can help to protect your documents against
viewers that don't precisely follow the HTML standard.

NOTE: Seriously consider using the beginning and ending paragraph tags. As style elements, which
give you more control over the <P> tag, become more prevalent, this syntax becomes more important.

NOTE: In some HTML documents, you see a paragraph start tag, <P>, used repeatedly to create
additional white space. This is not supported in HTML, and most current viewers will ignore all of the
<P> tags after the first one.

The paragraph element has one attribute that is supported by both Netscape Navigator and Microsoft
Internet Explorer. This is the ALIGN attribute. The possible values for the ALIGN attribute and their
functions are listed in Table 5.1. The default value, if the ALIGN attribute is not used, is for left
alignment.

NOTE: The ALIGN attribute can also be used with many other HTML tags to align graphics, table
contents, and other page elements. Its use in these contexts will be discussed in following chapters.

Table 5.1 ALIGN Values and Their Functions

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 50
 Shree M .& N. Virani Science College

Attribute Function
LEFT Aligns the text with the left margin of the viewer. The right edge is ragged.
CENTER Centers the text between the viewer margins.
RIGHT Aligns the text with the right margin of the viewer. The left edge is ragged.

Adding and Preventing Line Breaks

As you have seen, HTML does all of the formatting at the viewing software rather than at the source.
This has the advantage of device independence. But what do you do if you have a reason to break up a
line of text at a certain point?

Use the line break tag, <BR>, to end a line where you want. This forces the viewer to start a new line,
regardless of the position in the current line. Unlike the paragraph element, the line break does not
double space the text. Because the line break element is not a container, it does not have an end tag.

One reason you might want to force line breaks is to show off your poetic muse, as shown in Listing
5.1.

Listing 5.1 A Limerick Showing the Use of the <BR> Tag

<HTML>
<HEAD>
<TITLE>Creating an HTML Document</TITLE>
</HEAD>
<BODY>
<P>A very intelligent turtle<BR>
Found programming UNIX a hurdle<BR>
The system, you see,<BR>
Ran as slow as did he,<BR>
And that's not saying much for the turtle.<BR>
<CITE>Mercifully anonymous</CITE>
</BODY>
</HTML>

When this source is viewed in Figure 5.5, you can see how the line break element works.

CAUTION: You might think you can use multiple line breaks to provide extra white space in your
document. Some browsers condense multiple line breaks (multiple <BR> or <P> tags) to a single line
break, however.

You need to be careful when using line breaks; if the line has already wrapped in the viewer, your
break may appear after only a couple of words in the next line. This is particularly the case if the
viewer you test your documents on has wider margins than your reader's viewer. Figure 5.6 shows an
example in which the author saw that the break was occurring in the middle of the quotation, so she
added a <BR>. Unfortunately, when displayed on a screen with different margins, the word "actually"
ends up on a line by itself.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 51

 Shree M .& N. Virani Science College
Just as there are instances in which it is convenient to break a line at a specified point, there are also
times when you would like to avoid breaking a line at a certain point. Any text between a <NOBR> start
tag and the associated end tag is guaranteed not to break across lines.

NOTE: This can be very useful for items such as addresses, where an unfortunate line break can cause
unexpected results. Don't overuse the <NOBR> element, however. Text can look very strange when the
natural line breaks have been changed.

TIP: If you think you might need a break inside a <NOBR> element, you can suggest a breaking point
with a <WBR> tag (soft line break). The viewer will only use the <WBR> if it needs it.

Creating a Text Outline

So far, your HTML document probably looks a little dull. To make it more interesting, the first thing
you need to do is add a little more structure to it. Web users want to be able to quickly scan a
document to determine whether or not it has the information they are looking for. The way to make
this scanning easier is to break the document up into logical sections, each covering a single topic.

After you have broken up the document, the next step is to add meaningful headers to each section,
enabling your reader to quickly jump to the material of interest.

Adding Headings

Headings in HTML provide an outline of the text that forms the body of the document. As such, they
direct the reader through the document and make your information more interesting and usable. They
are probably the most commonly used formatting tag found in HTML documents.

The heading element is a container and must have a start tag (<H1>) and an end tag (</H1>). HTML
has six levels of headings: H1 (the most important), H2, H3, H4, H5, H6 (the least important). Each of
these levels has its own appearance in the reader's viewer, but you have no direct control over what
that appearance is. This is part of the HTML philosophy: You, as the document writer, have the
responsibility for the content, while the viewer has the responsibility for the appearance. See the
example in Listing 5.2. (See Chapter 17, "Applying Cascading Style Sheets," to learn more about using
style sheets to change text properties for tags such as <H1>.)

Listing 5.2 An HTML Document Showing the Use of Headings

<HTML>
<HEAD>
<TITLE>Creating an HTML Document</TITLE>
</HEAD>
<BODY>
<H1>Level 1 Heading</H1>
<H2>Level 2 Heading</H2>
<H3>Level 3 Heading</H3>
<H4>Level 4 Heading</H4>
<H5>Level 5 Heading</H5>
<H6>Level 6 Heading</H6>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 52

 Shree M .& N. Virani Science College
</BODY>
</HTML>

NOTE: Although it is not absolutely necessary to use each of the heading levels, as a matter of good
practice you should not skip levels because it may cause problems with automatic document
converters. In particular, as new Web indexes come online, they will be able to search Web documents
and create retrievable outlines. These outlines may be confusing if heading levels are missing.

NOTE: Remember that forgetting to add an end tag definitely messes up the appearance of your
document. Headings are containers and require both start and end tags. Another thing to remember is
that headings also have an implied paragraph break before and after each one. You can't apply a
heading to text in the middle of a paragraph to change the size or font. The result is a paragraph broken
into three separate pieces, with the middle paragraph in a heading format.

The best way to use headings is to consider them the outline for your document. Figure 5.8 shows a
document in which each level of heading represents a new level of detail. Generally, it is good practice
to use a new level whenever you have two to four items of equal importance. If more than four items
are of the same importance under a parent heading, however, try breaking them into two different
parent headings.

Headings can use the ALIGN attribute, just as the <P> tag does. This is important to remember, because
not all viewers show all headings left-aligned. Figure 5.9 shows the use of the ALIGN attribute in a
heading.

Adding Horizontal Lines

Another method for adding divisions to your documents is the use of horizontal lines. These provide a
strong visual break between sections and are especially useful for separating the various parts of your
document. Many viewers use an etched line that presents a crisp look and adds visual depth to the
document.

You can create a horizontal line using the horizontal rule element, <HR>. This tag draws a shaded,
horizontal line across the viewer's display. The <HR> tag is not a container and does not require an end
tag. There is an implied paragraph break before and after a horizontal rule.

Listing 5.3 shows how horizontal rule tags are used, and Figure 5.10 demonstrates their appearance in
the Netscape Navigator viewer.

Listing 5.3 An HTML Document Showing the Use of Horizontal Rules

<HTML>
<HEAD>
<TITLE>Manned Space Craft</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Manned Space Craft</H1>
<BR>
<H2 ALIGN=LEFT>Soviet</H2>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 53

 Shree M .& N. Virani Science College
Vostok<BR>
Voskhod<BR>
Soyuz<BR>
<HR>
<H2 ALIGN=LEFT>American</H2>
Mercury<BR>
Gemini<BR>
Apollo<BR>
Shuttle<BR>
<HR >
</BODY>
</HTML>

Listing 5.4 The Use of Attributes in Horizontal Rules

<HTML>
<HEAD>
<TITLE>Manned Space Craft</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>Manned Space Craft</H1>
<BR>
<H2 ALIGN=LEFT>Soviet</H2>
Vostok<BR>
Voskhod<BR>
Soyuz<BR>
<HR WIDTH=50% SIZE=6 ALIGN=LEFT COLOR=RED>
<H2 ALIGN=LEFT>American</H2>
Mercury<BR>
Gemini<BR>
Apollo<BR>
Shuttle<BR>
<HR WIDTH=50% SIZE=6 ALIGN=LEFT COLOR=NAVY>
</BODY>
</HTML>

Table 5.2 <HR> Attributes and Their Functions

Attribute Function
ALIGN Can be set to LEFT, CENTER, or RIGHT.
WIDTH Can be entered in pixels or as a percentage of the viewer window width. If a percentage is
desired, add a percent time to the number.
SIZE The height of the ruled line in pixels.
NOSHADE If this attribute is present, the viewer does not use a three-dimensional effect.
COLOR Specifies the color of the ruled line. An RGB hexadecimal value or a standard color name
can be used.

TIP: Documents created using early versions of HTML often used a graphic image to provide a more
colorful and obvious break. Of course, these would not appear in viewers that had image loading
turned off. Even if the viewer were loading images, a color bar was another file that had to be copied
and maintained. The new <HR> attributes allow you much more flexibility in the creation of your
documents at virtually no loss of speed or ease of maintenance.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 54

 Shree M .& N. Virani Science College
Horizontal rules should be reserved for instances when you want to represent a strong break in the flow
of the text. Some basic guidelines for adding rules is that they should never come between a heading
and the text that follows the heading. They should also not be used to create white space in your
document. White space--places where no content appears--is important to controlling the look and feel
of your pages. Too much white space and your pages appear barren; too little and they appear
crowded.

Using Preformatted Text

Is it absolutely necessary to use paragraph and line break elements for formatting text? Well, not
really; HTML provides a container that can hold preformatted text. This is text that gives you, the
author, much more control over how the viewer displays your document. The trade-off for this control
is a loss of flexibility.

The most common and useful preformatting tag is the <PRE> container. Text in a <PRE> container is
basically free-form with line feeds causing the line to break at the beginning of the next clear line. Line
break tags and paragraph tags are also supported. This versatility enables you to create such items as
tables and precise columns of text. Another common use of the <PRE> element is to display large
blocks of computer code (C, C++, and so on) that would otherwise be difficult to read if the browser
reformatted it.

Text in a <PRE> container can use any of the physical or logical text formatting elements. You can use
this feature to create tables that have bold headers or italicized values. However, the use of paragraph-
formatting elements such as <Address> or any of the heading elements is not permitted. Anchor
elements can be included within a <PRE> container.

The biggest drawback to the <PRE> container is that any text within it is displayed in a monospaced
font in the reader's viewer. This tends to make long stretches of preformatted text look clunky and out
of place.

Figure 5.12 shows an example of some preformatted text in an editor. You can use the editor to line up
the columns neatly before adding the character-formatting tags. The result of this document is shown
in Figure 5.13.

TIP: If you are not converting existing documents, the HTML tables are much more attractive than are
those you can create by using the <PRE> element. See Chapter 11, "Formatting Content with Tables,"
for more information on this topic.

CAUTION: Tab characters move the cursor to the next position, which is an integer multiple of eight.
The official HTML specification recommends that tab characters not be used in preformatted text
because they are not supported in the same way by all viewers. Spaces should be used for aligning
columns.

NOTE: There are other preformatted container classes, but these have been declared as obsolete. The
<XMP> and <LISTING> elements give you the capability to create text that is already laid out. There are

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 55

 Shree M .& N. Virani Science College
some disadvantages to these in that other HTML elements are not permitted inside of them. Viewers
are not allowed to recognize any markup tags except the end tag. Unfortunately, many viewers don't
comply with this standard properly, and the results can be unpleasant.
The difference between the two elements are that <XMP> text must be rendered in a font size that
permits at least 80 characters on a line and <LISTING> requires a font that permits 132 characters.
You should avoid using the <XMP> and <LISTING> elements unless it is absolutely necessary. Because
they have been declared obsolete, viewers are not required to support them any longer. You will be
more certain of what your readers are seeing if you use the <PRE> element instead.

NOTE: If you want to show actual HTML code in a preformatted section, or you want to use the < or
> characters, you need to use the &lt and &gt entity codes, like this: &ltPRE&gt.

The <DIV> Tag

The <DIV></DIV> container (DIV stands for division) can be used to enclose and define the alignment
for an entire block of page elements. It supports the ALIGN attribute, so you could use it to align a block
of text and graphics to CENTER, as in this example:

<DIV ALIGN=CENTER>
<H1>This header is centered.</H1>
<IMG SOURCE="somepic.gif"><BR>
So are the images above and this line of text.<BR>
<P ALIGN=RIGHT>But this text is right-aligned.</P>
</DIV

Note that all the elements between the <DIV> and </DIV> tags are aligned according to the definition
given by the <DIV> tag, except for any elements which have their own alignments defined. As is
always the case with the ALIGN attribute, it can assume the values LEFT, CENTER, or RIGHT.

You can also use inline styles with the <DIV> tag to set the style for an entire block of HTML within
your document. This works because of the concept of inheritance. For example, if you want to change
the text color of an entire block of tags to blue, you can put those tags in the DIV container and define a
style for the <DIV> tag that sets the text color to blue. It looks like this:

<DIV STYLE="color: blue">

<H1>This is a heading</H1>
<P>This is a paragraph. It will look blue in the user's browser</P>
</DIV>

The DIV tag is also an important part of advanced page layout using Cascading Style Sheets, and will
be discussed in that context in Chapters 17 and 18.

Layout Tips

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 56

 Shree M .& N. Virani Science College
Understanding the HTML tags that you can use is a different matter than understanding how to use
them effectively. Thus, here are a few tips that you should consider when using the tags you learned
about in this chapter:

• Use equal spacing. Try to keep the spacing between elements consistent. That is, make sure the
same amount of space is above and below each of your paragraphs. Readers perceive uneven
spacing as sloppiness on your part.

• Avoid right- and center justification. Don't right or center-justify the main body of text. Right-
and center-justified text is harder to read than left-justified text.

• Don't go overboard with indents. Proper indentation depends on the size of the font you're
using. A larger font requires a deeper indent and vice versa.

• Use <NOBR> with <WBR> to maintain control of line breaks. Sometimes you want to control
exactly where the browser breaks a line if it needs to. <NOBR> turns off line breaks while <WBR>
provides hints to the browser that suggests a spot for a line break if necessary.

• Consider dividing a page that uses <HR>. If you find yourself using rules to divide a Web page
into individual topics, consider splitting that Web page into individual pages so each page
remains focused on a single topic.

• Give plenty of space to artwork. The images and tables in your HTML document should have
enough white space around them so that they're set apart from the text. You don't want them to
appear cramped.

• Use headings to organize your text. Headings give readers a visual road map that helps them
locate the information in which they're interested. Use them liberally.

A Specialized Template

Using what you've learned in this chapter, you can create a more sophisticated template. Now you can
use some of this chapter's features to build a template that can be used for glossaries and related
documents.

The first step is to bring the existing template into your editor. Once you've loaded it, you can make the
appropriate changes to the elements that are already present. These can be seen in Listing 5.5.

Listing 5.5 The Glossary Template with the First Changes

<HTML>
<HEAD>
<TITLE>Glossary</TITLE>
<HEAD>
<BODY BACKGROUND="greybg.jpg" BGCOLOR="GRAY", TEXT="BLACK",
LINK="BLUE", ALINK="GREEN", VLINK="RED">
<ADDRESS>Created by Author<BR>
Created on Date</ADDRESS>
</BODY>
</HTML>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 57

 Shree M .& N. Virani Science College
Now you can add a title to the page and bracket the text with some horizontal rules. The terms are
defined as level-two headings, left-aligned, and that the definitions themselves will be normal text.
These decisions lead to Listing 5.6, which is a template that can now be saved and used anytime you
need a glossary document. This same template would also work for a phone list or a catalog.

Listing 5.6 The Final Glossary Template

<HTML>
<HEAD>
<TITLE>Glossary</TITLE>
<HEAD>
<BODY BACKGROUND="greybg.jpg" BGCOLOR="GRAY", TEXT="BLACK",
LINK="BLUE", ALINK="GREEN", VLINK="RED">
<H1 ALIGN=CENTER>Glossary</H1>
<HR ALIGN=CENTER WIDTH=50% SIZE=5 COLOR=NAVY>
<H2 ALIGN=LEFT>Term 1</H2>
Type the definition for term 1 here.
<H2 ALIGN=LEFT>Term 2</H2>
Type the definition for term 2 here. And so on...
<HR ALIGN=CENTER WIDTH=50% SIZE=5 COLOR=NAVY>
<ADDRESS>Created by Author<BR>
Created on Date</ADDRESS>
</BODY>
</HTML>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 58

 Shree M .& N. Virani Science College

Chapter 6
Applying Charcter Formatting

Once you've created your document, much of the hard work is done. The text that you've written is
neatly broken into paragraphs, headings are in place, and the miscellaneous items such as the title and
the author information have been added. At this point you could walk away satisfied, but something
still seems to be missing.

One of the primary things that separates documents created on a word processor from those produced
on a typewriter is the idea of text formatting. Word processors give the author control over how her
text will look. She can chose the font that she likes in the appropriate size, and she can apply one or
more of a myriad of options to the text. In HTML, you have this same capability. Your only real
restrictions involve the importance of viewer independence.

Logical Formatting

One of the ideas behind HTML is that documents should be laid out in a logical and structured manner.
This gives the users of the documents as much flexibility as possible. With this in mind, the designers
of HTML created a number of formatting elements that are labeled according to the purpose they serve
rather than by their appearance. The advantage of this approach is that documents are not limited to a
certain platform. Although they may look different on various platforms, the content and context will
remain the same.

These logical format elements are as follows:

• <CITE> The citation element is used to indicate the citation of a quotation. It can also be used
to indicate the title of a book or article. An italic font is normally used to display citations.

<CITE>Tom Sawyer</CITE> remains one of the classics of American literature.

• <CODE> The code element is used to indicate a small amount of computer code. It is generally
reserved for short sections, with longer sections noted by using the <PRE> tag described later.
Code normally appears in a monospaced font.

One of the first lines that every C programmer learns is:<BR>

<CODE>puts("Hello World!");</CODE>

• <EM> The emphasis element is used to indicate a section of text that the author wants to
identify as significant. Emphasis is generally shown in an italic font.

The actual line reads, "Alas, poor Yorick. I knew him, EM>Horatio</EM>."

• <KBD> The keyboard element is used to indicate a user entry response. A monospaced
typewriter font is normally used to display keyboard text.

To run the decoder, type <KBD>Restore</KBD> followed by your password.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 59

 Shree M .& N. Virani Science College

• <SAMP> The sample element is used to indicate literal characters. These normally are a few
characters that are intended to be precisely identified. Sample element text normally is shown
in a monospaced font.

The letters SAMP>AEIOU</SAMP> are the vowels of the English language.

• <STRONG> The strong element is used to emphasize a particularly important section of text.
Text using strong emphasis is normally set in a bold font.

The most important rule to remember is <STRONG>Don't panic</STRONG>!

• <VAR> The variable element is used to indicate a dummy variable name. Variables are
normally viewed in an italic font.

The sort routine rotates on the <VAR>I</VAR>th element.

• <DFN> The defining instance element is used to create a sub-definition in a defining list.
Variables are normally viewed in an italic font.

<DFN>The aardvark is an ant-eating animal.</DFN>

Note that all of these elements are containers, and as such, they require an end tag. Figure 6.1 shows
how these logical elements look when seen in the Netscape viewer.

You have probably noticed that a lot of these format styles use the same rendering. The most obvious
question to ask is why use them if they all look alike?

The answer is these elements are logical styles. They indicate what the intention of the author was, not
how the material should look. This is important because future uses of HTML may include programs
that search the Web to find citations, for example, or the next generation of Web viewers may be able
to read a document aloud. A program that can identify emphasis would be able to avoid the deadly
monotone of current text-to-speech processors.

The <BLOCKQUOTE> Element

You may have the opportunity to quote a long piece of work from another source in your document.
To indicate that this quotation is different from the rest of your text, HTML provides the
<BLOCKQUOTE> element. This container functions as a body element within the body element and can
contain any of the formatting or break tags. As a container, the <BLOCKQUOTE> element is turned off by
using the end tag.

The normal method used by most viewers to indicate a <BLOCKQUOTE> element is to indent the text
away from the left margin. Some text-only viewers may indicate a <BLOCKQUOTE> by using a character,
such as the "greater than" sign, in the leftmost column on the screen. Because most viewers are now
graphical in nature, the <BLOCKQUOTE> element provides an additional service by enabling you to
indent normal text from the left margin. This can add some visual interest to the document.

Listing 6.1 shows how a <BLOCKQUOTE> is constructed, including some of the formatting available in
the container. The results of this document when read into Netscape can be seen in Figure 6.2.
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 60
 Shree M .& N. Virani Science College

Listing 6.1 Construction of a <BLOCKQUOTE>

<HTML>
<TITLE>BLOCKQUOTE Example</TITLE>
<BODY>
<BLOCKQUOTE>
Wit is the sudden marriage of ideas which before their union were not
perceived to have any relation.
</BLOCKQUOTE>
<CITE>Mark Twain</CITE>
</BODY>
</HTML>

Physical Format Elements

Having said that HTML is intended to leave the appearance of the document up to the viewer, I will
now show you how you can have limited control over what the reader sees. In addition to the logical
formatting elements, it is possible to use physical formatting elements that will change the appearance
of the text in the viewer. These physical elements are as follows:

• <B> The bold element uses a bold font to display the text.

This is in <B>bold</B> text.

• <I> The italic element renders text using an italic font.

This is in <I>italic</I> text.

• <TT> The teletype element displays the contents with a monospaced typewriter font.

This is in TT>teletype</TT> text.

• <U> The underline element causes text to be underlined in the viewer.

This text is <U>underlined</U>.

• <STRIKE> The strikethrough element draws a horizontal line through the middle of the text.

This is a <STRIKE>strikethough</STRIKE> example.

• <BIG> The big print element uses a larger font size to display the text.

This is <BIG>big</BIG> text.

• <SMALL> The small print element displays the text in a smaller font size.

This is <SMALL>small</SMALL> text.

• <SUB> The subscript element moves the text lower than the surrounding text and (if possible)
displays the text in a smaller size font.

This is a SUB>subscript</SUB>.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 61

 Shree M .& N. Virani Science College

• <SUP> The superscript element moves the text higher than the surrounding text and (if
possible) displays the text in a smaller size font.

This is a <SUP>superscript</SUP>.

If the proper font isn't available, the reader's viewer must render the text in the closest possible manner.
Once again, each of these is a container element and requires the use of an end tag. Figure 6.3 shows
how these elements look in the Internet Explorer.

These elements can be nested, with one element contained entirely within another. On the other hand,
overlapping elements are not permitted and can produce unpredictable results. Figure 6.4 gives some
examples of nested elements and how they can be used to create special effects.

TIP: There is a tag available only in Netscape Navigator that has acquired a particularly bad
reputation: the <BLINK> tag is notorious in HTML circles. Unless you want people to speak ill of your
documents, it's best to avoid this tag. If you do use it, make absolutely sure you remember to use a
</BLINK> tag in the proper place. There's nothing more annoying than a whole page of blinking text.

Fonts

You, as document author, have the ability to control the appearance of the text in your documents. This
capability was restricted entirely to the reader in versions of HTML previous to 3.2. The problem with
this ability is that you can only use fonts that exist on you readers' machines. So how do you know
what your user might have available?

Unfortunately, you don't. If you are building documents to be used on an intranet, your organization
should set standards as to which fonts should be found on every machine. As long as this is a
reasonable set, it will be easy to maintain and you will be able to choose any of the standard fonts for
your document. If you are developing for the Web, however, you have a more serious problem. In
practice, you really don't know what fonts your readers might have. Even the most basic selection
depends greatly upon the hardware that your readers are using. There are no really graceful ways
around this problem at the present, although several companies are looking into ways of distributing
font information with a document.

NOTE: If you are developing for the Web and you would like to use some different fonts, you should
be aware that Microsoft has several fonts available for free download on their Web site. These fonts
are available in both Windows and Macintosh formats. If you decide to use any of these fonts in your
documents, you might want to put a link to the Web page where your readers can download the fonts,
if they don't already have them.
http://www.microsoft.com/truetype/fontpack/default.htm

The FONT Element

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 62

 Shree M .& N. Virani Science College
The method that HTML uses for providing control over the appearance of the text is the FONT element.
The FONT element is a container that is opened with the <FONT> start tag and closed with the </FONT>
end tag. Unless attributes are assigned in the start tag, there is no effect of using a FONT element.

The FONT element can be used inside of any other text container and it will modify the text based upon
the appearance of the text within the parent container. Using the FACE, SIZE, and COLOR attributes, you
can use FONT to drastically modify the appearance of text in your documents.

The FACE Attribute

The FACE attribute allows you to specify the font that you would like the viewing software to use when
displaying your document. The parameter for the this attribute is the name of the desired font. This
name must be an exact match for a font name on the reader's machine, or the viewer will ignore the
request and use the default font as set by the reader. Capitalization is ignored in the name, but spaces
are required. Listing 6.2 shows an example of how a font face is specified and Figure 6.5 shows the
page in Microsoft Internet Explorer.

Listing 6.2 An Example of Font Face Selection

<HTML>
<HEAD>
<TITLE>Font Selection Example</TITLE>
</HEAD>
<BODY>
<FONT FACE="Tolkien">
This is an example of font selection. </FONT>
</BODY>
</HTML>

Since you don't know for certain what fonts the user might have on his system, the face attribute allows
you to list more than one font, with the names separated by commas. This is especially useful, since
nearly identical fonts often have different names on Windows and Macintoshes. The font list will be
parsed from left to right and the first matching font will be used. Listing 6.3 shows an example where
the author wanted to use a sans-serif font for his text.

Listing 6.3 Font Face Selection can use a List of Acceptable Choices
<HTML>
<HEAD>
<TITLE>Font Selection Example</TITLE>
</HEAD>
<BODY>
<FONT FACE="Verdana", "Arial", "Helvetica">
This is an example of font selection. </FONT>
</BODY>
</HTML>

In this example, the author wanted to use Verdana as his first choice, but listed Arial and Helvetica as
alternatives.

The SIZE Attribute

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 63

 Shree M .& N. Virani Science College
The SIZE attribute of the FONT element allows the document author to specify character height for the
text. Font size is a relative scale from 1 though 7 and is based upon the "normal" font size being 3. The
SIZE attribute can be used in either of two different ways: the size can be stated absolutely, with a
statement like SIZE=5, or it can be relative, as in SIZE=+2. The second method is more commonly used
when a BASEFONT size has been specified.

Listing 6.4 shows how the font sizes are specified and Figure 6.6 shows how they would look.

Listing 6.4 An Example of Font Size Selection

<HTML>
<HEAD>
<TITLE>Font Size Example</TITLE>
</HEAD>
<BODY>
<FONT SIZE=1>Size 1</FONT><BR>
<FONT SIZE=-1>Size 2</FONT><BR>
<FONT SIZE=3>Size 3</FONT><BR>
<FONT SIZE=4>Size 4</FONT><BR>
<FONT SIZE=+2>Size 5</FONT><BR>
<FONT SIZE=6>Size 6</FONT><BR>
<FONT SIZE=+4>Size 7</FONT><BR>
</BODY>
</HTML>

The COLOR Attribute

Text color can be specified in the same manner as the face or the size. The COLOR attribute accepts
either a hexadecimal RGB value or one of the standard color names. Listing 6.5 is an example of how
colors can be specified.

Listing 6.5 An Example of Font Color Selection

<HTML>
<HEAD>
<TITLE>Font Color Example</TITLE>
</HEAD>
<BODY>
<FONT COLOR="#FF0000">This text is red</FONT><BR>
<FONT COLOR="GREEN">This text is green</FONT><BR>
</BODY>
</HTML>

The <BASEFONT> Tag

The <BASEFONT> tag is used to establish the standard font size, face, and color for the text in the
document. The choices made in the <BASEFONT> tag remain in place for the rest of the document,
unless they are overridden by a FONT element. When the FONT element is closed, the BASEFONT
characteristics are returned. BASEFONT attributes can be changed by another <BASEFONT> tag at any
time in the document. Note that BASEFONT is a tag and not a container. There is no </BASEFONT> end
tag.

BASEFONT uses the FACE, SIZE, and COLOR attributes just as the FONT element does.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 64

 Shree M .& N. Virani Science College
Listing 6.6 is an example of the <BASEFONT> tag. Figure 6.7 shows how the example looks in Internet
Explorer.

Listing 6.6 An Example of the <BASEFONT> Tag

<HTML>
<HEAD>
<TITLE>BASEFont Example</TITLE>
</HEAD>
<BODY>
This text is before the BASEFONT tag.<BR>
<BASEFONT SIZE=6 FACE="GEORGIA">
This text is after the BASEFONT tag.<BR>
Size changes are relative to the BASEFONT <FONT SIZE=-3>SIZE</FONT>.<BR>
</BODY>
</HTML>

Text Formatting Tips

Now that you have all of the tools to format your text, you need to decide how you are going to use
them. It is possible to use so many different fonts, sizes, and formats that your document will be
unpleasant to read. Figure 6.8 is a bad example of how a document can use too many formats.

The following are general tips to keep in mind as you format your documents:

• Most documents should use only two or three different font faces.

• In general, if the body text is in a serif font, such as Times New Roman, the headings should be
a sans-serif font, such as Arial.

• Italics are much less intrusive than are bold characters, which should be reserved for very
important points.

• Don't overuse underlining. When long strings of text are underlined, the user's eyes easily get
confused.

• The size of headings should decrease with the decreasing importance of the heading. This
provides your readers with a quick and easy way to scan your documents.

Creating Special Characters

It's bound to happen sooner or later--you'll need to include some weird character on your Web page
like a copyright sign or trademark symbol. Fortunately, HTML provides an easy way to do this. For
example, if you need a trademark symbol, you use the substitute &trade. A Web browser program will
interpret this properly as &trade;.

HTML 4.0 adds a whole list of new "entities", or special symbols. They fall roughly into three
categories.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 65

 Shree M .& N. Virani Science College
First is a set of international typography symbols that are necessary for creating Web sites that are truly
world-wide. Though we don't use them in English, most Western languages couldn't get along without
the "o" with an umlaut.

The second set of new entities are mathematical symbols. Long demanded by scientists and engineers,
these new symbols allow them to put complex formulas inline with regular text. An integral equation is
now almost as easy to create and display elegantly as a Shakespeare quote.

NOTE: Though Greek characters are included among the mathematical entities, the set is not adequate
for creating documents in Greek. These symbols are intended for use in mathematical formulas only.

The final set of new characters included in the HTML 4.0 specification is a set of special characters
that are included in Adobe's Symbol font, like daggers and fancy quotation marks.

Though entities are easy to use, the list of available characters is quite long. The full list is on the Web
at http://www.w3.org/TR/WD-entities, but Table 6.1 lists a few popular characters to get you started:

Table 6.1 Some Symbols Defined in HTML 4.0

Entity Symbols
&cent, &pound, &yen ¢, #, ¥
&copy, &reg ", ®
&deg °
&frac14, &frac12, &frac34 1/2 , 1/3, 3 /4
&divide ÷
&pi [Pi]
&le, &ge <>
&amp &
&dagger [dagger]
&spades, &clubs, &hearts, &diams ´, ®, §, ©

To use one of these entities in an HTML document, just include it inline with text, as in this example:

I like bread &amp butter, and for dessert I like &pi.

The &amp will be displayed as an ampersand ("&") and the &pi will show up as the mathematical
symbol for pi.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 66

 Shree M .& N. Virani Science College

Chapter 7
Adding Graphics to a Web Page

Images can make your HTML document more compelling than text alone. Imagine an HTML
document that contains some fairly dry material. The specification for the techno-widget that you
invented, for example. If you only put text in this document, the document would seem quite dull. On
the other hand, a few well-placed graphics can break up the text, making it seem more readable, and
make the document more visually appealing.

Images can often convey your message better than text alone. Can you picture this book without any
figures? It wouldn't convey its message as well. Remember the old cliché, "a picture is worth a
thousand words?" Beyond that, without figures you probably would have put this book right back onto
the shelf because it wouldn't look very appealing.

Up to this point, you've learned about the basic HTML required to add text to your document and how
to format that text. This chapter stuffs your toolkit with another tool--inline images--that lets you
convey your message better and create a more visually attractive Web page. In this chapter, you learn
how to add those images to your HTML documents. You also learn several tips and tricks that you
need to know when using images in HTML.

Understanding the Issues

You need to carefully consider each image that you add to your HTML documents. Yes, you should
carefully consider the design and contents of each image, but, in this section, you learn about other
issues. For example:

• Does the image add enough value to the Web page?

• Can I borrow an image? What about copyrights?

• What about offensive or pornographic images?

What Should I Know When Using Images?

Before adding images to your HTML documents, you need to understand the issues. That doesn't mean
you should avoid using images--you shouldn't. If you understand the issues, however, you're better
able to choose appropriate images. Just keep these points in mind as you add each image to your
document:

• Graphics files are slow to download. The average user with a 14.4KBps modem can wait
several seconds or even several minutes while a graphics file downloads.

• Search engines don't know what to do with images. Search engines such as AltaVista and
Excite can't index your images. Thus, if you depend heavily on images, your Web page isn't as
likely to be hit upon by these search engines' users.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 67

 Shree M .& N. Virani Science College
• Many users don't have graphical browsers. Thousands of folks are still using Lynx, for
example, which is a UNIX-based, text-only browser. In addition, Internet Explorer and
Netscape users might disable inline images in order to open Web pages faster.

• Images aren't always internationalized. Such a big word, internationalized. Because HTML
documents published on the Web have a worldwide audience, internationalized images might
be important.

• Color images aren't always portable. A color image that looks good on your computer might
not look quite as good on another user's computer. Thus, you need to pay particular attention to
how you use colors in an image.

Do I Have to Worry About an Image's Copyright?

The growth in electronic publishing has given rise to a startling new crime wave. Many people who are
perfectly honest in all of their day-to-day dealings think nothing of using a clever graphic found on the
Web. After all, once they download it, the image has lost all its ties to the original author. Regardless,
copyright laws apply to electronic images just as much as they do to works like this book. If you use an
image that has been copyrighted, the author can sue for damages.

How can you tell if a graphic has been copyrighted? It's not as easy as looking for a little copyright
symbol in the image. Here are some tips to help you determine if an image is copyrighted:

• Look at the original document that contained the image for a copyright notice.

• If you borrowed the image from clip art or an image library, look in the library's document for a
copyright notice.

• If you scanned the image from a magazine or book, you can bet the image is copyrighted.

• If you downloaded an image from a commercial site, such as an online magazine, the image is
probably copyrighted.

NOTE: Images that are obviously commercially oriented are usually copyrighted. These include
images of people, logos, cartoon characters, and other unique images. Interesting decorations such as
bullets or horizontal rules probably come from a clip-art library, which grants rights to use those
images only to the purchaser of the library.

Can you plead ignorance if you're busted using a copyrighted image? No. You have the total
responsibility for determining whether an image is copyrighted. Because this is not always practical,
the best advise is to only use images that either you're completely certain are not copyrighted, those
that you have been granted the right to use, or those for which you hold the copyright.

CAUTION: Changing a copyrighted work does not revoke the copyright. The copyright holder has
rights to all derived works. This means that you cannot download an image, change it in some fashion,
and then freely use the new version.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 68

 Shree M .& N. Virani Science College

As you can see, copyright law is a tricky thing. Your best bet is to assume that all images are
copyrighted unless proven otherwise. If you have any questions or if you're developing a high-profile
Web site, you should probably contact an attorney who specializes in copyright law.

Can I Get into Trouble for Pornographic Images?

Maybe. A simple rule of thumb is that you should avoid pornographic images. From a practical point
of view, a Web site that has pornographic images on it is likely to be overwhelmed with traffic. As a
result you may run afoul of your Internet service provider, who is almost certainly not going to be
pleased with hundreds of megabytes of downloads from a single Web page.

There are a couple of legal aspects to this issue, as well:

• Most pornography has been scanned from published sources and is in violation of the copyright
laws. These publishers are among the most aggressive plaintiffs in pursuit of legal damages.

• A variety of states and countries have laws regarding what is obscene. Since the Web is a
world-wide medium, you might violate laws that you don't even know exist.

CAUTION: The information you read in this section is common sense. This information doesn't
replace your legal counsel, however, in cases where you have real questions about pornographic
images.

Picking the Right Graphics File Format

You'll find dozens of graphics file formats that you can use to store images--GIF, JPEG, PCX, PNG,
WMF, and so on. When creating images for use in an HTML document, however, you're better off
sticking with those file formats that most browsers understand: GIF or JPEG.

Each file format has certain trade offs. While one file format downloads faster, for example, the other
format maintains more image detail. This section helps you pick the right file format by describing
these trade offs. First, it briefly describes each file format, and then it compares the speed, color depth,
definition, and browser support of each file format.

NOTE: If you want to get right to the bottom line, use GIF. It's widely supported by most Web
browsers (whereas PNG is not). It can be interlaced, which lets users view an image before it's finished
downloading. It does transparency, too, so you can create great looking imagemaps with transparent
backgrounds. And you can even use it to create simple animations.

NOTE: When choosing a graphics file format, the most important issue to keep in mind is download
speed versus image quality. If you're going to use an image in your Web page, you obviously want to

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 69

 Shree M .& N. Virani Science College
store that image in a format that downloads as quickly as possible. On the other hand, you trade image
quality for faster download speeds.
The best possible choices are GIF, PNG, or JPEG. BMP files aren't compressed at all, thus it is the
slowest of all file formats to download. GIF, PNG, and JPEG all provide an acceptable experience
when compared to the variety of other formats available on the Web. GIF and PNG files are larger than
JPEG files, but GIF and PNG files decode faster and maintain more image detail.

TIP: GIF does an extremely good job compressing images that contain only a handful of colors. Thus,
with an image that uses only a few colors, GIF compresses better than JPEG.

Colors

GIF supports 256 colors. JPEG supports 16.7 million colors. Thus, if color depth is not important or
you're using a limited number of colors in an image, you can be comfortable using GIF. On the other
hand, if you want to maintain a photographic-quality color depth, then you might consider using JPEG.

Loss

Lossy compression schemes cause an image to lose detail when the graphics program saves it. That is
how these schemes compress the file so much. Lossless compression schemes, on the other hand, don't
cause an image to lose any detail at all. Table 7.1 describes each file format's compression scheme.

Table 7.1 Compression Schemes

Format Scheme Description

GIF Lossless GIF compresses without losing any detail. Thus, if you're concerned more with
maintaining detail than download speed, use GIF.
PNG Lossless PNG also compresses without losing any detail. PNG is a good alternative to GIF,
except that it's not directly supported by most Web browsers.
JPEG Lossy JPEG causes an image to lose detail when saved. If you're concerned more with file
size than with detail, however, use JPEG.

Browser Support

You really don't want readers to have to install a helper application to view the images in your HTML
documents. Thus, you should stick with those file formats that are directly supported by the most
popular browsers. These formats include GIF and JPEG. PNG is not yet supported by a majority of the
Web browsers, so you should shy away from this format for now.

Adding Inline Images to Your HTML Document

Putting an image in an HTML document is incredibly easy--simply use the <IMG> tag with its SRC
attribute, which points to the URL of the graphic file to be displayed (see Figure 7.1). Add the

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 70

 Shree M .& N. Virani Science College
following tag to your HTML document at the location in which you want to display the image. Then,
replace filename with the URL of the image you want to display.

<IMG SRC="filename">

By default, the browser displays the image inline. Thus, the browser displays it immediately to the
right of any text or any other object that immediately precedes the image. Take a look at Listing 7.1,
for example. It shows the same image three different times. Each time, the image is shown inline. That
is, the browser displays the image immediately to the right of any text preceding it as seen below.

Listing 7.1 Using the <IMG> Tag

<HTML>
<HEAD>
<TITLE>Using the IMG tag</TITLE>
</HEAD>
<BODY>
<P>
<IMG SRC="book.gif">
This text immediately follows the image.
</P>
<P>
This text is interrupted
<IMG SRC="book.gif">
by the image.
</P>
<P>
In this case, the image appears inline after this text.
<IMG SRC="book.gif">
</P>
</BODY>
</HTML>

TIP: Consider storing all your images in a single directory off your Web site's root folder. Then, you
can use relative paths in combination with the <BASE> tag (see Chapter 8, "Linking Documents
Together") to access your images without specifying a full URL.

Aligning Text with an Inline Image

By default, when you insert an image inline with text, the text is aligned with the bottom of the image.
Chances are good that you won't like this default alignment--it leaves a great deal of white space on the
page. You can change it, though, using the <IMG> tag's ALIGN attribute. Table 7.2 describes each value
you can assign to this attribute.

Table 7.2 Values for the ALIGN Attribute

Value Description
TOP Aligns the text with the top of the image

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 71

 Shree M .& N. Virani Science College

MIDDLE Aligns the text with the middle of the image

BOTTOM Aligns the text with the bottom of the image

Listing 7.2 shows an HTML document that inserts three images, each of which uses one of the
alignment values shown in Table 7.2. Figure 7.2 shows the resulting Web page.

Listing 7.2 Using the <IMG> Tag's ALIGN Attribute

<HTML>
<HEAD>
<TITLE>Using the IMG tag's ALIGN attribute</TITLE>
</HEAD>
<BODY>
<P>
<IMG SRC="book.gif" ALIGN=TOP>
This text is aligned with the top of the image.
</P>
<P>
<IMG SRC="book.gif" ALIGN=MIDDLE>
This text is aligned with the middle of the image.
</P>
<P>
<IMG SRC="book.gif" ALIGN=BOTTOM>
This text is aligned with the bottom of the image.
</P>
</BODY>
</HTML>

Positioning an Image on the Web Page

By default, the browser displays images inline. That is, it displays an image immediately to the right of
the previous content. Text does not wrap around it. You can display an image on the left or right side
of the Web page, however, allowing the surrounding content to flow around the image. This type of
image is called a floating image.

You create a floating image by using the <IMG> tag's ALIGN attribute. This is the same attribute you use
to align the surrounding text with an image. Table 7.3 describes each value you can assign to this
attribute.

Table 7.3 Values for the ALIGN Attribute

Value Description.
LEFT Displays image on left side and surrounding content flows around the image
RIGHT Displays image on the right side of the window and surrounding content flows around the
image

Listing 7.3 shows an HTML document that inserts two images, each of which uses one of the
alignment values shown in Table 7.3. Figure 7.3 shows the resulting Web page.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 72

 Shree M .& N. Virani Science College

Listing 7.3 Using the <IMG> Tag's ALIGN Attribute

<HTML>
<HEAD>
<TITLE>Using the IMG tag's ALIGN attribute</TITLE>
</HEAD>
<BODY>
<P>
<IMG SRC="book.gif" ALIGN=LEFT>
This text will wrap around the right-hand and bottom of the image.
This text will wrap around the right-hand and bottom of the image.
This text will wrap around the right-hand and bottom of the image.
This text will wrap around the right-hand and bottom of the image.
This text will wrap around the right-hand and bottom of the image.
This text will wrap around the right-hand and bottom of the image.
This text will wrap around the right-hand and bottom of the image.
This text will wrap around the right-hand and bottom of the image.
This text will wrap around the right-hand and bottom of the image.
This text will wrap around the right-hand and bottom of the image.
This text will wrap around the right-hand and bottom of the image.
This text will wrap around the right-hand and bottom of the image.
</P>
<P>
<IMG SRC="book.gif" ALIGN=RIGHT>
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
</P>
</BODY>
</HTML>

Giving the Browser Size Hints

Providing the browser a size hint means that you explicitly state the height and width of the image
within the <IMG> tag. This has two benefits that make this a must:

• Size hints help users who've disabled inline image. If a user has disabled inline images and
you're not using size hints, he or she sees a small icon in place of the image. Thus, the Web
page is not formatted quite like you expect. Size hints cause the browser to display an empty
box that is the same size as the image.

• Size hints make the Web page render faster. A browser displays the HTML document first, then
displays the image. If you provide size hints for your inline images, the browser can display the
formatted HTML document while it finishes downloading the images. Thus, the user sees the
Web page faster.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 73

 Shree M .& N. Virani Science College
You use the <IMG> tag's HEIGHT and WIDTH attributes to provide size hints to the browser. You set the
HEIGHT attribute to the exact height and the WIDTH attribute to the exact width in pixels that you want
to reserve for the image. Listing 7.4 shows what an HTML document that sets the height and width of
an image looks like. Figure 7.4 shows what this HTML document looks like when inline images are
disabled.

Listing 7.4 Using HEIGHT and WIDTH to Give Size Hints

<HTML>
<HEAD>
<TITLE>Using HEIGHT and WIDTH to give size hints</TITLE>
</HEAD>
<BODY>
<IMG SRC="book.gif" WIDTH=320 HEIGHT=240>
</BODY>
</HTML>

If the size you specify by using the HEIGHT and WIDTH attributes isn't the same as the actual size of the
image as determined in your favorite graphics editor, the browser scales the image. The following
sections describe the result of scaling the image down or up.

Scaling an Image Down Scaling the image down means the actual image is larger than the space you
reserved for it by using the HEIGHT and WIDTH attributes. In this case, the browser shrinks the image so
that it fits in the reserved space. You can easily distort an image if you're not careful specifying its size.
For example, if you decrease the image's height by 50 percent and the width by 25 percent, the image
will look funny in the browser (see Figure 7.5).

CAUTION: Specifying a height and width that's smaller than the actual image's height and width
doesn't save any download time. The browser still downloads the entire image before it scales it to fit
the reserved area.

Scaling an Image Up Scaling the image up means the actual image is smaller than the space you
reserved for it by using the HEIGHT and WIDTH attributes. In this case, the browser enlarges the image
so it fits in the reserved space. Just as when scaling an image down, you have to be concerned with
maintaining an image's aspect ratio when you scale it up.

Unlike scaling an image down, however, you also have to worry with pixelation. That is, when you
enlarge an image, the image's contents are expanded to fill the area. The browser makes each pixel
bigger so that it fills more space. This effect is sometimes very unattractive, as shown in Figure 7.6.

Providing Alternative Text

So, you've dumped a bunch of images into your HTML document. What about those users who aren't
viewing images? You can provide alternative text to them that, at least, tells them about the image.
You do that with the <IMG> tag's ALT attribute, like this:

<IMG SRC="filename" ALT="Description">

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 74

 Shree M .& N. Virani Science College
If the user's browser isn't displaying images, he or she sees the alternative text in the image's place. For
the user whose browser is displaying images, he or she sees the alternative text until the browser is
ready to display the image. Better yet, if you combine alternative text with size hints, users see a box
that's correctly sized with the alternative text within its borders.

Listing 7.5 is an HTML document that uses alternative text to provide a description of the image.
Figure 7.7 shows you what this document looks like in a browser that's not displaying inline images.

Listing 7.5 Using the ALT Attribute

<HTML>
<HEAD>
<TITLE>Using the ALT attribute</TITLE>
</HEAD>
<BODY>
<IMG SRC="book.gif" WIDTH=320 HEIGHT=240 ALT="A picture of my latest book's
cover">
</BODY>
</HTML>

Framing an Image with a Border

By default, the user's browser displays a border around each inline image that you're using as an
anchor. You have a lot of control over that border and the white space around the image.

You set the <IMG> tag's BORDER attribute to the width of the border in pixels. If you want the border to
be 10 pixels in width, set this attribute to 10. Listing 7.6 shows an HTML document with three images,
each of which has a different border width. Figure 7.8 shows the result in the browser.

Listing 7.6 Using the BORDER Attribute

<HTML>
<HEAD>
<TITLE>Using the BORDER attribute</TITLE>
</HEAD>
<BODY>
<A HREF=""><IMG SRC="book.gif" BORDER=0></A>
<BR>
<A HREF=""><IMG SRC="book.gif" BORDER=5></A>
<BR>
<A HREF=""><IMG SRC="book.gif" BORDER=10></A>
</BODY>
</HTML>

Giving an Image Space

You might not like how the text surrounding an image crowds the image. If that is the case, use the
VSPACE and HSPACE attributes to add vertical and horizontal space around the image, respectively. You
set each of these attributes to the amount of space, in pixels, you want to allow between the
surrounding content and the image. Listing 7.7 shows an example of an image that adds additional
space around the image to separate it from the text. Figure 7.9 shows you the result.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 75

 Shree M .& N. Virani Science College

Listing 7.7 Using the VSPACE and HSPACE Attributes

<HTML>
<HEAD>
<TITLE>Using the BORDER attribute</TITLE>
</HEAD>
<BODY>
<IMG SRC="book.gif" VSPACE=20 HSPACE=20 ALIGN=LEFT>
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
This text will wrap around the image.
</BODY>
</HTML>

Using an Image as an Anchor

Chapter 8, "Linking Documents Together," describes how to use an image as a link to another
resource. It's easy. You enclose an image within the <A> tag as shown here:

<A HREF="http://www.mysite.com"><IMG SRC="image.gif"></A>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 76

 Shree M .& N. Virani Science College

Chapter 8
Linking Documents Together

Understanding Hypertext and Hypermedia

Hypertext is a term you'll frequently hear associated with the Web. A hypertext document is a
document that contains links to other documents, allowing you to jump between them by clicking the
links. It's also a term associated with help files and other types of documents that are linked together.
For example, if you've published a report that cites several sources, you can link the references of those
sources to related works. Likewise, if you're discussing the migratory habits of the nerd-bird, you can
provide links to Web pages where nerd-birds are known to frequent.

Hypermedia is based upon hypertext but contains more than text. It contains multimedia such as
pictures, videos, and audio. In hypermedia documents, pictures are frequently used as links to other
documents. You can link a picture of Edinburgh to a Web site in Edinburgh, for example. There are
countless types of multimedia you can include on a Web page, and some of those can serve as links to
other Internet documents and resources. Figure 8.1 shows you an example of a hypermedia document.

Understanding Links

A link really has two different parts. First, there's the part you see on the Web page called an anchor.
There's also the part--the URL reference--that tells the browser what to do if you click that link. When
you click a link's anchor, the browser loads the file or document given by the link's corresponding
URL reference. You learn about both parts of a link in this chapter's following sections.

Anchors

A link's anchor can be a word, a group of words, or a picture. Exactly how an anchor looks in the
browser depends largely on what type of anchor it is, how the user has configured the browser to
display links, and how you created it. There are only two types of anchors: text and graphical.

Text Anchors Most text anchors look somewhat the same. A text anchor is one or more words the
browser underlines to indicate the fact that it represents a link. The browser also displays a text anchor
using a different color than the rest of the surrounding text (the color and appearance of links are under
the author's and user's control). Figure 8.2 shows a Web page that contains three text anchors. In
particular, notice how the text anchors on this Web page are embedded in the text. That is, they aren't
set apart from the text, like the references in this book, but are actually an integral part of it. Clicking
one of these links loads a Web page that is related to the link. Many text anchors are used this way.
The HTML for the first text link looks a bit like this (the <A> tag is discussed in "Linking to
Documents and Files," later in this chapter):

<A HREF="vero.html">Vogon Earth Reconnaissance Office</A>

Graphical Anchors A graphical anchor is similar to a text anchor. When you click a link's graphical
anchor, the browser loads the Web page that the link references. Graphical anchors aren't underlined or

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 77

 Shree M .& N. Virani Science College
displayed in a different color, but can be displayed with a border. No two graphical anchors need to
look the same, either. It depends entirely on the picture that you choose to use.

Versatility is the strong suit of graphical anchors. You can use them for a variety of reasons. Here are
some examples of the ways you find graphical anchors used on a Web page:

• Bullets. Graphical anchors are frequently used as list bullets. You can click the picture to go to
the Web page described by that list item. Frequently, the text in the list item is also a link. You
can click either the picture or the text.

• Icons. Many Web sites use graphical anchors in a similar manner to Windows 95. They are
common on home pages, and represent a variety of Web pages available at that site. Figure 8.4
shows a Web site that uses graphical anchors in this manner. The HTML for the icon on the left
side of this Web page that says What's New might look a bit look this:

<A HREF="whatsnew.htm"><IMG SRC="whatsnew.gif" BORDER=0></A>

• Advertisements. Many Web sites have sponsors that pay to advertise on the site. This makes the
Web site free to you while the site continues to make money. You usually find advertisements,
such as the one shown in Figure 8.5, at the top of a Web page. Click the advertisement and the
browser loads the sponsor's Web page.

URL References

The other part of a link is the URL reference. This is the address of the Web page the browser loads if
you click the link. Every type of link, whether it uses a text or graphical anchor, uses either a relative
or absolute reference.

Relative References An URL reference to a file on the same computer is also known as a relative
reference. That means that the URL is relative to the computer and directory from which the browser
originally loaded the Web page. If the browser loads a page at http://www.mysite.com/page, for
example, then a relative reference to /picture would actually refer to the URL
http://www.mysite.com/page/picture. Relative references are commonly used to refer to Web pages on
the same computer.

NOTE: Relative references work differently if you use the <BASE> tag in your HTML file. If you do
use the <BASE> tag, relative references are always relative to the URL given in the tag. They're not
relative to the URL page on which the reference appears. For example:
<BASE HREF="http://www.tuna.com/~mypages">
<A HREF="index.htm">
The link in the second line would refer to http://www.tuna.com/~mypages/index.htm, no matter where
the page itself was physically located.

Convenience is the primary reason you use a relative reference. It's much simpler to just type the file
name instead of the entire URL. It also makes it easier for you to move Web pages around on the
server. Because the URL references are relative to the Web page's computer and directory, you don't
have to change all the links in the Web page every time the files move to a different location.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 78

 Shree M .& N. Virani Science College
Absolute References An URL reference that specifies the exact computer, directory, and file for a
Web page is an absolute reference. Whereas relative references are common for links to Web pages on
the same computer, absolute references are necessary for links to Web pages on other computers.

Linking to Documents and Files

Now that you have the terminology down (anchors, links, relative references, and so on), you're ready
to start adding links to your own Web pages. It's very simple. You have to tell the browser what
element in the HTML file is the anchor and the address of the Internet document or resource to which
you're linking. You do both things with one tag: <A>.

The following example shows you what the <A> tag looks like. This is its simplest form used for
linking to another Web page on the Internet. Its only attribute is HREF, which specifies the URL to
which you're linking. The URL can be any valid absolute or relative reference, such as
http://www.server.com/home/index.htm. Since the <A> tag is a container, you must put the closing </A>
tag on the other side of the anchor. That is, the opening <A> tag tells the browser where the anchor (text
or graphical) starts and the closing </A> tag tells the browser where the anchor ends. This is an
example:

<A HREF=URL>Anchor</A>

The following bit of HTML shows you how to add a text anchor to your HTML file. In this example,
HREF references Jerry Honeycutt's home page on the Internet. The anchor, which is underlined in the
Web browser, is Jerry Honeycutt's. The text before and after the <A> container isn't part of the
anchor and is therefore not underlined. For that matter, nothing happens when the user clicks the text
outside the container. On the other hand, when the user clicks Jerry Honeycutt's, the browser loads
the home page in the browser. Figure 8.6 shows what this anchor looks like in Internet Explorer.

While you're here, why don't you visit

<A HREF="http://rampages.onramp.net/~jerry">Jerry Honeycutt's</A> homepage

NOTE: The examples you've seen thus far use absolute references. You can also use relative
references. Relative references can get a bit out of hand, however, if you store different Web pages in
different directories. You'll have a difficult time remembering exactly in which directory an HTML file
is stored, and thus, how to formulate the relative reference.
To remedy this problem, you can add the <BASE> tag to the top of your HTML file. In the absence of
the <BASE> tag, all relative references are based upon the URL of the current HTML file. Adding the
<BASE> tag provides an URL on which all relative references in the HTML file are based. It affects
relative references in every HTML tag, including the <A> tag, <IMG> tag, and so on.
Thus, if you add
<BASE HREF="http://www.server.com">
to your HTML file, all relative references are based upon that address, instead of the address of the
current HTML file. In this case, the relative reference, images/face.gif, would resolve to
http://www.server.com/images/face.gif.
Note that the <BASE> tag's original intention was to provide the URL of the document in which it's
found. This allows folks who are viewing the document out of context to locate the document on the
Internet. It works perfectly well for the purpose of dereferencing relative URLs, however, and is
documented by W3C in this manner.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 79

 Shree M .& N. Virani Science College

TIP: Some browsers support ToolTip-style help for links. That is, when the user holds the mouse over
a link for a certain period of time, the browser displays the contents of the <A> tag's TITLE attribute in
a small pop-up window. Thus, if you want to provide additional information about the link to the user,
assign it to the TITLE attribute, like this: <A HREF="page.html" TITLE="Go to page.html">.

The previous example showed you how to create a text anchor. Creating a graphical anchor isn't much
different. Instead of enclosing text in the <A> container, you enclose an image. Consider the following
HTML, which is similar to the previous example. Figure 8.7 shows what it looks like. The HREF
references Jerry Honeycutt's home page, but instead of using a text anchor, it uses the <IMG> tag to
create a graphical anchor. When the user clicks anywhere on the picture, the browser opens the Web
page referred to by the <A> tag.

<A HREF="http://rampages.onramp.net/~jerry"><IMG SRC="photo.gif"></A>

NOTE: Imagemaps are becoming much more common. They let you map certain portions of an image
to different URLs.

Internal Links

As well as providing links to other HTML files, you can link to an anchor within the current document.
For example, you can provide a table of contents for the current Web page at the top of the page. You
can then link each entry to a different section within the current Web page.

There are two steps to this. First, you must create an anchor in the HTML file that indicates the
location to which you're linking. For example, if you want to provide a link to the middle portion of
your Web page, you'd create an anchor in the middle and give it a name using the NAME attribute. You
name the anchor so that you can refer to that name in your link. Note that because you're only naming
an anchor, instead of creating a link, you don't set the HREF attribute. You still have to use the opening
and closing <A> tags, but the browser doesn't highlight the contents of the <A> tag because you're not
using it as a link. Here's what the named anchor looks like:

<A NAME=MIDDLE>Middle Section in Web Page</A>

After you've created the named anchor, you create a link to it. You use a special notation to link to that
anchor. Instead of setting the HREF attribute to the URL of another Web page, set it to the anchor's
name, prefixing the anchor's name with a pound sign (#). Consider the following example. The HREF
attribute refers to the named anchor shown in the previous example. The name is prefixed with the
pound sign to indicate to the browser that you're making an internal link. When the user clicks Jump
to the middle, the browser aligns the anchor in the previous example to the top of the browser
window.

<A HREF="#MIDDLE">Jump to the middle</A>

NOTE: Some browsers do not move the named anchor to the top of the browser window if the anchor
is already displayed in the window. That is, if your internal link is at the top of the Web page, and the

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 80

 Shree M .& N. Virani Science College
named anchor is displayed somewhere in the middle of the Web page, when the user clicks the internal
link, the browser will do nothing.

You can also add a name to most elements using the ID attribute. For example, you can add a name to
a Header element like this:

<H2 id=JumpHere>You Can Jump Right To This Header!</H2>

You could then link directly to the name assigned by the ID attribute with this link:

<A HREF="JumpHere">Click Here to Jump to That Header!</A>

Files, Plug-In Content, and So On

When the user clicks a link to another Web page, the browser opens that Web page in the browser
window. On the other hand, if the user clicks a link to a different type of document, it downloads the
document to the user's computer and then decides what to do with it. One of two things happen as a
result:

• The browser knows how to handle the file, which is the case with many graphics formats, and
displays the file in the browser window. For example, if you create a link to a GIF file and the
user clicks that link, the browser downloads the GIF file, clears the current Web page from the
browser window, and displays the GIF file in the window, as shown in Figure 8.8. In some
cases, however, the browser can use a plug-in to display the file in the browser window without
actually opening a separate window, even though the browser itself doesn't know what to do
with the file.

• The browser does not know how to handle the file, which is the case for a variety of documents
and many types of plug-in content. In this case, the browser downloads the file and looks for a
helper application that knows what to do with it. If it finds one, it launches the helper
application and passes it the downloaded file. For example, if the user clicks a link to an AVI
video, the browser downloads the file, finds a helper application to play AVI files, and launches
that file in the application. In most cases, the application displays the file in a separate window,
as shown in Figure 8.9.

TIP: Digital Infoworks sells a product called Cyberlinks that you can use to create links in any OLE-
enabled product, such as Wordpad. This means you can create hypertext links in your documents just
like you can in your Web pages. For more information, see http://www.pioneersys.com.

The LINK Element

Whereas the <A> tag is used to create hyperlinks that a user can follow when he or she wants to, the
LINK element is used to connect various resources to an HTML document. Style sheets, color palettes,
international versions of the document, scripts, indexes, notices--all can be tied to an HTML document

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 81

 Shree M .& N. Virani Science College
using the <LINK> tag. One simple way to look at it is to think of the <A> tag as a link for readers of an
HTML document, whereas the LINK tag is a resource for creators of that document.

One basic application for the <LINK> tag is to link a document to a style sheet, like this:

<LINK REL=stylesheet MEDIA=screen HREF="OurStyle.css">

This line would link the document to the style sheet "OurStyle.css" for display on a monitor screen.
You can find out more about style sheets in Chapter 17, "Applying Cascading Style Sheets."

The <LINK> tag can also be used to define a document's relationship to another document. For
example, if your document was a section of Chapter 4 in an HTML hyperbook, that might be indicated
with this line of code:

<LINK REL=PARENT HREF="Chapter4TOC.html">

The document "Chapter4TOC.html" would be the table of contents that linked to the current
document, and the LINK tag indicates that it is the parent document to the one you're reading. Note that
the <LINK> element doesn't display anything in the browser window--it's simply there as a reference
tool for you and for search engines and Webcrawler robots.

The "Chapter4TOC.html" file used in the previous example would contain the following line:

<LINK REV=Chapter HREF="OurDoc.html">

The REV attribute indicates the reverse relationship from the REL attribute. That is, it shows that a page
is "superior" to the referenced document.

REV and REL attributes can take just about any value, though there is some ongoing effort to create
some standardized values to make relationships between documents clearer. Here are some of the
proposed values for REV and REL:

Value Indicates
Parent Parent document
Index Index document
Previous Previous page
Next Next page
Contents Contents page
Alternate Alternate version
Begin Beginning page

A value of Alternate indicates that the referenced document is an alternate version of the current
page. This can be for a version for print, for example, or even a page in an alternate language. In this
case, you'd add an additional attribute, LANG, to show the language of the linked version. For example,
the following would indicate an alternate page in French:

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 82

 Shree M .& N. Virani Science College
<LINK REL=alternate HREF=FrenchDoc.html LANG=fr TITLE="Paris">

The initial example a few paragraphs back used the value MEDIA=screen to indicate that the stylesheet
being linked to was for display on a video screen. It could have just as easily said MEDIA=print to
indicate a print version.

Linking to Other Net Resources

The World Wide Web is a popular part of the entire Internet, but many others resources are available.
Most of them were around long before the Web was even born and, as a result, they have a lot of stuff
on them. Also as a result of the Web's newness, the other resources sometimes have a much wider
audience base. Whether you're designing a home page for yourself or for your company, you may want
to know how to link to those resources.

These resources can take various shapes, from the peanut gallery that is Usenet news, to personal e-
mail, to the capability to access other computers through Telnet. Although you can create your own
versions of these resources using forms, most of the time you wouldn't want to do so. For example, you
could easily create a page with many HTML form tags, text elements, and a submit button for e-mail,
but simply creating a link to e-mail with a particular address would be easier. This way, you can more
easily update the page because you don't have to worry about which forms to read. Also, sometimes
browsers have built-in support for some of the other resources, giving the user faster response time.

You especially want to create links to other resources on the Net if you're already using a resource. If
you already have a Gopher site with information that's updated automatically, why rebuild it to fit the
Web? Just adding a hyperlink to your Gopher site makes more sense. Similarly, if you're running a
BBS that's on the Internet, putting in a Telnet link to it makes more sense. There's no reason for
recreating, or even mirroring, your BBS through forms for the Web.

Creating a Link to E-Mail

The single most popular activity on the Internet is sending e-mail. More people use e-mail than any
other resource on the Net. The reason is quite simple: If you're on the Internet, you have an e-mail
address. The provider that gives you access to the Net often has at least one e-mail program available
for your use. Most modern e-mail programs offer a friendly interface, with no complex commands to
learn.

You'll most likely want to put in an e-mail link when you want people to give you feedback on a
particular topic. Whatever it is you want comments on--be it your home page or your company's
product--if you want to know what people think, use an e-mail link. E-mail links are also useful for
reporting problems, such as a problematic or missing link. Typically, the Webmaster of a particular site
should put these types of links to him or herself. You really have no reason not to put in a link to your
e-mail address.

Creating a link to an e-mail address is similar to creating a link to another home page. The only
difference is the reference for your anchor element. Normally, you put a link to a home page around
some text as in the following:

<A HREF="http://www.mycom.com/myhome.html">Go to my home page</A>.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 83

 Shree M .& N. Virani Science College
Linking to e-mail is just as simple. Instead of entering http:, which specifies a Web address, use
mailto: to specify an e-mail address. Instead of specifying an URL, put in your full e-mail address.
The preceding example now looks like this:

<A HREF="mailto:me@mycom.com">Send me E-mail</A>.

The link created with the preceding HTML looks like any other hypertext link. You can easily mix and
match hyperlinks to different resources, and they'll all look the same (see Figure 8.10). When this link
is selected, the browser opens its own e-mail interface for the user. Each interface is different, but most
of them automatically get your e-mail address and real name, and prompt you for a subject.

Because the e-mail link is a standard URL and easily implemented, many browsers have built-in
support for it. As a result, when people click an e-mail link, the Web browser will put up a primitive
mail program. A few companies offer a full set of Internet applications, from an e-mail program, to a
newsreader, to a Web browser. Oftentimes, these work in conjunction with each other. Consequently,
when you click an e-mail link, these Internet packages start up their own e-mail programs

Creating a Link to Usenet News

Usenet is one of the best--or worst--resources on the Net, depending on whom you ask. Anybody with
an opinion can tell you what he or she thinks. They may not know what they're talking about, but
they'll let you know their opinion. Usenet is the ultimate embodiment of the freedom of speech, letting
everybody say anything they want.

The opportunity for anybody, anywhere on the Net to have a voice could be an asset to your home
page. Often, you may want to put in a link to Usenet when you want people to read for more
information. If your home page has some information about HTML authoring, for example, you might
want readers to go to a particular newsgroup for more help. You can also include such a link so people
can see what the differing opinions are. If you have a certain political view and want others to see what
the opposition is, a Usenet news link would be helpful.

Creating a link to a Usenet newsgroup is pretty simple; this kind of link is also just a derivative of the
basic hypertext link. As you did with the e-mail link, you need to modify two parts in the anchor
reference. When you're creating a Usenet link, enter news: instead of http:. Likewise, instead of
specifying a particular URL, put in a specific newsgroup, as follows:

For more information, see

<A HREF="news:news.newusers.questions">news.newusers.questions</A>.

As you can see in Figure 8.12, the Usenet news hyperlink looks identical to other links. When a user
selects such a link, the browser tries to access the user's Usenet news server. If the news server is
available to that person, the browser goes to the specified newsgroup. The user can then read as much
as he or she likes in that particular group.

CAUTION: When a user clicks a Usenet news link, his or her browser tries to access the newsgroup
in question. Because it's this user's browser and environment, he or she might not have access to the
group you specified. Not all Internet providers have access to the same newsgroups. When you're
creating such links, be mindful that not everybody will necessarily be able to access them.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 84

 Shree M .& N. Virani Science College

How a Usenet hyperlink is handled is left entirely up to the Web browser the person is using. Many of
them treat each article in a newsgroup as an individual hyperlink. Often, there's little in the way of
sophisticated newsreading features. Some companies such as Netscape and Microsoft offer an entire
suite of programs, including a Usenet newsreader (see Figure 8.13). In these cases, the newsreader of
that suite is started.

Making FTP Available on Your Site

Another popular activity is accessing an FTP site. FTP, or File Transfer Protocol, allows users to copy
files from other computers (the FTP site) onto their own computers. This popular method allows
companies to distribute their demonstration software or patches to their products.

Putting in a link to an FTP site allows users to get a specific file from a particular location. This
capability is useful for companies and shareware authors in making their products available. This type
of link is also great for people who review software, allowing them to let users get the files being
reviewed. People who have files (such as FAQs and interesting pictures) that they want others to get to
easily might want to put in a link to an FTP site.

You create a link to an FTP site the same way you create other links, and they look the same, too (see
Figure 8.14). Enter ftp: instead of the usual http:, and change the URL address to //sitename/path.
Simply put, the site name looks the same as the URL address. You need to make sure the site name
you specify points to a machine that accepts anonymous FTP connections. FTP links are almost always
supported by the browser natively. You can create a typical FTP link as follows:

You can get the FAQ <A HREF="ftp://ftp.mysite.com/pub/FAQ">here</A>.

If you don't specify a particular file name, the browser lists the files in the directory you specified. This
is particularly useful if you want the user to have access to multiple files. Programs available on
multiple machines, or large files broken up into several chunks, typically fall into this category.

Technically speaking, there isn't too much of a difference between FTP and the Web. As a result, Web
browsers support FTP links without needing another program. The browsers gives you a list of the files
in the current directory, and indicates which are directories and which are files (see Figure 8.15). If you
click a directory, it changes into that directory. If you click a file, the browser directly downloads the
file.

TROUBLESHOOTING: Some people can't access some of my FTP links. If a lot of people are
reporting inaccessibility to some of your FTP links, try finding other sites. This error usually comes up
when you have an FTP link to a particularly busy FTP site. You should try to locate other (less busy)
FTP sites that have the same file to which you're pointing.

NOTE: By default, when FTP links are activated, the FTP connection that's made is known as
anonymous FTP. This means that the FTP site the user is trying to access doesn't care who the user is.
All the anonymous FTP site cares about is sending and receiving files to anybody who logs in with the

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 85

 Shree M .& N. Virani Science College
username "anonymous." The password is often the user's e-mail address, but this isn't necessary.
Anonymous FTP allows software companies and the like to distribute their products to a very wide
audience.
A nonanonymous FTP is where the FTP site is very particular about who can access it. To get access to
a nonanonymous FTP site, you must have an account on the FTP site itself. Basically, you can't get
into a nonanonymous FTP site unless you're already in. This is probably the most widely used FTP site
around, as many companies allow employees to FTP into their own accounts.

NOTE: You can easily change an anonymous FTP link into a nonanonymous one. Simply put a
username and an at symbol (@) sign before the site name. This causes most Web browsers to
automatically attempt to log in as username. The browser then prompts the user for the password for
the login ID.

Linking Your Home Page to a Gopher Site

Before there was the World Wide Web, there was something known as Gopher. It was originally
designed by the University of Minnesota (the Golden Gophers) as a way of making information that
was spread out easily available. Gopher has probably been the Internet resource most affected by the
Web, often being superseded by it. The biggest difference between Gopher and the Web is that it is
very difficult for individual people to create their own Gopher sites or holes.

Although Gopher sites are not as prevalent as they once were, they still have a strong following. You
can typically find Gopher sites at places that dispense a lot of automated information. Although the site
could have easily been converted to HTML, it simply hasn't bothered. This conversion of Gopher data
into usable HTML code is typically the work of a programmer, and often not worth the effort. Putting
in an HTML link to a Gopher site allows people browsing your page easy access to a great deal of
information.

You can create a link to a Gopher hole by modifying the same two elements of the anchor reference.
Change the http: to gopher:, and change the URL to //sitename. The site name must be a valid Internet
host name address. The link created looks like every other type of hypertext link, and built-in support
is provided by most Web browsers. A Gopher hole link usually looks something like the following:

For more information, go <A HREF="gopher://gopher.mysite.com">here</A>.

Just like FTP, Gopher is a Net resource that is built into HTML. Consequently, most Web browsers
support any links to a Gopher site internally. That is, you don't need a Gopher- specific application to
go to a Gopher site, the browser takes care of it for you. But also just like FTP, the built-in support for
Gopher is often very bland (see Figure 8.16).

Providing Access to a Large Database with a WAIS Link

WAIS stands for Wide Area Information System, which basically means "lots of large databases you
can search through." WAIS was specially designed by WAIS Corporation as a way of accessing large
amounts of information. This capability is very different from what Gopher and the Web do in that

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 86

 Shree M .& N. Virani Science College
WAIS was intended to cover very large chunks of information. Typically, databases that contained
several million entries were considered appropriate for WAIS.

WAIS is typically accessed through a search engine because most people don't want to plod through
such large stores of information. When WAIS was first introduced, custom front ends allowed easy
access to a WAIS database. With the advent of the Web, however, most WAIS databases now have
HTML front ends to their databases. Now you can simply fill out a Web form and click a button, and
the WAIS search is underway.

You can create a link in your home page to a WAIS database as easily as you do with all the other
links. You have to modify the same two anchor reference elements to hold the correct information.
Instead of using http:, enter the prefix wais:, and change the URL location to the address of a WAIS
database:

To search for a number in your area, click

<A HREF="wais://wais.mysite.com">here</A>.

NOTE: Most browsers don't have built-in support of WAIS database searches. If you put in a link to
one of these databases, be sure to include some sort of reference to where users can get a WAIS client.
Of course, if the WAIS database you're pointing to has HTML forms support, you don't need to worry
about including such information.

Accessing Remote Computers with Telnet Links

The capability to access other computers is not something new to the Web; it's been around for a long
time. This access has always been achieved with a UNIX program called Telnet, which doesn't stand
for anything in particular. Telnet allowed people to try to log into a remote machine, much the same
way some people access their Internet providers. The Web allows for support of accessing remote
machines through a Telnet link to a remote computer.

Usually, people trying to get on a secure system are the people for whom you want to provide a Telnet
link. People who provide access to a private, Internet-accessible BBS will most likely want to put in a
Telnet link. Also, companies that offer a BBS for customer support may want to make use of link to a
Telnet site. Generally speaking, for most home pages, you have little or no reason to include a link to a
remote site.

As you might have guessed, creating a Telnet link to a remote site requires modifying the anchor
reference element. You change the http: to telnet:. You also need to change the URL part of the anchor
reference to hostname. Hypertext links that refer to Telnet sites look the same as other links. A typical
Telnet link takes the following form:

Click <A HREF="wais://wais.mysite.com">here</A> to access our BBS.

NOTE: Web browsers do not support Telnet activity natively. They typically depend on an external
application to talk correctly to the remote machine. If you put in a link to Telnet to another site, be sure
to also include some reference to a Telnet client.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 87

 Shree M .& N. Virani Science College
NOTE: There are a few operating systems that have built-in Telnet capability. Among the OSs that
have this are Windows 95, Windows NT, and UNIX.

Even though Telnet is a rather simple Net resource, it also has some problems. Among the many
problems are issues of how to display the remote session and how to interpret keypresses. As simple as
these problems may appear, they're hard to implement in a Web browser. For these reasons, most Web
browsers don't have support for Telnet. Rather, they leave it up to the individual to find a Telnet
program and set it up (see Figure 8.17).

TIP: Some Web browsers allow something extra in the anchor reference. Simply add the username
you want the person to log on as, followed by the @ symbol, before the site name. Instead of
Access my <A HREF="telnet://mysite.com/">system!</A>
you can have
Access my <A HREF="telnet://john@mysite.com/">system!</A>
On those browsers that support this, the Web browser pops up a little notice. This notice tells the user
what login name should be used to access the system.

How Links Work Together

You may be wondering how well these hypertext links work with each other. The answer is "Very
well." Even though the links are different, they all look and behave the same. This common behavior
exists because of the anchor reference that all hyperlinks use. Some may need client programs not built
into a Web browser, but that's not a big deal. This identical look and feel of various hypertext links
allows home pages to have a consistent feel. Consistency in a home page is important because it allows
people to intuitively know they're in your home page without looking at the current URL.

The best thing you can do is to treat all hypertext links in the same manner, with slightly different
formats. Just take the same basic anchors, add a reference, and put in the correct pointer to that
reference (see Table 8.1). As a Web author, you must always remember that each person looking at
your home page could be using any browser available. No hard and fast rules about what resources all
browsers will support even exists. Whatever resource you want to link to, though, try to include a link
to a location where the user can get a client.

Table 8.1 Sample Formats for Creating Links

Link To What to Use Sample Link

Web page http://sitename/ http://www.mysite.com/
E-mail mailto:address mailto:me@mysite.com
Newsgroup news:newsgroupname news:news.newusers.questions
FTP ftp://sitename/ ftp://ftp.mysite.com/
Gopher gopher://sitename/ gopher://gopher.mysite.com/
WAIS wais://sitename/ wais://wais.mysite.com/
Telnet telnet://sitename/ telnet://bbs.mysite.com/

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 88

 Shree M .& N. Virani Science College

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 89

 Shree M .& N. Virani Science College

Chapter 9
Adding Lists to a Web Page

Creating an Ordered List

A basic list in HTML consists of a list-identifier container plus the standard list items tag. (In HTML,
all list items use one tag, <LI>, while the lists themselves are differentiated by their container tags.) An
ordered list, also called a numbered list, is used to create a sequential list of items or steps. When a
Web browser sees the tag for an ordered list, it sequentially numbers each list item by using standard
numbers (1, 2, 3, and so on).

Using the <OL> Tag

Ordered (or numbered) lists begin with the <OL> tag, and each item uses the standard <LI> tag. If
needed, you can create a list heading by using the <LH> tag. Close the list with the </OL> tag to signal
the end of the list. List containers provide both a beginning and ending line break to isolate the list
from the surrounding text; it's not necessary (except for effect) to precede or follow the list with the
paragraph <P> tag.

NOTE: Lists support internal HTML elements. One of the most useful elements is the paragraph tag
(<P>), which enables you to separate text in a list item. Other useful tags include both logical and
physical style tags (such as <EM> and <I>) and HTML entities. Headings are not appropriate for use in
lists; although they're interpreted correctly, their forced line breaks make for an ugly display. SGML
purists also object to them because heading tags are meant to define relationships in paragraphs, not
lists.

Listing 9.1 shows how you can use the OL list container. Pay particular attention to closing tags,
especially in nested lists. You can use leading blanks and extra lines to make your list code easier to
read, but Web browsers ignore them. Figure 9.1 shows how Netscape Navigator interprets this HTML
code.

Listing 9.1 Ordered List Example

<HTML>
<HEAD>
<TITLE>ordered List Example</TITLE>
</HEAD>
<BODY>
<OL>
<LH><EM>Colors of the Spectrum:</EM><BR>
<LI>Red
<LI>Orange
<LI>Yellow
<LI>Green
<LI>Blue
<LI>Indigo

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 90

 Shree M .& N. Virani Science College
<LI>Violet
</OL>
</BODY>
</HTML>

It is also possible to nest ordered lists, creating a document that looks more like an outline. Listing 9.2
shows the HTML code for such a list, which is rendered in Figure 9.2.

Listing 9.2 ested Ordered List Example

<HTML>
<HEAD>
<TITLE>Nested Ordered List Example</TITLE>
</HEAD>
<BODY>
<OL>
<LH><EM>Planets of the Solar System:</EM><BR>
<LI>Mercury
<OL>
<LI>57.9 million kilometers from the sun
<LI>no satellites
</OL>
<LI>Venus
<OL >
<LI>108 million kilometers from the sun
<LI>No satellites
</OL>
<LI>Earth
<OL>
<LI>149.6 million kilometers from the sun
<LI>one satellite: The Moon
</OL>
<LI>Mars
<OL>
<LI>227.9 million kilometers from the sun
<LI>two satellites
<OL>
<LI>Phobos
<LI>Deimos
</OL
</OL>
</OL>
</BODY>
</HTML>

TIP: Use indentations and blank lines to organize your data when creating HTML documents. Web
browsers don't care how the text is aligned or run together, but you will appreciate the extra effort
when rereading and editing the HTML code.

Additional <OL> Attributes

HTML 4.0 defines a handful of attributes for the <OL> tag, which began as a Netscape extension. Now
that these attributes have gained acceptance, they're part of the HTML specification.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 91

 Shree M .& N. Virani Science College
These attributes give you control over the appearance of the item markers and the beginning marker
number. Table 9.1 lists these attributes and their functions.

Table 9.1 Additional Attributes for <OL>

Attribute Description
COMPACT Renders the list in a more compact form
TYPE=A Sets markers to uppercase letters
TYPE=a Sets markers to lowercase letters
TYPE=I Sets markers to uppercase Roman numerals
TYPE=i Sets markers to lowercase Roman numerals
TYPE=1 Sets markers to numbers
START=n Sets beginning value of item markers in the current list

Varying the marker style enables you to create distinctions between numbered lists in the same
document. Listing 9.3 shows how an HTML document incorporates these attributes, and Figure 9.3
shows how these attributes can enhance a document.

Listing 9.3 ested Ordered List Example Using TYPE

<HTML>
<HEAD>
<TITLE>Nested Ordered List Example Using Type</TITLE>
</HEAD>
<BODY>
<OL>
<LH><EM>Planets of the Solar System:</EM><BR>
<LI>Mercury
<OL TYPE=A>
<LI>57.9 million kilometers from the sun
<LI>no satellites
</OL>
<LI>Venus
<OL TYPE=A>
<LI>108 million kilometers from the sun
<LI>No satellites
</OL>
<LI>Earth
<OL TYPE=A>
<LI>149.6 million kilometers from the sun
<LI>one satellite: The Moon
</OL>
<LI>Mars
<OL TYPE=A>
<LI>227.9 million kilometers from the sun
<LI>two satellites
<OL>
<LI>Phobos
<LI>Deimos
</OL
</OL>
</OL>
</BODY>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 92

 Shree M .& N. Virani Science College
</HTML>

TROUBLESHOOTING: I'm creating a list of items and I need to interrupt the list for a regular
paragraph of text. How can I make the list pick up where it left off and continue numbering the items
sequentially? The HTML specification includes an attribute for the <OL> tag called START. Ideally then,
you could pick up, say, at item 7 by specifying <OL START=7>. The number 7 is just an example. Put
whatever value you want the numbering to start with.

Creating an Unordered List

HTML also supports the unordered or bulleted list, which is a list of items that does not define a
specific structure or relationship among the data.

Using the <UL> Tag

Unordered lists (bulleted lists) use the <UL> container tag. Just like ordered lists, bulleted lists provide
beginning and ending line breaks and support internal HTML elements and sublists. Also, like ordered
lists, they require closing tags; include the </UL> tag to signal the end of the list. Web browsers
support and automatically indent sublists, and some also vary the bullet icon based on the relative level
of the list. These icons vary depending on the client software viewing the HTML document.

Listing 9.4 shows how to use the <UL> list container. Again, to make the HTML document easier to
read, you can include leading blanks and extra lines, but Web browsers ignore them. Figure 9.4 shows
how Netscape Navigator renders this HTML code.

Listing 9.4 nested Unordered List Example

<HTML>
<HEAD>
<TITLE>Nested Unordered List Example</TITLE>
</HEAD>
<BODY>
<UL>
<LH><EM>Planets of the Solar System:</EM><BR>
<LI>Mercury
<UL >
<LI>108 million kilometers from the sun
<LI>no satellites
</UL>
<LI>Venus
<UL >
<LI>108 million kilometers from the sun
<LI>No satellites
</UL>
<LI>Earth
<UL>
<LI>149.6 million kilometers from the sun
<LI>one satellite: The Moon
</UL>
<LI>Mars
<UL>
<LI>227.9 million kilometers from the sun
<LI>two satellites

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 93

 Shree M .& N. Virani Science College
<UL>
<LI>Phobos
<LI>Deimos
</UL
</UL>
</UL>
</BODY>
</HTML>

Additional <UL> Attributes

Like the <OL> tag, the HTML specification adopted some of Netscape's extensions for the <UL> tag.
You can manually control the appearance of item markers as either circles, squares, or discs. This
feature is meant to give you more control over the look of bulleted lists.

You use the TYPE attribute to change the bullet used in the list. Its value can be one of disc, square, or
circle. Listing 9.5 demonstrates its use in an HTML document, which is rendered by Netscape
Navigator in Figure 9.5.

Listing 9.5 ested Unordered List Example Using TYPE

<HTML>
<HEAD>
<TITLE>Nested Unordered List Example Using Type</TITLE>
</HEAD>
<BODY>
<UL TYPE=SQUARE>
<LH><EM>Planets of the Solar System:</EM><BR>
<LI>Mercury
<UL TYPE=CIRCLE>
<LI>108 million kilometers from the sun
<LI>no satellites
</UL>
<LI>Venus
<UL TYPE=CIRCLE>
<LI>108 million kilometers from the sun
<LI>No satellites
</UL>
<LI>Earth
<UL TYPE=CIRCLE>
<LI>149.6 million kilometers from the sun
<LI>one satellite: The Moon
</UL>
<LI>Mars
<UL TYPE=CIRCLE>
<LI>227.9 million kilometers from the sun
<LI>two satellites
<UL TYPE=DISC>
<LI>Phobos
<LI>Deimos
</UL
</UL>
</UL>
</BODY>
</HTML>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 94

 Shree M .& N. Virani Science College
CAUTION: There is a reason HTML and its client software support multiple item markers: to provide
a visual differentiation for sublists. By manually controlling the markers, however, you're working
against the user's expectations and potentially weakening the communication of your document's
information. After all, the less work the user has to do to recognize subsets of lists, the easier any
browser can read the document. Use this manual control with care.

NOTE: Besides attributes for the <OL> and <UL> elements, HTML 4.0 also provides extensions for
individual list items. The extensions are based on those available to the list container that the item is in
(ordered or unordered). Ordered lists pass on the capability to change the current TYPE of list items and
also the VALUE they begin with--by using the <VALUE> tag, you can either begin a list with a value other
than one, or change the numbering within a list. This would be another good way to continue a list that
has been interrupted by some other type of HTML object. (All subsequent items adopt the extension
changes until the list closes.) You can modify unordered list items with the TYPE extension; all
subsequent items in the container use the item marker.

Like the <OL> tag, <UL> also supports the COMPACT attribute, which causes the browser to render the list
in a more compact form.

Creating Menu Lists

You can create menu lists with another list type supported by HTML and Web browsers. The
distinction here is primarily for HTML identification; most browsers' default display for the <MENU>
container is very similar to the font and style used for the unordered list container. The value of this
element is enhanced if you select a distinct screen format for the menu paragraph in a Web browser's
preferences. The container might also be more functional in future versions of HTML and its client
software, enabling browsers and other applications to identify the menu sections in your documents.

As with the previous lists, menu lists provide beginning and ending line breaks and can include other
HTML elements in a menu container. The anchor element is the most likely HTML element to use in
this type of list; it is used to link the menu listings to other document resources or Internet applications.
Listing 9.6 shows typical uses for the <MENU> container.

TIP: Just because HTML has specific names for these list types doesn't mean you're limited in how
you can use them. Experiment to see how each list delivers your information and use what works best.

Listing 9.6 Menu List Example

<HTML>
<HEAD>
<TITLE>Menu Listing Example</TITLE>
</HEAD>
<BODY>
<MENU>
<LH><EM>Planets of the Solar System:</EM><BR>
<LI><A HREF="mercury.htm">Mercury</A>
<LI><A HREF="venus.htm"> Venus </A>
<LI><A HREF="earth.htm"> Earth </A>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 95

 Shree M .& N. Virani Science College
<LI><A HREF="mars.htm"> Mars </A>
<LI><A HREF="jupiter.htm"> Jupiter </A>
<LI><A HREF="saturn.htm"> Saturn </A>
<LI><A HREF="uranus.htm"> Uranus </A>
<LI><A HREF="neptune.htm"> Neptune </A>
<LI><A HREF="pluto.htm"> Pluto </A>
</MENU>
</BODY>
</HTML>

Again, the current implementation of <MENU> by most Web browsers doesn't provide a visual
distinction between menu and unordered lists. Netscape Navigator displays menu lists and unordered
lists identically (see Figure 9.6), while Microsoft Internet Explorer displays them identically except for
the omission of bullets in the latter.

NOTE: Menu items (and other list types) can contain hypertext links to other documents or Internet
resources. Use the <A> container to create the links, as follows:
<A HREF="home.htm">Jump to My Home Page</A>
Click the text Jump to My Home Page, and the browser retrieves the document HOME.HTM.

Creating Directory Lists

The <DIR> element functions much like the <MENU> element; it provides HTML identification to the
section of text that has more potential usefulness than real functional value. Similar to <MENU>, <DIR>
containers display with the same default settings as unordered lists.

The intended use for the <DIR> container limits items to 24 characters and displays the items in rows
(like file directories in UNIX, or in DOS using the /W parameter). Current browsers don't support this
interpretation. The <DIR> element also isn't intended to include other HTML elements; browsers
interpret them correctly. When using <DIR>, remember to close the container with the ending </DIR>
tag. Listing 9.7 shows typical uses of the <DIR> container.

Listing 9.7 <DIR> List Example

<HTML>
<HEAD>
<TITLE>Dir List Example</TITLE>
</HEAD>
<BODY>
<DIR>
<LH><EM>Colors of the Spectrum:</EM><BR>
<LI>Red
<LI>Orange
<LI>Yellow
<LI>Green
<LI>Blue
<LI>Indigo
<LI>Violet
</DIR>
</BODY>
</HTML>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 96

 Shree M .& N. Virani Science College

Creating Definition Lists

Definition lists, also called glossary lists, are a special type of list in HTML. They provide a format
like a dictionary entry, with an identifiable term and indented definition paragraph. This format is
especially useful when listing items with extensive descriptions, such as catalog items or company
departments. The <DL> element provides both a beginning and ending line break. In the <DL>
container, the <DT> tag marks the term and the <DD> tag defines the paragraph. These are both open
tags, meaning they don't require a closing tag to contain text.

The standard format of a definition list is as follows:

<DL>
<DT>Term
<DD>Definition of term
</DL>

The <DT> tag's text should fit on a single line, but it wraps to the next line without indenting if it runs
beyond the boundary of the browser window. The <DD> tag displays a single paragraph, continuously
indented one or two spaces beneath the term element's text (depending on how the browser interprets a
definition list).

The HTML 4.0 specification provides an important optional attribute for <DL>: COMPACT. This attribute
is supposed to be interpreted as a list with a different style, presumably with a smaller font size or more
compact character spacing. This could be useful for embedded definition lists (those inside other
definition, numbered, or bulleted lists), or for graphic effect. Most browsers, however, ignore the
attribute, displaying the definition list to the standard format.

Definition lists can include other HTML elements. The most common are physical and logical styles
and other list containers. Although Web browsers can correctly interpret elements such as headings,
this is bad HTML; their forced line breaks are not pretty and heading tags are usually meant to define
relationships in paragraphs, not within lists. Listing 9.8 shows examples of how you can create
definition lists.

Figure 9.7 shows how this document displays in Netscape Navigator. Other browsers may format this
text differently.

TIP: In Netscape Navigator, use a horizontal rule, <HR>, on a <DD> tagged line in a definition list. The
rule indents with the rest of the <DD> lines, providing an easy-to-read separator for your definition text.

Listing 9.8 Definition List Example

<HTML>
<HEAD>
<TITLE>Definition List Example</TITLE>
</HEAD>
<BODY>
<DL>
<DT>Mercury
<DD>The smallest of the planets and the one nearest the sun,

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 97

 Shree M .& N. Virani Science College
having a sidereal period of revolution about the sun of 88.0
days at a mean distance of 58.3 million kilometers (36.2
million miles) and a mean radius of approximately 2,414
kilometers (1,500 miles).
<DT>Venus
<DD>The second planet from the sun, having an average radius
of 6,052 kilometers (3,760 miles), a mass 0.815 times that of
Earth, and a sidereal period of revolution about the sun of
224.7 days at a mean distance of approximately 100.1 million
kilometers (67.2 million miles).
<DT>Earth
<DD>The third planet from the sun, having a sidereal period
of revolution about the sun of 365.26 days at a mean distance
of approximately 149 million kilometers (92.96 million miles),
an axial rotation period of 23 hours 56.07 minutes, an average
radios of 6,374 kilometers (3,959 miles), and a mass of
approximately 29.11 x 10^24 kilograms (13.17 x 10^24 pounds).
</DL>
</BODY>
</HTML>

Combining List Types

There are times when it's necessary to use sublists of more than one type within a single list. For
instance, you may have a numbered list that includes a list as one of the numbered elements. Instead of
just creating an ordered sublist, which numbers each of its items, you might prefer to display an
unordered list to differentiate the sublist (while avoiding ordering the information as well). HTML
supports embedded combinations of all list types. Listing 9.9 shows a sample of combined lists.

Listing 9.9 Combined List Example

<HTML>
<HEAD>
<TITLE>Combined List Example</TITLE>
</HEAD>
<BODY>
<OL>
<LH><EM>Planets of the Solar System:</EM><BR>
<LI>Mercury
<UL>
<UL>
<LI>Roman god of commerce, travel, and thievery
<LI>Dictionary Definition
<DL>
<DT>Mercury
<DD>The smallest of the planets and the one
nearest the sun, having a sidereal period of
revolution about the sun of 88.0 days at a
mean distance of 58.3 million kilometers (36.2
million miles) and a mean radius of approximately
2,414 kilometers (1,500 miles).
</DL>
</UL>
</UL>
<LI>Venus
<UL>
<UL>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 98

 Shree M .& N. Virani Science College
<LI>Roman goddess of sexual love and physical beauty
<LI>Dictionary Definition
<DL>
<DT>Venus
<DD>The second planet from the sun, having an
average radius of 6,052 kilometers (3,760 miles),
a mass 0.815 times that of Earth, and a sidereal
period of revolution about the sun of 224.7 days
at a mean distance of approximately 100.1 million
kilometers (67.2 million miles).
</DL>
</UL>
</UL>
</OL>
</BODY>
</HTML>

Three list types are used in Listing 9.9: numbered, bulleted, and definition. The primary list is a
numbered list of planets. Each planet has a bulleted sublist indicating the Roman god after whom it
was named, followed by its dictionary definition. The users' browsers are being relied on to indent
embedded lists; if more indentation were desired, the lists can be embedded inside additional, empty
lists. For instance, instead of

<OL>
<LI>Small example list
<LI>That I want to indent more
</OL>

you can force more indentation by using

<OL><OL>
<LI>Small example list
<LI>That I want to indent more
</OL></OL>

Because the primary difference between list types involves either the list item markers or the format of
the elements--and not the actual text representation itself--combined lists tend to display very well.
Figure 9.8 shows how the samples in Listing 9.9 display in a typical Web browser.

Manually Formatting Lists

It is possible to create custom bullets with a little manual effort in your HTML code. Consider the
HTML code shown in Listing 9.10.

The <UL> and </UL> tags are used to instruct the Web browser to set up the formatting and indentation
to support an unordered list. However, no <LI> tags are used: Because you don't want the standard
bullets, you can't use the standard list-item tag. Instead, each item in the list is specified similar to this
example:

<IMG SRC="cube.gif" ALIGN=TOP>Red<BR>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page 99

 Shree M .& N. Virani Science College

The <IMG> tag is used to specify and align the graphic you want to use as your bullet, followed by the
list item. Because you're not using the standard <LI> tag to set off each item, you need to use the <BR>
tag to insert a line break after each one. This HTML code is rendered as shown in Figure 9.9.

Listing 9.10 Manual List Example

<HTML>
<HEAD>
<TITLE>Manual List Example</TITLE>
</HEAD>
<BODY>
<IMG SRC="BulletSquiggle.gif" ALIGN=TOP><em>Colors of the Spectrum:</EM><BR>
<UL>
<IMG SRC="BulletCheck.gif" ALIGN=TOP>Red<BR>
<IMG SRC="BulletCheck.gif" ALIGN=TOP>Orange<BR>
<IMG SRC="BulletCheck.gif" ALIGN=TOP>Yellow<BR>
<IMG SRC="BulletCheck.gif" ALIGN=TOP>Green<BR>
<IMG SRC="BulletCheck.gif" ALIGN=TOP>Blue<BR>
<IMG SRC="BulletCheck.gif" ALIGN=TOP>Indigo<BR>
<IMG SRC="BulletCheck.gif" ALIGN=TOP>Violet<BR>
</UL>
</BODY>
</HTML>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

100
 Shree M .& N. Virani Science College

Chapter 10
Formatting Content with Tables

Introducing Tables

As a tool for government, commercial, educational, and personal Web applications, HTML has many
needs and expectations to meet. It's the language behind the most popular resource on the Internet and,
as such, is required to support a greater range of uses today than perhaps its original creators had first
imagined. For example, you might design a corporate Web site similar to a marketing brochure, while
you'd design a government publication to present static data in tabular form. In most cases, you can use
tables to better present these types of Web pages (my technical writing professor would be proud).

In print publications, tables are a basic design element. They're used to present data in rows and
columns. They make comparative analysis more understandable. They're also used (albeit invisibly) to
divide the printed page into sections for layout purposes. Tables should be a basic design element in
your Web pages, too.

On the Web, tables have been used for a while now, thanks to Netscape and subsequently Microsoft,
but they were not an official part of the HTML standard until HTML 3.2. This chapter shows you how
to use HTML tables to organize content on your Web page or even to help lay out your Web page.

HTML defines tables in much the same way it defines list containers. The <TABLE> element is the
container for the table's data and layout.

HTML tables are composed row by row: you indicate a new row with the <TR> (table row) tag, and
you separate the data with either the <TH> (table header) or <TD> (table data) tags. Think of the <TR>
tag as a line break, signaling that the following data starts a new table row. Table headers are generally
shown in bold and centered by WWW browsers, and table data is shown in the standard body-text
format. Whereas you can think of a row as a line in a table, a cell represents each box within the table.

Understanding the Basic Tags

The HTML for a basic table is shown in Listing 11.1. All of the HTML table elements used are
supported by the latest versions of the most popular Web browsers: Netscape Navigator, Microsoft
Internet Explorer, and NCSA Mosaic. This table, as rendered by Internet Explorer, is shown in Figure
11.1.

Listing 11.1 A Basic Table

<HTML>
<HEAD>
<TITLE>Basic Table Examples</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR>
<TH>Colors</TH><TH>Of</TH><TH>The Rainbow</TH>
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
101
 Shree M .& N. Virani Science College
<TR>
<TD>Red</TD><TD>Orange</TD><TD>Yellow</TD>
</TR>
<TR>
<TD>Green</TD><TD>Blue</TD><TD>Violet</TD>
</TR>
</TABLE>
<HR>
<TABLE BORDER>
<CAPTION>My Favorite Groups</CAPTION>
<TR><TH>Rock</TH><TD>Pink Floyd</TD>
<TD>Led Zepplin</TD>
<TD>The Dobbie Brothers</TD></TR>
<TR><TH>Soft</TH><TD>Simon and Garfunkel</TD>
<TD>Peter, Paul, & Mary</TD>
<TD>Neil Young</TD></TR>
<TR><TH>New Age</TH><TD>Enya</TD>
<TD>Clannad</TD>
<TD>Steamroller</TD></TR>
</TABLE>
</BODY>
</HTML>

The basic HTML table tags shown in Figure 11.1 and Figure 11.2 are as follows:

• <TABLE></TABLE>--These HTML tags are the containers for the rest of the table data.

• <TR></TR>--Each row in the table is contained by these tags. You can optionally leave off the
closing </TR> tag.

• <TD></TD>--Defines a cell. Table data is contained within these tags. You can also nest
additional tables within a single cell. You can optionally leave off the closing </TD> tag.

• <TH></TH>--These table header tags are used to define headers, usually in the first row or
column of the table. You can optionally leave off the closing </TH> tag.

In addition to the basic tags shown here, some other characteristics should be noted from the example
shown in Figures 11.1 and 11.2:

• BORDER attribute--By using the BORDER attribute of the <TABLE> tag, borders are put around the
table. You set the value of this attribute to the number of pixels wide you want the border, like
this: BORDER=1. If you set this attribute to 0, the browser will not display a border.

• ALIGN attribute--The ALIGN attribute can be specified in the <TABLE> tag with possible values
of LEFT, RIGHT, and CENTER (the default is LEFT). HTML 4.0 specifies a new value for ALIGN
of CHAR, which implements alignment on a specified character, such as a decimal point.

• Table heads--In most browsers, table heads enclosed by the <TH></TH> tags are emphasized
and centered.

• Table data--In most browsers, table data enclosed by the <TD></TD> tags are shown in the
normal font and are left-justified.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

102
 Shree M .& N. Virani Science College

NOTE: If you're concerned about browsers displaying your header text correctly (as emphasized text,
preferably in a bold font), you can use style tags to force the issue. Be careful what you wish for,
though; if you want an italicized font but the browser automatically formats the text bold, you can
wind up with bold italicized headers.

NOTE: HTML 4.0 adds several new attributes to many table tags that are meant to improve access for
international and disabled users.
For example, the AXIS="name" attribute for the <TH> tag lets you specify a spoken name for a table
head, which can be used by a text-to-speech synthesizer. A similar attribute, AXES="row,column", has
been added to the <TD>, or table data, tag to allow for speaking the row and column references for a
table cell.
Almost every table-element defining tag also now includes the ID, CLASS, LANG, and DIR attributes.
These define a named label, class definition, natural language, and text direction for table elements,
respectively.

Cells do not necessarily have to contain data. To create a blank cell, either create an empty cell (for
instance, <TD></TD>) or create a cell containing nothing visible (<TD>&nbsp;</TD>). Note that &nbsp;
is an HTML entity, or special character, for a nonbreaking space. Though you would think these two
methods would produce the same result, as you will see later in this chapter, in the section "Empty
Cells and Table Appearance," different browsers treat them differently.

It's not really necessary to create blank cells if the rest of the cells on the row are going to be blank; the
<TR> element signals the start of a new row, so the Web browsers automatically fill in blank cells to
even out the row with the rest of the table.

TIP: Tables are necessarily uniform with equal numbers of cells in each row and in each column. No
"L-shaped" tables (or worse!) allowed.

Aligning Table Elements

It is possible, through the use of the ALIGN and VALIGN attributes, to align table elements within their
cells in many different ways. These attributes can be applied in various combinations to the
<CAPTION>, <TR>, <TH>, and <TD> table elements. The possible attribute values for each of these
elements are as follows:

• <CAPTION>--The ALIGN attribute can be specified for this element with possible values of TOP
and BOTTOM (the default is TOP); this places the table caption above or below the table.

• <TR>--The ALIGN attribute can be specified for this element with possible values of LEFT,
RIGHT, and CENTER (the default is LEFT for table data elements and CENTER for table header
elements), and the VALIGN attribute can be specified with possible values of TOP, BOTTOM,
MIDDLE, and BASELINE (the default is MIDDLE). If specified, this will give the default alignment
for all the table elements in the given row, which can be overridden in each individual element.
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
103
 Shree M .& N. Virani Science College
The BASELINE element applies to all elements in the row and aligns them to a common
baseline.

• <TH>--The ALIGN attribute can be specified for this element with possible values of LEFT,
RIGHT, and CENTER (the default is CENTER), and the VALIGN attribute can be specified with
possible values of TOP, BOTTOM, and MIDDLE (the default is MIDDLE).

• <TD>--The ALIGN attribute can be specified for this element with possible values of LEFT,
RIGHT, and CENTER (the default is LEFT), and the VALIGN attribute can be specified with
possible values of TOP, BOTTOM, and MIDDLE (the default is MIDDLE).

These alignments are illustrated by the HTML document shown in Listing 11.2 and rendered by
Netscape Navigator in Figure 11.2.

Listing 11.2 Table Alignments

<HTML>
<HEAD>
<TITLE>Table Alignments</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<CAPTION ALIGN=BOTTOM>A Really Ugly Table</CAPTION>
<TR>
<TH></TH><TH>##########</TH><TH>##########</TH>
<TH>##########</TH>
</TR>
<TR ALIGN=RIGHT>
<TH>Row 1</TH><TD>XX<BR>XX</TD><TD ALIGN=CENTER>X
</TD><TD>XXX</TD>
</TR>
<TR VALIGN=BASELINE>
<TH ALIGN=LEFT>Second Row</TH><TD>XXX<BR>XXX</TD><TD>XXX</TD>
<TD>XXX<BR>XXXXX<BR>XXX</TD>
</TR>
<TR ALIGN=LEFT>
<TH>This Is<BR>The Bottom Row of <BR>The Table</TH>
<TD VALIGN=BOTTOM>XXXXX</TD>
<TD VALIGN=TOP>XXX<BR>XXXXX</TD>
<TD VALIGN=MIDDLE>XXXXX</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Although this table is pretty ugly, it illustrates the capabilities of the different ALIGN and VALIGN
attributes, as follows:

• Table Caption: <CAPTION ALIGN=BOTTOM> places the caption underneath the table--overriding
the default value, which would put the caption on top.

• "Row 1":

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

104
 Shree M .& N. Virani Science College
o The <TR ALIGN=RIGHT> sets a default horizontal alignment to the right margin for each
element in the row.

o The <TD ALIGN=CENTER> in the third column overrides the default set in the <TR>
element for just this table element.

• "Second Row":

o The <TR VALIGN=BASELINE> aligns all of the cells in the row vertically so that their
baselines match.

o The <TH ALIGN=LEFT> in the first column overrides the default table header alignment
and aligns the table header along the left side.

• "This Is The Bottom Row of The Table":

o The <TR ALIGN=LEFT> sets a default horizontal alignment to the left margin for each
element in the row.

o The <TD VALIGN=BOTTOM> in the second column vertically aligns the element on the
bottom of the row.

o The <TD VALIGN=TOP> in the third column vertically aligns the element on the top of
the row.

o The <TD VALIGN=MIDDLE> in the fourth column vertically aligns the element in the
middle of the row. Because this is the default behavior (and hasn't been overridden in
the <TR> element for this row), this attribute isn't necessary.

NOTE: Sitting down with your favorite text editor and hacking out the HTML for a table isn't always
the best way to do it. There comes a time when a piece of paper and a no. 2 pencil are the best design
tools you can use.
Take a look at Figure 11.3. It shows a sketch for a table that has two rows and four columns. The first
two columns of the first row are joined, and the last two columns of the last row are joined.

NOTE: To make your HTML coding job easier, you can handwrite a <TABLE> tag above the table and
a </TABLE> tag below the figure. Then, handwrite a <TR> at the beginning of each row, and a </TR>
tag at the end of each row. Last, handwrite a <TD> and </TD> within each cell. If a cell is spanned, then
write the number of cells it spans next to the <TD> tag and indicate if it spans rows or columns. Figure
11.4 shows you an example of such a sketch.

NOTE: With your marked-up sketch in hand, you're ready to write the HTML. Start at the top and
work towards the bottom of the sketch in a left to right fashion. Type each tag as you encounter it. If
you noted that a cell is spanned, be sure to add the ROWSPAN or COLSPAN attribute to the <TD> tag. The
following listing shows you the HTML that results from the previous sketch. (Note that indenting the
code can help clarify the row and column breaks.)
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
105
 Shree M .& N. Virani Science College
<TABLE>
<TR>
<TD COLSPAN=2> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD COLSPAN=2> </TD>
</TR>
</TABLE>

CHAR Alignment

HTML 4.0 specifies a new value for the ALIGN attribute called CHAR, or character alignment. This
implements a much-requested feature for tables: the ability to align content on a decimal point, colon,
or other common character. It is used in conjunction with a new CHAR attribute. Here's a sample of its
use:

<TR ALIGN=CHAR CHAR=".">...table data here...</TR>

The TR tag in this sample uses ALIGN=CHAR to specify that data in the cells in this row should be
aligned by decimal point. CHAR="." sets the alignment character as a decimal point, although it could
be any ASCII character.

The CHAR value for ALIGN can be used with the COL, COLGROUP, THEAD, TBODY, TFOOT, TR, TH, and TD
tags.

A new CHAROFF attribute can also be used to specify the character offset within a cell. For example,
CHAROFF="30%" would tell the browser to place the character specified by the CHAR= attribute at an
offset of 30% from the start of the cell.

Standard Units for Widths

Several HTML tag attributes allow you to specify the width for a frame, cell, or other page element.
When you specify a width, you can use a percentage or specify an absolute width in one of several
predefined units. In the preceding text, we used an example of CHAROFF="30%" to specify a character
alignment offset, but we could have easily just said CHAROFF="20". This would have meant "20 screen
pixels". A number in a width definition without a suffix is always assumed to be in pixels.

CHAROFF="20px" means the same thing but uses the actual suffix to specifically denote pixels, "px".
You can also use "pt" to define a width in points, like this: CHAROFF="50pt". However, point widths
are generally useful only in documents that are being formatted for print output on paper, since they
have no absolute meaning on a monitor screen, which can be of any size.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

106
 Shree M .& N. Virani Science College
Table 11.1 lists the acceptable suffixes for width definitions in HTML and shows their values.

Table 11.1 HTML Width Definition Values

Suffix Value
px, [none] pixels
pt points
pi picas
in inches
cm centimeters
mm millimeters
em em units
% percent of screen width

Working with Advanced Tables

There are more sophisticated things that you can do with tables, both by using additional table
attributes and by different uses of some of the ones you already know about.

HTML 4.0 RULES and FRAME Attributes

Within the TABLE element, HTML 4.0 now gives you a broad degree of control over where rules and
frames are drawn within a table.

The FRAME attribute specifies which sides of a frame to render. It has the following possible values:

VOID No Frame
ABOVE Top Side
BELOW Bottom Side
HSIDES Horizontal Sides
LHS Left-Hand Side
RHS Right-Hand Side
VSIDES Vertical Sides
BOX or BORDER All Four Sides

The value BORDER is included for backwards-compatibility with HTML 3.2. <TABLE FRAME=BORDER>
is the same as the older <TABLE BORDER>.

In addition to the new FRAME attribute for TABLE, there is also a new RULES attribute. The RULES
attribute is used to specify additional rulings in the table interior. For example, it can turn on rulings
between all columns, or between groups of rows.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

107
 Shree M .& N. Virani Science College

Here are the values for RULES, and their meanings:

NONE No rules
GROUPS Horizontal rule between all row groups and a vertical rule between all column groups
ROWS GROUPS rulings, plus horizontal rules between all rows
COLS GROUPS rulings, plus vertical rules between all columns
ALL Rules between all rows and all columns

CAUTION: At the time of this writing, neither Microsoft Internet Explorer nor Netscape
Communicator supported the HTML 4.0 additions of RULES and FRAME. Before adding these attributes
to your tables, make sure that support for them has been added to the major browsers.

Creating Borderless Tables

As mentioned previously, the BORDER attribute to the <TABLE> element was the HTML 3.2 element that
created borders around table elements, and it has been retained in HTML 4.0 for backwards-
compatibility. Even though this attribute is off by default, for most conventional tables--those used to
organize information in a tabular format--borders are usually used to accentuate the organization of the
information. Consider the HTML document shown in Listing 11.3 and rendered in Figure 11.5. In this
case, the organization of the information is much easier to see in the version that includes borders.

Listing 11.3 Table Borders

<HTML>
<HEAD>
<TITLE>Table Borders</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR><TH>FRUITS</TH><TH>VEGETABLES</TH><TH>WHOLE GRAINS</TH></TR>
<TR><TD>Apple</TD><TD>Broccoli</TD><TD>Barley</TD></TR>
<TR><TD>Orange</TD><TD>Cauliflower</TD><TD>Weat Berries</TD></TR>
<TR><TD>Kiwi</TD><TD>Sugar Snap Pea</TD><TD>Millet</TD></TR>
<TR><TD>Pineapple</TD><TD>Bell pepper</TD><TD>Quinoa</TD></TR>
</TABLE>
<HR>
<TABLE>
<TR><TH>FRUITS</TH><TH>VEGETABLES</TH><TH>WHOLE GRAINS</TH></TR>
<TR><TD>Apple</TD><TD>Broccoli</TD><TD>Barley</TD></TR>
<TR><TD>Orange</TD><TD>Cauliflower</TD><TD>Weat Berries</TD></TR>
<TR><TD>Kiwi</TD><TD>Sugar Snap Pea</TD><TD>Millet</TD></TR>
<TR><TD>Pineapple</TD><TD>Bell Pepper</TD><TD>Quinoa</TD></TR>
</TABLE>
</BODY>
</HTML>

However, HTML tables can be used in other ways, rather than for the simple tabular display of data.
They give an HTML author great flexibility in presenting information, grouping it, and formatting it
along with other information. Consider the HTML document shown in Listing 11.4 and rendered in

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

108
 Shree M .& N. Virani Science College
Figure 11.6. In this case, the use of a borderless table allows the descriptive text of the image to be
displayed alongside the image.

Listing 11.4 Table Borders

<HTML>
<HEAD>
<TITLE>Table Borders</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD><IMG SRC="lion.gif"></TD>
<TD>
The rampant lion is a symbol from Scottish heraldy. It symbolizes
a duty and willingness to defend one's ideals and values, such as
aret&ecirc. The color of the lion, White, is for the purity of the
brotherhood of PEZ, void of the negativity associated with some
fraternities. This White symbolizes how PEZ is a practice of the
pure theory of brotherhood. This brotherhood has its roots in common
ties and support rather than hazing and the like.
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Spanning Rows and Columns

Rows and columns can be spanned--combined with adjacent cells to create larger cells for the data. For
instance, in a table with five rows and five columns, the first row could be spanned across all five
columns to create a banner header for the whole table. In the same table, each of the columns could
have elements that spanned multiple rows. It would be possible, through spanning, to create
rectangular table elements that span both multiple rows and columns, up to the full size of the table.

To span two adjacent cells on a row, use the ROWSPAN attribute with <TH> or <TD>, as follows:

<TD ROWSPAN=2>

To span two adjacent cells in a column, use the COLSPAN attribute with <TH> or <TD>, as follows:

<TD COLSPAN=2>

TIP: Don't forget to close your table data with the </TABLE> closing tag.

HTML 4.0 adds an additional attribute to TD, NOWRAP. If NOWRAP is present, cell contents disables
automatic text wrapping for that cell. However, this attribute has been defined only for backwards-
compatibility with current browsers and is functionally superseded by style sheets.

Listings 11.5 and 11.6 show an HTML document that makes use of row and column spanning. This
example is shown in Figure 11.7, which shows some of the trouble you can get yourself into with row
and column spanning. The table shown on the left is formatted correctly. However, HTML will allow
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
109
 Shree M .& N. Virani Science College
you to overlap rows and columns if you aren't careful with your spanning, and the results of this can
(and usually will) be unpredictable.

Listing 11.5 Row and Column Spanning

<HTML>
<HEAD>
<TITLE>Row and Column Spanning</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR><TH COLSPAN=3>DC nationals</TH><TR>
<TR><TH>Offense</TH><TH>Defense</TH><TH>Goalie</TH></TR>
<TR>
<TD>Husmann</TD><TD>O'Donnell</TD><TD ROWSPAN=5>Weinberg</TD>
</TR>
<TR>
<TD COLSPAN=2>Popplewell</TD>
</TR>
<TR>
<TD>McGilly</TD><TD>Longo</TD>
</TR>
<TR>
<TD>Donahue</TD><TD>Seymour</TD>
</TR>
<TR>
<TD>Camillo</TD><TD>Walsh</TD>
</TR>
</TABLE>
</BODY>
<HTML>

Listing 11.6 Row and Column Spanning

<HTML>
<HEAD>
<TITLE>Row and Column Spanning</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR><TH COLSPAN=3>DC nationals</TH><TR>
<TR><TH>Offense</TH><TH>Defense</TH><TH>Goalie</TH></TR>
<TR>
<TD>Husmann</TD><TD>O'Donnell</TD>
<TD ROWSPAN=5>
Weinberg<BR>Weinberg<BR>Weinberg<BR>
Weinberg<BR>Weinberg<BR>Weinberg<BR>
</TD>
</TR>
<TR>
<TD COLSPAN=2>Popplewell</TD>
</TR>
<TR>
<TD>McGilly</TD><TD>Longo</TD>
</TR>
<TR>
<TD>Donahue</TD><TD>Seymour</TD>
</TR>
<TR>
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
110
 Shree M .& N. Virani Science College
<TD>Camillo</TD><TD COLSPAN=2>Walsh Walsh Walsh</TD>
</TR>
</TABLE>
</BODY>
<HTML>

NOTE: When you create larger cells in an HTML table, you might find your cell data acts a bit
unruly: not breaking properly, wrapping text when it shouldn't, and crowding too close to the cell
divisions. Like other HTML documents, tables support internal HTML elements, such as <BR> (to
create a line break in the data), hypertext link anchors, inline images, and even forms.
Use an HTML table in the same manner you would a spreadsheet: for data display, for creating data
layouts (such as inventory lists or business invoices), and for calculation tables (when combined with a
CGI script that can take your form input and generate output data that's displayed in your HTML
table). The uses for tables are limited only by your data and your creativity.

Grouping Rows and Columns

HTML 4.0 adds several tags for grouping rows and columns for the purpose of specifying common
attributes for those groups.

COLGROUP assigns width and alignment attributes for a group of columns. For example, if you had a
table with six columns and you wanted each of the first three columns to be 50 pixels wide and left-
aligned, each of the second two columns to be 100 pixels wide and character-aligned on a decimal
point, and the last column to take up the remainder of the screen width and right-aligned, you could
accomplish all of this formatting with just the following three lines of HTML:

<COLGROUP WIDTH="50px" ALIGN=LEFT SPAN=3>

<COLGROUP WIDTH="100px" ALIGN=CHAR CHAR="." SPAN=2>
<COLGROUP WIDTH="100%" ALIGN=RIGHT>

Note that the SPAN attribute defines how many contiguous columns are in a COLGROUP group. If it's left
out, the value defaults to SPAN=1, or a single column.

TBODY, THEAD, and TFOOT perform functions similar to COLGROUP, but they group rows instead of
columns. THEAD and TFOOT define a group of rows to form a header or footer for a table, respectively.
TBODY is used to group rows in the body of the table. Each is a container--that is, it is made up of
corresponding begin and end tags, as in <TBODY></TBODY>--but the end tags for THEAD and TFOOT are
optional, as long as a TBODY tag immediately follows. This was done for compatibility with older
HTML tables.

Each row grouping container set must contain at least one TR, or table row, element.

A TFOOT block should actually precede the TBODY block, as browsers will logically insert the footer
when needed in breaking pages.

Each row grouping element uses the same attributes and values as the COLGROUP tag.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

111
 Shree M .& N. Virani Science College
NOTE: At the time of this writing, neither Microsoft Internet Explorer nor Netscape Communicator
supported the HTML 4.0 additions of COLGROUP, THEAD, TFOOT, or TBODY. Before adding these
attributes to your tables, make sure support for them has been added to the major browsers.

Understanding Empty Cells

As mentioned earlier, there is sometimes a difference between an empty cell in a table and one with
nothing visible in it. This is particularly true with Netscape Navigator and Internet Explorer, which
will display the two differently. Consider the HTML document shown in Listing 11.7, which shows
two tables. In the top table, there are several empty table cells--cells with only white space in them,
which Netscape Navigator will not treat as data. In the lower table, these same cells have something in
them: the HTML entity &nbsp, which is a nonbreaking space (an invisible character).

As shown in Figure 11.8, Internet Explorer will display these two tables differently. As you can see
here, now it is mainly an aesthetic difference.

Listing 11.7 Table Example: Empty Cells

<HTML>
<HEAD>
<TITLE>Table Example: Empty Cells</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR><TD>Amaranth</TD><TD> </TD><TD>Buckwheat</TD></TR>
<TR><TD>Barley </TD><TD>Rye </TD><TD></TD></TR>
<TR><TD>Quinoa </TD><TD>Wheat</TD><TD></TD></TR>
</TABLE>
<HR>
<TABLE BORDER>
<TR><TD>Amaranth</TD><TD>&nbsp</TD><TD>Buckwheat</TD></TR>
<TR><TD>Barley </TD><TD>Rye </TD><TD>&nbsp </TD></TR>
<TR><TD>Quinoa </TD><TD>Wheat</TD><TD>&nbsp </TD></TR>
</TABLE>
<BODY>
<HTML>

Controlling Table Layout

HTML introduces several attributes that you can use to increase the degree of control you have over
how tables are displayed. These attributes were once Netscape enhancements, supported by Internet
Explorer, but are now a part of the HTML standard. Listing 11.8 shows the HTML document for these
attributes, which are rendered by Internet Explorer in Figure 11.9.

Listing 11.8 Formatting Example

<HTML>
<HEAD>
<TITLE>Formatting Example></TITLE>
</HEAD>
<BODY>
<TABLE BORDER=10 CELLPADDING=10 CELLSPACING=10 WIDTH=100%>
<TR>
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
112
 Shree M .& N. Virani Science College
<TD>Width 100%</TD>
<TD>Border<BR>CellPadding = 10<BR>CellSpacing</TD>
</TR>
<TR>
<TD>
<TABLE BORDER=5 CELLPADDING=5 CELLSPACING=5 WIDTH=75%>
<TR>
<TD>Width 75%</TD>
<TD>Border<BR>CellPadding = 5<BR>CellSpacing</TD>
</TR>
</TABLE>
</TD>
<TD>Have a nice day!</TD>
</TR>
</TABLE>
<BODY>
</HTML>

The attributes shown in Figure 11.9 are as follows:

• WIDTH attribute--This enables you to specify the width of the table, either in pixels or as a
percentage of the width of the browser window. You can also use this attribute with individual
cells.

• HEIGHT attribute--This enables you to specify the height of the table, either in pixels or as a
percentage of the height of the browser window. You can also use this attribute with individual
cells.

• BORDER attribute--This attribute puts a border around the table. You specify the width of the
border in pixels, like this: BORDER=2.

• CELLPADDING and CELLSPACING attributes--These numerical attributes include extra space

within each cell in the table and/or within the borders of the table. If the border is not being
displayed, they are equivalent.

Using Color in Tables

HTML makes no provision for setting a table or cell's color. However, both Netscape and Internet
Explorer provide extensions that let you change the color of cells and borders. You use the BGCOLOR
attribute to change the color of a cell's background, before any text or images are placed into the cell.
You use the BORDERCOLOR attribute to change the color of the border around the cell. Both Netscape
and Internet Explorer support these attributes.

The <TABLE>, <TD>, <TH>, and <TR> tags all support BGCOLOR and BORDERCOLOR attributes. Thus, you
can apply colors to the entire table, an individual cell, or an individual row of the table. The example in
Listing 11.9 shows you the HTML for three tables, which show you an example of each case. Figure
11.10 shows you how these tables are rendered in Internet Explorer.

Listing 11.9 Formatting Example

<HTML>
<HEAD>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

113
 Shree M .& N. Virani Science College
<TITLE>Foramtting Example</TITLE>
<HEAD>
<BODY>
<TABLE BORDER BORDERCOLOR=BLACK BGCOLOR=WHITE>
<TR><TD>1-one</TD><TD>2-two</TD><TD>3-three</TD></TR>
<TR><TD>4-four</TD><TD>5-five</TD><TD>6-six</TD></TR>
<TR><TD>7-seven</TD><TD>8-eight</TD><TD>9-nine</TD></TR>
</TABLE>
Changing the entire table's color
<HR>
<TABLE BORDER>
<TR BORDERCOLOR=BLACK BGCOLOR=WHITE><TD>1-one</TD>
<TD>2-two</TD><TD>3-three</TD></TR>
<TR><TD>4-four</TD><TD>5-five</TD><TD>6-six</TD></TR>
<TR><TD>7-seven</TD><TD>8-eight</TD><TD>9-nine</TD></TR>
</TABLE>
Changing a single row's color
<HR>
<TABLE BORDER>
<TR><TD BORDERCOLOR=BLACK BGCOLOR=WHITE>1-one</TD><TD>2-two</TD>
<TD>3-three</TD></TR>
<TR><TD>4-four</TD><TD>5-five</TD><TD>6-six</TD></TR>
<TR><TD>7-seven</TD><TD>8-eight</TD><TD>9-nine</TD></TR>
</TABLE>
Changing a single cell's color
</BODY>
</HTML>

NOTE: HTML defines the following color names. For your convenience, you'll also find the
equivalent hexadecimal RGB values next to each color.
BLACK #000000
SILVER #C0C0C0
GRAY #808080
WHITE #FFFFFF
MAROON #800000
RED #FF0000
PURPLE #800080
FUCHSIA #FF00FF
GREEN #008000
LIME #00FF00
OLIVE #808000
YELLOW #FFFF00
NAVY #000080
BLUE #0000FF
TEAL #008080
AQUA #00FFFF

Using a Table Alternative

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

114
 Shree M .& N. Virani Science College
Table support has become widespread with most of the popular Web browsers, so there is less reason
to avoid using tables. Still, there are folks out on the Web, either because of their Internet service
provider or because of the type of connection to the Internet they have, who are forced to use Web
browsers that do not have table support. If you are worried about missing such people, there are some
alternatives that you can use, either instead of or in addition to using tables themselves.

Listing 11.10 shows an HTML document for a fairly simple table shown in Figure 11.11.

Listing 11.10 Row and Column Spanning

<HTML>
<HEAD>
<TITLE>Row and Column Spanning</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<TR><TH COLSPAN=3>DC nationals</TH><TR>
<TR><TH>Offense</TH><TH>Defense</TH><TH>Goalie</TH></TR>
<TR>
<TD>Husmann</TD><TD>O'Donnell</TD>
<TD VALIGN=TOP ROWSPAN=5>Weinberg</TD>
</TR>
<TR>
<TD COLSPAN=2>Popplewell</TD>
</TR>
<TR>
<TD>McGilly</TD><TD>Longo</TD>
</TR>
<TR>
<TD>Donahue</TD><TD>Seymour</TD>
</TR>
<TR>
<TD>Camillo</TD><TD>Walsh</TD>
</TR>
</TABLE>
</BODY>
<HTML>

Some other ways of displaying this information, not using tables, are as follows:

• Use a list. Information that is relatively straightforward can be displayed instead as a list. This
information can be displayed just as well as a list, as coded in Listing 11.11 and rendered by
Internet Explorer in Figure 11.12.

Listing 11.11 Row and Column Spanning

<HTML>
<HEAD>
<TITLE>Row and Column Spanning</TITLE>
</HEAD>
<BODY>
<STRONG>DC Nationals</STRONG>
<UL>
<LI><EM>Offense</EM>
<UL>
<LI>Husmann

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

115
 Shree M .& N. Virani Science College
<LI>Popplewell
<LI>McGilly
<LI>Donahue
<LI>Camillo
</UL>
<LI><EM>Defense</EM>
<UL>
<LI>O'Donnell
<LI>Popplewell
<LI>Longo
<LI>Seymour
<LI>Walsh
</UL>
<LI><EM>Goalie</EM>
<UL>
<LI>Weinberg
</UL>
<UL>
<BODY>
</HTML>

• Use an image instead. By creating the table in a word processor, or even in your own copy of a
Web browser such as Netscape Navigator, and then taking a screen shot and cropping it down
to the size of the displayed table, you can include the table in your HTML document as an
image. This may not be the best alternative, however, as Web browsers that do not support
tables may not support images either.

• Use preformatted text. This will give you a table that is aesthetically unappealing, but it has the
advantage of being displayed correctly in just about every Web browser, including text-only
browsers such as Lynx. An example of this is shown in Listing 11.12 and Figure 11.13.

Listing 11.12 Row and Column Spanning

<HTML>
<HEAD>
<TITLE>row and Column Spanning</TITLE>
</HEAD>
<BODY>
<PRE>
+------------------+----------------------+--------------------+
| Offense | Defense| Goalie |
+------------------+----------------------+--------------------+
| Husmann | O'Donnell ||
| Popplewell ||
| McGilly | Longo | Weinberg|
| Donahue | Seymour||
| Camillo | Walsh ||
+------------------+----------------------+--------------------+
</PRE>
</BODY>
</HTML>

Table Examples

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

116
 Shree M .& N. Virani Science College
The use of tables to display tabular information is, by definition, pretty obvious. Tables can also come
in handy when using HTML forms, as they give you the capability to create a very well-organized
form for entering information. Tables can be used in other ways as well, as mentioned briefly earlier.
Because they give you the ability to group text and graphics in many different ways, they can be used
to enhance the way a page is displayed.

Using Tables as a Layout Tool

Consider the HTML document shown in Listing 11.13. This document includes graphics and text
information, and is meant to display it as a sort-of business card. This document is shown, as rendered
by Internet Explorer, in Figure 11.14.

Listing 11.13 Using Tables to Display Information

<HTML>
<HEAD>
<TITLE>Using Tables to Display Information</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD ROWSPAN=4 VALIGN=BOTTOM><IMG SRC="init.gif"><TD>
<TH VALIGN=TOP>Jerry Honeycutt</TH>
</TR>
<TR>
<TD VALIGN=TOP><EM><Books:</EM><BR>
Using the Internet with Windows 95<BR>
Windows 95 Registry and Customization Handbook<BR>
Special Edition Using the Windows 95 Registry<BR>
VBScript by Example<BR>
Using the Internet 2E<BR>
Special Edition Using the Internet 3E<BR>
</TD>
</TR>
<TR><HR></TR>
<TR>
<TD ALIGN=CENTER VALIGN=BOTTOM>Send e-mail to <EM>
jerry@honeycutt.com</EM></TD>
</TR>
</TABLE>
<BODY>
</HTML>

Combining Text and Lists

To refine this Web page further, some of the information presented within it can be displayed
differently--in this case, by using an HTML list (an unordered list, but any other kind of list could be
used just as easily). The HTML code for this is shown in Listing 11.14; it makes sense to group lists of
data by using HTML list elements, and the ability to include these within a table allows the
information to be conveyed more clearly. The revised Web page is shown in Figure 11.15.

Listing 11.14 Using Tables to Display Information

<HTML>
<HEAD>
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
117
 Shree M .& N. Virani Science College
<TITLE>Using Tables to Display Information</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD ROWSPAN=4 VALIGN=BOTTOM><IMG SRC="init.gif"><TD>
<TH VALIGN=TOP>Jerry Honeycutt</TH>
</TR>
<TR>
<TD VALIGN=TOP><EM><Books:</EM><BR>
<UL>
<LI>Using the Internet with Windows 95
<LI>Windows 95 Registry and Customization Handbook
<LI>Special Edition Using the Windows 95 Registry
<LI>VBScript by Example
<LI>Using the Internet 2E
<LI>Special Edition Using the Internet 3E
</UL>
</TD>
</TR>
<TR><HR></TR>
<TR>
<TD ALIGN=CENTER VALIGN=BOTTOM>Send e-mail to <EM>
jerry@honeycutt.com</EM></TD>
</TR>
</TABLE>
<BODY>
</HTML>

Nesting HTML Tables

Another way to display this information is to use tables within a larger table. The list items are
composed of both a team name and a year (or range of years). Couldn't this information also be
displayed in a table? In HTML, you can nest tables within other tables.

Listing 11.15 shows the HTML code for the business-card Web page using nested tables. It is
displayed in Figure 11.16. Notice the nested tables are displayed with borders (and with cell spacing
and padding reduced to make them more compact), while the outer table used to structure the whole
page is not.

Listing 11.15 Using Tables to Display Information

<HTML>
<HEAD>
<TITLE>Using Tables to Display Information</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD ROWSPAN=4 VALIGN=BOTTOM><IMG SRC="init.gif"><TD>
<TH VALIGN=TOP>Jerry Honeycutt</TH>
</TR>
<TR>
<TD VALIGN=TOP><EM><Books:</EM><BR>
<TABLE BORDER CELLSPACING=1 CELLPADDING=1>
<TR><TH>Book</TH><TH>Year</TH><TR>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

118
 Shree M .& N. Virani Science College
<TR><TD>Using the Internet with Windows 95</TD>
<TD>1995</TD></TR>
<TR><TD>Windows 95 Registry and Customization Handbook
</TD><TD>1996</TD></TR>
<TR><TD>Special Edition Using the Windows 95 Registry
</TD><TD>1996</TD></TR>
<TR><TD>VBScript by Example</TD><TD>1996</TD></TR>
<TR><TD>Using the Internet 2E</TD><TD>1996</TD></TR>
<TR><TD>Special Edition Using the Internet 3E</TD>
<TD>1996</TD></TR>
</TABLE>
</TD>
</TR>
<TR><HR></TR>
<TR>
<TD ALIGN=CENTER VALIGN=BOTTOM>Send e-mail to <EM>jerry@honeycutt.com </EM></TD>
</TR>
</TABLE>
<BODY>
</HTML>

Using an Image as a Table Header

You can easily spruce up a table by using an image as the table's header. That is, instead of displaying
a plain-text heading for the table, create a snazzy image and use that instead. Listing 11.16 shows you
the HTML for such a table, and Figure 11.17 shows you this table rendered in Internet Explorer. There
are a couple of things you should note about this example:

• The width of the table is specified to be exactly the width of the image by using the WIDTH
attribute, like this: <TABLE WIDTH=500>.

• In the <TABLE> tag, CELLSPACING is set to 0 in order to make sure the image lines up with the
table correctly.

• The table heading is spanned across all columns in order to accommodate the image. In this
case, the tag <TH COLSPAN=2> spans across the top two columns of the table.

• The <IMG> tag is used to insert the image into the spanned columns. Note that the border is
disabled by using BORDER=0 and the height and width are set to the exact dimensions of the
image by using the HEIGHT and WIDTH attributes.

Listing 11.16 Pictures in Headings

<HTML>
<HEAD>
<TITLE>Pictures in Headings</TITLE>
</HEAD>
<BODY BGCOLOR=WHITE>
<TABLE WIDTH=500 CELLSPACING=0 CELLPADDING=2 BORDER=0>
<TR>
<TH COLSPAN=2>
<IMG SRC="head.gif" BORDER=0 HEIGHT=25 WIDTH=500>
</TH>
</TR>
<TR>
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
119
 Shree M .& N. Virani Science College
<TD VALIGN=TOP>
<IMG SRC="internet.gif">
</TD>
<TD VALIGN=TOP>
This book will show you how to get the most out of the
Internet. You won't find intimidating, technical language
here. You'll find no-nonsense instructions for using e-mail,
Usenet, FTP, and the World Wide Web. You'll also learn how
to find your way around the World Wide Web, read the Usenet
newsgroups, and more.
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Using a Table to Lay Out a Home Page

Figure 11.18 shows you an example of a home page that uses tables extensively for layout purposes.
This happens to be Microsoft's home page. Note that the toolbar at the top of the page is actually
defined as a table. As well, each layout region on this page is actually a cell within the table.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

120
 Shree M .& N. Virani Science College

Chapter 11
Framing Your Web Site

The Frames Concept

First introduced in Netscape Navigator 2.0, HTML frames create independently changeable and
(sometimes) scrollable windows that tile together to break up and organize a display so that it's not
only more visually appealing, but easier to work with.

Frames are similar in many ways to HTML tables. If you understand how tables work, you'll have a
jump start on how to work with frames. If you want to check out how tables work before starting with
frames, see Chapter 11, "Formatting Content with Tables."

However, unlike tables, frames not only organize data, they organize your browser's display window.
In fact, they break up the window into individual, independent panes or frames. Each frame holds its
own HTML file as content, and the content of each frame can be scrolled or changed independently of
the others. In a way, it's almost as though each frame becomes its own mini-browser.

Perhaps the best way to get a feel for what you can do with frames is to look at a few real-world
examples.

Netscape's DevEdge Site

As you might expect, Netscape--the inventor of frames--has some excellent examples of frames on its
Web sites. Figure 12.1 is taken from Netscape's DevEdge developer's site and shows a window that is
broken into four separate frames.

The frames on this page show how Netscape has split information display into the two frames on the
right, while reserving navigation functions for the two frames on the left.

The top-right frame--which occupies about 80 percent of the width of the screen, but only about 20
percent of its height--holds a title graphic, which serves as a landmark to help you remember where
you are. This is an important function, as HTML documents created using frames can get very
complex very quickly. Road signs like the header graphic in this frame can help you get your bearings.

The top-left frame--which takes up about 20 percent of the horizontal real estate and approximately 30
percent of the screen height--contains a top-level navigation menu, which stays in place wherever you
go on the DevEdge site. Making a selection from this menu moves you to a new information category,
such as the support area or library. This graphic menu also serves as a placeholder, because it shows
the currently selected area as highlighted.

The bottom-left frame--about 20 percent of the screen width and 70 percent of its height--is a list of
text-based hyperlinks that make up the information menu for the currently selected category. A new
text menu is displayed in this frame whenever the user selects a new category from the graphic
category menu in the frame above it.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

121
 Shree M .& N. Virani Science College

TIP: Netscape has saved itself a great deal of time and development work by making only the
category-level menus graphic, while using easier-to-create, text-only lists of links for the more
numerous subcategory menus.

Finally, the bottom-right frame--which occupies the majority of the screen area, about 80 percent of its
width and 70 percent of its height--contains all of the actual information displayed on this site. The
information in this window is selected from the category-specific text link menu in the frame to its left.

This site can definitely serve as a template for good frames-based HTML document design for any
information that is hierarchically organized by category.

The CyberDungeon

Frames aren't just for business documents. Take a look at Figure 12.2, which depicts the online
CyberDungeon adventure game at http://www.cyberdungeon.com.

You will probably never find 10 frames used as gracefully as those on this site. (Usually it's bad
practice to use more than four to six frames at a time.) This artfully done Web site anticipates the
recent mantra of both Microsoft and Netscape, who are now encouraging developers to use HTML to
create graphical user interfaces for application programming.

The CyberDungeon site uses a set of frames down the left side of the screen to hold graphical icons of
objects you (the resident adventurer) pick up in your explorations. The top frame of the center set of
three displays the text description of your current location, while the larger frame below it shows a
picture of the same scene. The bottom frame gives you choices to make along the way.

Finally, the tall, right frame keeps the CyberDungeon site's navigational menu handy as you play.

This site provides a wonderful example of how a well-designed HTML document using frames can
replicate applications that previously had to be written in high-level languages like C or C++.

The Mondrian Machine

A final example is a wonderful lampoon of the too-ambitious use of frames. The Mondrian Machine
site (http://www.desires.com/2.1/Toys/Mondrian/mond-fr.html) takes the overuse of frames--
normally an ugly and heinous practice--and turns it into an art form. See Figure 12.3.

Clicking a selection in the table shown in Figure 12.3 brings up one of several different Mondrian
Machines. Each, in its own unique way, creates an HTML document composed of a wild collection of
frames that rapidly take over the entire screen. Each frame has no content except a background color,
so the end effect is that of a painting by Mondrian, who became famous for dividing his canvases into
so many colored rectangles.

The effect, though humorous and somehow compelling, shows just how much trouble you can get into
if you overdo the use of frames on your own pages.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

122
 Shree M .& N. Virani Science College
That warning having been sounded, you'll now see how frames are created.

Frame Creation Basics

Diving in head first, take a look at an entire block of HTML markup code that creates a frame
document of medium complexity:

<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="25%,50%,25%">
<FRAME SRC="header.htm">
<FRAMESET COLS="25%,75%">
<FRAME SRC="label.htm">
<FRAME SRC="info.htm">
</FRAMESET>
<FRAME SRC="footer.htm">
</FRAMESET>
<NOFRAMES>
Your browser cannot display frames.
</NOFRAMES>
</HTML>

This example (Frames1.HTM) produces the frames page shown in Figure 12.4. As you can see, this
HTML code produces four frames. The top frame spans the page and includes a header. There are two
central frames, one for a label on the left, which takes up 25 percent of the screen width, and one for
information on the right, which takes up the remaining space. Another frame fills the entire width of
the bottom of the screen and contains a footer.

Though you won't get into the details for a couple more pages, it's important to note that this document
calls four other HTML documents--header.HTM, label.HTM, info.HTM, and footer.HTM--containing
the actual information displayed in each of the individual frames.

The FRAMESET Container

Frames are contained in a structure called a FRAMESET, which takes the place of the BODY container on
a frames-formatted page. An HTML document that contains a FRAMESET definition has no BODY section
in its HTML code, and a page with a BODY section cannot use the <FRAMESET> tag.

CAUTION: If you define a BODY section for a page that you compose with FRAMESET and FRAME
commands, the frame structure is completely ignored by browser programs and none of the content
contained in the frames is displayed. Instead, you only see the content contained in the BODY section.
Because there is no BODY container, FRAMESET pages can't have background images and background
colors associated with them. (Remember, these are defined by the BACKGROUND and BGCOLOR attributes
of the BODY tag, respectively.) However, the HTML files that contain the content for the individual
frames can use background colors and images, since they do use the <BODY> tag.
Make sure you don't accidentally use BODY and FRAMESET within the same HTML document.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

123
 Shree M .& N. Virani Science College

NOTE: There is a proposal before the HTML standards body to implement a new type of frame
container called an IFRAME, or inline frame. (It is currently implemented only in the Microsoft Internet
Explorer 4.0 browser and FrontPage 98 page composition programs.) This container defines a named
box inside the BODY of a regular HTML page (not a frameset). An IFRAME would float and be
positionable within a page just like a graphic or other object, but its content could be changed by
clicking links, like a frame. Here's an example of how it would look:
<HTML>
<HEAD><TITLE>IFRAME Example</TITLE></HEAD>
<BODY>
Here's an inline frame <IFRAME name="iframe" width=400 height=500></IFRAME> which
can display either of two text files:
<A target="iframe" href="HiThere.htm">Hi There!</A>
<A target="iframe" href="Hello.htm">Hello.</A>
</BODY>
</HTML>
Clicking the "Hi There." link would display the HiThere.HTM file in the inline frame; clicking the
"Hello." link would display Hello.HTM instead, all without reloading the whole page.

The <FRAMESET></FRAMESET> container surrounds each block of frame definitions. Within the
FRAMESET container you can only have FRAME tags or nested FRAMESET containers.

Defining ROWS and COLS

The <FRAMESET> tag has two major attributes: ROWS and COLS (columns). Here's a fully decked-out
(but empty), generic FRAMESET container:

<FRAMESET ROWS="value_list" COLS="value_list">

</FRAMESET>

You can define any reasonable number of ROWS or COLS, or both, but you have to define something for
at least one of them.

CAUTION: If you don't define more than one row or column, browser programs ignore your FRAMES
completely. Your screen is left totally blank. In other words, you can't have a FRAMESET of just one row
and one column--which would just be a single window, anyway. If you've defined at least two of either
ROWS or COLS, however, you can safely omit the other attribute, and a value of 100 percent is assumed
for it.

The value_list in your generic FRAMESET line is a comma-separated list of values that can be
expressed as pixels, percentages, or relative scale values. The number of rows or columns is set by the
number of values in their respective value lists. For example,

<FRAMESET ROWS="100,240,140">

defines a frameset with three rows. These values are in absolute number of pixels. In other words, the
first row is 100 pixels high, the second is 240 pixels high, and the last is 140 pixels high.
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
124
 Shree M .& N. Virani Science College
Setting row and column height by absolute number of pixels is bad practice, however. It doesn't allow
for the fact that browsers run on all kinds of systems on all sizes of screens. While you might want to
define absolute pixel values for a few limited uses--such as displaying a small image of known
dimensions--it is usually a better practice to define your rows and columns using percentage or relative
values, like this:

<FRAMESET ROWS="25%,50%,25%">

This example would create three frames arranged as rows, the top row taking up 25 percent of the
available screen height, the middle row 50 percent, and the bottom row 25 percent.

TIP: Don't worry about having to do the math just right--if the percentages you give for the ROWS or
COLS attribute don't add up to 100 percent, they will be scaled up or down proportionally to equal 100
percent.

Proportional values look like this:

<FRAMESET COLS="*, 2*, 3*">

The asterisk (*) is used to define a proportional division of space. Each asterisk represents one piece of
the overall pie. You get the denominator of the fraction by adding up all the asterisk values (if there is
no number specified, 1 is assumed). In this example, with an overall pie that has six slices, the first
column would get 1/6 of the total width of the window, the second column would get 2/6 (or 1/3), and
the final column would get 3/6 (or 1/2).

Remember that bare numeric values assign an absolute number of pixels to a row or column, values
with a percent symbol assign a percentage of the total width (for COLS) or height (for ROWS) of the
display window, and values with an asterisk assign a proportional amount of the remaining space.

Here's an example using all three in a single definition:

<FRAMESET COLS="100, 25%, *, 2*">

This example assigns the first column an absolute width of 100 pixels. The second column gets 25
percent of the width of the entire display window, whatever that is. The third column gets 1/3 of what's
left, and the final column gets the other 2/3.

So what are the space-allocation priorities? Absolute pixel values are always assigned space first, in
order from left to right. These are followed by percentage values of the total space. Finally,
proportional values are divided based upon what space is left.

CAUTION: Remember, if you do use absolute pixel values in a COLS or ROWS definition, keep them
small so you are sure they'll fit in any browser window, and balance them with at least one percentage
or relative definition to fill the remainder of the space gracefully.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

125
 Shree M .& N. Virani Science College

If you use a FRAMESET with both COLS and ROWS attributes, it creates a grid of frames. Here's an
example:

<FRAMESET ROWS="*, 2*, *" COLS="2*, *">

This line of HTML creates a frame grid with three rows and two columns. The first and last rows each
take up 1/4 of the screen height, and the middle row takes up half. The first column is 2/3 as wide as
the screen, and the second is 1/3 the width.

<FRAMESET></FRAMESET> sections can be nested inside one another, as shown in your initial example,
but don't get ahead of yourself. You need to look at the <FRAME> tag first.

The <FRAME> Tag

The <FRAME> tag defines a single frame. It must sit inside a FRAMESET container, like this:

<FRAMESET ROWS="*, 2*">

<FRAME>
<FRAME>
</FRAMESET>

Note that the <FRAME> tag is not a container so, unlike FRAMESET, it has no matching end tag. An entire
FRAME definition takes place within a single line of HTML code.

You should have as many <FRAME> tags as there are spaces defined for them in the FRAMESET
definition. In this example, the FRAMESET established two rows, so you needed two <FRAME> tags.
However, this example is very, very boring, since neither of your frames has anything in it! (Frames
like these are displayed as blank space.)

The <FRAME> tag has six associated attributes: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING,
and NORESIZE. Here's a complete generic FRAME:

<FRAME SRC="url" NAME="window_name" SCROLLING=YES|NO|AUTO MARGINWIDTH="value"

MARGINHEIGHT="value" NORESIZE>

Fortunately, frames hardly ever actually use all of these options.

Going to the Source

The most important FRAME attribute is SRC (source). You can (and quite often, do) have a complete
FRAME definition using nothing but the SRC attribute, like this:

<FRAME SRC="url">

SRC defines the frame content's URL. This is usually an HTML format file on the same system (paths
are relative to the page containing the FRAMESET), so it usually looks something like:

<FRAME SRC="sample.htm">

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

126
 Shree M .& N. Virani Science College

Note that any HTML file called by the SRC attribute in a FRAME definition must be a complete HTML
document, not a fragment. This means it must have HTML, HEAD, and BODY containers, and so on. For
example, the file called by the SRC attribute in this example, sample.HTM, might look like this:

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
This is some Sample Text.
</BODY>
</HTML>

Of course, SRC can point to any valid URL. If, for example, you wanted your frame to display a GIF
image that was located somewhere in Timbuktu, your FRAME might look like this:

<FRAME SRC="http://www.timbuktu.com/budda.gif">

If you specify an URL the browser can't find, space is allocated for the frame, but it won't be displayed
and you get a nasty error message from your browser. Note the effect is quite different than simply
specifying a FRAME with no SRC at all. <FRAME> is always created, but left blank; <FRAME
SRC="unknown URL"> is not created at all--the space is allocated and left completely empty. The
former fills with background color, while the latter remains the browser's border color.

CAUTION: Plain text, headers, graphics, and other elements cannot be used directly in a FRAME
document. All the content must come from the URL defined by the SRC attribute of the <FRAME> tags.
If any other content appears on a FRAMESET page, it is displayed and the entire set of frames is ignored.

Providing Alternate Content

"All of this is well and good," you say, "and I really, really want to use frames in my HTML
documents. But I can't help feeling guilty about all those users who don't have frames-capable
browsers. They won't be able to see my beautiful pages!"

Don't worry. Here's where you can provide for them, too.

The <NOFRAMES></NOFRAMES> container saves the day. By defining a NOFRAMES section and marking it
up with normal HTML tags, you can provide alternate information for those without frames-capable
browsers. This is how it works:

<NOFRAMES>
All your alternate HTML goes here.
</NOFRAMES>

You can safely think of this as an alternative to the BODY structure of a normal HTML page. Whatever
you place between the <NOFRAMES> and </NOFRAMES> tags appears on browsers without frames
capability. Browsers with frames throw away everything between these two tags.
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
127
 Shree M .& N. Virani Science College

NOTE: If you want to include background graphics or images, you can add the <BODY> tag to your
alternate content like this:
<NOFRAMES>
<BODY BGCOLOR="red" BACKGROUND="bgimage.gif">
content...
</BODY>
FIG. 12.3
The Mondrian Machine serves as both a fun Web toy and a graphic illustration of what can happen if
you go too crazy with frames!

</NOFRAMES
As long as the BODY container is kept within the bounds of the NOFRAMES container, your document
works just fine. But there's no need to use the <BODY> tag within the NOFRAMES container unless you
want to take advantage of its special attributes.

A Simple Page with Two Frames

The simplest possible frame setup is one with two frames, like this:

<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="*, 2*">
<FRAME SRC="label.htm">
<FRAME SRC="info.htm">
</FRAMESET>
</HTML>

This HTML code (2Frames.HTM) defines a page with two frames, organized as two columns. The first
column takes up 1/3 of the width of the screen and contains the HTML document label.HTM, and the
second takes up the other 2/3 and contains the document info.HTM. Figure 12.5 shows how Netscape
Navigator displays this page.

You could just as easily create 10 or more columns, or use the same syntax, substituting the ROWS
attribute to create 2 (or 10) rows. However, 10 columns or rows is way too many for any browser to
handle gracefully. Your pages should probably never have more than three or four rows or columns.

NOTE: If you want to display more information than three or four rows or columns, you should
probably be using tables rather than frames. Remember, frames are most useful when you want to add
an element of control in addition to formatting the display, or if you need to update displayed data
dynamically. Tables are best if all you want to do is format static data into rows and columns.
Too many frames can actually crash your browser. For a real-world example (if you don't mind your
browser program crashing) check out http://www.newdream.net/crash/ (see Figure 12.6).

A Simple Rectangular Grid of Frames

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
128
 Shree M .& N. Virani Science College
A regular rectangular grid of rows and columns is just about as easy to implement as a rows-only or
columns-only arrangement:

<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="*, 2*" COLS="20%, 30%, 40%">
<FRAME SRC="labela.htm">
<FRAME SRC="labelb.htm">
<FRAME SRC="labelc.htm">
<FRAME SRC="infoa.htm">
<FRAME SRC="infob.htm">
<FRAME SRC="infoc.htm">
</FRAMESET>
</HTML>

This example (2by3Grid.HTM) creates a grid with two rows and three columns (see Figure 12.7).
Because you defined a set of six frames, you've provided six FRAME definitions. Note that they fill in by
rows. That is, the first FRAME goes in the first defined column in the first row, the second frame follows
across in the second column, and the third finishes out the last column in the first row. The last three
frames then fill in the columns of the second row going across.

Also, note that the math didn't work out very well, since the percentage values in the COLS definition
only add up to 90 percent. No problem, because the browser has adjusted all the columns
proportionally to make up the difference.

Creating a Complex Grid of Frames

A bit tougher is the problem of creating a more complex grid of frames. For that, return to the example
that opened this discussion (see Figure 12.4):

<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="25%,50%,25%">
<FRAME SRC="header.htm">
<FRAMESET COLS="25%,75%">
<FRAME SRC="label.htm">
<FRAME SRC="info.htm">
</FRAMESET>
<FRAME SRC="footer.htm">
</FRAMESET>
<NOFRAMES>
Your browser cannot display frames.
</NOFRAMES>
</HTML>

This example (Frames1.HTM) makes use of nested FRAMESET containers. The outside set creates three
rows, with 25 percent, 50 percent, and 25 percent of the window height, respectively:

<FRAMESET ROWS="25%,50%,25%">

Within this definition, the first and last rows are simple frames:
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
129
 Shree M .& N. Virani Science College
<FRAME SRC="header.htm">
<FRAME SRC="footer.htm">

Each of these rows runs the entire width of the screen. The first row at the top of the screen takes up 25
percent of the screen height, and the third row at the bottom of the screen also takes up 25 percent of
the screen height.

In between however, is this nested FRAMESET container:

<FRAMESET COLS="25%,75%">
<FRAME SRC="label.htm">
<FRAME SRC="info.htm">
</FRAMESET>

This FRAMESET defines two columns that split the middle row of the screen. The row these two
columns reside in takes up 50 percent of the total screen height, as defined in the middle row value for
the outside FRAMESET container. The left column uses 25 percent of the screen width, while the right
column occupies the other 75 percent of the screen width.

The frames for the columns are defined within the set of FRAMESET tags, which include the column
definitions, while the frame definitions for the first and last rows are outside the nested FRAMESET
command, but within the exterior FRAMESET, in their proper order.

This is not as confusing if you think of an entire nested FRAMESET block as a single <FRAME> tag. In
this example, the outside FRAMESET block sets up a situation in which you have three rows. Each must
be filled. In this case, they are filled by a FRAME, then a nested FRAMESET two columns wide, then
another FRAME.

By now (if you are a perverse programming-type person) you may be asking yourself, "I wonder if it is
possible for a FRAME to use as its SRC a document that is, itself, a FRAMESET?" The answer is "Yes." In
this case, you simply use the <FRAME> tag to point to an HTML document that is the FRAMESET you
would have otherwise used in place of the FRAME.

Redefine the previous example (which used nested FRAMESETs) in terms of referenced FRAME
documents instead. All you're doing is moving the nested FRAMESET to its own document. Here's the
first (outside) file (Frames2.HTM):

<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="25%,50%,25%">
<FRAME SRC="header.htm">
<FRAME SRC="nested.htm">
<FRAME SRC="footer.htm">
</FRAMESET>
<NOFRAMES>
Your browser cannot display frames.
</NOFRAMES>
</HTML>

And here's the second (inside) file (Nested.HTM):

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
130
 Shree M .& N. Virani Science College
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="25%,75%">
<FRAME SRC="label.htm">
<FRAME SRC="info.htm">
</FRAMESET>
</HTML>

In this case, the top and bottom rows behave as before. But the second row in the "outside" file is now
just a simple FRAME definition like the others. However, the "inside" file that its SRC points to is
Frameset.HTM, which you created with a FRAMESET all its own. When inserted into the original
FRAMESET, it behaves just as if it appeared there verbatim. The resulting screen is identical to the
original example (compare Figure 12.8 to Figure 12.4).

CAUTION: Though it's possible to create nested FRAMESETs by using <FRAME> tags that call the same
URL, it certainly isn't a good idea. This is called infinite recursion, which creates an infinite loop in a
computer that consumes all memory and crashes the machine. Fortunately, frames-aware browsers
check for this--if an SRC URL is the same as any of its ancestors it's ignored, just as if there were no
SRC attribute at all.

By using nested FRAMESET containers in clever combinations, it is possible to create just about any grid
of frames you can dream up. But remember that you're trying to create a friendly, useful interface, not
show off how clever you can be with frames.

NOTE: In Netscape Navigator 2.0, the toolbar's Back button didn't back you out of a frame, it backed
you out of the whole FRAMESET to the previous page.
With versions 3.0 and above--as well as within Internet Explorer--pressing the Back button returns you
to the previous state of the currently selected frame.
To navigate forward or backward within a frame, make sure you make the frame active first by
clicking in it somewhere, then use the Forward or Back buttons or menu selections to navigate within
that frame.

Modifying a Frame's Look and Feel

Now that you understand how framesets are used to create various grids of frames, take a look at some
of the attributes that modify how frames look and feel.

Frame Margins

The FRAME attributes MARGINWIDTH and MARGINHEIGHT give you control over the width of the frame's
interior margins. They both look like this:

MARGINWIDTH="value"

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

131
 Shree M .& N. Virani Science College

value is always a number, and always represents an absolute value in pixels. For example:

<FRAME MARGINHEIGHT="5" MARGINWIDTH="7">

would create a frame with top and bottom interior margins five pixels wide, and left and right margins
seven pixels wide. Remember, you're talking interior margins here, not borders. MARGINWIDTH and
MARGINHEIGHT define a space within the frame within which content will not appear. Border widths are
set automatically by the browser, or by the BORDER attribute, which is discussed later in this chapter in
the "Frame Borders" section.

Frame Scrollbars

Your frames will automatically have scrollbars if the content you've specified for them is too big to fit
the frame. Sometimes this ruins your page's aesthetics, so you need a way to control them. That's what
the SCROLLING attribute of the <FRAME> tag is for. Here's the format:

<FRAME SCROLLING="yes|no|auto">

There are three valid values for SCROLLING: Yes, No, and Auto. Auto is assumed if there is no
SCROLLING attribute in your FRAME definition. Yes forces the appearance of a scrollbar. No keeps a
scrollbar away at all costs. For example, this FRAME definition turns on scrollbars:

<FRAME SCROLLING=YES>

Frame Resizing

Frames are normally resizable by the user, but if you let the user drag your frames around, it can
quickly muck the look and feel of your beautifully designed frames. Therefore, you almost always
want to use the NORESIZE attribute of the <FRAME> tag to keep users from resizing your frames. Here's
how:

<FRAME NORESIZE>

That's it. No values. Of course, when you set NORESIZE for one frame, none of the adjacent frames can
be resized, either. Depending on your layout, using NORESIZE in a single frame will often be enough to
keep users from resizing all the frames on the screen.

When you move over a resizable frame border with the mouse cursor, it changes to a double-arrow
(see Figure 12.9), indicating that the frame can be resized. If you don't get the double-arrow, it means
that resizing has been turned off with the NORESIZE attribute. To resize a resizable frame, grab the
frame border by clicking and dragging it with your mouse to a new position.

TROUBLESHOOTING: I've created a frame using the NORESIZE attribute. What do I do about users
who are using small screens on which the entire contents of the frame may not fit? Your best bet is to
make sure the frame will hold all of its content at lower screen resolutions. That is, redesign the frame.
Otherwise, consider reenabling, resizing, or adding scrollbars to the frame.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

132
 Shree M .& N. Virani Science College
Figure 12.9 shows an example of a frames page in which the lower-left frame has had its
MARGINHEIGHT set to 50, MARGINWIDTH set to 100, and SCROLLING set to Yes. The NORESIZE attribute
has not been used, so you can see what the resizing cursor looks like.

Frame Borders

You use the BORDER, FRAMEBORDER, and BORDERCOLOR attributes to set the look and feel of the borders
for your frameset.

The BORDER attribute is used only with the <FRAMESET> tag, and sets the width of all the borders in the
frameset. It is assigned a value in pixels, like this:

<FRAMESET BORDER="5">

This example would set the width of the frame borders to 5 pixels. BORDER can be assigned a value of
0, in which case all the frames in your frameset will be borderless.

TIP: The default value of BORDER (that is, the value it assumes if there is no BORDER="n" attribute
specified for a given FRAMESET) is 5.

The FRAMEBORDER attribute can be used with either the <FRAMESET> or <FRAME> tag. It has two
legitimate values, YES and NO. If FRAMEBORDER="YES", then frame borders are drawn with a 3-D look.
If FRAMEBORDER="NO", frame borders are invisible, which really means that they are drawn in the
default background color of the browser.

The default value of FRAMEBORDER is YES, which means that browser programs generally display 3-D
frame borders.

The border for a frame will be invisible (not 3-D) only if FRAMEBORDER="NO" is set for all surrounding
frames.

TIP: To create a page with entirely borderless frames, set FRAMEBORDER="NO" and BORDER="0" in the
top FRAMESET definition.

The BORDERCOLOR attribute can be used with the FRAMESET tag or with the FRAME tag. BORDERCOLOR
can be assigned a named color value, or a hexadecimal RGB color value. Here's an example:

<FRAMESET BORDERCOLOR="red" ROWS="*,*">

<FRAME SRC="info.htm" BORDERCOLOR="#FF00FF">
<FRAME SRC="info.htm">
</FRAMESET>

In this example, the outer <FRAMESET> tag sets the BORDERCOLOR to red, one of the named colors for
most browsers. But the following <FRAME> tag sets BORDERCOLOR to the hexadecimal value #FF00FF

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

133
 Shree M .& N. Virani Science College
(which happens to be purple). The lowest level definition takes precedence. Though the FRAMESET
BORDERCOLOR is defined as red, the border color of the first frame is instead set to the hexadecimal
RGB value #FF00FF. The adjacent frame, which has no BORDERCOLOR definition, has a border of
#FF00FF on the edge it shares with the other frame, but a color of red on borders it does not share with
that frame.

NOTE: RGB hexadecimal color values are precise, but obscure. (Exactly what color is #FA10D7?)
Named colors are easier to comprehend, but not all browsers support the same color names. In general,
if you stick with the sixteen common color names listed here, you'll be safe: aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.

TIP: If two adjacent frames of the same priority attempt to define their own BORDERCOLOR, neither
takes effect. They revert to the BORDERCOLOR defined at the next higher FRAMESET level.

Figure 12.10 shows an example of using the BORDER, FRAMEBORDER, and BORDERCOLOR attributes to
control the look and feel of your frame borders. Note that the only frame to maintain the BORDERCOLOR
defined in the outside FRAMESET definition is the one in the upper-right, the only frame that doesn't
share a border with the leftmost center frame, which redefines the BORDERCOLOR. Actually, the
rightmost center frame would have also had a red border on the left, but it has had its left border turned
off by the FRAMEBORDER="NO" attribute it shares with the central frame. Note this complex interplay of
attributes carefully. If you use them often, their interrelationships are sure to throw you for a loop more
often than they make sense.

CAUTION: Microsoft Internet Explorer supports one more attribute for FRAMESET, called
FRAMESPACING. It is intended to define the space between frames, and can assume pixel values.
However, because Netscape Navigator and other browser programs don't support the FRAMESPACING
attribute, you are strongly advised against using it unless you are creating content for an audience that
uses Internet Explorer exclusively, and you have a good reason for having to specify the spacing
between frames.

NOTE: There are two more attributes for the <FRAME> tag: ONLOAD and ONUNLOAD. These are used with
scripting languages like VBScript and JavaScript to specify a script to run when a frame is loaded or
unloaded from a frameset. Scripting is covered in detail in Chapter 16, "Adding JavaScript and
VBScript to HTML."

Targeted Hyperlinks

Though you've examined in-depth how to create and nest framesets, and how to control the look and
feel of frames, you have yet to understand how to use frames to control navigation, which is its major
application. To use frames to their full advantage, you need to know how to name and target frames.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

134
 Shree M .& N. Virani Science College

Naming and Targeting Frames

The NAME attribute assigns a name to a frame that can be used to link to the frame, usually from other
frames in the same display. This example,

<FRAME SRC="info.htm" NAME="Joe">

creates a frame named "Joe," which can be referenced via a hyperlink like this:

<A HREF="moreinfo.htm" TARGET="Joe">Click Here to Jump to Joe</A>

Note the TARGET attribute in the hypertext link that references the name of your frame. When selected,
this hyperlink replaces the content of the named frame "Joe"--which was given the content file
info.HTM when it was created--with the content in the file moreinfo.HTM. Note that while a hyperlink
without a named TARGET replaces the content in its own window or frame with the content named in
the HREF attribute, a hyperlink with a named TARGET instead replaces the content in the targeted frame
or window with the content named in the HREF attribute. This is the only trick you need to know for
creating killer frames-based navigational systems. Of course, there are some fine points.

Legitimate Names

If you don't create an explicit name for a frame, it simply has no name, and you won't be able to use
links in one frame to open documents or images in another. You'll want to name all frames whose
content will be changed by clicking a link in a different frame.

All frame names must begin with an alphanumeric character. Don't use an underscore (_) as the first
character in a frame name. Other than that, you're pretty much on your own.

However, there are four reserved implicit names built into HTML, and all of them do start with an
underscore. These are listed in Table 12.1. All other names starting with an underscore are ignored.

Table 12.1 Reserved Implicit Frame Names

Name Purpose
_blank Load content directed to this name into a new, unnamed window. This name is used to
completely wipe out the current frameset and start with a new, blank window.
_self Load content directed to this name into the calling frame.
_parent Load content directed to this link to the calling frame's parent frameset window. If it has no
parent frameset, this is the same as using the name _self.
_top Load content directed to this link to the top level frameset related to the calling frame. If the
calling frame is already the top level, this is the same as using the name _self.

Here are a few examples to help clarify how these reserved names work.

If a frame contains the following link, then clicking the link launches a new, unnamed browser display
window that contains the content defined in stuff.HTM. This can be a simple HTML document, or an
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
135
 Shree M .& N. Virani Science College
entirely new FRAMESET definition. Whichever, this call wipes the slate clean and starts completely
over.

<A HREF="stuff.htm" TARGET="_blank">

If a frame contains the following link, then clicking the link will simply cause the frame which
contains the link to clear, and its content will be replaced with whatever is in stuff.htm.

<A HREF="stuff.htm" TARGET="_self">

If a frame contains the following link, the frameset that contains the frame that contains this link will
be replaced by stuff.HTM.

<A HREF="stuff.htm" TARGET="_parent">

Finally, if a frame contains the following link, clicking the link replaces the entire browser window
with the contents of stuff.HTM.

<A HREF="stuff.htm" TARGET="_top">

NOTE: Hyperlinks using the <A> or anchor tag aren't the only tags that can make use of the TARGET
attribute. The <AREA>, <FORM>, and <BASE> tags also use the TARGET attribute, and can be used
effectively to extend and expand the utility of named frames.
Remember, too, that windows can also be named by using the TARGET attribute within the <A> tag;
using named windows in conjunction with named frames adds a whole new dimension to HTML
document navigation.

Updating More than One Frame at a Time

You've seen that you can click a link in one frame to change the content in another. First you name the
target frame using the NAME attribute of the <FRAME> tag when creating the target frame. You then use
the TARGET attribute of the <A> hyperlink tag when defining the link, as in this example:

<FRAME SRC="info.htm" NAME="Joe">

<A HREF="moreinfo.htm" TARGET="Joe">Click Here to Jump to Joe</A>

The first line of HTML is used in the frame definition document, and the second line is used in the
document that links to the first.

You've also seen that you can use special implicit names to target some frames and framesets,
depending on their relationship to the frame that contains the calling link.

But what if you want to update more than one frame by clicking a single link? This is possible if you
set up your document correctly. The key is to update a frameset, not a single frame.

To do this, create a subframeset that is contained in its own file, as was done earlier in the example
shown in Figure 12.8. If you recall, you began with an HTML document that included one frameset
nested inside another:
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
136
 Shree M .& N. Virani Science College
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="25%,50%,25%">
<FRAME SRC="header.htm">
<FRAMESET COLS="25%,75%">
<FRAME SRC="label.htm">
<FRAME SRC="info.htm">
</FRAMESET>
<FRAME SRC="footer.htm">
</FRAMESET>
</HTML>

Then you took the nested frameset out and put it into its own file.

Here's the original file, with the nested frameset replaced by the FRAME definition pointing to the
second file, nested.HTM. Note that you named this frame this time using the NAME attribute, calling it
"Inner":

<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="25%,50%,25%">
<FRAME SRC="header.htm">
<FRAME SRC="nested.htm" NAME="Inner">
<FRAME SRC="TestLink.htm">
</FRAMESET>
</HTML>

Also note the last FRAME SRC file has been renamed TestLink.HTM--this file contains the targeted link
you want to test. Call this modified file NameTest.HTM. Now here's the file (nested.HTM) that the
frame named Inner calls:

<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="25%,75%">
<FRAME SRC="label.htm">
<FRAME SRC="info.htm">
</FRAMESET>
</HTML>

The file that occupies the bottom frame contains the file TestLink.HTM, which is listed here:

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<A HREF="NewStuff.htm" TARGET="Inner">Click me</A>
to put new stuff into the upper center frameset.
</BODY>
</HTML>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

137
 Shree M .& N. Virani Science College
The frameset created by these two files (and their associated content files) is shown in Figure 12.11.

When the link Click me in the bottom window is clicked, it replaces the two frames in the center
frameset (which was defined in the file nested.HTM) with new information from the document
NewStuff.HTM. Say this is the content of NewStuff.HTM:

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
Here is some NEW STUFF!
</BODY>
</HTML>

When you click the link in the bottom window, you get the result shown in Figure 12.12.

With one click, you've replaced the two frames of the central frameset with a single frame containing
new content. You could just as easily have replaced the two frames with two new frames--the same
size, or different sizes--or with three frames, or with a whole new frameset. All you would have to do
is define the new frameset in your new content file, NewStuff.HTM.

If you're careful and think ahead when defining your framesets, you can easily create hyperlinks that
can update almost any combination of frames with a single mouse click.

TROUBLESHOOTING: I have two frames that don't have the same parent frameset. Can I
update both of them with one hyperlink? Yes. You have to write a JavaScript or VBScript
application to handle them. In fact, this is how Netscape Communications has done multiframe updates
from single hyperlinks on its own Web site.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

138
 Shree M .& N. Virani Science College

Chapter 12
Collecting Input with Forms

Introducing HTML Forms

Forms are one of the most popular, interactive features on the World Wide Web (WWW). They enable
users to interact with the text and graphics that are displayed on your machine. You can make forms
with simple yes or no questions; you can make highly complex order forms; or you can make forms for
people to send you comments.

You create forms by providing a number of fields in which a user can enter information or choose an
option. Then, when the user submits the form, the information is returned to a server-side script. A
script is a short program that is written specifically for each form. You can create scripts to do any
number of things. You can also handle the contents of a form by using a client-side script, which you
learn about in Part VI, "Scripting on the Web Server."

HTML forms give you the opportunity to gather information from people reading your Web page. Just
as HTML provides many mechanisms for outputting information, the use of HTML forms enables
input. These forms can be used to solicit free-form text information, get answers to yes or no questions,
and get answers from a set of options.

You can add forms to your Web page with many different results in mind. You can do something
simple, like asking visitors to sign a guest book or comment about your Web site. You can also use
forms to gather input for a discussion group or, when combined with a secure method of transmission,
take online orders for your $10 widgets. These and many other results can be achieved with HTML
forms.

Working with HTML Forms Tags

The HTML tags you use to display forms are straightforward. There are three types of tags for creating
fields: <TEXTAREA>, <SELECT>, and <INPUT>. You can put any number of these tags between the
<FORM> and </FORM> container tags. The following is a brief description of each tag (you'll learn more
about each a bit later in this chapter):

<TEXTAREA> This tag defines a field in which the end user can type multiple lines of text.
<SELECT> This tag enables the end user to choose among a number of options in either a scroll box
or pop-up menu.
<INPUT> This tag provides all of the other types of input: single lines of text, radio buttons, check
boxes, and the buttons to submit or clear the form.

<FORM>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

139
 Shree M .& N. Virani Science College
The <FORM> tag comes at the beginning of any form. When you create a <FORM> tag, you also define
the script it uses and how it sends data using the ACTION and METHOD attributes:

ACTION This attribute points the form to an URL that will accept the form's information and do
something with it. If you don't specify an ACTION, it sends the information back to the same
URL the page came from.
METHOD This attribute tells the form how to send its information back to the script. The most common
method is POST, which sends all the information from the form separately from the URL. The
other option for METHOD is GET, which attaches the information from the form to the end of the
URL.

The following is an example of a <FORM> tag:

<FORM METHOD="POST" ACTION="/cgi-bin/comment_script">

...
</FORM>

This example says that you want the browser to send the completed form to the script
comment_script in the cgi-bin directory on your server and to use the POST method to send it.

CAUTION: You can put any number of forms on the same HTML page, but be careful not to nest one
form inside another. If you put in a <FORM> tag before finishing the last one, that line is ignored and all
the inputs for your second form are assumed to go with the first one.

<TEXTAREA>

With <TEXTAREA>, you can provide a field for someone to enter multiple lines of information. By
default, a <TEXTAREA> form shows a blank field four rows long and 40 characters wide. You can make
it any size you want by using the ROWS and COLS attributes in the tag. You can also specify some
default text by simply entering it between the <TEXTAREA> and </TEXTAREA> tags.

TIP: <TEXTAREA> fields are ideal for having users enter comments or lengthy information because
they can type as much as they want in the field.

The options for the <TEXTAREA> tag are as follows:

NAME This is required. It defines the name for the data.

ROWS This sets the number of rows in the field.
COLS This sets the width of the field in characters.
Default Any text between the <TEXTAREA> and </TEXTAREA> tags is used as default text and
text shows up inside the field.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

140
 Shree M .& N. Virani Science College

While the ROWS and COLS attributes are not required, there is no default value for these that you are
guaranteed to get on every Web browser, so it's always a good idea to set them. Listing 13.1 shows you
an example using the <TEXTAREA> tag. Figure 13.1 shows you what this example looks like.

TIP: All input fields in a form--<TEXTAREA>, <SELECT>, and <INPUT>--must each have a NAME defined
for its information.

Listing 13.1 TEXTAREA.HTM--<TEXTAREA> Default Text

<HTML>
<HEAD>
<TITLE>TEXTAREA.HTM</TITLE>
</HEAD>
<BODY>
<FORM>
<TEXTAREA NAME="comments" ROWS=4 COLS=40>Default text
1 2 3 ...
</TEXTAREA>
</FORM>
</BODY>
</HTML>

<SELECT>

The <SELECT> element shows a list of choices in either a pop-up menu or a scrolling list. It's set up as
an opening and closing tag with a number of choices listed in between. Just like the <TEXTAREA>
element, the <SELECT> tag requires you to define a name. You can specify how many choices to show
at once by using the SIZE attribute.

The options for the <SELECT> element are as follows:

NAME This is required. It defines the name for the data.

SIZE This attribute determines how many choices to show. If you omit SIZE or set it to 1, the
choices are shown as a drop-down list. If you set it to 2 or higher, it shows the choices in a
scroll box. If you set SIZE larger than the number of choices you have within <SELECT>, a
nothing choice is added. When the end user chooses this, it's returned as an empty field.
MULTIPLE This allows multiple selections. If you specify multiple, a scrolling window displays--
regardless of the number of choices or the setting of SIZE.

TIP: Some WWW browsers don't properly display a scrolling window if the SIZE is 2 or 3. In that
case, leave it as a drop-down list or think about using the <INPUT> field's radio buttons.

You present the choices the end user can make within the <SELECT> and </SELECT> tags. The choices
are listed inside the <OPTION> tag and don't allow any other HTML markup.

The options for the <OPTION> tag are the following:

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

141
 Shree M .& N. Virani Science College
VALUE This is the value to be assigned for the choice, which is what is sent back to the script, and
doesn't have to be the same as what is presented to the end user.
SELECTED If you want one of the choices to be a default, use the SELECTED option in the <OPTION> tag.

Consider Listing 13.2, the results of which are shown in Figures 13.2 and 13.3. This HTML adds a list
called network to the document that contains four options: ethernet, token16, token5, and localtalk.

Listing 13.2 SELECT1.HTM--Selection via Drop-Down List

<HTML>
<HEAD>
<TITLE>SELECT1.HTM</TITLE>
</HEAD>
<BODY>
What type of connection:
<FORM>
<SELECT NAME="network">
<OPTION SELECTED VALUE="ethernet"> Ethernet
<OPTION VALUE="token16"> Token Ring - 16MB
<OPTION VALUE="token4"> Token Ring - 4MB
<OPTION VALUE="localtalk"> LocalTalk
</SELECT>
</FORM>
</BODY>
</HTML>

Suppose you set the tag as shown in Listing 13.3, the result of which is shown in Figure 13.4.

Listing 13.3 SELECT2.HTM--Selection via Scrollable List

<HTML>
<HEAD>
<TITLE>SELECT2.HTM</TITLE>
</HEAD>
<BODY>
<FORM>
What type of Connection:
<SELECT MULTIPLE NAME="network">
<OPTION SELECTED VALUE="ethernet"> Ethernet
<OPTION VALUE="token16"> Token Ring - 16MB
<OPTION VALUE="token4"> Token Ring - 4MB
<OPTION VALUE="localtalk"> LocalTalk
</SELECT>
</FORM>
</BODY>
</HTML>

TROUBLESHOOTING: I know the most common choices I want to present, but I want to allow
people to enter their own value if they want to. How can I do that? Your best bet is to display the
common choices in a <SELECT> box or pop-up menu, with one of the options set to Other. Then
include an <INPUT> text field or a <TEXTAREA> field right after the list of choices (see Listing 13.4).

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

142
 Shree M .& N. Virani Science College

Listing 13.4 SELECT3.HTM--Selection with Other Option

<HTML>
<HEAD>
<TITLE>SELECT3.HTM</TITLE>
</HEAD>
<BODY>
<FORM>
What type of Connection:
<SELECT MULTIPLE NAME="network">
<OPTION SELECTED VALUE="ethernet"> Ethernet
<OPTION VALUE="token16"> Token Ring - 16MB
<OPTION VALUE="token4"> Token Ring - 4MB
<OPTION VALUE="localtalk"> LocalTalk
<OPTION VALUE="other"> Other...
</SELECT>
<BR>
If other, please specify:<INPUT TYPE="text" NAME="network_other">
</FORM>
</BODY>
</HTML>

TIP: You can use the <SELECT> tag as a navigational aid in your Web pages. You can provide a
number of URLs in a list. The user can then choose one, click a Submit button, and have the server-
side or client-side script jump to the URL indicated by that choice. Microsoft uses this method to direct
users to different international Web sites (see http://www.microsoft.com).

<INPUT>

<INPUT>, unlike <TEXTAREA> and <SELECT>, is a single tag option for gathering information. <INPUT>
contains all of the other options for acquiring information, including simple text fields, password
fields, radio buttons, check boxes, and the buttons to submit and reset the form.

The attributes for the <INPUT> tag are the following:

NAME This defines the name for the data. This field is required for all the types of input except
Submit and Clear.
SIZE This is the size of the input field in number of characters for text or password.
MAXLENGTH This specifies the maximum number of characters to be allowed for a text or password
field.
VALUE For a text or password field, it defines the default text displayed. For a check box or radio
button, it specifies the value that is returned to the server if the box or button is selected.
For the Submit and Reset buttons, it defines the text inside the button.
CHECKED This sets a check box or radio button to on. It has no meaning for any other type of
<INPUT> tag.
TYPE This sets the type of input field you want to display. (See the types in the following
section.)

Setting the <INPUT> Tag's TYPE

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
143
 Shree M .& N. Virani Science College
This section describes the possible values for the INPUT tag's TYPE attribute. TEXT TEXT, the default
input type, gathers a simple line of text. You can use the attributes NAME (this is required), SIZE,
MAXLENGTH, and VALUE with TEXT. For example, consider Listing 13.5, the result of which is shown in
Figure 13.6.

Listing 13.5 INPUT1.HTM--Text Input Box

<HTML>
<HEAD>
<TITLE>INPUT1.HTM</TITLE>
</HEAD>
<BODY>
<FORM>
A Phone Number: <INPUT TYPE="text" NAME="Phone" SIZE="15" MAXLENGTH="12">
</FORM>
</BODY>
</HTML>

TROUBLESHOOTING: I want to let someone put in a very long URL, but the screen is not wide
enough. How do I do that? A good way to enable someone to put in an extremely long text line is to
simply set the size to 60 or 80 characters and not set a maximum length. This allows a user to put in a
very long string, even if you can't see it all at once.

PASSWORD PASSWORD, a modified TEXT field, displays typed characters as bullets instead of the
characters actually typed. Possible attributes to include with the type PASSWORD include NAME
(required), SIZE, MAXLENGTH, and VALUE. Consider Listing 13.6, the result of which is shown in Figure
13.7.

Listing 13.6 INPUT2.HTM--Text Input Box with No Echo

<HTML>
<HEAD>
<TITLE>INPUT2.HTM</TITLE>
</HEAD>
<BODY>
<FORM>
Enter the secret word: <INPUT TYPE="password" NAME="secret_word" Size="30"
MAXLENGTH="30">
</FORM>
</BODY>
</HTML>

CHECKBOX CHECKBOX displays a simple check box that can be checked or left empty; use a check
box when the choice is yes or no and doesn't depend on anything else. Possible attributes to include
with the TYPE text include NAME (required), VALUE, and CHECKED (which defaults the check box as
checked). Consider Listing 13.7, the result of which is shown in Figure 13.8. Check boxes are useful
when you have a list of options, more than one of which can be selected at a time.

Listing 13.7 CHECK BOX.HTM--Check Box Form Input

<HTML>
<HEAD>
<TITLE>CHECKBOX.HTM</TITLE>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

144
 Shree M .& N. Virani Science College
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="checkbox" NAME="checkbox1" VALUE="checkbox_value1">
A checkbox
<INPUT TYPE="checkbox" NAME="checkbox2" VALUE="checkbox_value2"
CHECKED>A pre-selected checkbox
</FORM>
</BODY>
</HTML>

CAUTION: You want to be especially careful when using check boxes and radio buttons in HTML
documents with custom backgrounds or background colors. Depending on the Web browser used,
check boxes and radio buttons sometimes do not show up with dark backgrounds.

RADIO RADIO is a more complex version of a check box, allowing only one of a related set to be
chosen. You can group radio buttons together by using the NAME attribute; this keeps all buttons in the
same group under one NAME. Possible attributes to include with the TYPE text include NAME (required),
VALUE, and CHECKED. Consider Listing 13.8, the result of which is shown in Figure 13.9.

Listing 13.8 RADIO1.HTM--Radio Button Form Input

<HTML>
<HEAD>
<TITLE>RADIO1.HTM</TITLE>
</HEAD>
<BODY>
Form #1:
<FORM>
<INPUT TYPE="radio" NAME="choice" VALUE="choice1"> Yes.
<INPUT TYPE="radio" NAME="choice" VALUE="choice2"> No.
</FORM>
<HR>
Form #2:
<FORM>
<INPUT TYPE="radio" NAME="choice" VALUE="choice1" CHECKED> Yes.
<INPUT TYPE="radio" NAME="choice" VALUE="choice2"> No.
</FORM>
</BODY>
</HTML>

Listing 13.9 is a variation on Listing 13.8. The result is shown in Figure 13.10.

Listing 13.9 RADIO2.HTM--Radio Button Form Input with More Choices

<HTML>
<HEAD>
<TITLE>RADIO2.HTM</TITLE>
</HEAD>
<BODY>
<FORM>
One Choice:<BR>
<INPUT TYPE="radio" NAME="choice1" VALUE="choice1" CHECKED>(1)
<INPUT TYPE="radio" NAME="choice1" VALUE="choice2">(2)
<INPUT TYPE="radio" NAME="choice1" VALUE="choice3">(3)

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

145
 Shree M .& N. Virani Science College
<BR>
One Choice:<BR>
<INPUT TYPE="radio" NAME="choice2" VALUE="choice1" CHECKED>(1)
<INPUT TYPE="radio" NAME="choice2" VALUE="choice2">(2)
<INPUT TYPE="radio" NAME="choice2" VALUE="choice3">(3)
<INPUT TYPE="radio" NAME="choice2" VALUE="choice4">(4)
<INPUT TYPE="radio" NAME="choice2" VALUE="choice5">(5)
</FORM>
</BODY>
</HTML>

TIP: If you want to provide a long list of choices, use the <SELECT> tag so the choice doesn't take up
as much space on the page.

CAUTION: If you don't specify a set of radio buttons or check boxes with one of the values as
CHECKED, then you could receive an empty field for that <INPUT> name.

RESET RESET displays a push button with the preset function of clearing all the data in the form to its
original value. You can use the VALUE attribute with the RESET tag to provide text other than Reset (the
default) for the button. For example, consider Listing 13.10. The result is shown in Figure 13.11.

Listing 13.10 RESET.HTM--Form Reset Button

<HTML>
<HEAD>
<TITLE>RESET.HTM</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="reset">
<BR>
<INPUT TYPE="reset" VALUE="Clear that form!">
</FORM>
</BODY>
</HTML>

SUBMIT SUBMIT displays a push button with the preset function of sending the data in the form to the
server to be processed by a server-side script. You can use the VALUE attribute with SUBMIT to provide
text other than Submit Query (the default) for the button. Consider, for example, Listing 13.11. The
result is shown in Figure 13.12.

Listing 13.11 SUBMIT.HTM--Form Submit Button

<HTML>
<HEAD>
<TITLE>SUBMIT.HTM</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="submit">
<BR>
<INPUT TYPE="submit" VALUE="Send in the data!">
</FORM>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

146
 Shree M .& N. Virani Science College
</BODY>
</HTML>

Formatting and Designing Forms

Forms can be easy to read, simple one- or two-entry affairs with little to display; they can also be
terrifically complex devices. As your forms get more complex, you need to carefully consider their
layout. Think about how to make it obvious that certain titles are connected to certain fields and think
about how to make your forms easy for anyone to use. People are often put off by complex forms that
are hard to understand, so it's in your best interest to make them easy and fun to use--regardless of their
complexity.

Using Line Break Tags

When you markup HTML documents, you usually just let the words wrap across the screen. Although
this flexibility is wonderful to have for segments of text, it can make reading a form incredibly
difficult. A quick and simple solution is to include the line break tag, <BR>, to move something to the
next line.

Forcing Fields onto Separate Lines If you want to have two fields, Name and E-Mail Address, for
example, you can simply mark them up as shown in Listing 13.12.

Listing 13.12 LB1.HTM--Forms Without Line Breaks

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Line Break Tags</H1>
<FORM>
Name: <INPUT NAME="name" SIZE="30">
E-Mail Address: <INPUT NAME="email" SIZE="40">
</FORM>
</BODY>
</HTML>

Although this might look great now, it can wrap strangely on some WWW browsers and look shabby
when displayed (see Figure 13.13).

To split these lines and make them more readable, you need to include the line break tag, <BR>,
between them, as shown in Listing 13.13.

Listing 13.13 LB2.HTM--Line Breaks Within Forms

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Line Break Tags</H1>
<FORM>
Name: <INPUT NAME="name" SIZE="30">

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

147
 Shree M .& N. Virani Science College
<BR>
E-Mail Address: <INPUT NAME="email" SIZE="40">
</FORM>
</BODY>
</HTML>

Adding the <BR> tag between the two fields forces the browser to wrap the field to the next line,
regardless of the width of the screen. The result of Listing 13.13 is shown in Figure 13.14.

NOTE: The wrapping feature of HTML can work for you to help keep a form small in size. If you
have several multiple-choice items that could take up huge amounts of space on your form, you can try
to keep them small and let them wrap closely together on the page.
If you're using the <SELECT> tag, the width of the pop-up menu on the screen is directly related to the
words in the options to be selected. If you keep all the words small, you can provide a relatively large
number of choices in a small area.

Working with Large Entry Fields If you're working with long text entry fields or perhaps with a
<TEXTAREA> field, it's often easier to put the text just above the field and then separate the different
areas with paragraph breaks. For example, if you have a text input line that is very long or a long field
description, it doesn't work well to put them side by side. Also, if you want to leave a space for
comments, it's easier--and looks nicer--to have the field description just above the comment area. This
makes it appear that there's more space to write in. Listing 13.14 is an example of this sort of design.
The result of this code is shown in Figure 13.15.

Listing 13.14 LARGE.HTM--Large Fields for Text Input

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Line Break Tags</H1>
<FORM>
Please enter the new title for the message:<BR>
<INPUT NAME="name" SIZE="40">
<HR>
Your comments:<BR>
<TEXTAREA ROWS="6" COLS="70"></TEXTAREA>
</FORM>
</BODY>
</HTML>

NOTE: Most browsers automatically wrap a large field to the next line, treating it like an image.
Because you don't know how wide (or narrow!) the client screen is, take steps to ensure the form will
look as you want. If, for example, you want the field to be on the next line, put in a <BR> tag to make
sure it will be!

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

148
 Shree M .& N. Virani Science College
Using the Preformatted Text Tag to Line Up Forms A common sight on many forms is simple text
entry fields aligned haphazardly. A great trick for aligning text fields is to use the <PRE> tag. This
ensures that some spaces appear before the field.

CAUTION: If you're using the <PRE> tags to line up fields, don't use any other HTML tags inside that
area. Although the tags won't show up, they'll ruin the effect of lining everything up perfectly.

Listing 13.15 PRE1.HTM--Form Fields Not Aligned by Default

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Using PRE tags</H1>
<FORM>
Name: <INPUT TYPE="text" NAME="name" SIZE="50"><BR>
E-Mail: <INPUT TYPE="text" NAME="email" SIZE="50"><BR>
Street Address: <INPUT TYPE="text" NAME="street1" SIZE="30"><BR>
<INPUT TYPE="text" NAME="street2" SIZE="30"><BR>
City: <INPUT TYPE="text" NAME="city" SIZE="50"><BR>
State: <INPUT TYPE="text" NAME="state" SIZE="2"><BR>
Zip: <INPUT TYPE="text" NAME="zip" SIZE="10">
</FORM>
</BODY>
</HTML>

Listing 13.16 PRE2.HTM--Aligning Form Fields with Preformatted Text

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Using PRE tags</H1>
<FORM>
<PRE>
Name: <INPUT TYPE="text" NAME="name" SIZE="50">
E-Mail: <INPUT TYPE="text" NAME="email" SIZE="50">
Street Address: <INPUT TYPE="text" NAME="street1" SIZE="30">
<INPUT TYPE="text" NAME="street2" SIZE="30">
City: <INPUT TYPE="text" NAME="city" SIZE="50">
State: <INPUT TYPE="text" NAME="state" SIZE="2">
Zip: <INPUT TYPE="text" NAME="zip" SIZE="10">
</PRE>
</FORM>
</BODY>
</HTML>

CAUTION: Make sure you keep the size of the fields smaller than the general browser, or your lines
will wrap off the screen. If an input field has to be large, you can use a line break to put the field on its
own line.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

149
 Shree M .& N. Virani Science College
TROUBLESHOOTING: When I set up the preformatted text, it doesn't come out aligned in my
HTML document! Why doesn't it match up? In some text editors, the width of each letter on the
screen isn't the same. If you're creating HTML documents with a text editor or word processor, make
sure you use a monospaced font such as Courier New (each character, including spaces, takes up
exactly the same amount of space). That should solve the problem.

Using HTML Tables to Line Up Forms Another way to line up form fields is to place them in an
HTML table. This can produce an effect similar to using preformatted text but, because you are using
regular HTML rather than preformatted text, you can also include other HTML constructs within the
form. So, by using a table rather than preformatted text to align your form, you're also able to include
images, hypertext links, or other HTML elements as part of the form. Listing 13.17 is an example of
the entry form shown in Figures 13.16 and 13.17, formatted using an HTML table. The result of this
code is displayed in Figure 13.18.

Listing 13.17 TABLE.HTM--Aligning Form Fields with Tables

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Using HTML Tables</H1>
<FORM>
<TABLE>
<TR><TD>Name:</TD><TD><INPUT TYPE="text"
NAME="name" SIZE="50"></TD></TR>
<TR><TD>E-Mail:</TD><TD><INPUT TYPE="text"
NAME="email" SIZE="50"></TD></TR>
<TR><TD>Street Address:</TD><TD><INPUT TYPE="text"
NAME="street1" SIZE="30"></TD></TR>
<TR><TD></TD><TD><INPUT TYPE="text" NAME="street2"
SIZE="30"></TD></TR>
<TR><TD>City:</TD><TD><INPUT TYPE="text" NAME="city"
SIZE="50"></TD></TR>
<TR><TD>State:</TD><TD><INPUT TYPE="text" NAME="state"
SIZE="2"></TD></TR>
<TR><TD>Zip:</TD><TD><INPUT TYPE="text" NAME="zip"
SIZE="10"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>

TIP: Some people use browsers, particularly text-only ones, that don't support tables. If you use tables
with your forms, consider including an alternate page without tables for these folks. See Chapter 11,
"Formatting Content with Tables," for alternatives for browsers that don't support tables.

Using Paragraph Marks to Separate Form Sections If you have a large form with different
sections, it's handy to separate those sections. The paragraph container tag, <P>...</P>, provides a
way of adding some space without making the delineation so hard that it appears to be another form.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

150
 Shree M .& N. Virani Science College
Note that Web browsers also allow you to use the <P> opening tag without the </P> closing tag to give
identical results.

For example, a simple comment form might have places for a name and an e-mail address, but these
might not be a required part of the form. In this case, separate the comment part of the form from the
area that's optional. It's also possible to make it more obvious by simply making some comments in the
form, such as a small heading titled Optional. A simple comment form with optional Name and E-Mail
fields can have the code shown in Listing 13.18.

Listing 13.18 P.HTM--Using Paragraphs to Improve Spacing

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Using &lt;P&gt; tags</H1>
<FORM>
<PRE>
<I><B>Optional:</B></I>
Name: <INPUT TYPE="text" NAME="name" SIZE="50">
E-Mail: <INPUT TYPE="text" NAME="email" SIZE="50">
</PRE>
<P>
Your comments:<BR>
<TEXTAREA ROWS="6" COLS="70"></TEXTAREA>
</FORM>
</BODY>
</HTML>

Using List Tags

There are a few occasions when line breaks and paragraph tags can't set up the form exactly as you'd
like. At these times, list tags can provide just the right look! The best use of list tags is for indenting
and numbering text.

Indenting Form Entries with Descriptive Lists On the WWW, it's common to see order forms for
merchandise. Finding the method of payment is a perfect use for descriptive list tags to lay out the
choices. Indenting some items more than others makes the options obvious and easy to read.

NOTE: When you lay out lists, consider indenting the areas in your HTML documents that will be
indented on-screen. This makes it easier to remember to finish with the descriptive list tag, </DL>.

Listing 13.19 LIST1.HTM--Organizing Forms Using a Descriptive List

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Descriptive List Tags</H1>
<FORM>
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
151
 Shree M .& N. Virani Science College
<DL>
<DT>How would you like to pay for this?
<DD><INPUT NAME="pay" TYPE="radio" VALUE="cash" CHECKED>Cash
<DD><INPUT NAME="pay" TYPE="radio" VALUE="check">Check
<DD><INPUT NAME="pay" TYPE="radio" VALUE="debit">Debit Card
<DL>
<DT>Credit Card
<DD><INPUT NAME="pay" TYPE="radio" VALUE="mc">Mastercard
<DD><INPUT NAME="pay" TYPE="radio" VALUE="visa">Visa
<DD><INPUT NAME="pay" TYPE="radio" VALUE="disc">Discover
<DD><INPUT NAME="pay" TYPE="radio" VALUE="ae">American Express
</DL>
</DL>
</FORM>
</BODY>
</HTML>

Using Ordered Lists to Number Fields It's easy to display a numbered list if you use the ordered list
tag, <OL>. Listing 13.20 uses the <OL> tag to automatically number the fields. The result of this code is
shown in Figure 13.21.

Listing 13.20 LIST2.HTM--Organizing Forms by Using an Ordered List

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Ordered List Tags</H1>
<FORM>
What are your three favorite books?
<OL>
<LI><INPUT NAME="1st" SIZE="20">
<LI><INPUT NAME="2nd" SIZE="20">
<LI><INPUT NAME="3rd" SIZE="20">
</OL>
</FORM>
</BODY>
</HTML>

Check Box and Radio Button Layouts

Check boxes and radio buttons can provide a great deal of simple yes or no input. They can also be
some of the hardest parts of a form to understand if they're not laid out correctly. There are three
straightforward methods of layout: setting up the check boxes and radio buttons in a line horizontally,
using a list to order them vertically, or setting them up in a grid pattern.

Setting Up Check Boxes or Radio Buttons in a Line Probably the easiest method of layout is listing
the check boxes in a line horizontally (see Listing 13.21). It has the benefits of being very simple to set
up, relatively compact on the browser, and easy to understand. The only caution is to make sure there
aren't too many items for one line. The intent of the form might not be obvious if you let check boxes
wrap unintentionally. The result of Listing 13.21, which specifies a horizontal line of radio buttons, is
shown in Figure 13.22.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

152
 Shree M .& N. Virani Science College

Listing 13.21 BUTTON1.HTM--Organizing Forms, Check Boxes, and Radio

Buttons
<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Checkboxes and Radio Buttons</H1>
<FORM>
What size would you like?<BR>
<INPUT NAME="size" TYPE="radio" VALUE="sm">Small
<INPUT NAME="size" TYPE="radio" VALUE="md">Medium
<INPUT NAME="size" TYPE="radio" VALUE="lg">Large
<INPUT NAME="size" TYPE="radio" VALUE="x">X-Large
<INPUT NAME="size" TYPE="radio" VALUE="xx">XX-Large
</FORM>
</BODY>
</HTML>

TIP: When creating a Web page with a line of buttons, check it with your Web browser set to the
width of a 640x480 screen to make sure your line doesn't wrap.

Lists of Check Boxes When the choices get more complex than a simple line selection, it's best to
forgo compactness and spread out the choices in a list, as specified in Listing 13.22. The result of using
a descriptive list in this code is shown in Figure 13.23.

Listing 13.22 BUTTON2.HTM--Organizing Forms Buttons by Using Lists

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Checkboxes and Radio Buttons</H1>
<FORM>
<DL>
<DT>What machines do you work on?
<DD><INPUT NAME="mac" TYPE="checkbox">Macintosh
<DD><INPUT NAME="pc" TYPE="checkbox">IBM Compatible PC
<DL>
<DT>UNIX Workstation
<DD><INPUT NAME="sun" TYPE="checkbox">Sun
<DD><INPUT NAME="sgi" TYPE="checkbox">SGI
<DD><INPUT NAME="next" TYPE="checkbox">NeXT
<DD><INPUT NAME="aix" TYPE="checkbox">AIX
<DD><INPUT NAME="lin" TYPE="checkbox">Linux
<DD><INPUT NAME="other" TYPE="checkbox">Other...
</DL>
</DL>
</FORM>
</BODY>
</HTML>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

153
 Shree M .& N. Virani Science College
Making a Grid The most complex method for displaying check boxes is in a grid. Using tables, you
can space out the display to create a grid effect (see Listing 13.23). You can also create a grid of radio
buttons by substituting radio for checkbox in the <INPUT> tags. The result of setting up the grid in
Listing 13.23 is shown in Figure 13.24.

Listing 13.23 GRID.HTM--Creating a Grid of Buttons by Using Tables

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>Checkboxes and Radio Buttons</H1>
<FORM>
What combinations?
<TABLE>
<TR><TD></TD><TD>Red</TD><TD>Blue</TD></TR>
<TR><TD>Small</TD><TD><INPUT NAME="sr" TYPE="checkbox"></TD>
<TD><INPUT NAME="sb" TYPE="checkbox"></TD></TR>
<TR><TD>Medium</TD><TD><INPUT NAME="mr" TYPE="checkbox"></TD>
<TD><INPUT NAME="mb" TYPE="checkbox"></TD></TR>
<TR><TD>Large</TD><TD><INPUT NAME="lr" TYPE="checkbox"></TD>
<TD><INPUT NAME="lb" TYPE="checkbox"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Multiple Forms in a Document

It's quite possible to put multiple forms in a single document; it often makes the document more
concise and easier to understand. An example of using multiple forms is a document with a number of
different methods for searching. From one form, you can choose to do a search from any of a number
of locations by having each <FORM> point to a different search method.

TIP: Also consider using multiple forms when your form is too large to fit on one or two screens; this
makes it easier for your readers to use the form.

When including multiple forms in a document, visibly separate them to make them easier to
understand. A common way to break up a form is to use the horizontal rule tag, <HR>, or a wide image
that looks like a horizontal rule in an <IMG> tag. Put line breaks before and after the tags. For example,
Listing 13.24 shows how to separate three forms by using <HR> tags to break them up. The result of
this code is shown in Figure 13.25.

Listing 13.24 MULTIPLE.HTM--Using Multiple Forms in a Single HTML

Document
<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

154
 Shree M .& N. Virani Science College
<BODY>
<H1>Multiple Forms in a Document</H1>
<FORM>
What size would you like?<BR>
<INPUT NAME="size" TYPE="radio" VALUE="sm">:Small
<INPUT NAME="size" TYPE="radio" VALUE="md">:Medium
<INPUT NAME="size" TYPE="radio" VALUE="lg">:Large
<INPUT NAME="size" TYPE="radio" VALUE="x">:X-Large
<INPUT NAME="size" TYPE="radio" VALUE="xx">:XX-Large
<P>
<INPUT TYPE="submit">
</FORM>
<HR>
<FORM>
<TABLE>
<TR><TD>Name:</TD><TD><INPUT TYPE="text" NAME="name"
SIZE="50"></TD></TR>
<TR><TD>E-Mail:</TD><TD><INPUT TYPE="text" NAME="email"
SIZE="50"></TD></TR>
<TR><TD>Street Address:</TD><TD><INPUT TYPE="text"
NAME="street1" SIZE="30"></TD></TR>
<TR><TD></TD><TD><INPUT TYPE="text" NAME="street2"
SIZE="30"></TD></TR>
<TR><TD>City:</TD><TD><INPUT TYPE="text" NAME="city"
SIZE="50"></TD></TR>
<TR><TD>State:</TD><TD><INPUT TYPE="text" NAME="state"
SIZE="2"></TD></TR>
<TR><TD>Zip:</TD><TD><INPUT TYPE="text" NAME="zip"
SIZE="10"></TD></TR>
</TABLE>
<P>
<INPUT TYPE="submit">
</FORM>
<HR>
<FORM>
<DL>
<DT>How would you like to pay for this?
<DD><INPUT NAME="pay" TYPE="radio" VALUE="cash" CHECKED>Cash
<DD><INPUT NAME="pay" TYPE="radio" VALUE="check">Check
<DD><INPUT NAME="pay" TYPE="radio" VALUE="debit">Debit Card
<DL>
<DT>Credit Card
<DD><INPUT NAME="pay" TYPE="radio" VALUE="mc">Mastercard
<DD><INPUT NAME="pay" TYPE="radio" VALUE="visa">Visa
<DD><INPUT NAME="pay" TYPE="radio" VALUE="disc">Discover
<DD><INPUT NAME="pay" TYPE="radio" VALUE="ae">American Express
</DL>
</DL>
<P>
<INPUT TYPE="submit">
</FORM>
</BODY>
</HTML>

TROUBLESHOOTING: I put two forms in one document, but I only see one. Why aren't both
showing up? Check to make sure you finished one form before beginning another. If you didn't
include the </FORM> tag to stop the first form, the second <FORM> tag is just ignored.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

155
 Shree M .& N. Virani Science College

Combining Forms with Tables

As discussed earlier in this section, forms can be used very effectively with HTML tables, allowing
more control of the positioning of different fields. Listing 13.25 shows an address entry form that uses
a table to align the different fields. The resulting Web page is shown in Figure 13.26.

Listing 13.25 TABLE2.HTM--Combining Forms and Tables

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>More HTML Tables and Forms</H1>
<FORM>
<TABLE>
<TR><TD ALIGN=RIGHT>Name:</TD>
<TD COLSPAN=4><INPUT TYPE="text" NAME="name" SIZE="40">
</TD></TR>
<TR><TD ALIGN=RIGHT>Street Address:</TD>
<TD COLSPAN=4><INPUT TYPE="text" NAME="street1" SIZE="40">
</TD></TR>
<TR><TD ALIGN=RIGHT>City, State, Zip:</TD>
<TD><INPUT TYPE="text" NAME="city" SIZE="30"></TD><TD>,</TD>
<TD><INPUT TYPE="text" NAME="state" SIZE="2"></TD>
<TD><INPUT TYPE="text" NAME="zip" SIZE="15"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>

This idea can be taken even further, including other form elements such as check boxes or radio
buttons, to allow the user more input options. A further refinement of the address entry form, allowing
the user to input both a home and business address and specify which is preferred, is shown in Listing
13.26--the corresponding Web page is shown in Figure 13.26.

Listing 13.26 TABLE3.HTM--More on Combining Forms and Tables

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>More HTML Tables and Forms</H1>
<FORM>
<TABLE>
<TR><TH ALIGN=LEFT COLSPAN=5>HOME ADDRESS</TH><TD><EM>Preferred? </EM
<TR><TD ALIGN=RIGHT>Name:</TD>
<TD COLSPAN=4><INPUT TYPE="text" NAME="name" SIZE="40"></TD>
<TD ALIGN=CENTER><INPUT TYPE="radio" NAME="pref" VALUE="home"> </
<TR><TD ALIGN=RIGHT>Street Address:</TD>
<TD COLSPAN=4><INPUT TYPE="text" NAME="street1" SIZE="40"></TD> </TR
<TR><TD ALIGN=RIGHT>City, State, Zip:</TD>
<TD><INPUT TYPE="text" NAME="city" SIZE="25"></TD><TD>,</TD>
<TD><INPUT TYPE="text" NAME="state" SIZE="2"></TD>
<TD><INPUT TYPE="text" NAME="zip" SIZE="15"></TD></TR>
<TR><TD COLSPAN=6><HR></TD></TR>
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
156
 Shree M .& N. Virani Science College
<TR><TH ALIGN=LEFT COLSPAN=5>BUSINESS ADDRESS</
TH><TD><EM>Preferred?</EM></TR>
<TR><TD ALIGN=RIGHT>Name:</TD>
<TD COLSPAN=4><INPUT TYPE="text" NAME="name" SIZE="40"></TD>
<TD ALIGN=CENTER><INPUT TYPE="radio" NAME="pref"
VALUE="bus"></TD></TR>
<TR><TD ALIGN=RIGHT>Street Address:</TD>
<TD COLSPAN=4><INPUT TYPE="text" NAME="street1" SIZE="40"></TD>
</TR>
<TR><TD ALIGN=RIGHT>City, State, Zip:</TD>
<TD><INPUT TYPE="text" NAME="city" SIZE="25"></TD><TD>,</TD>
<TD><INPUT TYPE="text" NAME="state" SIZE="2"></TD>
<TD><INPUT TYPE="text" NAME="zip" SIZE="15"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>

One final refinement of the address entry form (see Figure 13.28) substitutes different submit buttons
for the radio buttons, shown in Figures 13.26 and 13.27. This allows the user to enter the information
on the form and then specify which is the preferred address by his choice of submit button. Specifying
a NAME attribute for the submit button enables the choice of button to be determined, as shown in
Listing 13.27.

Listing 13.27 TABLE4.HTM--Another Example of Forms and Tables

<HTML>
<HEAD>
<TITLE>Form Layout and Design</TITLE>
</HEAD>
<BODY>
<H1>More HTML Tables and Forms</H1>
<FORM>
<TABLE>
<TR><TH ALIGN=LEFT COLSPAN=5>HOME ADDRESS</TH>
<TD ALIGN=CENTER><EM>Preferred?</EM></TR>
<TR><TD ALIGN=RIGHT>Name:</TD>
<TD COLSPAN=4><INPUT TYPE="text" NAME="name" SIZE="40"></TD>
<TD ALIGN=CENTER><INPUT TYPE="submit" NAME="home" VALUE="Home">
</TD></TR>
<TR><TD ALIGN=RIGHT>Street Address:</TD>
<TD COLSPAN=4><INPUT TYPE="text" NAME="street1" SIZE="40">
</TD></TR>
<TR><TD ALIGN=RIGHT>City, State, Zip:</TD>
<TD><INPUT TYPE="text" NAME="city" SIZE="25"></TD><TD>,</TD>
<TD><INPUT TYPE="text" NAME="state" SIZE="2"></TD>
<TD><INPUT TYPE="text" NAME="zip" SIZE="15"></TD></TR>
<TR><TD COLSPAN=6><HR></TD></TR>
<TR><TH ALIGN=LEFT COLSPAN=5>BUSINESS ADDRESS</TH>
<TD ALIGN=CENTER><EM>Preferred?</EM></TR>
<TR><TD ALIGN=RIGHT>Name:</TD>
<TD COLSPAN=4><INPUT TYPE="text" NAME="name" SIZE="40"></TD>
<TD ALIGN=CENTER><INPUT TYPE="submit" NAME="bus"
VALUE="Business"></TD></TR>
<TR><TD ALIGN=RIGHT>Street Address:</TD>
<TD COLSPAN=4><INPUT TYPE="text" NAME="street1" SIZE="40">
</TD></TR>
<TR><TD ALIGN=RIGHT>City, State, Zip:</TD>
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
157
 Shree M .& N. Virani Science College
<TD><INPUT TYPE="text" NAME="city" SIZE="25"></TD><TD>,
</TD>
<TD><INPUT TYPE="text" NAME="state" SIZE="2"></TD>
<TD><INPUT TYPE="text" NAME="zip" SIZE="15"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Final Notes on Form Layouts

When you're creating forms, it's always a good idea to keep the form on a single page. Further, because
you can't control what browser someone uses to look at your pages, you need to observe some general
guidelines, as follows:

• If your form is very short, keep it under 14 lines. This ensures that it will fit on one page in
most browsers. It doesn't always work, but it does create a compact page that's easy for most
people to see. A good trick for keeping the pages compact is using <SELECT> tags with the size
set to 1 (to show a pop-up menu) or 3 or 4 (for a small scrolling window for multiple choices)
instead of having large numbers of check boxes and radio buttons.

• If your form is large (more than two pages on any browser), don't put the Submit or Reset
buttons in the middle of the form. If you do, someone reading the form might not continue
beyond those buttons and miss an important part of the form.

• Put the fields on your form in a logical order. This sounds obvious, but it's easy to forget.

• Think about your forms well before you start creating them. If you know what choices you
want to provide, it makes your final layout much easier.

HTML 4.0 Forms Additions

As useful as HTML forms have been, they have suffered from a variety of shortcomings and
limitations, ranging from a lack of hotkey support to their reliance on only two control buttons. With
the release of the HTML 4.0 specification, all that has changed. Just about every feature requested by a
feature-hungry public has been added to HTML 4.0 forms.

NOTE: As of this writing, the HTML 4.0 specification is brand new and neither Netscape
Communicator nor Microsoft Internet Explorer support the all-new forms tags or attributes discussed
in this section. So not only can't we show you example screens, we're also passing along a caution not
to use these new tags and attributes until these browser programs add support for them.

New Tag Attributes

ACCESSKEY is a new attribute for use with the LABEL, A, and CAPTION tags. With it, you can define a
single case-insensitive hotkey for activating a forms element. For example,

<LABEL ACCESSKEY="N">Name<INPUT TYPE="TEXT" NAME=USER></LABEL>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
158
 Shree M .& N. Virani Science College
would create a text input field for inputting a name. When the page containing this form element is
displayed, pressing the Alt+N key combination on the keyboard (Cmd+N on the Macintosh) would
change the focus immediately to this field. The user could input her name without having to first select
the field by clicking it with the mouse or stepping to it using the Tab key. As an indicator to the user,
the "N" in the label "Name" is underlined.

The new DISABLED attribute for INPUT, TEXTAREA, SELECT, OPTION, OBJECT, LABEL, and BUTTON turns
off an element and grays it out on the screen. (The element is also skipped when tabbing between
elements.) It should be used when a form element is currently inappropriate or if you want to skip a
field for some reason. Once DISABLED, the only way to turn an element back on is by using an
associated script, such as JavaScript.

NOTE: It is not immediately clear in the HTML 4.0 specification just exactly what you need to do to
make such changes dynamically via a script. Hopefully this will become known as HTML 4.0 is
implemented in the major browsers.

The TEXTAREA tag and the INPUT tag's TEXT and PASSWORD types have a new READONLY attribute that
can be used to prohibit user input in those fields. If you want to pass back some data that you've preset
for a user, this is one way to do it. At the same time, you're making sure that data is known to the end
user but is not modifiable by him. Again, you can use a script to change this state dynamically if you
wish.

ONCLICK, ONFOCUS, ONBLUR, ONSELECT, and ONCHANGE are new attributes that function as placeholders
for scripts that run when each of the indicated events occurs. The ONCLICK script runs when a mouse
click occurs over an element, ONFOCUS when it becomes the input focus, ONBLUR when the focus moves
away from the element, ONSELECT when chosen, and ONCHANGE when data in the field has changed.
These exciting new attributes open up a world of new possibilities. Again, the specifics of their
implementation await browsers that can interpret these new attributes.

Ever wanted to add those nifty pop-up ToolTips to your online forms? Now you'll be able to, thanks to
the new TITLE attribute, which is available for use with all form input elements. Just specify
TITLE="ToolTip Here" for any element.

Under HTML 3.2, there was no specified order for tabbing through elements. You hit the Tab key and
the form's input focus advanced to whatever element was next in line by virtue of where it appeared in
the HTML source. Unfortunately, that didn't always correspond to how those elements were arranged
on the page. Now, thanks to the new HTML 4.0 TABINDEX attribute, that's going to change. It's easy to
add--just add TABINDEX=n to each element, where n is equal to its place in the tabbing sequence. n
must be an integer, but it can also have a negative value, which indicates that the element should be
left out of the tabbing sequence. If two elements have the same TABINDEX value, they are assigned a
tabbing sequence based on their order in the HTML source. Likewise, elements without a TABINDEX
value are inserted into the sequence based on their source positions. As with HTML 3.2 forms,
Shift+Tab moves the focus backwards through the order. Also, the Enter key is still used to activate an
element that has the current focus.

New HTML 4.0 Forms Tags

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
159
 Shree M .& N. Virani Science College
In addition to the new attributes discussed in the previous section, HTML 4.0 also adds several new
forms-related tags.

The new LABEL tag is used to associate a label with a form element. It is useful for creating a user
interface for selecting a form control. For example,

<LABEL FOR=NAME>Name</LABEL>
Lots of stuff goes here...
<INPUT TYPE=TEXT NAME=YOURNAME ID=NAME>

Clicking the NAME link in the LABEL will jump the end user to the text input field with the ID of NAME,
as indicated by the FOR=NAME attribute of the LABEL tag, and will shift the focus to that field.

The LABEL element supports the use of the ID, CLASS, LANG, and DIR attributes for internationalization
and access for those with disabilities, and also makes use of the STYLE attribute for accessing style
sheets. The new TITLE, DISABLED, ACCESSKEY, ONCLICK, ONFOCUS, and ONBLUR attributes discussed in
the previous section are also all supported by LABEL.

HTML 3.2 forms supported only the Submit and Reset buttons. HTML 4.0 forms improve on this with
a user-definable BUTTON element. The BUTTON tag works in conjunction with the new ONCLICK
attribute, which associates clicking the button with executing a script. The DISABLED, TABINDEX,
ONFOCUS, and ONBLUR attributes are also supported by BUTTON. <BUTTON> is a container, so it must be
used with an associated </BUTTON> tag. In between, you can include any HTML to define the button
contents, as in this example:

<BUTTON ONCLICK="script.scp">
<IMG SRC="ButtonImage.gif">
Click this button to do something great!
</BUTTON>

Finally, the new FIELDSET container is used in conjunction with a new CAPTION container to group
form elements, as in this example:

<FIELDSET>
<CAPTION ACCESSKEY=N TABINDEX=1>Name Fields</CAPTION>
<LABEL ACCESSKEY=F><INPUT TYPE=TEXT NAME=FirstName>First Name</LABEL><BR>
<LABEL ACCESSKEY=L><INPUT TYPE=TEXT NAME=LastName>Last Name</LABEL>
</FIELDSET>

Note that the CAPTION container is used to define a tab order (via the TABINDEX attribute) for the entire
FIELDSET group. Likewise, the FIELDSET gets a separate ACCESSKEY than that given to each of the
individual elements.

FIELDSET containers are nestable, but each should contain only a single CAPTION field.

FIELDSET also supports use of the new TITLE attribute.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

160
 Shree M .& N. Virani Science College

Chapter 13
Inserting Objects into a Web Page

Three Ways to Go

There are three ways to put multimedia objects into your pages: browser plug-ins, ActiveX controls,
and Java applets. You'll briefly examine each in this chapter.

You'll also learn how to use HTML tags to insert any of these three kinds of multimedia "players" into
your HTML documents. Let's start by looking at browser plug-ins.

Getting to Know Plug-ins

When a user starts a Web browser--Netscape Communicator, for example--on her desktop, it checks
the appropriate folder (see Table 14.1) to see what plug-ins are installed. Communicator makes a note
of each plug-in and its MIME type, which indicates the type of file with which the plug-in is
associated.

Table 14.1 etscape Plug-in Folders

Platform Folder
MAC Plug-ins, directly under the Netscape folder
Windows Plugins, directly under the Netscape folder.
UNIX /usr/local/netscape/plugins

When the user opens a Web page that embeds a multimedia file, Communicator notes the MIME type
of the file, finds a plug-in that can open that type of file (if available), and loads the plug-in, passing it
the file. The drawing in Figure 14.1 illustrates this concept for you. The most important concept for
you to understand is that you, as the HTML author, embed a multimedia file into your Web page,
while a plug-in on the user's computer actually displays that file in the Web browser.

TIP: The information contained in this section is valid for all plug-ins, whether you use the <EMBED>o
tag or <OBJECT> tag to insert them.

Embedded Plug-ins

Embedded plug-ins are visible on the Web page and display inline with the rest of the Web page's
content. Embedded plug-ins always occupy a rectangular area on the Web page (see Figure 14.2). You,
as the HTML author, embed the multimedia file in the Web page, and the plug-in, on the user's
computer, displays that file inside the Web page.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

161
 Shree M .& N. Virani Science College
Embedded plug-ins can be hidden. That is, the HTML author can designate that the plug-in is not to
display anything on the Web page. For example, you might not want to display anything on the Web
page if you're embedding a sound file.

Full-Page Plug-ins

Other plug-ins are full page; they don't occupy space in the Web page itself, but occupy the entire
browser window. After the user has finished interacting with the plug-in, she can click Back on
Communicator's Navigation toolbar to return to the original Web page.

Inserting Plug-ins into Your Web Page

With the latest Web browsers, and thanks to the efforts of the World Wide Web Consortium (W3C),
you have two different ways to embed plug-ins into your Web page. You can use the old sturdy
<EMBED> tag, or you can use the new HTML 4.0 standard <OBJECT> tag. Making this choice is a lot
harder than actually writing the HTML for either. Here are some thoughts on the subject, though, that
might help you:

• Use the <EMBED> tag if you're concerned with compatibility across a variety of Web browsers.
This Netscape extension has been in place since Navigator 2.0 and thus many other Web
browsers have adopted its use.

• Use the <OBJECT> tag if (1) you want to be hip to the latest HTML technology, (2) you want to
conform to the HTML 4.0 standard, or (3) you want to use the <OBJECT> tag's apology section
to supply content for those browser's that don't support plug-ins. The simple truth of the matter
is that both Microsoft and Netscape are adopting the use of the <OBJECT> tag for this kind of
work, so you might want to start doing it yourself.

<EMBED>

You have a fair amount of control over any plug-in that you embed into your Web page using the
<EMBED> tag. You can control its size, for example, or whether or not the browser actually displays the
plug-in. Many plug-ins also allow you to set additional attributes that control them. Table 14.2
describes each attribute of this tag.

Table 14.2 <EMBED> Attributes

Attribute Description
ALIGN=value LEFT--align text flush left RIGHT--align text flush right TOP--align text with top
BOTTOM--align text with bottom
BORDER=num Width of frame's border in pixels
FRAMEBORDER=value NO--do not draw border around frame
HEIGHT=num Height of frame as defined by UNITS
HIDDEN Makes the plug-in invisible on the page
HSPACE=num Width of left and right margin in pixels

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

162
 Shree M .& N. Virani Science College

NAME=name Name of the embedded object

PALETTE=value FOREGROUND--foreground colors BACKGROUND--background colors
PLUGINSPAGE=URL URL of the Web page that contains instructions for installing the plug-in if the
user does not have it installed
SRC=URL URL that indicates the location of the embedded multimedia data file; if you
don't use this attribute, use TYPE
TYPE=type MIME type of the embedded object, which determines the plug-in that loads; use
TYPE for plug-ins that require no data
UNITS=value PIXELS--use pixels as a unit of measurement, while EN--use half the normal
display font point size
VSPACE=num Width of top and bottom margin in pixels
WIDTH=num Width of frame as defined by UNITS

Many plug-ins also have private attributes. Communicator looks for all of the attributes described in
Table 14.2 when it parses the <EMBED> tag, but it ignores other attributes. When Communicator loads
the associated plug-in, it passes the plug-in all of the attributes it found. For example, many audio
plug-ins have a private attribute called AUTOSTART, which indicates whether or not you want the plug-
in to immediately start playing the sound file when it loads.

<OBJECT>

W3C has made the <OBJECT> tag an official part of HTML 4.0. Many vendors, however, including
Microsoft and Netscape, had already adopted the <OBJECT> tag before the specification was finished.
You can get the full details on this tag at W3C's Web site: http://www.w3.org/pub/WWW/TR/WD-
object.

Using the <OBJECT> tag is just a bit more complicated than using the <EMBED> tag. You have to form
the <OBJECT> tag as described in Table 14.3, specify any required parameters using the <PARAM> tag,
and provide content for those users who have browsers with no <OBJECT> support or who don't have
the required plug-in. This topic is covered in depth later in this chapter, in the ActiveX section.

Table 14.3 <OBJECT> Attributes for Plug-ins

Attribute Description
BORDER=num Width of frame's border in pixels
CLASSID=URL URL of the plug-in, on the Internet, for installing the plug-in if the user does not have it
installed
DATA=URL URL of the object's data file
HEIGHT=num Height of frame as defined by UNITS
HSPACE=num Width of left and right margin in pixels
ID=name Name of the embedded object
TYPE=type MIME type of the embedded object, which determines the plug-in that loads; use TYPE
for plug-ins that require no data
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
163
 Shree M .& N. Virani Science College

TYPE=type MIME type of the object's data file

VSPACE=num Width of top and bottom margin in pixels
WIDTH=num Width of frame as defined by UNITS

Sandwiching <PARAM> Tags You can provide additional properties to the plug-in, if the plug-in
supports them, using the <PARAM> tag. You embed a <PARAM> tag between the beginning and ending
<OBJECT> tags for each property you want to provide to the plug-in, like this:

<OBJECT definition>
<PARAM NAME="LOOP" VALUE="TRUE">
</OBJECT>

Using the <PARAM> tag is similar to using private properties with the <EMBED> tag. The NAME attribute is
the name of the property and the VALUE attribute is the actual value that you want to assign to that
name. Thus, the following PARAM tag is equivalent to the AUTOSTART attribute in the <EMBED> tag you
see just below it: <PARAM NAME=AUTOSTART VALUE=TRUE>

<EMBED blah-blah-blah AUTOSTART=TRUE> Providing Alternate Content (Apology) Not all

browsers or users are created equal. Some browsers won't know what in the world to do with the
<OBJECT> tag. Still, some users won't have access to a plug-in that you've embedded into your Web
page. The authors of the <OBJECT> tag working draft have created a way for you to handle this
situation, however: alternative content. Some folks also call the alternative content the apology section.
Here's how it works:

• If the browser can handle the <OBJECT> tag and it has a plug-in available for the specified data
type, the browser parses the <OBJECT> tag and any <PARAM> tags contained within it. It ignores
everything else, though.

• If the browser can handle the <OBJECT> tag, but it doesn't have a plug-in available for the
specified data type, the browser ignores the <OBJECT> tag and the <PARAM> tags contained
within it. The browser does parse any other content contained within the <OBJECT> tag,
however.

• If the browser can't handle the <OBJECT> tag, it won't be able to handle the <PARAM> tag either.
By design, the browser will not parse those tags, but will parse anything else in its path,
including content inside the <OBJECT> tag.

Consider Listing 14.1, for example, which is an example of inserting a multimedia file into a Web
page. If the browser doesn't do the <OBJECT> tag, all it's going to parse is the <A>, <IMG>, and </A>
tags. If the browser does support the <OBJECT> tag, but it doesn't have a plug-in for MOX files, it
ignores the <OBJECT> and <PARAM> tags, parsing the same tags as in the previous case. Last, if the
browser does support the <OBJECT> tag and it has a plug-in for MOX files, it parses the <OBJECT> and
<PARAM> tags, ignoring everything else.

Listing 14.1 Alternative Content

<OBJECT DATA=MYFILE.MOX WIDTH=100 HEIGHT=100>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

164
 Shree M .& N. Virani Science College
<PARAM NAME=AUTOSTART VALUE=TRUE>
<A HREF="get-mox.htm">
<IMG SRC=need-mox.gif WIDTH=100 HEIGHT=100>
</A>
</OBJECT>

Some Real-World Plug-In Examples

A Word with Our Lawyer, Please?

Copyright laws protect the author of a work from other folks making illegal copies of it. You can't
photocopy a magazine article or make a duplicate of a musical CD, for example, without violating the
copyright law. If you do, the organization that owns the copyright can pursue the matter in court
(translation: sue the pants off of you).

The copyright laws apply to electronic expression as much as they do to other forms. Thus, the Web
pages and multimedia files you find on the Internet can have copyrights with just as much weight as
the copyright on this book. Ignorance isn't an excuse, either. Just because you didn't know that a file
was copyrighted doesn't protect you when the copyright hits the fan.

So, having scared you a bit, how do you know if an image is indeed copyrighted? It's not quite as cut-
and-dry as looking for a copyright symbol (audio clips don't have one). In fact, there is no requirement
that work contain a copyright symbol in order to be protected by the copyright laws. You can check a
few other places for a file's copyright status, however:

• Look for a copyright notice in the document that originally contained the file. This is
the most likely place to find such a notice.

• If you're using a video from a library, check the library's license agreement to see what
kind of rights you have for redistribution.

• Look for any comments embedded within the file that might include a copyright notice.
Most audio and video editors allow you to edit and view embedded comments.

Before you can jazz up your Web page with multimedia, you have to make or find it. Making your
own multimedia content isn't always practical, especially for a novice. You have to work within a
third-party authoring environment such as a video editor and sometimes have to purchase additional
hardware such as a video camera. You can learn more about creating your own multimedia content in
Part IV, "Serving Multimedia Content."

Using free or store-bought multimedia libraries is the quickest route to multimedia bliss. Most
multimedia libraries come with a combination of graphical images, sound clips, and video clips. Some
libraries do include a handful of Shockwave files, too. While you can find a whole host of different
plug-ins, you'll mostly use audio and video in your Web page. It's a reality for most HTML authors,
and that's good for two reasons:

• Netscape Communicator, and most other Web browsers, have the built-in capability to play
audio and display video files. Netscape has LiveAudio and LiveVideo, for example. Microsoft
has ActiveMovie.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

165
 Shree M .& N. Virani Science College
• Audio and video files are relatively easy to come by. You can download files from the Internet,
or you can purchase CD-ROMs from your local computer retailer that contain a selection of
both file types. Yes, you can also make these files on your own, which you learn how to do in
Part IV, "Serving Multimedia Content."

NOTE: To see a list of those types of plug-ins that come with Communicator, choose Help, About
Plug-ins from Communicator's main menu. You'll see a list similar to that shown in Figure 14.3.

Audio

Netscape Communicator comes with an audio plug-in called LiveAudio. As shown in Figure 14.4,
LiveAudio has a very simple user interface that the user can interact with to stop, play, and pause the
audio clip, as well as adjust the volume. LiveAudio handles a majority of the sound files you'll find on
the Internet. It definitely handles WAV and MIDI files, which takes care of most of the audio content
you'll embed into your Web page.

NOTE: A user must have a sound card and speakers installed in her computer in order to hear any
audio clips embedded in your Web page. Chances are good that most users do have a sound card these
days, though.

You can use either the <EMBED> or the <OBJECT> tag to embed an audio file into your Web page.
Listing 14.2 shows you an example of a Web page that uses <EMBED>. The SRC, WIDTH, and HEIGHT
attributes are the same ones you learned about earlier in this chapter. If you want the user to see the
audio controls, you must use the WIDTH and HEIGHT attributes. The best size for the controls is 144
pixels wide and 60 pixels high.

Listing 14.2 Embedding Audio Using <EMBED>

<HTML>
<HEAD>
<TITLE>Embedding audio using EMBED</TITLE>
</HEAD>
<BODY>
<EMBED SRC=EXAMPLE.WAV HEIGHT=60 WIDTH=144>
</BODY>
</HTML>

Listing 14.3 shows you the same example using the <OBJECT> tag. The parameters are the same as
those for the <EMBED> tag, except that you use the DATA attribute instead of the SRC attribute to specify
the source file.

Listing 14.3 Embedding Audio Using <OBJECT>

<HTML>
<HEAD>
<TITLE>Embedding audio using OBJECT</TITLE>
</HEAD>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

166
 Shree M .& N. Virani Science College
<BODY>
<OBJECT DATA=EXAMPLE.WAV WIDTH=144 HEIGHT=60>
</OBJECT>
</BODY>
</HTML>

LiveAudio supports several private attributes, each described in Table 14.4.

Table 14.4 LiveAudio's Private Attributes

Attribute Description
AUTOSTART=value TRUE--plays automatically FALSE--doesn't play automatically
AUTOLOAD=value TRUE--load clip automatically FALSE--don't load clip automatically
STARTTIME="mm:ss" Start time from beginning of clip
ENDTIME="mm:ss" End time from beginning of clip
VOLUME=num Initial value as a percentage
CONTROLS=value CONSOLE--display the console SMALLCONSOLE--display small console
PLAYBUTTON--display play button PAUSEBUTTON--display pause button
STOPBUTTON--display stop button VOLUMELEVER--display volume slider

TIP: Choose MIDI files over WAV files every chance you get. For the same file size, you can get a
much longer audio clip from a MIDI file than you can from a WAV file. It's more economical.

Video

Like audio, you can use the <EMBED> or <OBJECT> tag to embed a video into your Web page. Listing
14.4 shows you an example of a Web page that uses the <EMBED> tag to embed an AVI file into a Web
page. The SRC, WIDTH, and HEIGHT attributes are the same ones you learned about earlier in this
chapter.

Listing 14.4 Embedding a Video Using <EMBED>

<HTML>
<HEAD>
<TITLE>Embedding a video using EMBED</TITLE>
</HEAD>
<BODY>
<EMBED SRC=EXAMPLE.AVI WIDTH=150 HEIGHT=100>
</BODY>
</HTML>

Listing 14.5 shows you the same example using the <OBJECT> tag. Note that the parameters are the
same as those for the <EMBED> tag, except that you use the DATA attribute instead of the SRC attribute to
specify the source file. In this example, you see the <IMG> tag sandwiched in the object, which
provides alternative content for users who can't display videos. Figure 14.5 shows what this video
looks like in Communicator.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

167
 Shree M .& N. Virani Science College

Listing 14.5 Embedding a Video Using <OBJECT>

<HTML>
<HEAD>
<TITLE>Embedding a video using OBJECT</TITLE>
</HEAD>
<BODY>
<OBJECT DATA=EXAMPLE.AVI WIDTH=150 HEIGHT=100>
<IMG SRC=EXAMPLE.GIF WIDTH=150 HEIGHT=100>
</OBJECT>
</BODY>
</HTML>

AVI Files (LiveVideo) LiveVideo, which is the plug-in for AVI files, has some additional private
attributes that you can use to better control how the plug-in displays in the browser. You see those
attributes in Table 14.5.

Table 14.5 LiveVideo's Private Attributes

Attribute Description
AUTOSTART=value TRUE-- video starts automatically FALSE--video doesn't start automatically
LOOP=value TRUE--video plays repeatedly FALSE--video plays one time
CONTROLS=value TRUE--plug-in shows video controls FALSE--plug-in doesn't show video controls

TIP: Turn your favorite AVI video into an animated GIF. Download the GIF Construction Set from
Ziff-Davis (http://www.hotfiles.com), which converts an AVI file into an animated GIF frame by
frame. It cuts the size of the file in half, and allows the user to see the animation as the file loads from
the Web server.

MOV Files (QuickTime) The QuickTime plug-in included with Netscape Communicator also has
some private attributes that you can specify to control how it displays in the browser. You see those
attributes in Table 14.6.

Table 14.6 QuickTime's Private Attributes

Attribute Description
AUTOPLAY=value TRUE--automatically start FALSE--don't automatically start
CONTROLLER=value TRUE--display a toolbar FALSE--don't display a toolbar
LOOP=value TRUE--play video repeatedly FALSE--play video a single time
PLAYEVERYFRAME=value TRUE--play while downloading FALSE--don't play while downloading
HREF=URL URL to which the video is linked
TARGET=FRAME Targeted link for the video

Rewarding the User (Bandwidth)

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

168
 Shree M .& N. Virani Science College
Be considerate of those users who have slow connections to the Internet. A user who has a 28.8K
connection to the Internet, which is very common, will wait over four minutes for a 1M video to
download. A 1M video, on the other hand, plays only for a few seconds; thus, you're asking a user to
wait four minutes to view a few seconds of video--blah. The user will feel cheated unless it's a pretty
spectacular video clip. Mark Brown calls this the wait/reward ratio. Think of it this way: if the only
reward you get after waiting seven hours for Thanksgiving dinner is Kentucky Fried Chicken, you'd
feel a bit cheated.

The solution? Provide a link on your Web page to the video clip. If a user wants to see the video clip,
she can click on the link--it's her choice. For example, you might add a link to your Web page, with a
warning, that looks something like this: Take a look at this AVI video of my new Yorkie.

This video is 1M in size. At 14.4K, it'll take over nine minutes to download. At
28.8K it'll take over four minutes.

Finding Other Useful Plug-ins

You'll need to use a third-party plug-in if you want to embed multimedia content into your Web page
other than video, audio, and VRML--for example, Shockwave.

Netscape maintains a fairly comprehensive list of plug-ins. You'll find

this list at
http://home.netscape.com/comprod/products/navigator/version_2.0/plugins. Click one of
the categories (there are six: 3D and Animation; Business and Utilities; Presentations; Audio/Video;
Image Viewers; and What's New), and you'll see a list of plug-ins. For each plug-in, you'll see a
description and links to the vendor and example Web pages.

However, the ultimate resource for plug-ins is BrowserWatch

(http://browserwatch.iworld.com/plug-in.html, shown in Figure 14.6). You can view the list by
different categories: multimedia, graphics, sound, document, productivity, or VRML. You can also
view the list of plug-ins by platform: Macintosh, OS/2, UNIX, and Windows.

TIP: If you use a plug-in that the user isn't likely to already have installed, use the PLUGINSPAGE
attribute to point Communicator to the download page for that plug-in. Doing so will help
Communicator install the plug-in more or less automatically.

Inserting ActiveX Controls

ActiveX controls are small applications that run only on Windows platforms and only in Microsoft
Internet Explorer (IE).

That's a bit of an oversimplification, actually. There is a plug-in that lets ActiveX controls run in
Netscape Navigator, if you really want to use them. However, it's best to assume if you use ActiveX
controls that your target audience will be using IE on a Windows platform.

That having been said, it should be noted that there is one very good reason for using ActiveX controls
in your HTML documents: if you know they're going to be viewed on a Windows system in Internet
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
169
 Shree M .& N. Virani Science College
Explorer, ActiveX controls are the fastest, most efficient objects you can use for multimedia and
interactive controls. Why? Because ActiveX controls are written to run natively on those machines.
Where plug-ins are often big and unwieldy, and Java applets must be interpreted before they are run,
ActiveX controls download automatically, reside on your system, and run efficiently under Windows.

You use the <OBJECT> tag to insert ActiveX objects into an HTML document. With regard to ActiveX
controls, the <OBJECT> tag identifies the control you're using. That is, the <OBJECT> tag identifies
which control on the user's computer you want to use and gives that instance of the control a name,
which you can use in scripts. That's all.

In the following sections, you'll learn much more about each of the <OBJECT> tag's attributes as they
relate to ActiveX controls. Before doing that, however, take a look at how you use the <OBJECT> tag in
a Web page. In its simplest form, the <OBJECT> tag looks something like this:

<OBJECT
classid="clsid:1A771020-A28E-11CF-8510-00AA003B6C7E"
id=Track1
width=400
height=2
align=left>
<IMG SRC="noobject.gif">
<PARAM NAME="Image" VALUE="image.gif">
</OBJECT>

The CLASSID attribute uniquely identifies, on the computer, the control you're using. Every control
installed on the user's computer is installed in the Registry. The control's CLASSID is the number that
Windows uses to identify that control. You can think of the CLASSID as a name that is guaranteed to be
unique. You'll learn more about this attribute later. In this case, we're using the View Tracker control.
You use the ID attribute to identify the control to the scripts in your Web page. WIDTH, HEIGHT, and
ALIGN work the same as with other types of tags; they specify the size and location of the control on
the Web page.

Setting a Control's Properties with the PARAM Tag

You will need to set the properties of the ActiveX controls you put on the Web page in order to control
its appearance or function. For example, you need to give the Stock Ticker control the URL of the text
file it should use for data. You need to provide the Label control with the text it should display. The
only way to know for sure which properties each control requires is to check the control's
documentation. You can also use the ActiveX Control Pad to set a control's properties.

So, how do you set these properties? You use the <PARAM> tag to assign a value to a named property
within the control. This works very much like Visual Basic property sheets. Note the <PARAM> tag has
no closing </PARAM> tag. Table 21.2 describes the attributes you use with the <PARAM> tag. You
frequently need to use only the NAME and VALUE attributes.

Table 14.2 Attributes of the PARAM Tag

Attribute Description
NAME Defines the name of the property. An ActiveX control can treat the name as case-sensitive.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

170
 Shree M .& N. Virani Science College

VALUE Specifies the value of the property identified in NAME.

VALUETYPE Can be one of REF, OBJECT, or DATA.
TYPE Refers to Internet Media Type (RFC 1590) of the item referred to in the VALUE field when
VALUETYPE = REF.

NAME, VALUE, and TYPE are self-explanatory. Table 21.3 describes the settings you can use with
VALUETYPE.

Table 14.3 Values for VALUETYPE Attribute

Value Meaning
REF VALUE contains an URL.
OBJECT VALUE contains URL of another OBJECT.
DATA VALUE contains string data.

The following is an example of inserting an ActiveX control by using the <OBJECT>tag. The CLASSID
attribute specifies the Popup Menu control, and each <PARAM> tag adds a menu item to the menu.

<OBJECT
id=iemenu1
classid="clsid:0482B100-739C-11CF-A3A9-00A0C9034920"
width=1
height=1
align=left
hspace=0
vspace=0
>
<PARAM NAME="Menuitem[0]" VALUE="First Choice">
<PARAM NAME="Menuitem[1]" VALUE="Second Choice">
<PARAM NAME="Menuitem[2]" VALUE="Third Choice">
<PARAM NAME="Menuitem[3]" VALUE="Fourth Choice">
<PARAM NAME="Menuitem[4]" VALUE="Firth Choice">
</OBJECT>

More About the <OBJECT> Tag

The <OBJECT> tag has a number of attributes you can use. The sections that follow describe each
attribute. In reality, however, you'll find yourself using only a few: CLASSID, ID, HEIGHT, WIDTH,
ALIGN, and, possibly, CODEBASE.

ALIGN You use the ALIGN attribute to specify where to place the object. You can position an object
relative to the text line or on its own on the left, right, or center of the page. Table 20.4 describes the
settings you can use to align the object with the text line. Table 21.5 also describes the settings you can
use to align the object with the page.

Table 14.4 Aligning the Object with the Text Line

Setting Description

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

171
 Shree M .& N. Virani Science College

TEXTTOP The top of the object is aligned with the top of the current font.
MIDDLE The middle of the object is aligned with the baseline of the text line.
TEXTMIDDLE The middle of the object is aligned with the middle of the text line.
BASELINE The bottom of the object is aligned with the baseline of the text line.
TEXTBOTTOM The bottom of the object is aligned with the bottom of the current font.

Table 14.5 Aligning the Object with the Web Page

Setting Description
LEFT The object is aligned with the left side of the Web page and text flows around the right side of
the object.
CENTER The object is aligned in the center of the Web page and the text starts on the line following the
object.
RIGHT The object is aligned with the right side of the Web page and text flows around the left side of
the object.

BORDER When you use an object as part of a hypertext link, you can specify whether or not the
object has a border. The BORDER attribute specifies the width of the border around the object. If you
don't want a border around the object, set this attribute to 0, like this: BORDER=0.

CLASSID and CODEBASE You use CLASSID to refer to the ActiveX control to be placed within the
object's borders. There are several different ways to indicate the object to be inserted here. ActiveX
uses the clsid: URL scheme to specify the ActiveX class identifier.

ON THE WEB: For further information on the clsid: URL scheme, see
http://www.w3.org/pub/WWW/Addressing/clsid-scheme.

The best way to obtain the CLSID for an ActiveX control is to look at the control's documentation. You
can look up Microsoft's ActiveX controls at Microsoft's ActiveX Gallery. Alternatively, use the
ActiveX Control Pad to insert an ActiveX control in your Web page so you don't have to worry about
the CLSID. If the CLASSID attribute is missing, ActiveX data streams will include a class identifier that
can be used by the ActiveX loader to find the appropriate control.

The CODEBASE attribute can be used to provide an URL from which the control can be obtained. If the
control is already installed on the user's computer, the browser will do nothing with this attribute. If the
control isn't installed on the user's computer, however, the browser will try to download the control
from the URL in CODEBASE and install it.

NOTE: You can also get the CLASSID for an ActiveX control from the Windows Registry, like this:
1. Open the Registry Editor. Choose Run from the Start menu, type regedit, and press Enter.
2. Locate a control under HKEY_CLASSES_ROOT, such as Internet.Gradient or Internet.Label.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

172
 Shree M .& N. Virani Science College
3.ote the default value of the clsid subkey for that control. This is the string you use in the CLASSID
attribute.
You can learn more about clsids in Special Edition Using the Windows 95 Registry or Windows 95
Registry and Customization Handbook by Que.

CODETYPE The CODETYPE attribute is used to specify the Internet Media Type for the code pointed
to by the CLASSID attribute. Browsers use this value to check the type of code before downloading it
from the server. Thus, the browser can avoid a lengthy download for those objects that it doesn't
support. Currently, the CODETYPE attribute is supported in a limited fashion in Internet Explorer 3.0.
Microsoft has indicated that TYPE will be implemented for all relevant MIME types.

DATA The DATA attribute contains an URL that points to data required by the object, for instance, a
GIF file for an image. Internet Explorer currently supports the DATA attribute.

DECLARE You'll use the DECLARE attribute to tell the browser whether to instantiate the object or not.
If the DECLARE attribute is present, it indicates the object should not be instantiated until something
references it. That is, the browser will note the declaration of the object, but won't actually load it until
you reference it.

HEIGHT The HEIGHT attribute defines the height, in pixels, to make available to the ActiveX control
when rendered by the browser. The Web browser may (or may not) use this value to scale an object to
the requested height.

HSPACE The HSPACE attribute defines the amount of space, in pixels, to keep as white space on the
left and right as a buffer between the ActiveX control and surrounding page elements. The Web
browser may (or may not) use this value to allocate white space.

ID The ID attribute defines a document-wide identifier. This can be used for naming positions within
documents. You also use the control's ID to reference it in scripts.

NAME You use the NAME attribute to indicate whether an object wrapped in a <FORM> tag will be
submitted as part of the form. If you specify NAME, the Web browser submits the VALUE property of the
object to the host. If you don't specify NAME, the ActiveX control is assumed to be decorative and not
functional in the form.

STANDBY STANDY is a short string of text the browser displays while it loads the ActiveX control.

TYPE The TYPE attribute is used to specify the Internet Media Type for the data specified by the DATA
attribute.

ON THE WEB: You can learn more about Internet Media Types by referring to RFC 1590. You can
get RFC 1590 from the Internet at ftp://ds.internic.net/rfc/rfc1590.txt.

USEMAP The value in USEMAP specifies an URL for a client-side imagemap.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

173
 Shree M .& N. Virani Science College
VSPACE The VSPACE attribute defines the amount of space in pixels to keep as white space on the top
and bottom as a buffer between the ActiveX control and surrounding page elements. The Web browser
may (or may not) use this value to allocate the requested white space.

WIDTH The WIDTH attribute defines the width, in pixels, to make available to the ActiveX control
when rendered by the browser. The Web browser may (or may not) use this value to scale an object to
the requested width.

Connecting Controls to Scripts

Now, we're getting to the meat of the matter. You've learned how to insert ActiveX controls into your
Web page by using the <OBJECT> tag. Now, you need to learn how to interact with those controls by
using a scripting language. In the sections that follow, you'll learn how to handle the events that are
fired by a control. You'll also learn how to get and set a control's properties from your scripts.
Incidentally, my scripting language of choice is VBScript, so that's what I'm using in these examples.
The JavaScript versions of these examples aren't much different, however.

ActiveX controls act like and quack like the elements on a form. That is, you interact with each
ActiveX control's properties, methods, and events in exactly the same way in which you interact with a
form's element. You handle a control's events when the control needs attention; you call a control's
methods, and you get and set the control's properties.

Handling an Event

You can use a couple of different methods of handling events for forms and elements (event-
procedures, inline event handlers, and so on). One such method is to use the FOR/EVENT attributes of
the SCRIPT tag.

The FOR and EVENT attributes let you associate a script with any named object in the HTML file and
any event for that object. Take a look at the following:

<SCRIPT LANGUAGE="VBScript" FOR="btnButton" EVENT="Click">

<!--
window.alert( "Ouch! You clicked on me." )
-->
</SCRIPT>
<OBJECT ID="btnButton" WIDTH=96 HEIGHT=32
CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
<PARAM NAME="Caption" VALUE="Click Me">
<PARAM NAME="Size" VALUE="2540;847">
</OBJECT>

You can add this code to an HTML file, and you'll see a button (with an ID of btnButton) that
executes the script when you click it. Take a look at the <SCRIPT> tag. It contains the FOR and EVENT
attributes that define the object and event associated with that script. FOR="btnButton"
EVENT="Click" says that when an object named btnButton fires the Click event, every statement in
this script is executed.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

174
 Shree M .& N. Virani Science College
Some events pass arguments to the event handlers. How do you handle arguments when you're
handling the event by using the FOR/EVENT syntax? Like the following:

<SCRIPT LANGUAGE="JavaScript" FOR="btnButton" EVENT=

"MouseMove(shift, button, x, y)">

The enclosed script can then use any of the parameters passed to it by the MouseMove event.

TIP: Once you've specified a language in your HTML file, you don't need to do it again. Your browser
defaults to the most recently used language in the HTML file. You can put <SCRIPT
LANGUAGE="VBScript"> </SCRIPT> at the very beginning of your HTML file one time and forget
about it. The rest of the scripts in your file will use VBScript.

You just saw the Click event. ActiveX controls support a wide variety of other events. The best way
to know for sure which events a control supports is to consult the control's documentation or the
ActiveX Control Pad's documentation. For your convenience, however, the following list describes the
most prevalent and useful events:

• BeforeUpdate occurs before data in a control changes.

• Change occurs when the value property in a control changes.

• Click occurs when the user either clicks the control with the left mouse button or selects a
single value from a list of possible values.

• DblClick occurs when the user clicks twice rapidly with the left mouse button.

• DropButtonClick occurs when a drop-down list appears or disappears.

• KeyDown occurs when a user presses a key.

• KeyUp occurs when a user releases a key.

• KeyPress occurs when the user presses an ANSI key.

• MouseDown occurs when the user holds down a mouse button.

• MouseUp occurs when the user releases a mouse button.

• MouseMove occurs when the user moves the mouse pointer over a control.

• Scroll occurs when the user changes a scroll bar.

NOTE: Often, the easiest way to see the events, properties, and methods that an ActiveX control
supports is to insert it into a Web page by using the ActiveX Control Pad and pop open the Script

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

175
 Shree M .& N. Virani Science College
Wizard. The Script Wizard lists all of the control's events in the left-hand pane. It lists all of the
control's properties and methods in the right-hand pane.

Changing an Object's Properties

Many objects let the user input data. For example, the user can choose an item from a list, type text
into an edit box, or click a check box. What good are those objects if you can't get and set their value?
Not much. You read the value of most elements by using the object's value property in an assignment
or logical expression. The following example assigns the text the user typed into the txtTextBox
control to a variable called str. The next example compares the text the user typed into the
txtTextBox with the word "Howdy".

str = txtTextBox.value
If txtTextBox.value = "Howdy" Then

You can also set the value of an element from within a script by assigning a string to the element's
value, as follows:

txtTextBox.value = "New Contents of the Text Box"

The value property is the default property for most ActiveX controls that accept user input. Thus, you
can use them in an expression without explicitly using the value property, like this:

alert txtTextBox
txtTextBox = "New Contents of the Text Box"

Adding Java Applets to Your Pages

Sun Microsystems's object-oriented programming language Java is creating a lot of interest on the
Web. You can use Java to create dynamic, interactive Web pages. You don't have to be a Java
programmer to use Java applets--many are available on the Web for free.

The Java language is object-oriented and very similar to C++. It was designed to take many of the best
features of C++ while simplifying it to make writing programs easier.

Programs are normally created to run on only one type of operating system. Windows 95 programs
have been specifically created to run on systems running the Windows 95 operating system and will
not run on the Macintosh or on a UNIX system. Java programs, however, are intended to be platform
independent. Java programs are compiled into a series of bytecodes that are interpreted by a Java
interpreter. After a Java program has been compiled, it can run on any system with a Java interpreter.
You do not need to recompile it.

This capability makes Java an ideal language for programs on the Web. With so many different
systems on the Web, creating programs that will work with all of them is very difficult. Because Java
programs are platform independent, programs are no longer restricted to running on one platform.
They can run on any platform to which Java has been ported.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

176
 Shree M .& N. Virani Science College
Java has been ported to many different platforms. Sun has ported Java to Solaris, Windows NT,
Windows 95, and the Macintosh. Other companies have ported Java to Silicon Graphics IRIX, IBM
OS/2, IBM AIX, and Linux.

Using the <APPLET> Tag

Java programs that can be embedded into WWW pages are called Java applets. To run applets from
Web pages, you must have a browser that supports Java, such as HotJava, Netscape, or Internet
Explorer.

If you want to write your own Java applets, you should download the Java Development Kit from
Javasoft or purchase Microsoft's Visual J++. Javasoft is available for free on the Web. You can
download it from the Javasoft Home page at http://www.javasoft.com.

Microsoft Visual J++ is relatively inexpensive. You can purchase it at most computer retailers such as
CompUSA or Computer City.

Now take a look at a few examples. Listing 14.1 shows the code for a simple Java applet.

Listing 14.1 A "Hello World" Java Applet

import java.applet.*;
import java.awt.*;
class HelloWorld extends Applet {
public void paint(Graphics g) {
g.drawString("Hello World!",20,20);
}
}

When you place this applet into a page and run it, it prints Hello World!. But, before you can use it in
a page, you must compile the applet using javac, the Java compiler. The files that Javac creates are
called Java class files. A class file is the platform-independent object file that the browser retrieves
when downloading a Java applet.

To use this applet on an HTML page, you have to describe it using the <APPLET> tag. Listing 14.2
shows an HTML page that loads this example applet.

Listing 14.2 HTML for Hello World Applet

<HTML>
<HEAD>
<TITLE>HelloWorld Applet</TITLE>
<BODY>
<APPLET CODE=HelloWorld HEIGHT=100 WIDTH=150>
</APPLET>
</BODY>
</HTML>

The <APPLET> and </APPLET> tags act as a container for the Java applet definition. They indicate to
the browser that a Java applet should be loaded. The CODE attribute tells the browser which Java applet
should be downloaded. The browser reserves space in the page by using the WIDTH and HEIGHT

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

177
 Shree M .& N. Virani Science College
attributes, just as it reserves space for the IMG element. Then the browser downloads the Java class
specified in the CODE attribute and begins running the applet.

In this case, the applet being downloaded is HelloWorld, and it reserves a space 150 pixels high and
200 pixels wide in the page. Figure 14.7 shows what the page looks like when the browser loads it.

Browsers that can't display Java applets don't display anything when this page is loaded. To prevent
this situation from happening, you can place HTML markup or text between the <APPLET> and
</APPLET> tags. Browsers that can't display Java applets display the HTML markup instead. You can
use this approach to tell visitors to your pages what they would have seen if the applet had loaded.

Browsers that can display applets don't display any of this HTML markup. Listing 14.3 shows an
HTML page with alternative HTML markup.

Listing 14.3 HTML for Hello World Applet

<HTML>
<HEAD>
<TITLE>HelloWorld Applet</TITLE>
<BODY>
<APPLET CODE=HelloWorld HEIGHT=100 WIDTH=150>
<H1>WARNING!</H1>
The browser you are using is unable to load Java Applets!
</APPLET>
</BODY>
</HTML>

TIP: You aren't restricted to writing Web applets with Java. You can write full applications with it as
well. The HotJava browser and the Java compiler are both written in Java.

The CODE, WIDTH, and HEIGHT attributes of the <APPLET> tag are all required. You also can use other
attributes in the <APPLET> tag. Table 14.1 shows the attributes available and their functions.

Table 14.1 APPLET Attributes and Their Functions

Attribute Function
CODE Defines the applet class to load. (required).
WIDTH Defines the width in pixels of the area in the HTML page to reserve for the applet.
(required).
HEIGHT Defines the height in pixels of the area in the HTML page to reserve for the applet.
(required).
ALT Defines the alternate text to display if the applet tag is understood, but applet loading is
turned off or not supported.
CODEBASE Defines the directory where the classes for the applet are stored. If this attribute is not
specified, the directory of the HTML page is searched.
NAME Defines the name of this instance of an applet. This attribute can be used by an applet to
find another applet on the same page.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

178
 Shree M .& N. Virani Science College

ALIGN Defines how this applet is aligned in the HTML page. Any of the ALIGN options discussed
in previous chapters are legal here.
VSPACE Defines how many pixels of space are reserved above and below the applet.
HSPACE Defines how many pixels of space are reserved on either side of the applet.

Using the <OBJECT> Tag to Insert Java Applets

As of HTML 4.0, the <OBJECT> tag is actually the "preferred" method of inserting plug-ins, ActiveX
controls, and Java applets into HTML documents. However, the <EMBED> and <APPLET> tags will be
supported for backwards compatibility.

Using the <OBJECT> tag to insert a Java applet is actually quite similar to using the <APPLET> tag
method. Many of the same attributes are supported. Here's a simple example:

<OBJECT CLASSID="java:program.start" HEIGHT=100 WIDTH=100></OBJECT>

This example adds the CODETYPE and CODEBASE attributes, and includes an added PARAM element:

<OBJECT CODETYPE="application:java-vm" CODEBASE="http://hostname/pathname/"

CLASSID="java:program.start" HEIGHT=100 WIDTH=100>
<PARAM NAME="options" VALUE="abc">
</OBJECT>

In short, using the <OBJECT> tag with Java applets isn't much different from using it with ActiveX
objects or plug-ins.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

179
 Shree M .& N. Virani Science College

Chapter 14
Adding JavaScript and VBScript to HTML

Introducing Scripts

Scripts are important to an HTML author. I'm of the strong opinion that in the future you'll focus more
on writing scripts than HTML tags. Whereas to create a document's content you'll use an HTML
editor, which works like any popular desktop publishing program, you'll write scripts to make those
documents interactive. Think of it this way: You use a word-processor to create documents, but you
still must write the occasional macro to make a document interactive or solve special problems.

You're not going to learn how to write good scripts after reading this one chapter. Though it is a good
basic introduction to scripting, particularly to the mechanics of adding scripts to HTML, you can't rely
on it to teach you how to program. For that, take a look at Que's Special Edition Using JavaScript or
Special Edition Using VBScript. If you're already familiar with the basic programming concepts,
however, you can rely on Appendixes C, "JavaScript Keyword Reference," and D, "VBScript
Keyword Reference," to show you all of the keywords supported by both scripting languages.

Choosing Between Server- or Client-Side Scripts

Server-side (see Part VI, "Scripting on the Web Server") scripts execute on the Web server, feeding
HTML to the browser as a product of their computations. Write a server-side script for each
circumstance if any of the following statements is true:

• You're serving customized content based on information you know about the user.

• You need to include output from a legacy application or database in your HTML documents.

• You're writing a client-side script just to generate HTML as the user opens the Web page.

• You have to process a user's form input on the server (transaction or search processing, for
example).

NOTE: Writing a server-side script isn't always possible, particularly if the service hosting your Web
pages doesn't support server-side scripts. In such cases, you have no choice but to write a client-side
script or relocate your Web pages to a service that does support scripts.

Client-side scripts interact with the HTML while the user is viewing it. Write a client-side script if any
of these statements is true:

• Your script must interact with the user's environment, creating a canvas window that doesn't
have toolbars or menus, for example.

• You want to change the appearance of the Web page as the user interacts with it.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

180
 Shree M .& N. Virani Science College
• You want to prevent frequent round-trips to the server by validating form input before
submitting it.

• Writing a server-side script would require frequent round-trips to the server to change the
document's content.

Choosing Between JavaScript and VBScript

JavaScript is loosely based on C++ and has gained worldwide acceptance on the Internet. You can use
JavaScript to interact with the user's environment, change the appearance of the content while the user
interacts with it, and even make embedded objects cooperate with each other. Both Netscape Navigator
and Internet Explorer support JavaScript.

VBScript is based on Microsoft's Visual Basic. You also use it to create client-side scripts that interact
with the user's environment, change content dynamically, and glue together objects. VBScript's biggest
advantage is that you can leverage your existing knowledge about Visual Basic onto the Web page.
Currently, Internet Explorer is the only Web browser that supports VBScript directly--a pretty big
weakness.

When choosing between each of these languages, consider the following criteria for making your
decision:

• Do your scripts have to run on both Internet Explorer and Netscape Navigator? If so, use
JavaScript.

• If you don't yet know how to program and you want to get up-to-speed quickly, start with
VBScript because it's the easier language to learn--particularly if you already know Visual
Basic.

• Do you need the flexibility of creating complex scripts involving advanced data structures and
programming constructs? If so, your best bet is JavaScript because it's more versatile than
VBScript.

TIP: You can mix both JavaScript and VBScript within the same HTML file, so you're not forced to
make a black-or-white decision. Do remember that Internet Explorer is the only browser supporting
VBScript at this time.

Understanding How Browsers Interpret Scripts

JavaScript and VBScript are interpreted languages as opposed to compiled languages. Developers
create programs using a compiled language such as C++. A compiler actually translates each
instruction into machine code that the computer executes directly. A program called an interpreter
interprets and executes a script line by line, however.

An interpreted language is slower than a compiled language, but, considering the usage of an
interpreted language, that's not really an issue. Your scripts are interpreted by the Web browser and are

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

181
 Shree M .& N. Virani Science College
usually very small. As well, they probably only execute in response to something that the user does
(clicking the mouse), instead of executing continuously as compiled programs sometimes do.

When a Browser Executes Scripts

When a user opens a Web page, the browser makes note of every script in the HTML document. It
translates the scripts into intermediate code that represents the keywords in the script as tokens (binary
values representing the keywords), which are more efficient to interpret because they're smaller than
the original keywords. It also creates a table called a symbol table that contains the name of each script
function (scripts that are called by name from other scripts). The browser looks up functions in this
symbol table as they are invoked.

The user's Web browser executes different types of script code at different times. The browser
typically doesn't execute functions as the Web page loads; it waits for an event that you associate with
a function to execute them instead. When an object on the Web page fires an event, the browser looks
up the function associated with that event in the symbol table; then the browser executes it. Also,
anytime a script invokes a function, the browser looks it up in the symbol table to find the code. The
browser executes inline scripts as it loads the Web page, however. Inline scripts are code you embed
that's not actually inside a function. You use inline scripts to affect how the browser draws the Web
page.

In Listing 16.1, for example, the last line in the script executes as the browser loads the Web page,
which creates the Web page shown in Figure 16.1. The remaining lines don't execute until some event
causes the function called AddSeries to execute.

Listing 16.1 Sample Script

function AddSeries( Last )
{
intTotal = 0;
for( i = 1; i <= Last; i++ )
{
intTotal += i;
alert( intTotal );
}
}
document.write( "Howdy" );

How a Browser Handles Events

With scripting, you embed instructions into your Web pages that describe how you want the browser to
handle certain events. Events are things that happen on the Web page. Mouse actions such as clicking
and moving cause most events, but many other types of events can occur on a Web page such as a
timer finishing its countdown. Regardless, most events are caused by some action.

Figure 16.2 illustrates this event-driven concept. Figure 16.2 has three key parts: an object, the event
itself, and the event handler. The following list describes the three parts:

• An object can be anything on the Web page--a button will do nicely, but any HTML tag can
also generate events.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

182
 Shree M .& N. Virani Science College
• Objects raise events in response to something the user does to an object. For example, if the
user clicks a button, the button raises a click event.

• Event handlers take action on the event. To create an event handler, you associate a function
with the event. Then the browser executes that function whenever that event occurs.

Benefits of Event-Driven Programming

Events have many benefits over the old style of programming. The biggest benefit is the fact that you
stay in control of the computer. Here are the highlights:

• You determine the order in which a program executes. Clicking different parts of the
screen, such as buttons, menus, and windows, causes different bits of code to execute.
Contrast that to a procedural application that determines the order in which the code
executes: starts at the beginning, expects to see certain inputs at certain times, and stops
when it hits the last line of code.

• When an event-driven program is waiting for an event, it's not using much of the
computer's resources. This lets the computer do other tasks, such as run other programs.
Event-driven programs have a message loop that checks for messages. If no messages
are waiting, the program returns control back to the operating system to give another
program a shot.

• Events simplify programming. Instead of a program constantly checking each input

device, the program sits back and waits for the operating system to send it an event. The
program doesn't miss out on input when it's not looking, either, because every input
event is queued and waiting for the program.
• Events allow programs to work with objects that define their own behavior. The
operating system simply forwards events to an object, and the object's event handlers
determine how to handle it. The program doesn't need to know how the object works
internally; it just needs to know how to talk to it.

Learning to Program: Writing Scripts

You can write scripts in two ways. The first way is by using a wizard such as the Scripting Wizard that
comes with Microsoft FrontPage and FrontPage Express. These wizards allow you to write very simple
scripts and associate them with events and objects using a intuitive mouse-driven interface. If you're
interested in approaching scripts this way, you don't need to learn how to program. You can learn more
about using Microsoft's Scripting Wizard in "Writing Scripts with the ActiveX Control Pad," later in
this chapter.

You can also write scripts the old-fashioned way: using a text editor. Doing so requires that you have
an intimate understanding of the script language you're using. You can type your scripts directly into a
file using your HTML editor, or you can type them into a plain text file that you link to your HTML

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

183
 Shree M .& N. Virani Science College
file. You need to understand a few concepts about programming before you start writing scripts,
however. If you already have basic programming skills, you can skip the rest of this section. If not, you
need a quick overview of programming concepts such as variables and expressions.

Variables

Variables are names for a small chunk of memory in which you store a value. Variables can store a
number or any bit of text. You don't need to worry about where in the computer's memory the script
stores the variable's value because you use the variable's name to change or read its value.

Mathematical Expressions

Mathematical expressions return the result of a calculation. Two things make up a mathematical
expression: operands (numbers, strings, or variables) and operators. When you add two numbers using
a calculator, the numbers are the operands, and the plus sign (+) is the operator. Likewise, the minus (-
), multiplication (*), and division signs (/) are operators. In most cases, you assign the result of a
mathematical expression to a variable so that you can recall the result later. Examples of mathematical
expressions written in JavaScript include the following:

8 + 4 Adds 8 and 4, returning 12 as a result.

2 * 3 + Multiplies 2 by 3 and adds 1, returning 7 as a result.
1
3 + 2 * Multiplies 2 by 5 because the multiplication operator has a higher order of precedence and
5
adds 3, returning 13 as a result.
(3 + 2) Adds 3 to 2 because they're grouped together in parentheses and multiplies by 5, returning
* 5 25 as a result.
x = 1 + Adds 1 and 2, storing the results in a variable called x.
2
x = y + Adds 2 to the value stored in y and assigns the result to a variable called x.
2

NOTE: An operator's level of precedence determines the order in which the interpreter evaluates each
operator in an expression. A multiplication operator has a higher order of precedence than an addition
operator, so the interpreter evaluates the multiplication operator first.
The exception to this rule is when you put a portion of the expression inside parentheses. The
interpreter evaluates anything you place inside parentheses before it evaluates the rest of the
expression. If you have one set of parentheses with another, the interpreter evaluates the innermost set
before evaluating the outermost set.

Boolean Expressions

Boolean expressions let you make decisions. They always evaluate to one of two values: True or
False. You can assign the result of a Boolean expression to a variable, use it to control a loop, or use it
to make a decision.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

184
 Shree M .& N. Virani Science College
A simple Boolean expression contains any two values combined with a Boolean operator. Comparison
operators are the heart and soul of Boolean expressions. You use them to determine the relationship
between two values (greater-than, less-than, equal, and so on) and return True if the comparison is true
or False if the comparison is false. For example, 1 < 2 returns True because one is less than two. On
the other hand, 1 > 2 returns False because one is not greater than 2. Table 16.1 describes the most
common comparison operators.

Table 16.1 Comparison Operators

Symbol Description Syntax
= Equality Expression1 = Expression2
<> (!=) Inequality Expression1 <> Expression2
< Less than Expression1 < Expression2
> Greater than Expression1 > Expression2
<= Less than or equal Expression1 <= Expression2
>= Greater than or equal Expression1 >= Expression2

The following are some examples that use comparison operators:

2 < 3 The result is True because 2 is indeed less than 3.

4 > 5 The result is False because 4 is not greater than 5.
4 <= 4 The result is True because 4 is less than or equal to 4.
x < 10 The result is True if x is any value less than 10; otherwise, the result is False.
y = x The result is True if y and x contain the same value; otherwise, the result is False.

Logical operators let you combine multiple comparison operators in a single expression. They're very
simple to use; you plug in a couple of values and get a predictable result in return. For example, A And
B is always True if both values are True. It's always False if either value is False. The following list
describes the most important logical operators that JavaScript and VBScript support:

Not The Not operator negates a Boolean value. Not True returns False, for example, and Not False
returns True.
And The And operator compares two Boolean values and returns True if both values are True.
Otherwise, it returns False. Table 16.2 shows you the result for each combination of Boolean1
and Boolean2.

Table 16.2 And Operator

Boolean1 Boolean2 Result
True True True

True False False

False True False

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

185
 Shree M .& N. Virani Science College

False False False

Or The Or operator compares two Boolean values and returns True if either value is True. Otherwise,
it returns False. Table 16.3 shows you the result for each combination of Boolean1 and Boolean2.

Table 16.3 Or Operator

Boolean1 Boolean2 Result
True True True

True False True

False True True

False False False

Xor The Xor operator compares two Boolean values and returns True if both values are different.
Otherwise, it returns False. Table 16.4 shows you the result for each combination of Boolean1 and
Boolean2.

Table 16.4 Xor Operator

Boolean1 Boolean2 Result
True True False

True False True

False True True

False False False

The following are some examples of Boolean expressions that rely on logical operators:

2 < 3 And 4 > 5 Returns False because this expression evaluates to True And False.
1 > 0 And 4 < 5 Returns True because this expression evaluates to True And True.
2 < 3 Or 4 > 5 Returns True because this expression evaluates to True Or False.
x < 0 And y > 0 Returns True if x is negative and y is positive.
x Or y Returns True if either variable contains a True value.

Decisions

VBScript and JavaScript contain a variety of statements you can use to control how your script flows.
The syntax is different in each language, but both languages have roughly the same form.

The most basic type of decision making statement you'll use is the If...Then...Else statement. This
statement evaluates a decision and conditionally executes a block of statements depending on the
result. The statement has many different forms, but in general it looks like this:

If Condition Then

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

186
 Shree M .& N. Virani Science College
Statements
Else
Statements
End If

The first line is the heart of the If...Then...Else statement. It begins with the keyword If and ends
with the keyword Then. Condition, the middle part, is the criteria. This is a Boolean expression that
evaluates to either True or False. You learned to write Boolean expressions earlier in this chapter. If
the condition is True, the script executes the first block of statements; otherwise, the script executes
the second block of statements.

The following example shows you an If...Then..Else statement written in JavaScript. The
condition is x < 3. If that condition is True, the interpreter executes the first alert statement. If that
condition is False, the interpreter executes the second alert statement.

if( x < 3 )
alert( "x was less than 3" );
else
alert( "x was equal to 3 or greater" );

Loops

You can write a script that repeatedly executes the same statements until some condition is met or,
alternatively, until some condition is not met. This is called looping. The primary reason to write a
loop is so that you don't have to repeat a bunch of statements, like this:

Add the first number to sum

Add the second number to sum
Add the third number to sum
Add the fourth number to sum
Add the fifth number to sum

You can put these statements in a loop, instead, and let the script repeat them for you:

repeat the following line five times

assign the next number to sum

Both VBScript and JavaScript support a variety of looping mechanisms, each with its own syntax. In
general, though, a loop looks like this:

Loop Condition
Statements

Statements is called the body of the loop. The interpreter iterates the loop over and over until
Condition becomes True. Each time the interpreter does so, it executes the statements in the body of
the loop.

The following example shows you a while loop in JavaScript. As long as i is less than 10, the
interpreter executes the two statements contained in the body of the loop. The first statement simply
displays the current value of i. The second statement adds 1 to i. The number of times that this loop

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

187
 Shree M .& N. Virani Science College
executes depends entirely on the value of i as the interpreter enters the loop; if i started at 0, the loop
executes 10 times.

while( i < 10 )
{
alert( i );
i = i + 1;
}

Functions

Functions (and subprocedures in VBScript) let you divide your scripts into chunks you call from any
other script. Invoking a function in your script is called calling a function. You give a function a name
and a list of arguments. You call the function by its name and pass arguments by their position. In
general, a function looks like this:

Name( Arguments )
Statements
End

Name is the name of the function, which you use to invoke the function from a script or associate the
function with an object's event. Arguments is a list of parameters that you pass to the function as
variables. Statements is all the code you want the interpreter to execute each time it invokes the
function. A function can also return a value to the calling script; thus, you can use a function on the
right side of an equal sign, like this:

Result = MyFunction( Variable1, Variable2 )

The whole process works as follows:

1. You call a function by name to invoke it, passing any values on which you want it to operate
as arguments.

2. The interpreter executes the function, setting each variable in the argument list to the values
you passed.

3. When the function finishes, it specifies a return value to the interpreter, which returns the
result in the expression that invoked the function.

Adding Scripts to Your HTML File

You embed scripts in an HTML file using tags, much like any other content you put in a Web page.
Scripts are put between the <SCRIPT> and </SCRIPT> container tags, as shown in Listing 16.2. You
specify the language you're using by assigning the MIME type of the language to the TYPE attribute:
text/vbscript for VBScript or text/javascript for JavaScript.

Listing 16.2 A Sample Script

<SCRIPT TYPE="text/vbscript">
<!--

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

188
 Shree M .& N. Virani Science College
` The following line is executed when the page is loaded
Alert "Howdy from Texas"
` The following function is executed online when invoked
Sub Pause
MsgBox "Click on OK to Continue"
End Sub
` -->
</SCRIPT>

When your browser loads a Web page that includes scripts (parse time), it immediately evaluates each
<SCRIPT> block it encounters. The browser grabs everything in a <SCRIPT> block and passes the
content off to the scripting engine. The scripting engine looks at the <SCRIPT> block the browser gave
it and looks for any functions and global variables (variables outside a function). The scripting engine
compiles the functions and global variables and stashes their names in the symbol table for later use.
The scripting engine immediately executes statements it finds outside a function, though. This is called
immediate execution. Scripts that the browser executes immediately are called inline scripts.

NOTE: Prior to HTML 4.0, you might have used the LANGUAGE attribute to specify the scripting
language you're using. W3C encourages you to use TYPE instead of the LANGUAGE attribute because its
values are not standardized. Note that Internet Explorer and Navigator don't support the TYPE attribute
as of this writing. Until both browsers do, you can safely use the LANGUAGE attribute to specify the
scripting language by assigning either JAVASCRIPT or VBSCRIPT to it, like this:
<SCRIPT LANGUAGE=JAVASCRIPT>
<SCRIPT LANGUAGE=VBSCRIPT>

Specifying a Default Scripting Language

You can specify a default scripting language for an HTML file and forget about specifying it within
each <SCRIPT> tag. You use the <META> tag at the beginning of your HTML file. Set HTTP-EQUIV to
Content-Script-Type and set CONTENT to the MIME type of the scripting language you're using. The
following example sets the default language for the HTML document to JavaScript:

<META http-equiv="Content-Script-Type" content="text/javascript">

You can also set the default scripting language using an HTTP header as shown in this example for
VBScript:

Content-Script-Type: text/vbscript

CAUTION: Failing to specify the scripting language you're using is not only incorrect but also can
cause problems for you in the future. Either define your choice globally or within each <SCRIPT> tag,
but don't rely on the browser's default scripting language to always be JavaScript or VBScript.

Linking to Scripts Instead of Embedding Them

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

189
 Shree M .& N. Virani Science College
You can link to a script that's stored in a separate text file instead of embedding the script into the
HTML document. To do so, assign the URL of the file containing your scripts to the <SCRIPT> tag's
SRC attribute:

<SCRIPT SRC=script.vbs TYPE="text/vbscript">

Because you must still specify the language using the TYPE attribute, you can use only a single
language within each text file. To help identify the types of scripts stored in each file, use an
appropriate file extension. Consider using the following conventions:

• Use the VBS file extension for files containing VBScript scripts.

• Use the JS file extension for files containing JavaScript scripts.

Hiding Scripts from Older Browsers

Many browsers can't interpret scripts. When one such browser encounters a script, it ignores the
<SCRIPT> and </SCRIPT> tags because it doesn't know how to interpret them (this behavior is by
design). Then the browser displays everything between those two tags as content, which is not exactly
what you had in mind. Figure 16.3 shows an example of what this looks like.

You use an HTML comment to hide scripts from browsers that don't support scripting, however. Make
the opening HTML comment the first line within the script. The closing HTML comment should be
the last line in the script block. Note that when using JavaScript you begin this line with a JavaScript
comment (//) because after JavaScript starts interpreting code, it thinks that everything else in the
script is actual JavaScript code. VBScript users begin the same line with a VBScript comment (`).
Script-enabled browsers ignore the comments and interpret the scripts, whereas other browsers ignore
all the content between the comments. Listing 16.3 shows you a JavaScript example.

Listing 16.3 Hiding Scripts

<SCRIPT TYPE="text/javascript">
<!--
function AddSeries( Last )
{
intTotal = 0;
for( j = 1; j <= Last; j++ )
{
intTotal += j;
alert( intTotal );
}
return intTotal;
}
document.write( "Howdy" );
//-->
</SCRIPT>

Associating Scripts with Events

Most objects on a Web page have events. That includes each HTML tag, control, or form element.
Some events to which you attach scripts include those listed in Table 16.5.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

190
 Shree M .& N. Virani Science College

Table 16.5 Events Defined in HTML 4.0

Name Event Is Raised When
OnLoad The browser finishes opening the HTML document.
OnUnload The browser unloads the HTML document.
OnClick The user clicks the mouse on an element.
OnDblClick The user double-clicks an element.
OnMouseDown The user presses the mouse button.
OnMouseOver The user moves the mouse over an element.
OnMouseMove The user moves the mouse over an element.
OnMouseOut The user moves the mouse out of an element.
OnFocus An element receives keyboard focus.
OnBlur An element loses keyboard focus.
OnKeyPress The user presses and releases a key.
OnKeyDown The user presses a key over an element.
OnKeyUp The user releases a key over an element.
OnSubmit A form is submitted to the Web server.
OnReset A form is reset.
OnSelect The user selects text in a text field.
OnChange An element loses focus and has changed.

Recall from Figure 16.2 that objects, events, and event handlers all work together. You have to
associate an object with an event handler via that object's event. You do that by adding the event's
attribute to the object's HTML tag and setting its value to a single statement that executes the function.
For example, to associate a JavaScript function called MyFunction() with the onClick event of a
button, you write the button's <INPUT> tag as follows:

<INPUT TYPE=BUTTON NAME=BUTTON onClick="MyFunction()">

You can just as easily associate an event handler with any other event in Table 16.5. In this case, the
event attribute is onClick. Add another event attribute from the first column of Table 16.5 to the tag in
the preceding example to associate an event handler with that event, like this:

<INPUT TYPE=BUTTON NAME=BUTTON onClick="MyFunction()" MouseOut="ByeMouse()">

You can also use the FOR and EVENT attributes, which let you associate a script with any named object
in the HTML file and any event for that object. Take a look at the following:

<SCRIPT FOR="Button" EVENT="Click" TYPE="text/javascript">

<!--
window.alert( "Ouch! You clicked on me." )
-->
</SCRIPT>
<INPUT TYPE=BUTTON NAME=Button>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

191
 Shree M .& N. Virani Science College

This defines a button (with a NAME of Button) that executes the script when the user clicks it. The
<SCRIPT> tag contains the FOR and EVENT attributes that define the object and event associated with
that script. FOR="Button" EVENT="Click" says that when an object named Button triggers the Click
event, every statement in this script is executed.

Writing Scripts with the ActiveX Control Pad

There is certainly a better way to add scripts to your HTML documents. The ActiveX Control Pad is a
free product from Microsoft that makes short work of this. You get it through Microsoft's Site Builder
Workshop at http://www.microsoft.com/workshop/author/cpad. Figure 16.4 shows you the Control
Pad's HTML editor with an HTML file in it.

TIP: The Control Pad uses VBScript by default. If you want to use JavaScript, you need to set it to do
so. Choose Tools, Options, Script from the main menu and select JavaScript. The Script Wizard now
generates JavaScript language scripts rather than VBScript.

The Script Wizard provides two different ways you can edit scripts: List view and Code view. List
view is a bit easier to use. Click the Script Wizard button in the toolbar to open the Script Wizard.
Then click the List View button at the bottom of the window. See the window shown in Figure 16.5.

You associate an object's event with another object's methods and properties. Select an event on the
left pane of the wizard. Choose a method or property in the right pane. When you click the Insert
Action button, the Script Wizard prompts you for the value of the property or for any parameters you
want to pass to a method. You can rearrange the order of the actions in the bottom pane of the Script
Wizard. Close the Script Wizard, and it'll add your script to the HTML file.

If you're more comfortable with the traditional programmer view of life, use the Script Wizard's Code
view (see Figure 16.6). This works just like the List view, except that you don't see a list of associated
events and actions in the bottom pane. You see the actual code the Script Wizard creates instead. Click
the Script Wizard button in the toolbar to open the Script Wizard. Then click the Code View button at
the bottom of the window, add your script, and close the Script Wizard.

TIP: Keep your Web browser running with the Web page on which you're working in it. Then you can
save the changes, flip to the browser, and refresh the Web page to see your changes while you're
working in Control Pad.

Using Scripts from Other People

The quickest way to add scripts to your Web page is by using a script that you download from a gallery
or library. For example, the Template Studio (http://tstudio.usa.net) is a comprehensive gallery that
contains numerous scripts you can use in your Web page. The scripts you find on this site include
scripts for detecting the user's browser, dynamically replacing an image, controlling a window,
displaying messages, and setting cookies.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

192
 Shree M .& N. Virani Science College
Gamelan (http://javascript.developer.com) also has a comprehensive site that you can use to find
good scripts for your Web page. Tutorial examples, games, and other miscellaneous scripts are
featured on this Web site. You can use modify them to suite your own purposes and use them to learn
more about scripting. As a bonus, you'll find documentation that helps a new JavaScript developer get
up-to-speed fast.

If you want even more immediate gratification, however, you can try out the scripts described in the
following sections. These scripts help you add fly-over help for the links on your Web page.

TIP: Netscape provides more than a dozen, real-world example JavaScript Web pages that you can
use. Open http://developer.netscape.com/library/examples/examples.html#javascript in your Web
page.

Fly-Over Help for a Link's Destination

Take a look at Communicator's status line when you hold the mouse pointer over a link. It shows the
URL to which the link points. You can provide a more useful description of the link's destination by
using a script (see Figure 16.7).

You use the <A> tag's onMouseOver event to display the help text and its onMouseOut event to remove
the text. For every link on your Web page, add the following onMouseOver attribute to its <A> tag.
Each time the user moves the mouse over the link's anchor, the two statements assigned to this event
execute. The first statement, self-status='The help text'; displays the text contained within the
single quotes on the browser's status line. Change this text to a brief description of the link. The
following shows the second statement, return true;, which prevents the browser from displaying the
link's URL reference on the status line:

onMouseOver="self.status='The help text'; return true;"

Also add the onMouseOut event attribute to each <A> tag as you see in the following example. This
works just like the onMouseOver attribute you just read about except that it clears the status line when
the user moves the mouse out of the link. The effect is that the user sees the help text as long as she
holds the mouse over the link; but when she moves the mouse away from the link, the status line
clears.

onMouseOut="self.status=''; return true;"

Using Forms and JavaScript for Navigation

If you've visited Microsoft's site recently, you've seen forms used for navigation. Here's how it works:
you select an item from the drop-down list and click a button. The browser opens the URL associated
with that list item (see Figure 16.8).

Listing 16.4 shows the HTML for a form with a single drop-down list. It opens the Web page that the
user chooses from the list. The function OpenURL() is associated with the <SELECT> tag's OnChange

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

193
 Shree M .& N. Virani Science College
event. When the user selects an item from the form's list, OpenURL() sets window.location to the
associated URL.

Listing 16.4 Form and Script for Navigation

<HTML>
<SCRIPT LANGUAGE=JAVASCRIPT>
<!--
function OpenURL( Index )
{
if( Index == 0 ) window.location = "http://rampages.onramp.net/~jerry";
if( Index == 1 ) window.location = "http://www.microsoft.com";
if( Index == 2 ) window.location = "http://www.mcp.com";
if( Index == 3 ) window.location = "http://www.netscape.com";
}
//-->
</SCRIPT>
<FORM NAME=NAVIGATE>
<SELECT NAME=LIST SIZE=1 OnChange="OpenURL( document.NAVIGATE.LIST.selectedIndex
)">
<OPTION NAME=JERRY>Jerry's Homepage
<OPTION NAME=MS>Microsoft
<OPTION NAME=QUE>Macmillan Publishing
<OPTION NAME=NETSCAPE>Netscape
</SELECT>
</FORM>
</HTML>

To make this work in your Web page, you need to update the form's list to contain an entry for each
Web site to which you want the user to navigate. Then you need to add a line to the OpenURL function
that checks the index of the user's selection and opens the appropriate URL in the browser. The easiest
thing to do is to copy one of the existing lines, change the index number so that it corresponds with the
form, and then change the URL assigned to window.location. Just remember that the first item in the
list has an index of 0, the second has an index of 1, and so on.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

194
 Shree M .& N. Virani Science College

Chapter 15
Applying Cascading Style Sheets

Understanding Style Sheets

A critical portion of W3C's HTML 4.0 recommendation is style sheets, particularly if you're interested
in dynamic HTML. Style sheets let you separate the content of your HTML documents from their
presentation. And by associating scripts with HTML elements, you can change the document's format
as the user interacts with the it.

The two major Web browsers, Internet Explorer 4.0 and Netscape Communicator, support style sheets
defined by HTML 4.0: Cascading Style Sheets Level 1 (CSS1). They both support CSS1 to varying
degrees, though.

W3C treats the style sheet mechanism (the HTML used to associate styles with a document) separately
from the style sheet language (the statements that specify formatting). CSS1 is the most prevalent style
sheet language, however, so I'll show you how to write CSS1 rules in this chapter in addition to how to
associate style sheets with an HTML document. Appendix B, "Style Sheet Property Reference," covers
CSS1 in more depth.

Attaching a Style Sheet to Your HTML Document

HTML 4.0 provides the mechanism to associate a style sheet with a document, but it doesn't care what
style sheet language you're using--CSS1 or even a more complex language that's yet to be invented.
Regardless, you must specify the style sheet language to the browser so that it knows how to parse it.
You do so by using the <META> tag:

<META http-equiv="Content-Style-Type" content="text/css">

You can also define the style sheet language using the following HTTP header:

Content-Style-Type: text/css

If you don't specify a style sheet language using the <META> tag or an HTTP header, the default is
CSS1. Even though the default is CSS1, make a point of explicitly defining the language you're using
so that you don't rely on this default behavior.

Linking a Style Sheet

You can create a style sheet in a separate file and then apply that style sheet to all the pages on your
Web site. I recommend this method because it makes creating a consistent Web site much easier. In
fact, you can create a corporate style sheet and have all members of your organization use it with their
Web sites.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

195
 Shree M .& N. Virani Science College
You store a linked style sheet in a text file with the CSS file extension. It's a plain text file that you can
create with your favorite text editor (Notepad, for example). The format of the text file is readable and
easy to understand. Thus, you won't have any trouble creating your style sheets by hand.

To link to a style sheet stored in a separate file, store all your styles in the CSS file and link your
HTML files to it using the <LINK> tag, like this:

<LINK REL=STYLESHEET HREF="http://www.myserver.com/mysheet.css" TYPE="text/css">

Assign the URL of the style sheet to the HREF attribute. Set TYPE to the MIME type of the style sheet
language, "text/css" for CSS1.

TIP: Store your corporate style sheets in a common location on the Web server and then have
everyone who is creating Web pages reference that style sheet from his or her HTML files. Everyone
can even use the same <LINK> tag. In this way, you can have a more consistent look across all the Web
pages on the server.

Embedding a Style Sheet

You don't have to store your style sheet in a separate file. You can embed the style sheet inside each
HTML file. Note that the styles within an embedded style sheet only affect the HTML within that file;
thus, you can't embed a style sheet in an HTML file and expect to use that across multiple HTML files
without copying it into each file.

You use the <STYLE> container to embed a style sheet in your HTML file. Put this container between
the <HTML> and <BODY> tags of your file, like this:

<HTML>
<HEAD>
</HEAD>
<STYLE TYPE="text/css">
Style definitions go here
</STYLE>
<BODY>
</BODY>
</HTML>

The <STYLE> tag's most important attribute, called TYPE, specifies the MIME type. It identifies the
style sheet language so that browsers that don't support style sheets or the specified language won't
display the contents of the <STYLE> container. For CSS1, set it to "text/css". The <STYLE> tag has
three other attributes that you learn about later in this chapter: MEDIA, LANG, and DIR.

Defining Styles Inline

Inline styles are simple styles that you define on-the-fly. You can use inline styles to quickly change
the appearance of a single tag, for example. You can also use inline styles to override a style for a

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

196
 Shree M .& N. Virani Science College
particular tag. For example, if you've defined a style that sets the color of the <H1> tag to blue, you can
set the color of a specific element using the <H1> tag to red.

With inline styles, you define a tag's style within the tag itself. You do this by using the STYLE
attribute, which is supported by all the child tags of the BODY tag. To define an inline style, add the
STYLE attribute to the tag for which you want to change the style and set its value to the string
representing the style definition, like this:

<H1 STYLE="color: blue">

NOTE: If an inline style conflicts with an embedded or linked style, the inline style wins. If in a linked
style sheet you define the color of an <H1> tag to be blue and you also define the color of a particular
<H1> tag within your HTML file to be red, the browser will display that particular occurrence of the
<H1> tag using the color red.

You can use inline styles with the <DIV> tag to set the style for an entire block of HTML within your
document. This works because of the concept of inheritance, which you learn about later in this
chapter. For example, if you want to change the text color of an entire block of tags to blue, you can
put those tags in the <DIV> container and define a style for the <DIV> tag that sets the text color to
blue. It looks like this:

<DIV STYLE="color: blue">

<H1>This is a heading</H1>
<P>This is a paragraph. It will look blue in the user's browser</P>
</DIV>

You can also use inline style sheets with the <SPAN> tag to change the formatting for a few words or
even just a few letters. For example:

This is a <SPAN STYLE="color: blue">simple</SPAN> block of text.

CAUTION: Don't abuse inline styles. They'll quickly clutter your HTML file so that it's more difficult
to read and much more difficult to maintain. This obviously diminishes the greatest advantage of style
sheets: separating format from content.

Importing Style Sheets

You learned about linking to a style sheet earlier in this chapter. You can also use the @import
keyword to import a style sheet into your HTML file; however, many browsers don't support @import
yet. Remember that you're just importing the text file, thus you have to insert it in the <STYLE>
container. In this manner, importing a style sheet works just like embedding a style sheet into your
HTML file. For example:

<STYLE TYPE="text/css">
@import url(http://www.myserver.com/style.css);
</STYLE>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

197
 Shree M .& N. Virani Science College
Matters of Style
Style sheets can help you create a great-looking site. Other style matters, however, contribute as
greatly, if not more, to the impact your site has on its users:

• Put navigational aids at the top and bottom of each Web page so that the user can easily
move around your site.

• Limit your graphics. Many folks are still using slow connections, so keep graphics
down to 50K or less.

• Indicate to the user that a particular link leaves your Web site. You can use a special
icon next to the link.

• If you're using frames on your site, provide an alternative to the user who has a
frameless browser.
• Design your Web pages for 640x480 resolution. Yes, people still use monitors at that
resolution.

Naming and Combining Style Sheets

The <LINK> tag's TITLE attribute allows you to name the style sheet. If you don't assign a value to
TITLE, the style sheet is persistent, and the user can't disable it (unless he disables style sheets
altogether). Assigning a value to TITLE changes the style sheet to default, and the user can choose
from any number of named style sheets.

The browser combines any style sheets with the same title that have the alternate keyword attached
to the REL attribute. In the following example, the browser applies the styles in both FIRST.CSS and
SECOND.CSS because both <LINK> tags assign alternate to REL and have the same title.

<LINK TYPE="text/css" REL="alternate stylesheet" TITLE="Example" HREF=first.css>

<LINK TYPE="text/css" REL="alternate stylesheet" TITLE="Example" HREF=second.css>

Understanding the Cascade

You can use multiple styles to control how your Web page looks; the browser follows a certain set of
rules to determine the precedence and resolves conflicts between styles (cascading order). For
example, you can define a style sheet for your Web site, and the reader can have her own style sheet.
The cascading rules determine who wins if both style sheets define a style for a particular type of text.
Each rule is assigned a weight by the browser. When the browser is working with the occurrence of a
particular tag, it finds all the rules that apply to it. The browser then sorts those rules by their weight,
applying the style with the greatest weight. In general, there are just a few rules that you need to be
aware of when dealing with competing style sheets:

• The author's style sheet overrides the user's style sheet, whereas the user's style sheet
overrides the browser's default values.

• Inline styles take precedence over embedded style sheets, whereas embedded style
sheets take precedence over linked style sheets.
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
198
 Shree M .& N. Virani Science College
You can also override the precedence for a rule by using the important keyword. In the following
example, the assignment of red to the property color and the assignment of sans-serif to the
property font-family are marked as important. Thus, the browser will not override these styles. If
two competing style sheets mark the same property as important, however, the rules in the previous list
apply.

H1 {color: red ! important font-weight: bold font-family: sans-serif ! important}

Creating Style Sheets for Each Type of Media

HTML 4.0 style sheets give you the opportunity to specify the type of media for which a style sheet is
intended. The browser uses the style sheet that's associated with the media on which the user is
viewing the document. For example, you can associate three style sheets with an HTML document.
The browser uses the first one if a user views the document on the screen, the second one for printing,
and the third one for speech.

To associate a style sheet with a media type, you use the <STYLE> tag's MEDIA attribute. In the
following example, you see two different style sheets. The browser uses the first one for the screen and
the second for printing.

<STYLE TYPE="text/css" media="screen">

style definitions
</STYLE>
<STYLE TYPE="text/css" media="print">
style definitions
</STYLE>

Table 17.1 describes the media types that HTML 4.0 supports.

Table 17.1 HTML 4.0 Media Types

Type Description
Screen Style sheet intended for a computer screen
Print Style sheet intended for a printer
Projection Style sheet intended for overheads
Braille Style sheet intended for Braille devices
Speech Style sheet intended for speech synthesizer
All Style sheet intended for all devices

Adding Rules to a Style Sheet

Linked and embedded style sheets allow you to define styles for one or more individual tags. For
example, you can create a style sheet that defines styles for the <H1>, <H2>, <P>, and <EM> tags. Each
style definition is called a rule. A rule contains a selector (the HTML tag), followed by the declaration
(the definition of the style). The rule's selector ties the style's definition to tags you use in the HTML
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
199
 Shree M .& N. Virani Science College
file. The following is an example of what a rule that defines a style for each occurrence of the <H1> tag
looks like:

H1 {color: blue}

The declaration is enclosed in curly braces ({}). Each item in the declaration has two parts: the
property name and the value you're assigning to the property, separated by a colon (:). In the previous
example, color is the property name, and blue is the value you're assigning to it. HTML predefines
dozens of property names (font-size, font-style, color, margin-right, and so on), which you'll
learn about in Appendix B. Each property also accepts a predefined type and range of values.

The following example shows you a few rules contained within an embedded style sheet:

<STYLE TYPE="text/css">
H1 {color: blue}
P {font-size: 10pt}
</STYLE>

Setting Multiple Properties in a Single Rule

You can set multiple properties within a single declaration. You do this by separating each assignment
with a semicolon (;):

H1 {color: blue; font-size: 12pt; text-line: center}

In this example, the browser displays each occurrence of the <H1> tag using the color blue, font size of
12 points, and centered in the browser window. For all other properties, the browser uses its default
values. For example, it sets the font-style property to normal.

Grouping Selectors Together in a Single Rule

If you want to define a similar style for several tags, you can list them individually in your style sheet,
like this:

P {font-size: 12pt}
UL {font-size: 12pt}
LI {font-size: 12pt}

You can group the selectors together, however, and define a rule for them as a group. The following
example groups the selectors in the previous example on one line and defines a rule that sets the font-
size property to 12pt:

P, UL, LI {font-size: 12pt}

Note the comma between each selector in the list. Omitting this comma means a totally different thing
(see the following section, "Defining Parent-Child Relationships in Rules," later in this chapter).

Defining Parent-Child Relationships in Rules

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

200
 Shree M .& N. Virani Science College
With HTML style sheets, you can be very specific about when a style is applied to a tag. For example,
you may want to define two styles for the <LI> tag: one that's applied when it's a child of the <UL> tag
and another when it's a child of the <OL> tag. You do this with contextual selectors.

Contextual selectors define the exact sequence of tags for which a style will be applied. In other words,
you can specify that a style applies to a particular tag, such as <LI> only if it's a child of the <OL> tag,
like this:

OL LI {list-style-type: decimal}

You can also specify that a particular style applies to the <LI> tag only if it's a child of the <UL> tag,
like this:

UL LI {list-style-type: square}

Note the list of selectors is not comma separated. Separating each selector with a comma would cause
all the tags in the list to be assigned the rule.

Understanding Inheritance

In HTML, tags inherit certain properties from their parents. For example, all the tags within the
<BODY> tag (<P> and <UL>) inherit certain properties from the <BODY> tag. Likewise, the <LI> tag
inherits properties from the <UL> tag that contains it.
Consider the following bit of HTML:
<STYLE TYPE="text/css">
P {color: blue}
</STYLE>
<BODY>
<P>Hello. This is a paragraph of text. <EM>This text is emphasized</EM> </P>
</BODY>

The style sheet for this example sets the color for the <P> tag to blue. There is no definition for the
<EM> tag. You might expect the text in the <EM> tag to change back to the default color: black. That's
not the case. Because the <EM> is within the container tag <P> (it's a child, in other words), the <EM> tag
inherits the color property from the <P> tag.

Working with Classes in Your Style Sheets

A class defines a variation of style, which you refer to in a specific occurrence of a tag using the CLASS
attribute. For example, you can define three variations of the H1 style and then use each one in the
appropriate context. You define a class much like you normally define a style, only you add an
arbitrary class name to the end of the tag, separating them with a period, as in the following example:

H1.blue {color: blue}

H1.red {color: red}

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

201
 Shree M .& N. Virani Science College
H1.black {color: black}

Then, when adding the <H1> tag to your HTML document, you set the CLASS attribute to indicate
exactly which style you're using:

<H1 CLASS=red>Red Heading</H1>

TIP: You can address all the tags within a particular class by omitting the tag name from the selector,
like this: .red {color: red}. After defining this style, any tag that you associate with the red class,
will be displayed using the color red.

Defining a Style for a Specific Element

You can use an inline style to define how a particular element looks by assigning the style to the
element's STYLE attribute. You can make your HTML document easier to read, however, by giving an
element an ID; then you associate a style with that element using its ID.

For example, the following <P> tag assigns test to the ID attribute:

<P ID=test>This is a test paragraph</P>

You can define a rule that affects only that element by using the its ID as the selector for the rule,
prefixed with a pound sign (#), like this:

#test {color: red}

Working with Special Elements such as Anchors

CSS defines a concept called pseudo-classes, which are special selectors that define how certain
HTML elements look at certain times. For example, CSS defines a pseudo-class that defines how an
anchor looks when the user clicks on it or how the first line of a paragraph looks. In general, pseudo-
classes look like the following example.

selector:pseudo-class { property: value }

CSS1 defines three pseudo-classes for anchors: link, active, and visited. When you use these
pseudo-classes with the A selector in a style rule, you're defining how a normal, active, and already
visited link looks on the Web page. For instance, the following example defines unvisited links as blue,
active links as red, and visited links as yellow:

A:link {color: blue}

A:active {color: red}
A:visited {color: yellow}

CSS1 defines a pseudo-class for the first line of a paragraph. Any style rule you assign to the selector
called first-line applies to the first line of that element. If you use the first-line pseudo-class
with the <P> tag, for example, the first line of each paragraph uses the formatting you specified in the
rule. The following example causes the first line of every paragraph to be bold:
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
202
 Shree M .& N. Virani Science College
P:first-line {font-weight: bold}

Similarly, you can change the formatting for the first letter in an element using the first-letter
pseudo-class. This is handy to create special effects such as drop-caps:

P:first-letter {font-size: 400%; float: left}

Adding Comments to Your Style Sheet

If your style sheet gets complicated or you need to explain why you've made a particular design
decision, you can add a comment to the style sheet. Comments only serve to document your style
sheet; they don't have any impact on how the browser displays the HTML document.

Enclose your comments between /* and */. The following example shows you what a one-line
comment looks like:

BODY {margin-left: 1in} /* Create space for sliders */

H1 {font-size: 16; margin-left: -1in} /* Out one inch */
H2 {font-size: 14; margin-left: -1in} /* Out one inch */

You can also use the /* and */ characters to create block comments. This is useful to explain an entire
portion of your style sheet. Like this:

/*----------------------------------------------------------------
The margin-left property is set to one inch for the BODY tag.
Since all of its enclosed tags will inherit this setting, the
entire page will appear to be indented by one inch. The first-
and second-level headings are indented to the left by one inch
so that they slide out into the margin.
--------------------------------------------------------------*/
BODY {margin-left: 1in} /* Create space for sliders */
H1 {font-size: 16; margin-left: -1in} /* Out one inch */
H2 {font-size: 14; margin-left: -1in} /* Out one inch */

Hiding Style Sheets from Older Browsers

HTML style sheets are new. Internet Explorer and Netscape are the first browsers to support them.
You need to worry about all those browsers that don't support style sheets, however.

Most browsers are designed to simply ignore the tags and attributes they don't understand. Thus, they'll
ignore the <STYLE> tag, for example. They won't necessarily ignore what you put in the <STYLE> tag,
though, and will display its contents as text on the Web page. To get around this problem, you can use
an HTML comment within the <STYLE> tag to hide the style definitions, like this:

<STYLE TYPE="text/css">
<!--
H1 {color: red}
-->
</STYLE>
Browsers that don't support style sheets display the HTML files with their default
styles. They'll ignore the style definitions.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

203
 Shree M .& N. Virani Science College
TIP: Open each HTML document in browsers that don't support style sheets so that you can verify
how your Web pages look.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

204
 Shree M .& N. Virani Science College

Chapter 16
Positioning HTML Elements

Understanding CSS Positioning

In the desktop publishing world, layers are rectangular blocks of text and artwork that you can position
anywhere on the page. You can also overlap layers so that one is hidden behind another or so that one
bleeds through another. Publishers use layers to create some pretty awesome layouts. Take a look at
any print advertisements or brochures, for example. Chances are, the publisher used layers.

While desktop publishers might take layering for granted (even the simplest of desktop publishing
programs allow you to create and overlap layers), HTML designers don't. Because HTML is
streaming, they've never had the capability to overlap blocks of text and artwork. That is, each
preceding HTML element is displayed before the next--in order. HTML has never provided for the
positioning of an HTML element, much less for overlapping HTML elements.

Until now--HTML 4.0 introduces the CSS positioning. If you're unsure of how to use style sheets, you
should review Chapter 17, "Applying Cascading Style Sheets."

Positioning an HTML Element

You define an element's position using a style. Within a style's rule, you assign either RELATIVE or
ABSOLUTE to the POSITION property. If you assign RELATIVE, the browser positions the element
relative to its normal position (the location at which it would naturally appear). If you assign ABSOLUTE
to POSITION, the browser positions the element relative to the parent container, whether it be the
document or some other element, such as a <DIV> tag. In most cases, you use ABSOLUTE to place an
element at an exact location relative to its parent. Use RELATIVE if you want to nudge an element
slightly out of its normal location.

You position an element using a style's TOP and LEFT properties, like this:

#element {position: absolute; top: 100; left: 20}

When you assign the example style to an element, the browser positions it 100 pixels down and 20
pixels to the right of document's top, left-hand corner.

LEFT and TOP are represented in pixels, by default, and are relative to the top, left corner of the
containing area within the HTML document. For example, to position an element 10 pixels from the
left edge of the browser window and 40 pixels from the top edge, use LEFT=10 and TOP=40. The
browser draws the HTML document as though the positioned element does not exist, and then the
element is overlapped with the Web page at the given offset. You can also assign percentages to LEFT
and TOP, which represent a percentage of the parent container's width and height, respectively. Listing
18.1 positions an element in the middle of the Web page. As shown in Figure 18.1, the contents of the
HTML document bleed through the contents of the positioned element because it's transparent.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

205
 Shree M .& N. Virani Science College

Listing 18.1 Positioning an Element in the Middle of the Page

<HTML>
<HEAD>
<TITLE>Listing CC.1</TITLE>
</HEAD>
<STYLE TYPE="text/css">
#example {position: absolute; top: 40; left: 100}
</STYLE>
<BODY>
<IMG ID=example SRC=init.gif>
<P>You can position an element anywhere you like.</P>
<P>This element is positioned, however, so that it overlaps
the HTML document below it. Notice how this text displays
through the image's transparent background.</P>
<P>This element is positioned, however, so that it overlaps
the HTML document below it. Notice how this text displays
through the image's transparent background.</P>
<P>This element is positioned, however, so that it overlaps
the HTML document below it. Notice how this text displays
through the image's transparent background.</P>
<P>This element is positioned, however, so that it overlaps
the HTML document below it. Notice how this text displays
through the image's transparent background.</P>
</BODY>
</HTML>

Changing the Size of an Element

You can change the height and width of the rectangular area occupied by an element. You use the
WIDTH and HEIGHT properties. Like TOP and LEFT, you can assign a length or percentage to either of
these properties. You can also assign AUTO to them and the browser automatically determines the
appropriate width and height.

#element {position: absolute; top: 20; left: 20; width: 100; height: 100}

You don't use the WIDTH attribute to define the element's absolute width. This property suggests a
width for purposes of wrapping the text contained within the element. If the text doesn't completely fill
the element, however, the element is not actually as wide as the specified value. If you're inserting an
image (or another element the browser can't wrap) inside an element, and the image is wider than the
suggested width, the element's actual width is bigger than the suggested value.

TIP: The OVERFLOW property determines what the browser does in the case that an element's contents
are larger than the element's size. Assign NONE, and the contents are not clipped. Assign CLIP, and the
browser chops off the content to fit in the rectangular area. Assign SCROLL, and the browser allows you
to scroll the window so you can see more of it.

Listing 18.2 shows an example of an element that is 160 pixels wide and positioned 80 pixels from the
top. As shown in Figure 18.2, the text wraps within the element, just like it would wrap within a table
cell that's 160 pixels wide.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

206
 Shree M .& N. Virani Science College

Listing 18.2 Specifying the Width of an Element

<HTML>
<HEAD>
<TITLE>Example 2</TITLE>
</HEAD>
<STYLE TYPE="text/css">
#example {position: absolute; top: 80; left: 40; width: 160}
</STYLE>
<BODY>
<DIV ID=example>
This text is within the DIV tag. Notice how its
length is controlled by the width property.
</DIV>
</BODY>
</HTML>

TIP: You can use positioned elements to perform many of the same formatting tricks you've learned to
do with the <TABLE> tag.

Overlapping Multiple Elements

You can cause elements to overlap by setting each element's TOP and LEFT attributes so that one
appears on top of another. Figure 18.3 shows two elements. The first contains a handful of text and has
a background image. The second element contains an image with a transparent background. The
second element is positioned so that it overlaps the first (see Listing 18.3).

Listing 18.3 Overlapping Elements

<HTML>
<HEAD>
<TITLE>Example 3</TITLE>
</HEAD>
<STYLE TYPE="text/css">
#example {position: absolute; top: 40; left: 60}
#another {position: absolute; top: 80; left: 200}
</STYLE>
<BODY>
<DIV ID=example>
<B>This is the first layer. It's behind the second layer.</B><BR>
<B>This is the first layer. It's behind the second layer.</B><BR>
<B>This is the first layer. It's behind the second layer.</B><BR>
<B>This is the first layer. It's behind the second layer.</B><BR>
<B>This is the first layer. It's behind the second layer.</B><BR>
<B>This is the first layer. It's behind the second layer.</B><BR>
<B>This is the first layer. It's behind the second layer.</B><BR>
<B>This is the first layer. It's behind the second layer.</B><BR>
</DIV>
<IMG ID=another SRC=init.gif>
</BODY>
</HTML>

NOTE: By default, the browser draws overlapped elements in the order it encounters them. That is, it
draws the first element, overlaps that with the next element, and so on.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

207
 Shree M .& N. Virani Science College
If you don't like the order in which the browser overlaps elements, you can change it. The most
straightforward way is by using the Z-INDEX property, which defines the stacking order for elements:

#example {position: absolute; top: 100; left: 100; z-index: 1}

You set this attribute to any positive integer value. An element with a stacking order larger than
another draws over the other element. For example, an element with a stacking order of 10 overlaps an
element with a stacking order of five. On the other hand, an element with a stacking order of three is
overlapped by an element with a stacking order of five.

Listing 18.4 is an example of three elements, each of which uses the Z-INDEX attribute to define its
stacking order. The first has a stacking order of two; the second has a stacking order of one, and the
third has a stacking order of three. Thus, the browser draws the second element first, the first element
second, and the third element last, as shown in Figure 18.4.

Listing 18.4 Using Z-INDEX

<HTML>
<HEAD>
<TITLE>Example 4</TITLE>
</HEAD>
<STYLE TYPE="text/css">
#ex1 {position: absolute; top: 40; left: 60; z-index: 2}
#ex2 {position: absolute; top: 80; left: 200; z-index: 1}
#ex3 {position: absolute; top:100; left: 80; z-index: 3}
</STYLE>
<BODY>
<DIV ID=ex1>
<B>This is the first element. It's in the middle.</B><BR>
<B>This is the first element. It's in the middle.</B><BR>
<B>This is the first element. It's in the middle.</B><BR>
<B>This is the first element. It's in the middle.</B><BR>
<B>This is the first element. It's in the middle.</B><BR>
<B>This is the first element. It's in the middle.</B><BR>
<B>This is the first element. It's in the middle.</B><BR>
<B>This is the first element. It's in the middle.</B><BR>
</DIV>
<DIV ID=ex2>
<B>This is the second layer. It's behind the first layer.</B><BR>
<B>This is the second layer. It's behind the first layer.</B><BR>
<B>This is the second layer. It's behind the first layer.</B><BR>
<B>This is the second layer. It's behind the first layer.</B><BR>
<B>This is the second layer. It's behind the first layer.</B><BR>
<B>This is the second layer. It's behind the first layer.</B><BR>
<B>This is the second layer. It's behind the first layer.</B><BR>
<B>This is the second layer. It's behind the first layer.</B><BR>
</DIV>
<IMG ID=ex3 SRC=init.gif>
</LAYER>
</BODY>
</HTML>

TIP: You can overlap several elements at the same position, define each element's stacking order in
sequence, and then peel away the elements one at a time (using a script) to create a simple animation.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

208
 Shree M .& N. Virani Science College

Nesting Positioned Elements

So far, you've only seen cases in which a handful of elements were added to the HTML document.
They were siblings in that one was not contained within another. You can insert one element inside
another, however, to create a parent-child relationship. In that case, the child (inside) is relative to the
parent (outside). Thus, if you position an element called PARENT and locate it at 10, 10; and nest an
element inside of PARENT called CHILD located at 5, 5; the child element actually displays at 15, 15 on
the HTML document. If you move the parent element to 20, 20, the child element moves right along
with it to 25, 25.

Listing 18.5 shows you an example of nested elements. The parent element contains an image of a
rough Christmas tree. It contains a number of nested elements that represent bulbs. The coordinates of
each nested element are relative to the upper-left corner of the parent. If you moved the Christmas tree
to another location on the Web page, the bulbs would move right along with it (see Figure 18.5).

Listing 18.5 Nesting Elements

<HTML>
<HEAD>
<TITLE>Example 5</TITLE>
</HEAD>
<BODY>
<DIV STYLE="position: absolute; top: 100; left: 100">
<IMG SRC=xtree.gif>
<IMG STYLE="position: absolute; top: 140; left: 60" SRC=ball1.gif>
<IMG STYLE="position: absolute; top: 20; left: 100" SRC=ball2.gif>
<IMG STYLE="position: absolute; top: 130; left: 120" SRC=ball1.gif>
<IMG STYLE="position: absolute; top: 170; left: 140" SRC=ball2.gif>
<IMG STYLE="position: absolute; top: 200; left: 120" SRC=ball2.gif>
<IMG STYLE="position: absolute; top: 80; left: 80" SRC=ball3.gif>
<IMG STYLE="position: absolute; top: 90; left: 125" SRC=ball3.gif>
<IMG STYLE="position: absolute; top: 200; left: 60" SRC=ball3.gif>
<IMG STYLE="position: absolute; top: 200; left: 180" SRC=ball3.gif>
</DIV>
</BODY>
</HTML>

Positioning Elements with Scripts

You get a lot of publishing capabilities just from being able to position an element anywhere on an
HTML document and overlap it with others. You can create a variety of special effects, however, by
attaching a script to an element and using that script to hide or show it--you can even move it around
the browser window.

Given an element's ID, you reference it using the object model (see Chapter 19, "Scripting the Object
Model"), like this:

document.all.item(id, 0)

id is the element's ID. The 0 indicates that you want the first occurrence of any element with that
particular ID.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

209
 Shree M .& N. Virani Science College
To access one of the styles, use the style object by appending .style to the object representing the
element; then append the name of the style you're accessing to the end of that. Here's an example:

document.all.item(id, 0).style.property

Using a Script to Hide or Show an Element

You can use a script to hide and show elements on the HTML document. For example, you can create
an element that you only want to display when the user moves the mouse across an image. In that case,
you'd set the element's VISIBILITY property to "hidden" so that it's not initially displayed. Then, in
the image's OnMouseOver event, set the element's visibility property to "", like this:

document.all.item(id, 0).style.property = "";

Listing 18.6 shows you an example that does something similar. It uses JavaScript, but you can use
another scripting language just as well. It contains three elements and three buttons. The script
associated with each button toggles the visibility of each element. Click a button associated with a
visible element and the script makes the element invisible (see Figure 18.6).

Take a look at the function called ToggleFirst(). It toggles the state of the flag called ShowFirst,
which indicates whether the element called FIRST is visible. It then sets the element's visibility
property to "hidden" if ShowFirst is false; otherwise, it sets the property to "", which causes the
element to become visible.

Listing 18.6 Hiding and Showing Elements

<HTML>
<HEAD>
<TITLE>Example 6</TITLE>
</HEAD>
<STYLE TYPE="text/css">
#first {position: absolute; top: 80; left: 60}
#second {position: absolute; top: 120; left: 200}
#third {position: absolute; top: 140; left: 180}
</STYLE>
<SCRIPT LANGUAGE=JAVASCRIPT>
ShowFirst = true;
ShowSecond=false;
ShowThird=true;
function ToggleFirst()
{
ShowFirst = !ShowFirst;
document.all.item("first", 0).style.visibility = ShowFirst ? "" :
"hidden";
}
function ToggleSecond()
{
ShowSecond = !ShowSecond;
document.all.item("second", 0).style.visibility = ShowSecond ? "" : "hidden";
}
function ToggleThird()
{
ShowThird = !ShowThird;
document.all.item("third", 0).style.visibility = ShowThird ? "" :
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
210
 Shree M .& N. Virani Science College
"hidden";
}
</SCRIPT>
<BODY>
<DIV ID=first>
<B>This is the first layer. It's in the middle.</B><BR>
<B>This is the first layer. It's in the middle.</B><BR>
<B>This is the first layer. It's in the middle.</B><BR>
<B>This is the first layer. It's in the middle.</B><BR>
<B>This is the first layer. It's in the middle.</B><BR>
<B>This is the first layer. It's in the middle.</B><BR>
<B>This is the first layer. It's in the middle.</B><BR>
<B>This is the first layer. It's in the middle.</B><BR>
</DIV>
<DIV ID=second STYLE="visibility: hidden">
<B>This is the second layer. It's behind the first layer.</B><BR>
<B>This is the second layer. It's behind the first layer.</B><BR>
<B>This is the second layer. It's behind the first layer.</B><BR>
<B>This is the second layer. It's behind the first layer.</B><BR>
<B>This is the second layer. It's behind the first layer.</B><BR>
<B>This is the second layer. It's behind the first layer.</B><BR>
<B>This is the second layer. It's behind the first layer.</B><BR>
<B>This is the second layer. It's behind the first layer.</B><BR>
</DIV>
<IMG ID=third SRC=init.gif>
<FORM NAME=TOGGLE>
<TABLE ALIGN=CENTER>
<TD>
<INPUT NAME=FIRST TYPE=BUTTON VALUE="Toggle First Layer "
onclick="ToggleFirst();">
</TD>
<TD>
<INPUT NAME=SECOND TYPE=BUTTON VALUE="Toggle Second Layer"
onclick="ToggleSecond();">
</TD>
<TD>
<INPUT NAME=THIRD TYPE=BUTTON VALUE="Toggle Third Layer "
onclick="ToggleThird();">
</TD>
</TABLE>
</FORM>
</BODY>
</HTML>

TIP: In Windows, you've seen dialog boxes that contain a button with the text More>>. When you
click that button, additional fields are presented. You can achieve the same effect in an HTML form by
attaching a script to a form's button that shows another form hidden within a <DIV> tag.

Moving an Element with a Script

Besides showing and hiding an element, you can also move it around on the Web page. You can use
this to create some pretty fancy animation, such as a curtain that appears to open, unveiling the
contents of the page. Moving an element around is easy. You set the value of the left and top
properties (using posLeft and posTop so that you don't have to change the length as a string with
units), as shown in Listing 18.7 and Figure 18.7.
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
211
 Shree M .& N. Virani Science College
This example contains two elements. It also contains four buttons, label Up, Down, Left, and Right.
Each button is associated with a function that moves the second element in the appropriate direction.
For example, the Up function subtracts 10 from the second element's top property, which has the effect
of moving the element up 10 pixels. The Right function adds 10 to the second element's left
property, which has the effect of moving the element right 10 pixels.

Listing 18.7 Moving an Element with a Script

<HTML>
<HEAD>
<TITLE>Example 7</TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT>
function Up()
{
document.all.item("second", 0).style.posTop -= 10;
}
function Down()
{
document.all.item("second", 0).style.posTop += 10;
}
function Left()
{
document.all.item("second", 0).style.posLeft -= 10;
}
function Right()
{
document.all.item("second", 0).style.posLeft += 10;
}
</SCRIPT>
</HEAD>
<BODY>
<DIV STYLE="position: absolute; top: 200; left: 300"; z-order: 2">
<B>This is the first layer. It's always on top.</B><BR>
<B>This is the first layer. It's always on top.</B><BR>
<B>This is the first layer. It's always on top.</B><BR>
<B>This is the first layer. It's always on top.</B><BR>
<B>This is the first layer. It's always on top.</B><BR>
<B>This is the first layer. It's always on top.</B><BR>
<B>This is the first layer. It's always on top.</B><BR>
<B>This is the first layer. It's always on top.</B><BR>
<B>This is the first layer. It's always on top.</B><BR>
</DIV>
<IMG ID=second STYLE="position: absolute; top: 180; left: 0; z-order: 1"
SRC=init.gif>
<FORM NAME=BUTTONS>
<TABLE>
<TR>
<TD></TD>
<TD ALIGN=CENTER>
<INPUT WIDTH=100% NAME=UP TYPE=BUTTON VALUE="Up" onclick="Up();">
</TD>
<TD></TD>
</TR>
<TR>
<TD ALIGN=CENTER>
<INPUT NAME=LEFT TYPE=BUTTON VALUE="Left " onclick="Left();">
</TD>
<TD></TD>
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
212
 Shree M .& N. Virani Science College
<TD ALIGN=CENTER>
<INPUT WIDTH=100 NAME=RIGHT TYPE=BUTTON VALUE="Right" onclick="Right();">
</TD>
</TR>
<TR>
<TD></TD>
<TD ALIGN=CENTER>
<INPUT WIDTH=100 NAME=DOWN TYPE=BUTTON VALUE="Down " onclick="Down();">
</TD>
<TD></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Expanding Forms: An Example

There are two types of users in this world: basic and advanced. With forms, you find many cases in
which a basic user needs to fill in only a few of the simpler fields, while the advanced user needs to fill
in all of the fields, including the more advanced fields.

You can display all of the form's fields at one time and let the basic user ignore the advanced fields or
you can hide the advanced fields and let the advanced user get to them by clicking a special button.
The latter is the approach that Windows 95 and Windows NT 4.0 take in many cases. Have you ever
seen a dialog box in Windows with a button labeled Advanced or More? When the user clicks one of
these buttons, the dialog box unfolds to show more fields.

With CSS positioning, hiding a portion of a form until a user clicks a button is easy. Listing 18.8 is just
such an example. At the bottom of this HTML document, you see a portion of the form sandwiched in
a <DIV> tag. The <DIV> tag's visibility property is initially set to "hidden". The function OpenMore
toggles the visibility of the hidden portion of the form and changes the text displayed in the button to
reflect the state of the form.

Listing 18.8 Expanding a Form

<HTML>
<HEAD>
<TITLE>Example 8</TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT>
blnMoreIsUp = false;
// Display the hidden form if it's not already displayed. Otherwise, hide it.
// Also, change the text in the button to reflect the current state of the hidden
form.
function OpenMore()
{
blnMoreIsUp = !blnMoreIsUp;
document.all.item("MORE", 0).style.visibility = blnMoreIsUp ? "" : "hidden";
document.FEEDBACK.FEEDBACK_MORE.value = blnMoreIsUp ? "Less<<" : "More>>";
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME=FEEDBACK METHOD=GET ACTION="mailto:jerry@honeycutt.com"
OnSubmit="return IsValid()">
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
213
 Shree M .& N. Virani Science College
<TABLE CELLPADDING=10>
<TR>
<TD VALIGN=TOP>
<B>Please provide your e-mail address:</B><BR>
<INPUT NAME=FEEDBACK_MAIL TYPE=TEXT SIZE=40>
</TD>
<TD VALIGN=TOP>
<B>How did you find our site:</B><BR>
<SELECT NAME=FEEDBACK_HOW SIZE=1>
<OPTION VALUE=1>AltaVista
<OPTION VALUE=2>Excite
<OPTION VALUE=3>Lycos
<OPTION VALUE=4>Yahoo!
<OPTION VALUE=5>WebCrawler
<OPTION VALUE=6>Friend
<OPTION VALUE=7>Other Link
</SELECT>
</TD>
<TR>
<TD VALIGN=TOP ROWSPAN=2>
<B>Tell us what you think about our Web site:</B><BR>
<TEXTAREA NAME=FEEDBACK_MEMO COLS=45 ROWS=8>
</TEXTAREA>
</TD>
<TD VALIGN=TOP>
<B>How did we rate?</B><BR>
<TABLE BORDER=1>
<TR ALIGN=CENTER>
<TH></TH><TH>Yes</TH><TH>No</TH>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT>
Did this site load fast enough?
</TD>
<TD>
<INPUT NAME=FEEDBACK_SPEED TYPE=RADIO>
</TD>
<TD>
<INPUT NAME=FEEDBACK_SPEED TYPE=RADIO>
</TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT>
Did you find the graphics interesting?
</TD>
<TD>
<INPUT NAME=FEEDBACK_GRAPHIC TYPE=RADIO>
</TD>
<TD>
<INPUT NAME=FEEDBACK_GRAPHIC TYPE=RADIO>
</TD>
</TR>
<TR ALIGN=CENTER>
<TD ALIGN=LEFT>
Was the content suitable?
</TD>
<TD>
<INPUT NAME=FEEDBACK_CONTENT TYPE=RADIO>
</TD>
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
214
 Shree M .& N. Virani Science College
<TD>
<INPUT NAME=FEEDBACK_CONTENT TYPE=RADIO>
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR ALIGN=RIGHT>
<TD>
<TABLE WIDTH=100%>
<TD ALIGN=LEFT>
<INPUT NAME=FEEDBACK_MORE TYPE=BUTTON VALUE="More>>"
OnClick="OpenMore()">
</TD>
<TD>
<INPUT NAME=FEEDBACK_RESET TYPE=RESET VALUE=Clear>
<INPUT NAME=FEEDBACK_SUBMIT TYPE=SUBMIT VALUE=Submit>
</TD>
</TABLE>
</TD>
</TR>
</TABLE>
<!-- This DIV contains the hidden part of the form that the user sees when
they click on More>>. The event-handler at the top of this file shows the
layer. -->
<DIV ID=MORE STYLE="visibility: hidden">
<TABLE CELLPADDING=10>
<TR>
<TD>
<B>Type the URL of your home page:</B><BR>
<INPUT NAME=FEEDBACK_URL TYPE=TEXT SIZE=60>
</TD>
<TD>
<B>Type your phone number:</B><BR>
<INPUT NAME=FEEDBACK_PHONE TYPE=TEXT SIZE=32>
</TD>
</TR>
</TABLE>
</DIV>
</FORM>
</BODY>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

215
 Shree M .& N. Virani Science College

Appendix
HTML Tags

There are many HTML elements, and each has its own set of attributes that it can use. This is a
complete list of HTML tags, their corresponding attributes, and a description of what they do.

<!--> and --> Comment

You can put in a comment in your Web document by enclosing it between the <!-- beginning marker,
and the --> ending marker. Some browsers will not properly handle HTML-related characters within
the comments. Also, not all browsers correctly recognize the double dashes as being needed for the
start of the comment. This HTML tag has no attributes.

The following is an example of <!-- -->:

<!-- This line of text will only be seen by people who look at the HTML source. --
>

<A>: Anchor

The Anchor HTML tag is an important element for hypertext links of any sort. The Anchor element
type can have the following attributes:

• CHARSET-This is a proposed attribute to HTML for internationalization. It indicates what type

of character set is used by the hypertext link.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• HREF-This indicates the destination URL.
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is intended to
supercede the NAME attribute.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphen-ation rules.
• MD-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This attribute is
used to specify a message digest or checksum. This is used when you want to be sure that a
linked object is the one the Web author specified.
• METHODS-This indicates a list of HTTP METHODS supported by the object. This is a little used
and little supported attribute.
• NAME-This defines the current line as a destination point. These points are used for internal
jumps or jumps to a specific line.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

216
 Shree M .& N. Virani Science College
• REL-When used with the HREF attribute, this indicates a particular relationship with the
destination. This is a little used and little supported attribute and will probably be superseded in
the future.
• REV-When used with the HREF attribute, this is the inverse of the REL attribute. This
establishes a backwards relationship between the current Web page and the URL that brought
up this HTML document. This is a little used and little supported attribute and will probably be
superseded in the future.
• SHAPE-This proposed attribute is supposed to indicate the corresponding clickable region in a
FIG element. This was originally intended as a substitute for imagemaps.
• TARGET-This indicates the name of the window to be used when going to the hypertext link. If
the window doesn't exist, the browser will open up a new window, and assign it that name. This
attribute is an extension introduced by Netscape.
• TITLE-When used with the HREF attribute, this attribute indicates the title of the destination
URL. This is a little used and little supported attribute.
• URN-The Universal Resource Number was originally intended as a better method of referring to
destination links, instead of URLs. It is currently not used or supported.

The following is an example of <A>:

<A HREF="http://www.mysite.com/" NAME="destination1"> Sample anchor

<ABBREV>: Abbreviations

The proposed Abbreviations tag will change some of the enclosed text into abbreviations. This does
not change the actual text, just how it's displayed by the browser. This is a work in progress. The
Abbreviations tag can have the following attributes:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <ABBREV>:

<ABBREV>Some of these words will be abbreviated when displayed.</

<ACRONYM>: Acronym

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

217
 Shree M .& N. Virani Science College
The proposed HTML 3 tag, <ACRONYM>, will display the enclosed text with acronyms. This does
not change the actual text, just how it's displayed by the browser. This is a work in progress. The
Acronym tag can have the following attributes:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <ACRONYM>:

<ACRONYM>Some of these words will be reduced to acronyms when displayed.</ACRONYM>

<ADDRESS>: Address

The <ADDRESS> tag is used to indicate an address, typically the e-mail address of the Web author.
The Address element can have the following attributes:

• ALIGN-This is a proposed attribute to HTML for internationalization. It's used to indicate the
alignment of the text in the address. It can have the value of center, justify, left, or right.
• CLEAR-This is a proposed attribute to HTML 3. It can have the value of left, right, or all.
These values indicate which margin is to be clear of images so that text can appear on it.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• NOWRAP-This is a proposed attribute to HTML 3 to indicate that the address should not be word
wrapped.

The following is an example of <ADDRESS>:

<ADDRESS>This page was created by me.</ADDRESS>

<APPLET>: JAVA Applet

This proposed HTML extension was introduced in Netscape Navigator. When used, browsers that can
run JAVA applications will run the specified JAVA applet. Parameters that you want to pass to a

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

218
 Shree M .& N. Virani Science College
particular JAVA application can be done with the <PARAM> tag. <APPLET> can have the following
attributes:

• ALT-This attribute indicates to browsers that recognize the <APPLET> tag an alternate text
string to be displayed. This behaves the same as the ALT attribute for the <IMG> tag.
• ALIGN-This attribute indicates the display alignment of the JAVA applet. It can have the
following values: absbottom, absmiddle, baseline, bottom, left, middle, right, texttop,
and top.
• CODE-This indicates the file that contains the JAVA applet program. The file name indicated
cannot point to an absolute URL.
• CODEBASE-You specify the base URL for the JAVA application with this attribute. This is used
in conjunction with the CODE attribute.
• HEIGHT-This indicates the initial height of the display for the JAVA applet. The value must be
specified as the number of pixels.
• HSPACE-This indicates how many pixels to reserve for the JAVA applet, horizontally.
• NAME-This attribute gives a name to the JAVA applet that is about to be executed. This is useful
when you want different applets on the same Web page to talk to each other.
• VSPACE-This indicates how many pixels to reserve for the JAVA applet, horizontally.
• WIDTH-This indicates the initial width of the display for the JAVA applet. The value must be
specified as the number of pixels.

The following is an example of <APPLET>:

<APPLET CODE="myprogram" WIDTH=200 HEIGHT=200>My first JAVA

<AREA>: Area for a Clickable Map

This proposed extension to HTML by Netscape is used to create client-side imagemaps. This tag is
intended to specify one clickable region on a graphic. <AREA> has the following attributes:

• ALT-This provides a text-based alternative to non-graphical Web browsers. Currently, this has
not been defined.
• COORDS-This indicates the position of the specified area on the image. The coordinates are put
in quotation marks, and the coordinates are separated by commas. The upper left-hand corner
of the image is "0,0".
• HREF-This specifies the destination URL if this area is accessed.
• NOHREF-This is used to indicate that a region isn't linked to anything.
• SHAPE-This is used to indicate the shape of the clickable region. If this attribute is rect, then
COORDS must indicate the coordinates for the upper-left corner followed by the lower-right
corner. For the circle value, COORD indicates the coordinates of the center followed by the
radius. As for the polygon value, COORD indicates a successive set of coordinates. Each pair of
coordinates indicates a vertex of the polygon.

The following is an example of <AREA>:

<AREAD COORD="0,0","100,100" SHAPE=rect HREF="http://www.mysite.com/" ALT="Go to

my site!">

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

219
 Shree M .& N. Virani Science College

<AU>: Author

This proposed HTML 3 tag is used to indicate the name of an author. <AU> can have the following
attributes:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal.

• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <AU>:

The authors of this book are <AU>Mark Brown and John Jung</AU>.

<B>: Bold

This tag will make whatever text is enclosed within it display in a bold font. The <B> tag can have the
following attributes:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal.

• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <B>:

This word is in <B>bold</B>.

<BANNER>: Banner

This is a proposed HTML 3 tag that will display something as a banner. The text in this tag will not
scroll with the rest of the HTML document. It's mainly intended to be used for company logos or
navigational aids. You can use the following attributes:

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

220
 Shree M .& N. Virani Science College
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <BANNER>:

<BANNER>This home page was created by MeSoft.</BANNER>

<BASE>: Base URL

The <BASE> HTML element is used to indicate the default location of relative URL links. This is
useful in the event that you move your home page to another computer. If this happens, all relative
links on that page will not have to be updated. This tag can have the following attributes:

• HREF-This indicates the baseline URL that relative links will be based upon.
• TARGET-This indicates the name of the window to be used when going to the hypertext link. If
the window doesn't exist, the browser will open up a new window and assign it that name. This
attribute is an extension introduced by Netscape.

The following is an example of <BASE>:

<BASE HREF="http://www.mycomputer.com/homepage/mystuff/">

<BASEFONT>: Default Font Size

This HTML element is used to indicate the default font size for the current HTML document.
<BASEFONT> was originally introduced as an extension by Netscape. It has only one attribute: SIZE.
This attribute indicates which default font value to use. By default, the font value used is 3. There are
seven possible values for this attribute: 1, 2, 3, 4, 5, 6, and 7. These do not indicate point sizes, but
rather a predetermined font size.

The following is an example of <BASEFONT>:

<BASEFONT SIZE=4>

<BDO>: Directional Override

This proposed tag is intended for the internationalization of HTML. The <BDO> tag is used to indicate
how text should be displayed by the browser. It has the following attributes:
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
221
 Shree M .& N. Virani Science College
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <BDO>:

<BDO DIR=ltr>This will cause text to flow from the left to the

<BGSOUND>: Background Sound

Microsoft introduced this proposed extension to HTML for adding more flair to home pages. This will
cause a sound file to be played in the background while the user is looking at the home page. This tag
can have the following attributes:

• LOOP-This indicates how many times the sound file should be played. This can either be a
numerical value or the word infinite. If no value is specified, the sound file is played once.
• SRC-This attribute indicates the URL for the sound file to be played. Available sound file
formats are .WAV, .AU, and .MID.

The following is an example of <BGSOUND>:

<BGSOUND SRC=http://www.mysite.com/intro.wav>

<BIG>: Big

This is a proposed HTML 3 tag that instructs the browser to make the enclosed text big. This can have
the following attributes:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <BIG>:

This word will come out <BIG>BIG</BIG>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

222
 Shree M .& N. Virani Science College

<BLINK>: Blink

This HTML tag will cause the enclosed text to blink. This tag was introduced by Netscape as a
proposed extension. Some people find the <BLINK> tag to be quite annoying.

The following is an example of <BLINK>:

See what's <BLINK>NEW</BLINK> at this page!

<BLOCKQUOTE>: Blockquote

When a browser comes across this HTML tag, it will show the text as quoted text. This typically
means that the text will be indented on both the left and right. <BLOCKQUOTE> can have the
following attributes:

• ALIGN-This is a proposed attribute to HTML for internationalization. It's used to indicate the
alignment of the text in the address. It can have the value of center, justify, left, or right.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <BLOCKQUOTE>:

<BLOCKQUOTE>To be or not to be, that is the question.</BLOCKQUOTE>

<BODY>: Body

This HTML tag encloses the body of the Web page. Everything you want users to see is enclosed
within the <BODY> tag. This element can have the following attributes:

• ALINK-This Netscape extension indicates the color to be used when a link is clicked. This color
is represented by three pairs of hexadecimal numbers. The pairs represent the red, green, and
blue color values.
• BACKGROUND-This Netscape extension provides for a background image. This extension has also
been proposed for HTML 3. The value you set for this must be the URL for the graphic you
want displayed in the background.
• BGCOLOR-This Netscape extension indicates the color of the background for this page. This
color is represented by three pairs of hexadecimal numbers. The pairs represent the red, green,
and blue color values.
• BGPROPERTIES-This is a Microsoft extension and can currently only be set to fixed. It provides
for a background watermark image.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

223
 Shree M .& N. Virani Science College
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• LINK-This Netscape extension indicates the color to be used when there is a hypertext link that
hasn't been visited. This color is represented by three pairs of hexadecimal numbers. The pairs
represent the red, green, and blue color values.
• TEXT-This Netscape extension indicates the color to be used to display the text of your home
page. This color is represented by three pairs of hexadecimal numbers. The pairs represent the
red, green, and blue color values.
• VLINK-This Netscape extension indicates the color to be used when a link has already been
visited. This color is represented by three pairs of hexadecimal numbers. The pairs represent
the red, green, and blue color values.

The following is an example of <BODY>:

<BODY BACKGROUND="http://www.mysite.com/backdrop.gif">[Web page]</

<BQ>: BlockQuote

This is a proposed HTML 3 element that is intended to replace the <BLOCKQUOTE> tag. <BQ> is
different from <BLOCKQUOTE> in that it does not imply word wrapping. This tag has the following
attributes:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal.

• CLEAR-This is a proposed attribute to HTML 3. It can have the value of left, right, or all.
These values indicate which margin is to be clear of images so that text can appear on it.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <BQ>:

<BQ>We hold these truths to be self-evident</BQ>

<BR>: Line Break

This HTML tag forces a new line to be created at that point. This means that whether or not word wrap
will take effect, the line break will occur. This element has the following attributes:

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

224
 Shree M .& N. Virani Science College
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• CLEAR-This is a proposed attribute to HTML 3. It can have the value of left, right, or all.
These values indicate which margin is to be clear of images so that text can appear on it.
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.

The following is an example of <BR>:

Even though this line may word wrap on your browser,

it'll still have a line break at the end.<BR>

<CAPTION>: Caption

This HTML 3 proposed tag was originally a Netscape proposed extension. This element is used to
attach a label to a table or a figure. <CAPTION> has the following attributes:

• ALIGN-This attribute will determine where the caption is placed. Acceptable values are top,
bottom, left, and right.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• CLEAR-This is a proposed attribute to HTML 3. It can have the value of left, right, or all.
These values indicate which margin is to be clear of images so that text can appear on it.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <CAPTION>:

<CAPTION>Table 1.1</CAPTION>

<CENTER>: Center

This Netscape-specific extension to HTML will center all enclosed text. This has since been
superseded by the HTML 3 proposals. Now, all text elements have an ALIGN attribute that can be set to
center.

Example:

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

225
 Shree M .& N. Virani Science College
<CENTER>This text is centered on the browser.</CENTER>

<CITE>: Citation

The CITE element is used when you want to indicate a citation of some sort. It has the following
attributes:

• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

Example:

<CITE>Hamlet, ACT V, Scene I</CITE>

<CODE>: Source Code

The <CODE> element should be used when you want to indicate source code. If you're giving people
instructions on how to do something with a computer, use this tag. You can use the following
attributes:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <CODE>:

At the UNIX prompt, type in <CODE>ls -al</CODE>

<COL>: Column Defaults

There is a new proposed HTML 3 standard for table creation. One of the new tags included in that
proposal is the <COL> element. You can use this element to define some standard behavior for table
columns. This tag has the following attributes:

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

226
 Shree M .& N. Virani Science College
• ALIGN-This attribute indicates the alignment of the text within the column. It can have the value
of char, center, justify, left, or right.
• CHAR-This is used to indicate which character the column is to be aligned with. This is only
interpreted when the ALIGN attribute has been set to char.
• CHAROFF-This number is used to indicate the offset of the alignment character from the table
cell.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• SPAN-This number is used to indicate how many table cells the cell value applies to. If you set
SPAN=0, it will apply the current value to all cells. The default value is 1.
• VALIGN-This indicates the vertical alignment of the text of the table cell. Acceptable values for
this attribute are baseline, bottom, middle, and top.
• WIDTH-This value indicates the width of each column. You can also specify the unit of
measurement for the width. The standard units are pt (point size), pi (picas), in (inches), cm
(centimeters), mm (millimeters), em (em units), and px (screen pixels). Instead of a unit, you can
put an asterisk (*) to specify a relative width.

The following is an example of <COL>:

<COL ALIGN=char CHAR="." WIDTH="100mm">

<COLGROUP>: Column Group

The <COLGROUP> element is a container for a group of columns. It also enables you to set the
defaults for all of these columns. This element has the following attributes:

• ALIGN-This attribute indicates the alignment of the text within the column. It can have the value
of char, center, justify, left, or right.
• CHAR-This is used to indicate which character the column is to be aligned with. This is only
interpreted when the ALIGN attribute has been set to char.
• CHAROFF-This number is used to indicate the offset of the alignment character from the table
cell.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

227
 Shree M .& N. Virani Science College
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• VALIGN-This indicates the vertical alignment of the text of the table cell. Acceptable values for
this attribute are baseline, bottom, middle, and top.
• WIDTH-This indicates the default width of grouped columns. You can specify relative size by
appending an asterisk (*) at the end.

The following is an example of <COLGROUP>:

<COLGROUP ALIGN=char CHAR=".">10.0</COLGROUP>

<CREDIT>: Credit

This HTML 3 proposed tag should be used to name the source of information. The following attributes
are available:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <CREDIT>:

<CREDIT>By William Shakespeare</CREDIT>

<DD>: Definition List Data

If you choose to make use of a definition list in your home page, you'll need <DD>. This HTML tag is
used to indicate a definition for the definition list. A <DD> tag should always be preceded by a <DT>
tag. The <DD> element has the following attributes:

• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
228
 Shree M .& N. Virani Science College
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <DD>:

<DD>Sample Definition</DD>

<DEL>: Delete

This HTML 3 tag is meant to supersede the <S> or <STRIKE> elements. Text enclosed within a
<DEL> tag will be shown as strikethrough. You have the following attributes available:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <DEL>:

This is a <DEL>mistake<DEL>.

<DFN>: Definition

This HTML 3 tag will have the browser display the enclosed text as a description. If the current Web
page makes use of a lot of definitions, you should use this tag. This element has the following attribute:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <DFN>:

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
229
 Shree M .& N. Virani Science College
<DFN>HTML-HyperText Markup Language</DFN>

<DIR>: Directory List

The <DIR> element is used when you want to create an unordered list of single-line elements. Each
line in the <DIR> list is defined by the <LI> tag. You can apply the following attributes to the <DIR>
tag:

• ALIGN-This attribute indicates the alignment of the text on the line. It can have the value of
center, justify, left, or right.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• COMPACT-This attribute tells the browser to display the list in a compact manner. It is not,
however, supported by many browsers.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <DIR>:

<DIR ALIGN=center><LI>MYFILE.EXE</LI><LI>MYFILE.TXT</LI></DIR>

<DIV>: General Text Division

This proposed HTML 3 tag is intended to be used to replace the Netscape-specific <CENTER> tag. It
has the following attributes:

• ALIGN-This attribute indicates the alignment of the text on the line. It can have the value of
center, justify, left, or right.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <DIV>:

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

230
 Shree M .& N. Virani Science College
<DIV ALIGN=center>This line is centered.</DIV>

<DL>: Definition List

If you're going to use a lot of definitions or have a page of definitions, you need this tag. Each entry in
the definition list is made up of <DT> and <DD> tags. You can use the following attributes:

• ALIGN-This attribute indicates the alignment of the text on the line. It can have the value of
center, justify, left, or right.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• COMPACT-This attribute tells the browser to display the list in a compact manner. It is not,
however, supported by many browsers.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <DL>:

<DL><DT>Internet</DT><DD>A distributed collection of computers spread

worldwide.</DD></DL>

<DT>: Definition List Title

This is one of the three HTML elements you need to use when creating a definition list. You create
headings for your definitions with the <DT> tag. This HTML element comes with the following
attributes:

• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <DT>:

<DT>Definiton Heading</DT>

<EM>: Emphasis

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

231
 Shree M .& N. Virani Science College
There are a number of ways of making text stand out. Place this HTML tag around the text that you
want to emphasize. It has the following attributes:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <EM>:

I repeat, you're <EM>WRONG</EM>!

<EMBED>: Embed Netscape Plugin

Netscape Navigator 2.0 provides for the capability to insert arbitrary objects. This is done with the
newly created Netscape-specific tag, <EMBED>. You have a number of attributes you can use:

• Attributes-The <EMBED> element enables arbitrary and undefined attributes. These

attributes are supposed to be application-specific, which makes documentation difficult.
• HEIGHT-This indicates the initial height of the display for the embedded object. The value must
be specified as a number of pixels.
• SRC-This points to an URL for the object you want to embed.
• WIDTH-This indicates the initial width of the display for the embedded object. The value must
be specified as a number of pixels.

The following is an example of <EMBED>:

<EMBED SRC="mymovie.dcr">

<FIG>: Figure

A new element in the HTML 3 proposal is the <FIG> tag, an improved <IMG> tag. You can include
text elements as well as specify hotspots with other tags. You can also use the <OVERLAY> element
to put overlays on top of figures. <FIG> has the following attributes:

• ALIGN-This attribute indicates the alignment of the text on the line. It can have the value of
bleedleft, bleedright, center, justify, left, or right.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
232
 Shree M .& N. Virani Science College
• CLEAR-This is a proposed attribute to HTML 3. It can have the value of left, right, or all.
These values indicate which margin is to be clear of images so that text can appear on it.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• HEIGHT-This indicates the initial height of the display for the embedded object. The value must
be specified as a number of pixels.
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• MD-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This attribute is
used in conjunction with the SRC attribute, to specify a message digest or checksum. This is
used when you want to be sure that a linked object is the one the Web author specified.
• SRC-This points to an URL for the image you want to use.
• UNITS-This attribute enables the HEIGHT and WIDTH attributes to use units other than screen
pixels.
• WIDTH-This indicates the initial width of the display for the embedded object. The value must
be specified as a number of pixels.

The following is an example of <FIG>:

<FIG SRC="http://www.mysite.com/mygraphic.gif"></FIG>

<FN>: Footnote

A new proposed HTML 3 tag is the footnote element. Currently, very few browsers support this tag.
You have the following attributes available:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <FN>:

<FN>This is a footnote.</FN>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

233
 Shree M .& N. Virani Science College

<FONT>: Font Size

The <FONT> element, first introduced by Netscape, enables various font manipulations. It has not
been adopted as part of the new HTML 3 proposal. <FONT> has the following attributes:

• COLOR-This attribute enables the font to be drawn in a particular color. This color is represented
by three pairs of hexadecimal numbers. The pairs represent the red, green, and blue color
values.
• FACE-This attribute was introduced by Microsoft as a means of specifying a font style. There
are currently no defined values.
• SIZE-This attribute indicates how much to increase or decrease the <BASEFONT> size. An
acceptable value is anything between -7 and +7. You can also specify an absolute font size,
with acceptables values between 1-7.

The following is an example of <FONT>:

<FONT SIZE=+2>

<FORM>: Fill Out Forms

The fill-out form is one of the best ways to get user input. The biggest drawback to using <FORM> is
that you must have a CGI script to retrieve the information. Here is a list of attributes for this tag:

• ACCEPT-CHARSET-This attribute was introduced in the HTML internationalization attempt. This

indicates the character sets that the receiving URL can handle.
• ACTION-This indicates the URL to send the information to.
• ENCTYPE-This attribute specifies the behavior of the form. Currently, there are only two
defined: application/x-www-form-urlencoded and multipart/form-data.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• METHOD-This attribute describes what should be done with the form. There are currently only
two acceptable values: GET, which sends the information to the URL specified by ACTION; and
POST, which enables you to do an HTTP upload.
• SCRIPT-This is an HTML 3 proposed attribute. The file specified by SCRIPT is sent to the
browser's computer for execution. This program is intended to do some data manipulation
before sending it to the URL in ACTION.

The following is an example of <FORM>:

<FORM ACTION="http://www.mysite.com/cgi-big/get.cgi" METHOD="GET"></FORM>

<FRAME>: Frame

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

234
 Shree M .& N. Virani Science College
This is a new Netscape-specific HTML extension, which provides better handling of the browser's
window. Netscape enables URLs to update certain frames or for some frames to remain on the
browser. The <FRAME> tag has a number of attributes:

• MARGINHEIGHT-This indicates the height of the frame, specified in pixels.

• MARGINWIDTH-This indicates the width of the frame, specified in pixels.
• NAME-This attribute assigns a name to the frame to be used as a target for hypertext link
updates. There are four reserved names: _blank, _self, _parent, and _top. These values must
begin with the underbar character and each have different meanings. The _blank name
indicates a new, unnamed window. The _self name indicates the same window as the calling
URL. The _parent name indicates that the destination is the parent frame of the destination
URL. Finally, the _top indicates that the top window should be used.
• NORESIZE-When this attribute is used, the user cannot resize the frame.
• SCROLLING-This attribute is used to determine if there is a scroll bar. You can use either YES,
NO, or AUTO. By default, AUTO is used.
• SRC-This indicates the URL for the HTML document to be shown in the frame.

The following is an example of <FRAME>:

<FRAME SRC="http://www.mysite.com/myframe.html" SCROLLING="YES"

<FRAMESET>: Frame Setup

The <FRAMESET> tag is another proposed extension from Netscape to be used instead of the
<BODY> element. This tag is used only to set up other frames that will be the actual page. You must
use the <FRAME> element if you use this tag. You have a number of attributes available:

• COLS-This list of widths of the frame is separated by commas. By default, you specify the frame
widths in pixels. Alternatively, you can add the percent sign (%) after a number to make the
frame width a percentage of the browser's width.
• ROWS-This attribute is similar to the COLS attribute, except that it applies to the frames' heights.
These values for each consecutive frame are separated by commas. By default, the height
specifications are expressed in screen pixels. Alternatively, you can add the percent sign (%)
after a number to make the frame height a percentage of the browser's height.

The following is an example of <FRAMESET>:

<FRAMESET COLS="50%,50%" ROWS="600, 400"></FRAMESET>

<H1>: Heading, Level 1

This HTML tag displays text as the most prominent header. It has the following attributes:

• ALIGN-This attribute indicates the alignment of the text on the line. It can have the value of
center, justify, left, or right.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
235
 Shree M .& N. Virani Science College
• CLEAR-This is a proposed attribute to HTML 3. It can have the value of left, right, or all.
These values indicate which margin is to be clear of images so that text can appear on it.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• MD-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This attribute is
used to specify a message digest or checksum. This is used when you want to be sure that a
linked object is the one the Web author specified.
• NOWRAP-When used, this attribute will prevent the browser from word wrapping the heading.

The following is an example of <H1>:

<H1>This is the largest heading.</H1>

<H2>: Heading, Level 2

This HTML tag displays text as the second most prominent header. It has the following attributes:

• ALIGN-This attribute indicates the alignment of the text on the line. It can have the value of
center, justify, left, right.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• CLEAR-This is a proposed attribute to HTML 3. It can have the value of left, right, or all.
These values indicate which margin is to be clear of images so that text can appear on it.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• MD-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This attribute is
used to specify a message digest or checksum. This is used when you want to be sure that a
linked object is the one the Web author specified.
• NOWRAP-When used, this attribute will prevent the browser from word wrapping the heading.

The following is an example of <H2>:

<H2>This is the second largest heading.</H2>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

236
 Shree M .& N. Virani Science College

<H3>: Heading, Level 3

This HTML tag displays text as the third most prominent header. It has the following attributes:

• ALIGN-This attribute indicates the alignment of the text on the line. It can have the value of
center, justify, left, or right.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• CLEAR-This is a proposed attribute to HTML 3. It can have the value of left, right, or all.
These values indicate which margin is to be clear of images so that text can appear on it.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• MD-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This attribute is
used to specify a message digest or checksum. This is used when you want to be sure that a
linked object is the one the Web author specified.
• NOWRAP-When used, this attribute will prevent the browser from word wrapping the heading.

The following is an example of <H3>:

<H3>This is the third largest heading.</H3>

<H4>: Heading, Level 4

This HTML tag displays text as the fourth most prominent header. It has the following attributes:

• ALIGN-This attribute indicates the alignment of the text on the line. It can have the value of
center, justify, left, or right.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• CLEAR-This is a proposed attribute to HTML 3. It can have the value of left, right, or all.
These values indicate which margin is to be clear of images so that text can appear on it.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

237
 Shree M .& N. Virani Science College
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• MD-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This attribute is
used to specify a message digest or checksum. This is used when you want to be sure that a
linked object is the one the Web author specified.
• NOWRAP-When used, this attribute will prevent the browser from word wrapping the heading.

The following is an example of <H4>:

<H4>This is the fourth largest heading.</H4>

<H5>: Heading, Level 5

This HTML tag displays text as the fifth most prominent header. It has the following attributes:

• ALIGN-This attribute indicates the alignment of the text on the line. It can have the value of
center, left, right, or justify.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• CLEAR-This is a proposed attribute to HTML 3. It can have the value of left, right, or all.
These values indicate which margin is to be clear of images so that text can appear on it.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• MD-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This attribute is
used to specify a message digest or checksum. This is used when you want to be sure that a
linked object is the one the Web author specified.
• NOWRAP-When used, this attribute will prevent the browser from word wrapping the heading.

The following is an example of <H5>:

<H5>This is the fifth largest heading.</H5>

<H6>: Heading, Level 6

This HTML tag displays text as the least prominent header. It has the following attributes:

• ALIGN-This attribute indicates the alignment of the text on the line. It can have the value of
center, left, right, or justify.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

238
 Shree M .& N. Virani Science College
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• CLEAR-This is a proposed attribute to HTML 3. It can have the value of left, right, or all.
These values indicate which margin is to be clear of images so that text can appear on it.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• MD-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This attribute is
used to specify a message digest or checksum. This is used when you want to be sure that a
linked object is the one the Web author specified.
• NOWRAP-When used, this attribute will prevent the browser from word wrapping the heading.

The following is an example of <H6>:

<H6>This is the smallest heading.</H6>

<HEAD>: Head

This element is intended to hold information about the HTML document. Although you can put other
HTML elements within the <HEAD>, none of them will be displayed in the browser's window. This
tag has the following attributes:

• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <HEAD>:

<HEAD><TITLE>This Is My Home Page</TITLE></HEAD>

<HR>: Horizontal Rule

When used, the <HR> tag creates a horizontal line. It has the following attributes:

• ALIGN-This proposed extended attribute indicates the positioning of the rule. It can have the
value of left, right, center, or justify.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

239
 Shree M .& N. Virani Science College
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• CLEAR-This is a proposed attribute to HTML 3. It can have the value of left, right, or all.
These values indicate which margin is to be clear of images so that text can appear on it.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• MD-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This attribute is
used in conjunction with the SRC attribute, to specify a message digest or checksum. This is
used when you want to be sure that a linked object is the one the Web author specified.
• SRC-This proposed HTML 3 attribute is intended to specify a custom image. Traditionally, the
horizontal rule was a browser-specific graphic. This attribute enables the Web author to
determine the image.
• SIZE-This Netscape extension to HTML specifies the thickness of the horizontal line in pixels.
• WIDTH-By default, the horizontal rule is drawn as wide as the page. This Netscape extension
attribute enables the Web author to define the horizontal length of the rule in pixels.
Alternatively, if you add the percent sign (%) after a number, the horizontal rule will be a
percent of the width of the document.
• NOSHADE-For those times when you want a solid horizontal line, use NOSHADE. This will prevent
the browser from doing any shading of the horizontal line.

The following is an example of <HR>:

<HR SIZE=5 NOSHADE>

<HTML>: HTML

This is the main container for a home page. All other HTML tags contained within this element are
shown in the browser window. This tag has the following attributes:

• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <HTML>:

<HTML>[Your home page]</HTML>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

240
 Shree M .& N. Virani Science College

<I>: Italic

This tag will italicize the text that is enclosed within it. The <I> tag can have the following attributes:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <I>:

This word is in <I>italics</I>.

<IMG>: Image

Currently, any time you want to make use of graphics on your home page, you have to employ the
<IMG> tag. This element enables you to specify imagemap information, hypertext link information,
and positioning information. It has the following attributes

• ALIGN-This attribute indicates the alignment of the text on the line. It can have the value of
absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, or top.
• ALT-This attribute contains a text string that will be displayed by people who aren't using
graphical browsers.
• BORDER-This attribute indicates the thickness of the border around the image. The unit of
measurement for the thickness is determined by the UNITS attribute.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• CONTROLS-This is a Microsoft proposed attribute extension. If a video file is specified by the
SRC attribute, a set of controls is displayed under the video clip.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• DYNSRC-This is a Microsoft proposed attribute extension that points to an URL. The URL is a
video clip or VRML world to be displayed.
• HEIGHT-This indicates the initial height of the display for the embedded object. The value must
be specified as a number of pixels.
• HSPACE-This Netscape proposed extension controls the amount of horizontal space around the
image. The value specified is expressed as a number of pixels.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

241
 Shree M .& N. Virani Science College
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• ISMAP-When using imagemaps, you must use this attribute. This indicates that the graphic
specified in the SRC attribute, is an imagemap.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• LOOP-This is a Microsoft proposed attribute extension. The value indicates how many times the
video clip is played. If you put in the string INFINITE or use the value of -1, the video clip will
play continually.
• LOOPDELAY-This is a Microsoft proposed attribute extension. The value specified with this
attribute, indicates the number of seconds to wait before a video clip is replayed.
• LOWSRC-This a Netscape 1.1 extension. The file specified with this attribute will be loaded
before the file indicated in the SRC attribute. This is intended for Web authors to use low
resolution image, which has all the important information of the higher resolution image.
• MD-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This attribute is
used in conjunction with the SRC attribute, to specify a message digest or checksum. This is
used when you want to be sure that a linked object is the one the Web author specified.
• SRC-This indicates the URL for the HTML document to be displayed.
• START-This is a Microsoft proposed attribute extension for video clips. This attribute indicates
when the video file will start playing. Supported values for this attribute are FILEOPEN and
MOUSEOVER. The FILEOPEN value indicates that as soon as the browser loads in the file, it will
play it. The MOUSEOVER value indicates that the video clip will play when the user moves the
mouse over the clip.
• UNITS-This attribute enables the HEIGHT and WIDTH attributes to use units other than screen
pixels.
• USEMAP-This is a Netscape proposed attribute extension for implementing client-side
imagemaps. This attribute should point to an URL with a #NAME suffix. The MAP element is used
in conjunction with this attribute.
• VSPACE-This Netscape proposed extension controls the amount of vertical space around the
image. The value specified is expressed as a number of pixels.
• WIDTH-This indicates the initial width of the display for the embedded object. The value must
be specified as a number of pixels.

The following is an example of <IMG>:

<IMG SRC="mymap.gif" WIDTH=5 HEIGHT=5 BORDER=2 ISMAP>

<INPUT>: Input

This HTML 3 proposed element works with the FORM element. The <INPUT> tag enables the user to
upload a file through the Web server. It has the following attributes:

• ACCEPT-This attribute indicates a list of media types that the server will accept.
• ALIGN-This attribute indicates the alignment of the <INPUT> form. Acceptable values for this
attribute are bottom, left, middle, right, and top.
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
242
 Shree M .& N. Virani Science College
• CHECKED-This indicates that the specific form will be a check box. If this is not specified, it will
default to a radio button.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• DISABLED-This proposed HTML 3 attribute will display the form, but prevent the user from
modifying it.
• ERROR-This proposed HTML 3 attribute is used when an incorrect value is entered. The text
specified in this attribute is displayed on invalid input.
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• MAX-This value is only used when the TYPE attribute is set to RANGE. This indicates the
acceptable maximum numeric value.
• MAXLENGTH-This proposed HTML 3 attribute specifies the maximum number of characters
acceptable for input.
• MD-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This attribute is
used in conjunction with the SRC attribute, to specify a message digest or checksum. This is
used when you want to be sure that a linked object is the one the Web author specified.
• MIN-This value is only used when the TYPE attribute is set to RANGE. This indicates the
acceptable minimum numeric value.
• NAME-The string in this attribute is the name for the input form.
• SIZE-This attribute specifies the physical size of the input form. This value is specified in
number of characters.
• SRC-When the TYPE attribute is set to IMAGE, this points to an URL. When the user clicks the
image and the form is submitted, the mouse coordinates are sent over as well. This is similar to
having a form-based imagemap.
• TYPE-This attribute indicates the behavior of the INPUT form. Acceptable values are
CHECKBOX, FILE, HIDDEN, IMAGE, JOT, PASSWORD, RADIO, RANGE, RESET, SCRIBBLE, SUBMIT, or
TEXT.
• VALUE-This attribute changes based on the TYPE attribute. Generally speaking, the VALUE
attribute will contain the value returned by the user.

The following is an example of <INPUT>:

<INPUT TYPE="SUBMIT" NAME="submit1" ALIGN="left">

<INS>: Insert

This proposed HTML 3 element will display the enclosed text as inserted text. The text embedded by
the starting and ending markers of this element, will be shown in a strikethrough font. This tag is
mainly intended for legal documents and has the following attributes:
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
243
 Shree M .& N. Virani Science College
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <INS>:

This is <INS>inserted text.</INS>

<ISINDEX>: Searchable Index

This HTML element is used before the <FORM> tag to indicate a searchable index. When this tag is
put in the HEAD section of the HTML document, the entire document can be examined using a keyword
search. <ISINDEX> has the following attributes:

• ACTION-When <ISINDEX> is used in the <BODY> portion of the Web document, this points
to a CGI script. The script is the program on the server that can handle the search.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• PROMPT-This is a proposed HTML 3 attribute that enables the Web author to specify a prompt.
The string assigned to this attribute will be displayed as the prompt, for the searchable index.

The following is an example of <ISINDEX>:

<ISINDEX>

<KBD>: Keyboard

This HTML element will cause the enclosed text to be displayed as keyboard input. This is typically
done when you want to give users instructions on what to type into the computer. This tag has the
following attributes:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

244
 Shree M .& N. Virani Science College
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures and hyphenation rules.

The following is an example of <KBD>:

Type in <KBD>ls</KBD> at the UNIX command prompt.

<LANG>: Default Language

This is a proposed HTML 3 attribute that changes the LANG context. The text enclosed within this tag
will have its LANG context changed, as well as all subsequent LANGs. This tag has the following
attributes:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.

The following is an example of <LANG>:

The LANG context will <LANG>change.</LANG>

<LH>: List Header

This proposed HTML 3 element enables you to define the header for a list. This tag has the following
attributes:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <LH>:

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
245
 Shree M .& N. Virani Science College
<LH>A Heading</LH>

<LI>: List Item

This attribute takes the enclosed text and makes it part of the list. This element has the following
attributes:

• ALIGN-This attribute specifies the alignment of the list item. You can set it to the value of
center, justify, left, or right.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• TYPE-This Netscape extension enables you to specify the prefix for this particular item. If
you're using a <UL> list type, TYPE can be circle, disc, or square. If the list is an <OL> list
type, TYPE can be A, a, I, i, or 1.
• VALUE-This Netscape extension works with the TYPE attribute. When you specify an <OL> list
type, this attribute indicates the starting number of the list. By default, this value is 1.

The following is an example of <LI>:

<LI>A list item</LI>

<LINK>: Link

This HTML tag is used to specify a relationship between the current Web page and other HTML
documents. This element is used along with the Anchor attribute REL. This element has the following
attributes:

• CHARSET-This is a proposed attribute to HTML for internationalization. It's used to indicate

what type of character set is used by the hypertext link.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• HREF-This indicates the destination URL you want to establish the relationship with.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• METHODS-This indicates a list of HTTP METHODS supported by the object. Currently, the only
acceptable values are GET and TEXTSEARCH. This is a little used and little supported
attribute.
• REL-When used with the HREF attribute, this indicates a particular relationship with the
destination. This is a little used and little supported attribute, and will probably be superseded
in the future.
• REV-When used with the HREF attribute, this is the inverse of the REL attribute. This establishes
a backwards relationship between the current Web page and the URL that brought up this
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
246
 Shree M .& N. Virani Science College
HTML document. This is a little used and little supported attribute and will probably be
superseded in the future.
• TITLE-When used with HREF, this attribute indicates the title of the destination URL. This is a
little used and little supported attribute.
• URN-The Universal Resource Number was originally intended as a better method of referring to
destination links, than URLs. It is currently not used or supported.

The following is an example of <LINK>:

<LINK HREF="http://www.mysite.com/destination1.html">

<MAP>: Client-Side Imagemap

This Netscape proposed HTML element describes imagemap regions. The one attribute allowed is
NAME, which points to a file with the imagemap regions defined.

The following is an example of <MAP>:

<MAP NAME="myregions.map"></MAP>

<MARQUEE>: Marquee

This HTML element proposed by Microsoft will create an area with scrolling text inside of it. The text
to be scrolled is contained within the start and end markers of this element. This tag has the following
attributes:

• ALIGN-This attribute specifies how the text will be displayed in the marquee. You can set it to
the value of bottom, middle, or top.
• BEHAVIOR-This attribute determines whether the text will scroll completely off the marquee.
You can set this attribute to alternate, scroll, or slide. The alternate value will cause the
text to move back and forth from side to side. The text will scroll completely off the marquee
when the value is scroll. The text in the marquee will enter the marquee and stay there with
the slide value. The default is scroll.
• BGCOLOR-The background color of the marquee can be specified with this attribute. The color is
represented by three pairs of hexadecimal numbers. The pairs represent the red, green, and blue
color values.
• DIRECTION-This attribute indicates how the text will scroll in the marquee. You can either set
this to left or right.
• HEIGHT-The height of the marquee is controlled with this attribute. You can specify the size in
either pixels or as a percentage of the window height. If you're specifying a percentage of the
window, you'll need to add a percent sign (%) after the number.
• HSPACE-This attribute defines how many pixels separate the marquee from surrounding text.
This controls the amount of pixels to use as a buffer horizontally.
• LOOP-This number specifies how many times the marquee text will loop. A value of -1 or the
string INFINITE will cause the text to loop forever.
• SCROLLAMOUNT-This number determines the number of pixels to scroll the marquee text.
• SCROLLDELAY-You can specify the number of milliseconds between marquee updates with this
value.
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
247
 Shree M .& N. Virani Science College
• VSPACE-This attribute defines how many pixels separate the marquee from the surrounding text.
This controls the number of pixels to use as a buffer vertically.

The following is an example of <MARQUEE>:

<MARQUEE BEHAVIOR="scroll" DIRECTION="left">This is a marquee.</MARQUEE>

<MENU>: Menu

This HTML element will display any <LI> enclosed within it in a menu list. HTML 3 proposed to
remove this element. This tag has the following attributes:

• ALIGN-This attribute specifies the alignment of the list item. You can set it to be the value of
center, justify, left, or right.
• COMPACT-This attribute causes the menu list to be displayed in a physically compact form.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <MENU>:

<MENU><LI>Milk $1.00</LI><LI>Eggs $2.00</LI></MENU>

<META>: Meta Information

This HTML tag is intended to specify document information not available with other HTML elements.
The information contained in this element may be extracted by the server or the browser. This tag has
the following attributes:

• CONTENT-This attribute specifies the meta-information to be associated with the value in the
NAME attribute. You can also use this attribute to indicate the information to be associated with
an HTTP response header. If the HTTP-EQUIV attribute is set to the Netscape-specific REFRESH,
Then CONTENT will indicate the number of seconds to update the current Web page.
• HTTP-EQUIV-You specify which attribute to associate the <META> element with. Netscape
introduced the value of REFRESH to enable home pages to be updated.
• NAME-If the HTTP-EQUIV attribute is not defined, this attribute is used to identify the
information.
• URL-This Netscape attribute extension is used to indicate which home page is to be updated.
After the number of seconds specified in CONTENT, this URL will be reloaded.

The following is an example of <META>:

<META URL="http://www.mysite.com/anim.html" CONTENT=5 HTTP-

<NOBR>: No Line Break

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
248
 Shree M .& N. Virani Science College
This element is used to control line breaks on certain lines. The text enclosed within the beginning and
ending markers will not word wrap based on the width of the browser.

The following is an example of <NOBR>:

<NOBR>This line of text will always be one line,

regardless of how wide the browser window.</NOBR>

<NOEMED>: Non-Embedded Text

This Netscape HTML extension element is intended to be used for browsers that understand, but don't
implement, the <EMBED>/<NOEMBED> tags. If one of these browsers comes across the
<NOEMBED> element, the enclosed text will be displayed. This is basically equivalent to the ALT
attribute for the <IMG> element.

The following is an example of <NOEMBED>:

<NOEMBED>You'll only see this if your browser doesn't support the EMBED
tag.</NOEMBED>

<NOFRAMES>: Non-Frames Text

This Netscape HTML extension element is intended to be used for browsers that understand, but don't
implement, the <FRAMESET>/<NOFRAMES> tags. If one of these browsers comes across the
<NOFRAMES> element, the enclosed text will be displayed. This is basically equivalent to the ALT
attribute for the <IMG> element.

The following is an example of <NOFRAMES>:

<NOFRAMES>You'll only see this if your browser doesn't support the FRAMESET
tag.</NOFRAMES>

<NOTE>: Note

This proposed HTML 3 element will cause the enclosed text to be displayed as a note. The <NOTE>
tag has the following attributes:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• CLEAR-This is a proposed attribute to HTML 3. It can have the value of left, right, or all.
These values indicate which margin is to be clear of images so that text can appear on it.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
249
 Shree M .& N. Virani Science College
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• MD-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This attribute is
used in conjunction with the SRC attribute, to specify a message digest or checksum. This is
used when you want to be sure that a linked object is the one the Web author specified.
• SRC-This points to an URL for an image to be displayed before the <NOTE>.

The following is an example of <NOTE>:

<NOTE>This is a note.</NOTE>

<OL>: Ordered List

This HTML element will display any enclosed <LI> elements as an ordered list. The order is listed
numerically. It has the following attributes:

• ALIGN-This attribute specifies the alignment of the list item. You can set it to be the value of
center, justify, left, or right.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. In the ordered
list, this indicates what type of numerical sequence to use.
• CLEAR-This is a proposed attribute to HTML 3. It can have the value of left, right, or all.
These values indicate which margin is to be clear of images so that text can appear on it.
• COMPACT-This attribute causes the menu list to be displayed in a physically compact form.
• CONTINUE-This proposed HTML 3 attribute will continue the numbering sequence. If you've
already started another <OL> list, the numbering will continue with this attribute.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• SEQNUM-This proposed HTML 3 attribute will define the starting number for the ordered list.
• START-This Netscape extension is the equivalent of the SEQNUM attribute.
• TYPE-This Netscape extension is used to indicate the numbering option. You can set this
attribute to A, a, I, i, or 1.

The following is an example of <OL>:

<OL ALIGN=LEFT SEQNUM=5>This is an item in an ordered lists.</OL>

<OPTION>: Option Form

This HTML element identifies a particular selection in the SELECT element. You can set the following
attributes:

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

250
 Shree M .& N. Virani Science College
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• DISABLED-When this attribute is used, the form is displayed, but the user can't select it.
• ERROR-This proposed HTML 3 attribute takes on a string of characters as a value. This string is
displayed if the user enters an invalid value.
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• SHAPE-This proposed HTML 3 attribute defines the shape of the form.
• SELECTED-This attribute determines the default option.
• VALUE-This attribute, when defined, holds the value to be returned.

The following is an example of <OPTION>:

<OPTION VALUE="line1"></OPTION>

<OVERLAY>: Overlay a Graphic

This proposed HTML 3 tag is intended to be used along with the <FIG> element. The <OVERLAY>
tag enables you to overlay an image on top of a <FIG> image. It has the following attributes:

• HEIGHT-This indicates the initial height of the display for the overlaid image. The value must be
specified as a number of pixels.
• IMAGEMAP-When using imagemaps, you must use this attribute. This indicates that the overlay
is to be treated as imagemap.
• MD-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This attribute is
used in conjunction with the SRC attribute, to specify a message digest or checksum. This is
used when you want to be sure that a linked object is the one the Web author specified.
• SRC-This points to the image to be overlaid on top of a <FIG>.
• UNITS-This attribute enables the HEIGHT and WIDTH attributes to use units other than screen
pixels.
• WIDTH-This indicates the initial width of the display for the overlaid image. The value must be
specified as a number of pixels.
• X-This value indicates the number of units horizontally offset from the upper-left corner of the
<FIG> graphic. The units used is determined by the UNITS attribute. If UNITS isn't specified,
then the default value for the X attribute is pixels.
• Y-This value indicates the number of units horizontally offset from the upper-left corner of the
<FIG> graphic. The units used is determined by the UNITS attribute. If UNITS isn't specified,
then the default value for the Y attribute is pixels.

The following is an example of <OVERLAY>:

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
251
 Shree M .& N. Virani Science College
<OVERLAY SRC="overlay.gif" HEIGHT=200 WIDTH=150 X=50 Y=50>

<P>: Paragraph Break

This HTML tag will prevent the enclosed text from being word wrapped. The browser will not attempt
to word wrap the text contained in this element. You can set the following attributes:

• ALIGN-This attribute specifies the alignment of the list item. You can set it to the value of
center, justify, left, or right.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• CLEAR-This is a proposed attribute to HTML 3. It can have the value of left, right, or all.
These values indicate which margin is to be clear of images so that text can appear on it.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• NOWRAP-This proposed HTML 3 attribute replaces the NOWRAP attribute. Acceptable values for
this attribute are on or off.
• WRAP-This proposed HTML+ attribute will enable or disable word wrap. If this attribute is
present, the browser will word wrap the enclosed text.

The following is an example of <P>:

<P>This line of text will always be this long, regardless of the size of the
browser.</P>

<PARAM>: JAVA Parameter

This HTML element is proposed to support JAVA applets. It enables the Web author to specify
parameters to be passed to the <APPLET> application. This tag has the following attributes:

• NAME-This attribute defines the name of the parameter to be given a value.

• VALUE-This attribute defines the value to be assigned to the NAME attribute.

The following is an example of <PARAM>:

<PARAM NAME="myvar" VALUE="true">

<PERSON>: Person

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

252
 Shree M .& N. Virani Science College
This proposed HTML 3 tag will cause the enclosed text to be displayed as the name of a person. This
element is used for indexing programs to automatically extract these names. It has the following
attributes:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <PERSON>:

<PERSON>John Doe</PERSON>

<PRE>: Preformatted Text

This HTML tag will display the enclosed text as is and in monospaced characters. Normally, text
elements will remove multiple spaces and line breaks to clean up the output. The use of <PRE> will
prevent this. This element has the following attributes:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• CLEAR-This is a proposed attribute to HTML 3. It can have the value of left, right, or all.
These values indicate which margin is to be clear of images so that text can appear on it.
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• WIDTH-This attribute indicates the maximum number of characters per line. Most browsers
ignore this attribute.

The following is an example of <PRE>:

<PRE>I can put as many spaces as I want, and they'll all show
up!</PRE>

<Q>: Quotation
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
253
 Shree M .& N. Virani Science College
This proposed HTML 3 element will display the enclosed text as a quotation. The LANG context defines
the appropriate quotation marks. There are a number of attributes you can set:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <Q>:

<Q>Ask not what your country can do for you.</Q>

<S>: Strikethrough

This proposed HTML 3 element replaces the <STRIKE> tag. This will display a strikeout line through
the enclosed text. This tag has the following attributes:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <S>:

This word appears as a <S>strikethrough</S>.

<SAMP>: Sample

This element displays the enclosed text as a sampling of text. You have the following attributes
available:

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

254
 Shree M .& N. Virani Science College
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <SAMP>:

This word is a <SAMP>sample</SAMP>

<SELECT>: Select Menu

This form element creates a menu of selectable entries. The selectable entries are defined by the
<OPTION> element. The <SELECT> tag has the following attributes:

• ALIGN-This attribute specifies the alignment of the entries. You can set it to the value of
bottom, left, middle, right, or top.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• DISABLED-When this attribute is used, the form will be displayed, but the user won't be able to
select it.
• ERROR-This proposed HTML 3 attribute takes on a string of characters as a value. This string is
displayed if the user enters an invalid value.
• HEIGHT-The height of the list of entries is controlled with this attribute. You can specify the
size in either pixels or as a percentage of the window height.
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• MD-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This attribute is
used in conjunction with the SRC attribute, to specify a message digest or checksum. This is
used when you want to be sure that a linked object is the one the Web author specified.
• MULTIPLE-When this attribute is used, multiple selections may be made.
• NAME-The string in this attribute is the name for the selection form.
• SIZE-This attribute specifies how many options are visible.
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
255
 Shree M .& N. Virani Science College
• SRC-When this attribute is defined, it points to an URL for an image. That image will be
displayed instead of the text defined by the <OPTION> elements.
• UNITS-This attribute enables the HEIGHT and WIDTH attributes to use units other than screen
pixels.
• WIDTH-This indicates the width of the selection window. The value must be specified as a
number of pixels.

The following is an example of <SELECT>:

<SELECT NAME="list1"></SELECT>

<SMALL>: Small

This proposed HTML 3 and Netscape element will cause the enclosed text to be displayed in a smaller
font. This tag has the following attributes:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <SMALL>:

This text is a lot <SMALL>smaller</SMALL>.

<SPAN>: Span Languages

This internationalization proposed element is used to set language characteristics. Whatever text is
enclosed within the markers for this element, will have the specified language characteristics. It has the
following attributes:

• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <SPAN>:

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

256
 Shree M .& N. Virani Science College
Many languages are supported by<SPAN>this</SPAN> element.

<STRONG>: Strong Emphasis

This element is intended to display the enclosed text with a stronger emphasis than when the <EM> tag
is used. This tag has the following attributes:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <STRONG>:

This is something I want you to pay <STRONG>attention</STRONG> to.

<SUB>: Subscript

This Netscape proposed extension will force the browser to display the enclosed text as subscripts. It
has the following attributes:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <SUB>:

This word is a <SUB>subscript</SUB> of the other words.

<SUP>: Superscript

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

257
 Shree M .& N. Virani Science College
This Netscape proposed extension will force the browser to display the enclosed text as superscripts. It
has the following attributes:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <SUP>:

This word is a <SUP>superscript</SUP> of the other words.

<TAB>: Tab Alignment

This proposed HTML 3 element will force the enclosed text to be aligned by defined horizontal
positions. This tag has the following attributes:

• ALIGN-This attribute specifies the alignment of the entries. You can set it to the value of
center, decimal, left, or right.
• ID-You can define tab positions with this attribute.
• INDENT-This attribute will indicate where the indents will be.
• TO-This attribute will help you line up the text.

The following is an example of <TAB>:

<TAB ALIGN="center">This text will be aligned by a tab stop.

<TABLE>: Table

This element is used to define a series of rows as table cells. Table elements are defined by <TR>
elements. This element has the following attributes:

• ALIGN-This attribute indicates the alignment of the text on the line. It can have the value of
bleedleft, bleedright, center, left, right, or justify.
• BORDER-This attribute indicates the thickness of the border around the table.
• CELLPADDING-This attribute specifies the spacing inside the cells.
• CELLSPACING-This attribute determines the spacing between the cells.
• CLEAR-This is a proposed attribute to HTML 3. It can have the value of left, right, or all.
These values indicate which margin is to be clear of images so that text can appear on it.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

258
 Shree M .& N. Virani Science College
• COLS-This attribute defines the total number of columns in the table. This is used to help the
browser determine how the table is shown.
• FRAME-This attribute determines which parts of the table are affected by the BORDER attribute.
This can have the value of above, below, border, box, hsides, lhs, rhs, void, or vsides.
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• NOFLOW-This attribute prevents text from flowing around the table.
• NOWRAP-This prevents the cell data from being word wrapped.
• RULES-This attribute determines whether or not there are rules between rows and columns
inside the table. This attribute can take on the value of all, basic, cols, none, or rows.
• UNITS-This attribute defines the number of units to be used by the other attributes. This
attribute supports the following attributes: en, pixels, or relative.
• WIDTH-This indicates the width of the table cells. The value must be specified as a number of
pixels.

The following is an example of <TABLE>:

<TABLE ALIGN="center" COLS=5 WIDTH=20 CELLPADDING=5>[Table definition]</TABLE>

<TBODY>: Table Body

This proposed HTML element is used to enclose a series of table rows. This tag is not widely
supported. There are a number of attributes available for this element:

• ALIGN-This attribute indicates the alignment of text within the column. It can have the value of
char, center, left, right, or justify.
• CHAR-This is used to indicate which character to align the column with. This is only interpreted
when the ALIGN attribute has been set to char.
• CHAROFF-This number is used to indicate the offset of the alignment character from the table
cell.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

259
 Shree M .& N. Virani Science College
• VALIGN-This attribute indicates the vertical alignment of the table cells. You can set this
attribute to baseline, bottom, middle, or top.

The following is an example of <TBODY>:

<TBODY>[Table row information.]</TBODY>

<TD>: Table Data

This element is used to define a particular cell in a table. This tag has the following attributes:

• ALIGN-This attribute indicates the alignment of the text within the column. It can have the value
of char, center, left, right, or justify.
• AXES-This attribute is a list of names to be displayed for the axes. The names are separated by a
comma.
• AXIS-This attribute is used to define the name for a particular axis of a cell.
• BGCOLOR-This Microsoft proposed extension enables you to specify the background color for
the particular cell. This color is represented by three pairs of hexadecimal numbers. The pairs
represent the red, green, and blue color values.
• CHAR-This is used to indicate which character to align the column with. This is only interpreted
when the ALIGN attribute has been set to char.
• CHAROFF-This number is used to indicate the offset of the alignment character from the table
cell.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• COLSPAN-This value indicates how many columns this table cell occupies. A value of 0
indicates that the cell will span all columns.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• NOWRAP-This attribute will prevent word wrapping from occurring in the table cell.
• ROWSPAN-This value indicates how many rows this table cell occupies. A value of 0 indicates
that the cell will span all rows.
• VALIGN-This attribute indicates the vertical alignment of the table cells. You can set this
attribute to baseline, bottom, middle, or top.
• WIDTH-This proposed Netscape extension enables you to specify the width of the table cell in
pixels.

The following is an example of <TD>:

<TD ALIGN="center" WIDTH=20>A table cell</TD>

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
260
 Shree M .& N. Virani Science College

<TEXTAREA>: Text Area Form

This element is used to create a form input that takes up multiple lines. This HTML tag has the
following attributes:

• ALIGN-This proposed HTML 3 attribute determines where the caption is placed. Acceptable
values are top, bottom, left, middle, and right.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• COLS-This attribute defines the total number of columns in the form. This is used to help the
browser determine how the table should be shown.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• DISABLED-This proposed HTML attribute shows the contents of the tag, but prevents its
modification.
• ERROR-This proposed HTML 3 attribute is used when an incorrect value is entered. The text
specified in this attribute is displayed on invalid input.
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• NAME-The string in this attribute is the name for the input form.
• ROWS-This attribute defines the total number of columns in the form. This is used to help the
browser determine how the table should be shown.
• WRAP-This proposed Netscape extension provides for control of the text inside this element.
You can use the values of off, physical, and virtual.

The following is an example of <TEXTAREA>:

<TEXTAREA NAME="mytext" COLS=60 ROWS=20></TEXTAREA>

<TFOOT>: Table Footer

This proposed HTML 3 element will enable you to specify the attributes for a group of table rows.
Depending on the browser, these attributes will be applied across multiple browser pages, as table
footers. That is, separate HTML documents will not be affected by the TFOOT element; rather, the
way it is displayed is affected. The browser will display the table as it breaks across browser page
boundaries. The table rows to be defined are enclosed within the start and end markers for the tag. This
element has the following attributes:

• ALIGN-This attribute indicates the alignment of the text within the column. It can have the value
of char, center, left, right, or justify.
• CHAR-This is used to indicate which character to align the column with. This is only interpreted
when the ALIGN attribute has been set to char.
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
261
 Shree M .& N. Virani Science College
• CHAROFF-This number is used to indicate the offset of the alignment character from the table
cell.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• VALIGN-This indicates the vertical alignment of the text of the table cell. Acceptable values for
this attribute are baseline, bottom, middle, and top.

The following is an example of <TFOOT>:

<TFOOT>This is a table footer.</TFOOT>

<TH>: Table Header

The text enclosed within this HTML tag, becomes a table header. This element has the following
attributes:

• ALIGN-This attribute indicates the alignment of the text within the column. It can have the value
of char, center, decimal, left, right, or justify.
• AXES-This attribute is a list of names to be displayed for the axes. The names are separated by a
comma.
• AXIS-This attribute is used to define the name for a particular axis of a cell.
• BGCOLOR-This Microsoft proposed extension enables you to specify the background color for
the particular cell. This color is represented by three pairs of hexadecimal numbers. The pairs
represent the red, green, and blue color values.
• CHAR-This is used to indicate which character to align the column with. This is only interpreted
when the ALIGN attribute has been set to char.
• CHAROFF-This number is used to indicate the offset of the alignment character from the table
cell.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• COLSPAN-This value indicates how many columns this table cell occupies. A value of 0
indicates that the cell will span all columns.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
262
 Shree M .& N. Virani Science College
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• NOWRAP-This attribute will prevent word wrapping from occurring in the table cell.
• ROWSPAN-This value indicates how many rows this table cell occupies. A value of 0 indicates
that the cell will span all rows.
• VALIGN-This attribute indicates the vertical alignment of the table cells. You can set this
attribute to baseline, bottom, middle, or top.
• WIDTH-This proposed Netscape extension enables you to specify the width of the table cell in
pixels.

The following is an example of <TH>:

<TH VALIGN="middle" WIDTH=50>Table Header</TH>

<THEAD>: Table Header

This proposed HTML 3 element enables you to specify the attributes for a group of table rows.
Depending on the browser, these attributes will be applied across multiple browser pages, as table
headers. That is, separate HTML documents will not be affected by the TFOOT element; rather, the
way it is displayed is affected. The browser will display the table as its breaks across browser page
boundaries. The table rows to be defined are enclosed within the start and end markers for the tag. This
element has the following attributes:

• ALIGN-This attribute indicates the alignment of the text within the column. It can have the value
of char, center, left, right, or justify.
• CHAR-This is used to indicate which character to align the column with. This is only interpreted
when the ALIGN attribute has been set to char.
• CHAROFF-This number is used to indicate the offset of the alignment character from the table
cell.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• VALIGN-This indicates the vertical alignment of the text of the table cell. Acceptable values for
this attribute are baseline, bottom, middle, and top.

The following is an example of <THEAD>:

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

263
 Shree M .& N. Virani Science College
<THEAD>This is a table header.</THEAD>

<TITLE>: Title

This HTML element defines the enclosed text as the title for the current Web page.

• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <TITLE>:

<TITLE>My Home Page</TITLE>

<TR>: Table Row

This HTML tag defines a table row for a <TBODY>, <TFOOT>, or <THEAD>. This element has the
following attributes:

• ALIGN-This attribute indicates the alignment of the text within the column. It can have the value
of char, decimal, center, left, right, or justify.
• CHAR-This is used to indicate which character to align the column with. This is only interpreted
when the ALIGN attribute has been set to char.
• CHAROFF-This number is used to indicate the offset of the alignment character from the table
cell.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• VALIGN-This indicates the vertical alignment of the text of the table cell. Acceptable values for
this attribute are baseline, bottom, middle, and top.

The following is an example of <TR>:

<TR><TD>Table Data</TD>

<TT>: Teletype
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
264
 Shree M .& N. Virani Science College
This HTML element displays all of the enclosed text as a teletype. Typically, the width of each of the
characters will be exactly the same. You can set the following attributes:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <TT>:

This text will be displayed as <TT>teletype characters</TT>.

<UL>: Unordered List

This element shows enclosed <LI> elements as a bulleted (unordered) list. This HTML tag has the
following attributes:

• ALIGN-This attribute indicates the alignment of the text on the line. It can have the value of
center, left, right, or justify.
• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• CLEAR-This is a proposed attribute to HTML 3. It can have the value of left, right, or all.
These values indicate which margin is to be clear of images so that text can appear on it.
• COMPACT-This attribute tells the browser to display the list in a compact manner. It is not,
however, supported by many browsers.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
• MD-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This attribute is
used to specify a message digest or checksum. This is used when you want to be sure that a
linked object is the one the Web author specified.
• TYPE-This Netscape proposed HTML attribute enables you to specify the type of bullets to be
used. You can use the value of circle, disc, or square.
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
265
 Shree M .& N. Virani Science College
• WRAP-If this proposed HTML 3 attribute is present, the browser will word wrap the enclosed
text.

The following is an example of <UL>:

<UL><LI>A list item.</LI></UL>

<VAR>: Variable

This HTML element displays the enclosed text as a variable. This tag has the following attributes:

• CLASS-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This is a list of
calls and subclasses separated by spaces. Acceptable values that you can use have not been
defined by HTML 3.
• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• ID-This is a proposed attribute to HTML 3 as part of a style sheet proposal. This defines the
current line as a destination point. These points are used for internal jumps or jumps to a
specific line.
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.

The following is an example of <VAR>:

Set <VAR>myvar</VAR> equal to 0.

<WBR>: Word Break

This Netscape proposed extension forces a word break to occur. This is mainly used if you want to
force a word break in the middle of a non-breaking HTML element. It has no attributes.

The following is an example of <WBR>:

A line break will occur now.<WBR>

<XMP>: Multi-Line Text

This HTML element displays the enclosed text as is. No text formatting by the browser will be done to
the enclosed text. This tag has the following attributes:

• DIR-This is a proposed attribute to HTML for internationalization. It's used to indicate which
direction to display the text. It can either have the value ltr (left to right) or rtl (right to left).
• LANG-This is a proposed attribute to HTML for internationalization. This attribute is composed
from the two-letter language code from ISO 639. You can optionally add a period, followed by
a two-letter country code from ISO 3166. This attribute can be used by parsers to select
language-specific choices for quotation marks, ligatures, and hyphenation rules.
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
266
 Shree M .& N. Virani Science College
• WIDTH-This proposed Netscape extension enables you to specify the width of the multiple
lines..

The following is an example of <XMP>:

<XMP>
This text will appear as you see it.
There are no special HTML elements to create
the line breaks you see.
</XMP>

Special Characters

HTML allows for the insertion of any character defined in the ISO 8859-1 character set, into Web
pages. These characters may not always be visible to all browsers, but they are defined as available
entities. Table A lists all the special characters with their corresponding HTML code. If you want to
put a particular character in your Web page, simply type in the entire string under the "HTML Code"
heading. Some of the characters have two possible HTML codes, so simply use one of them. Be sure to
include the ampersand (&) before the code, and the semicolon (;) after the code.

Table A.1 HTML Codes for ISO 8859-1 Characters

Description of Character HTML Code Example of Character
Quotation mark &quot; "
Ampersand &amp; &
Less-than sign &lt; <
Greater-than sign &gt; >
Non-breaking space &nbsp;
Inverted exclamation mark &iexcl; ¡
Cent sign &cent; ¢
Pound sterling &pound; £
General currency sign &curren; ¤
Yen sign &yen; ¥
Broken vertical bar &brvbar; |

or &brkbar;
Section sign &sect; §
Umlaut (dieresis) &uml; or &die; ¨
Copyright &copy; ©
Feminine ordinal &ordf; ª
Left angle quote &laquo; «
(guillemotleft)
Not sign &not; ¬
Soft hyphen &shy; -

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

267
 Shree M .& N. Virani Science College

Registered trademark &reg; ®

Macron accent &macr; or &hibar; ¯
Degree sign &deg; °
Plus or minus &plusmn; ±
Superscript two &sup2; 2
superscript three &sup3; 3
Acute accent &acute; ´
Micro sign &micro; µ
Paragraph sign &para; ¶
Middle dot &middot; ·
Cedilla &cedil; ‚
Superscript one &sup1; 1
Masculine ordinal &ordm; º
Right angle quote &raquo; »
(guillemotright)
Fraction one-fourth &frac14; 1/4
Fraction one-half &frac12; 1/2
Fraction three-fourths &frac34; 3/4
Inverted question mark &iquest; ¿
capital A, grave accent &Agrave; À
Capital A, acute accent &Aacute; Á
Capital A, circumflex accent &Acirc;
Capital A, tilde &Atilde; Ã
Capital A, umlaut (dieresis) &Auml; Ä
Capital A, ring &Aring; Å
Capital AE, diphthong &Aelig; Æ
(ligature)
Capital C, cedilla &Ccedil; Ç
Capital E, grave accent &Egrave; È
Capital E, acute accent &Eacute; É
Capital E, circumflex accent &Ecirc; Ê
Capital E, umlaut (dieresis) &Euml; Ë
Capital I, grave accent &Igrave; Ì
Capital I, acute accent &Iacute; Í
Capital I, circumflex accent &Icirc; Î
Capital I, umlaut (dieresis) &Iuml; Ï
Capital Eth, Icelandic &ETH; or &Dstrok;
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
268
 Shree M .& N. Virani Science College

Capital N, tilde &Ntilde; Ñ

Capital O, grave accent &Ograve; Ò
Capital O, acute accent &Oacute; Ó
Capital O, circumflex accent &Ocirc; Ô
Capital O, tilde &Otilde; Õ
Capital O, umlaut (dieresis) &Ouml; Ö
Multiply sign &times; x
Capital O, slash &Oslash; Ø
Capital U, grave accent &Ugrave; Ù
Capital U, acute accent &Uacute; Ú
Capital U, circumflex accent &Ucirc; Û
Capital U, umlaut (dieresis) &Uuml; Ü
Capital Y, acute accent &Yacute; Y
Capital THORN, Icelandic &THORN;
Small sharp s, German (sz &szlig; ß
ligature)
Small a, grave accent &agrave; à
Small a, acute accent &aacute; á
Small a, circumflex accent &acirc;
Small a, tilde &atilde; ã
Small a, umlaut (dieresis) &auml; ä
Small a, ring &aring; å
Small ae diphthong &aelig; æ
(ligature)
Small c, cedilla &ccedil; ç
Small e, grave accent &egrave; è
Small e, acute accent &eacute; é
Small e, circumflex accent &ecirc; ê
Small e, umlaut (dieresis) &euml; '
Small i, grave accent &igrave; "
Small i, acute accent &iacute; '
Small i, circumflex accent &icirc; "
Small i, umlaut (dieresis) &iuml;
Small eth, Icelandic &eth; ð
Small n, tilde &ntilde; ñ
Small o, grave accent &ograve; ò
Small o, acute accent &oacute; ó
“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page
269
 Shree M .& N. Virani Science College

Small o, circumflex accent &ocirc; ô

Small o, tilde &otilde; õ
Small o, umlaut (dieresis) &ouml; ö
Division sign &divide; ÷
Small o, slash &oslash; ø
Small u, grave accent &ugrave; ù
Small u, acute accent &uacute; ú
Small u, circumflex accent &ucirc; û
Small u, umlaut (dieresis) &uuml; ü
Small y, acute accent &yacute; y
Small thorn, Icelandic &thorn;
Small y, umlaut (dieresis) &yuml; ÿ

“Yogidham”, Kalawad Road, Rajkot – 5 Ph : 2576681 Page

270