HTML Your Visual

HTML GETTING STARTED 1
THE INTERNET AND

THE WORLD WIDE WEB
THE INTERNET THE WORLD WIDE WEB
The Internet is the largest computer network in the The World Wide Web is a part of the Internet and
Structure of the Internet Web Browsers
world. More than 275 million people worldwide consists of a huge collection of documents stored
use the Internet to access information, exchange The Internet consists of thousands of connected on computers around the world. The World Wide A Web browser is a program that lets
electronic mail (e-mail), participate in discussion networks around the world. Each government Web is commonly known as the Web. people view and explore information on the
groups, shop online and more. agency, company, college, university and Web. A Web browser retrieves Web pages
organization on the Internet is responsible for A Web page is a document on the Web. Web and other files from a Web server and
The Internet began as a military research project maintaining its own network. When you transfer pages can include information such as text, displays them on a user’s computer. Two
in the late 1960s. The U.S. Defense Department information over the Internet, these organizations images, pictures, sounds and videos. Web pages popular Web browsers include Microsoft
created a network, called ARPANET, that covered allow the information to pass through their are stored on computers called Web servers. Internet Explorer and Netscape Navigator.
a large geographic area and that would continue networks. Once a Web page is stored on a Web server, it is The latest versions of these two programs
to function even if part of the network failed. The available for other people to view. Many colleges, are available at the www.microsoft.com/ie
improved, high-speed network that developed from Computers on the Internet use a collection universities, government agencies, companies, and www.netscape.com Web sites.
this technology became the Internet. In the 1980s, of protocols called Transmission Control organizations and individuals create and maintain
most of the people accessing the Internet were Protocol/Internet Protocol (TCP/IP) to transfer collections of Web pages called Web sites.
scientists and researchers. In the early 1990s, information over the Internet. A protocol is a
companies began to offer Internet access to home set of rules controlling the transfer of information
users and the Internet eventually grew to include between computers. TCP/IP allows computers
URLs Links
organizations and individuals around the world. on the Internet to communicate as if they were
directly connected. Each page on the Web has a unique address, called Web pages contain highlighted text or images,
a Uniform Resource Locator (URL). People can called links, that connect to other pages on
instantly display a Web page if they know its URL. the Web. Links are also known as hyperlinks.
Internet Connections Links save people from having to enter the
Modem Cable Modem A Web page URL consists of a scheme, a Web URL of each Web page they want to view.
There are several types server name and a path. The scheme identifies the
Most people use a modem to A cable modem can transfer information This allows people to move through a vast
of Internet connections language, or protocol, used to access the Web page.
connect to the Internet through at a speed of up to 3,000 Kbps using amount of information by jumping from one
available. The type of The Web server name, also known as a domain
a regular telephone line. When the same type of cable that attaches Web page to another.
connection a person name, indicates the name of the server that stores
uses determines how browsing the Web using a modem, to a television set. Contact your local
a modem speed of 56 Kilobits per cable company to determine if they the Web page. The path specifies the location of Links are easily identifiable on a Web page.
quickly information the Web page on the Web server. For example, the Text links appear underlined and in color and
can transfer to their second (Kbps) is recommended. offer cable Internet services.
URL http://www.maran.com/books/promo.html image links usually display a colored border.
computer. has the scheme http, the Web server name
ISDN DSL
www.maran.com and the path /books/promo.html.
An Integrated Services Digital Digital Subscriber Line (DSL) is
Network (ISDN) line is a digital a service offered by telephone Although Web page URLs usually use the http
phone line offered by telephone companies in many cities. DSL (HyperText Transfer Protocol) scheme, there are
companies in most cities. An ISDN can transfer information at speeds other common schemes used on the Internet. For
line can transfer information at from 1,000 Kbps to 9,000 Kbps. example, an FTP (File Transfer Protocol) site uses
speeds from 64 Kbps to 128 Kbps. the ftp scheme. FTP sites store files that people
can download.
2 3
PLAN YOUR WEB SITE STEPS FOR CREATING WEB PAGES
efore you begin creating Web pages, an area of expertise. Commercial Web pages
P
lan your Web site carefully before you
begin creating individual Web pages for
the site. This can help you avoid having
to reorganize your Web pages later. Decide
When users visit your Web site, they should
be able to easily access information in the
site. Sketching a layout of your Web site can
help you organize the site. Once you have
B decide what you want to accomplish
with your Web pages. Decide on a
main topic or theme for your Web pages
allow you to share information about your
business, such as press releases, online
catalogs and job postings.
how many Web pages you want your Web determined a layout for your Web site, you and then determine the type of information
you want to include. For example, you may Use the following steps as a guideline to
site to contain and consider how the pages should plan the main page, or home page,
want to create personal Web pages to share help you create attractive and useful Web
will link to each other. for the site.
information about your family, interests or pages.
WEB SITE LAYOUT
STEPS FOR CREATING WEB PAGES
Linear Hierarchical
1) Gather Information 3) Enter Information
A linear layout organizes Web pages in a straight In a hierarchical layout, all Web pages branch
line. This layout is ideal for Web pages that people off a home page. The home page provides Collect the information you want to include Enter the text you want to appear on your Web
should read in a specific order, such as pages a general summary of the information in on your Web pages, such as text, images, pages in a text editor or word processor. Each
containing a story or step-by-step instructions. the Web site, while the other pages provide diagrams and contact numbers. Make sure Web page should be a separate document. Then
Each Web page in a linear layout usually links more specific information. Users select links that the information you gather directly add HTML tags to convert the documents into
to the next and previous page in the Web site, on the home page to access Web pages that relates to the main topic or theme of your Web pages. HTML tags also allow you to add
allowing users to move both forwards and contain detailed information. Web pages and will appeal to your intended elements such as images, sounds, videos and
backwards through the Web pages. audience. When gathering information, keep tables to your Web pages.
Combination in mind that you must have permission to
use any information that you did not create
Web Combining layouts provides you with the most yourself. 4) Add Links
A Web layout has no overall structure. Each flexibility when creating your Web site. For
Web page in a Web layout contains multiple example, combining a hierarchical layout with Adding links is an important step in creating Web
links to other Web pages in the site. This type a Web layout lets you create a Web site that pages. Links are text or images that users can
of layout is ideal for Web pages that people has an overall structure, yet still allows users select to display pages on the Web. The links
do not need to read in a specific order. to randomly browse through information. 2) Organize Information you add to your Web pages should allow users
Divide the information you gathered into to easily move through information of interest.
different sections. Each section will be
a separate Web page that discusses a
PLAN YOUR HOME PAGE
different concept or idea. Each Web page 5) Publish Web Pages
should contain enough information to fill
a single screen. When organizing your When you finish creating your Web pages,
The home page is usually the first page users When planning your home page, make sure
information, consider that adding many you can have a company called a Web Presence
will see when they visit your Web site. The the home page will work well with the layout
elements to a single Web page will increase Provider (WPP) publish your pages. A Web
home page is usually named index.html or of your Web site. For example, the home page
the file size of the Web page. A larger file presence provider will store your pages on
index.htm. for a Web site with a linear layout should
size can increase the time it takes for the a Web server to make the pages available for
contain a link to the next page in the Web site.
Your home page should contain a brief page to transfer to a user’s computer. other people to view. After you publish your
summary of your Web site, a table of contents Web pages, you should test the pages to
and links that users can select to quickly ensure that your links work properly and
access information of interest. your information appears the way you want.
4 5
WEB PAGE CONTENT CONSIDERATIONS
W
hen creating your Web pages, carefully
consider the content you want the pages
to include. The following suggestions
can help you design well-organized Web pages
that contain useful information.
EMPHASIZE IMPORTANT INFORMATION COPYRIGHT CONSIDERATIONS USE WARNINGS
Always display the most important information access any important information that appears If you plan to use text, images or other If your Web pages display information that some
at the top of each Web page. Some users will later in the page. information you did not create, make sure that users may consider offensive, place a warning on
not scroll through a Web page to read all the the information is not copyrighted. Many pages your home page. When users visit your Web site,
information. These users will miss important Headings can also help emphasize important
on the Web offer information and images that they will see the warning and can then decide if
information if you do not display the information information, allowing users to glance through a
do not have copyright restrictions. If you want they want to view your Web pages.
at the top of each page. Web page and quickly find information of interest.
to use copyrighted information, you must obtain
permission from the author. If you want to prevent certain people, such as
Including a table of contents that contains links children, from entering your Web site, ask your
to important areas of a Web page can help users Web presence provider about setting up password
INCLUDE CONTACT INFORMATION
protection for your Web site.
CONSIDER FILE SIZES AVOID "UNDER CONSTRUCTION" LABELS

Always include your name and e-mail address
PROVIDE A FAQ
on Web pages you create. This allows users to
When determining the content for a Web page, Avoid using "under construction" labels for Web
contact you if they have questions or comments.
keep in mind that including many elements pages that are not complete. Users will become
with large file sizes, such as embedded sounds frustrated when they visit a Web page that does When providing contact information, you A FAQ is a list of Frequently Asked Questions
and videos, will increase the time it takes for the not contain useful information. You should not may want to set up a separate e-mail address about a topic. A FAQ can help answer questions
page to transfer to a user's computer. Whenever make Web pages available on the Web until the for messages about your Web site. This will that people have about your Web pages and
possible, you should limit the number of large pages are complete. help prevent your personal e-mail inbox help prevent people from sending you e-mail
files you include on a Web page. from becoming overloaded with queries and messages asking the same questions over and
comments if your Web site becomes popular. over.
PAGE LENGTH AVOID SPECIFIC WEB BROWSER INSTRUCTIONS

If you are not sure what information to include
in your FAQ, you may want to wait until you
WEB PAGES WITHOUT IMAGES have received some questions and comments
Web pages should not be too short or too long. Avoid giving detailed instructions on how to about your site before creating the FAQ. This
If a Web page is shorter than half a screen of perform a task using a specific Web browser. can help you determine what information to
information, try to combine the information with People who use a different Web browser may not Some users turn off the display of images to include in your FAQ.
another page. If a Web page is longer than five be able to perform the task using the instructions browse the Web more quickly, while others
screens, you may want to break up the page you provide. For example, adding a Web page use Web browsers that cannot display images.
into several shorter pages. Users may become to your list of favorite Web pages is a different Always design your Web pages so that users
frustrated if they have to scroll through a large process in Internet Explorer than in Netscape who do not see images will still get valuable
amount of information on a page. Navigator. information from your pages. It is also important
to make sure you provide text that will appear
for users who do not see images.
6 7
INTRODUCTION TO HTML VIEW HTML CODE FOR A WEB PAGE

yperText Markup Language (HTML) is a You do not have to create different HTML iewing the HTML code used to create Examining the HTML code used to create
H computer language used to create Web

pages. Web pages are HTML documents
that consist of text and HTML tags. HTML
documents for different types of computers.
Any computer that has a Web browser installed
can display Web pages, including computers
V other pages on the Web is a great
way to get ideas for your own Web
pages. You can find popular Web sites at the
other Web pages can also help you
troubleshoot problems you are experiencing
with your own Web pages. For example,
documents have the .html or .htm extension running a Unix, Windows or Macintosh operating coolsiteoftheday.com and www.100hot.com if you are having a problem creating a table,
(example: index.html). A Web browser interprets system. Web sites. you should view the HTML code for a Web
the tags in an HTML document and displays page that contains a table.
the document as a Web page. Viewing the HTML code for a Web
page allows you to see how other people Although you can use the HTML code you
HTML ESSENTIALS use HTML tags. This can help you learn find on the Web, you should never copy
HTML techniques and can improve any content on a Web page without first
your understanding of HTML. obtaining permission from the author.
HTML Tags Web Browsers
HTML tags tell a Web browser about the structure A Web page may not look the same when VIEW HTML CODE FOR A WEB PAGE
and formatting of a Web page. Each tag gives a displayed in different Web browsers. Each Web
specific instruction and is surrounded by angle browser may interpret HTML tags differently
brackets < >. Most tags have an opening tag and and many Web browsers do not support all
a closing tag that affect the text between the tags. of the features of HTML.
<HTML>
Some tags have only an opening tag. Although tags <HEAD>
can display uppercase or lowercase letters, most Some companies that make Web browsers, <TITLE>Into the Wild</TITLE>
</HEAD>
people use uppercase letters to make the tags such as Netscape and Microsoft, have developed <BODY>
stand out. additional tags and attributes that Web browsers <H1><I>Into the Wild!</I></H1>
made by other companies may not understand. Source
<IMG SRC="cougar.jpg" ALIGN="left">
Many tags have attributes that offer options for When a Web browser does not understand <P><B>Would you like to venture beyond the beaten path? Do so
with Into the Wild's adventure tours.</B></P>
the tags. For example, the <FONT> tag has a a tag or attribute, the information is usually <P>Whether you'd like to take a nature photography tour, camp in
the rugged wilderness of the Rocky Mountains or go on a
COLOR attribute that lets you change the color ignored. These tags and attributes are commonly canoeing adventure, we have the trip for you!</P>
of text. Most attributes have values that you can known as extensions and are not part of the <IMG SRC="skier.jpg" ALIGN="right">
<BR><H3>Skiing</H3>
specify. For example, the COLOR attribute can HTML standard. <P>Some of our most popular trips are alpine skiing excursions
have a value of red. in the Rocky Mountains. We will fly you to the top of the slopes by
helicopter and provide comfortable accommodations at the end of a
fun-filled day! Cross-country ski packages are also available!</P>
HTML Versions
There are several versions of HTML. The HTML specification, also known
as the HTML standard, is constantly evolving and a new version of HTML ⁄ Start the Web browser ‹ Click View. ■ A window appears, ˇ When you finish
is released every few years. Each version offers new features to give people you want to use. In this displaying the HTML viewing the HTML
example, we started › Click Source. code used to create code, click to
more control when creating Web pages. An organization called the World
Wide Web Consortium (W3C) regulates the versions of HTML. HTML version Microsoft Internet Explorer. Note: If you are using the Web page. close the window.
4.01 is the latest version of HTML. Information about HTML and its versions ¤ Display the Web page Netscape Navigator,
is available at the www.w3.org Web site. you want to view the click Page Source.
HTML code for.
8 9
HTML WEB PAGE BASICS 2
If the text you type for your Web page scrolls off Visual editors such as Microsoft FrontPage and
the screen in your text editor or word processor, HoTMetaL PRO allow you to create Web pages
SET UP A WEB PAGE you can have the program wrap the text to fit on
the screen. To wrap text in Microsoft WordPad,
select the View menu and then click Options. In
without having to enter HTML tags. Visual
editors enter the tags for you as you create a
Web page. Microsoft FrontPage is available at
the Options dialog box, click the Wrap to window the www.microsoft.com/frontpage Web site
any people create Web pages using the appearance of the text. HTML tags provide
M
option ( changes to ). and HoTMetaL PRO is available at the
a text editor or word processor. instructions for formatting and structuring www.softquad.com Web site.
Popular text editors include Notepad a Web page.
HTML editors such as BBEdit and HomeSite
for Windows and SimpleText for Macintosh. are also useful for creating Web pages. These
Microsoft WordPad, Microsoft Word and After entering the text for the Web page, save
programs offer menus and toolbars that help
Corel WordPerfect are popular word processors. the Web page as a text document and specify you add HTML tags to a Web page. BBEdit
a name for the Web page with the .html or .htm is available at the www.barebones.com Web site
To set up a Web page, first enter the text you extension. A Web page name can contain letters and HomeSite is available at the www.allaire.com
want to appear on the Web page. Do not and numbers, but no spaces. The main Web Web site.
format the text using your text editor or word page, or home page, in a Web site is usually
processor. You must add HTML tags to change named index.html.
SET UP A WEB PAGE
Fruit and Flowers, Inc. Fruit and Flowers, Inc. Fruit and Flowers, Inc. Fruit and Flowers, Inc.
No garden? No problem! No garden? No problem! No garden? No problem! No garden? No problem!
Our special, patented fertilizer lets you grow lush flowers and healthy fruit INDOORS! Our special, patented fertilizer lets you grow lush flowers and healthy fruit INDOORS! Our special, patented fertilizer lets you grow lush flowers and healthy fruit INDOORS! Our special, patented fertilizer lets you grow lush flowers and healthy fruit INDOORS!
Grow beautiful, exotic flowers and impress your friends! Grow beautiful, exotic flowers and impress your friends! Grow beautiful, exotic flowers and impress your friends! Grow beautiful, exotic flowers and impress your friends!
Grow your own fruit and save on your grocery bills! Grow your own fruit and save on your grocery bills! Grow your own fruit and save on your grocery bills! Grow your own fruit and save on your grocery bills!
Our fruit selection includes: Our fruit selection includes: Our fruit selection includes: Our fruit selection includes:
Popular berries such as strawberries, raspberries and blueberries. Popular berries such as strawberries, raspberries and blueberries. Popular berries such as strawberries, raspberries and blueberries. Popular berries such as strawberries, raspberries and blueberries.
Exotic fruit such as mangos, papayas and kiwis. Exotic fruit such as mangos, papayas and kiwis. Exotic fruit such as mangos, papayas and kiwis. Exotic fruit such as mangos, papayas and kiwis.
Our flower selection includes: Our flower selection includes: Our flower selection includes: Our flower selection includes:
Seasonal plants such as poinsettias, holly and mistletoe. Seasonal plants such as poinsettias, holly and mistletoe. Seasonal plants such as poinsettias, holly and mistletoe. Seasonal plants such as poinsettias, holly and mistletoe.
Tropical flowers such as orchids, birds of paradise and yellow jasmine. Tropical flowers such as orchids, birds of paradise and yellow jasmine. Tropical flowers such as orchids, birds of paradise and yellow jasmine. Tropical flowers such as orchids, birds of paradise and yellow jasmine.
Text Document
⁄ Start the word processor ‹ Click to save › Type a name for the Web Note: A Web page name can ˇ Click this area to list ‡ Click Save. ■ A dialog box appears, ° Click Yes to save
or text editor you want to the Web page. page. Make sure you add contain letters and numbers, the ways you can save stating that all formatting the Web page.
use to create a Web page. the .html or .htm extension but no spaces. The home page the Web page. will be removed from the
In this example, we started ■ The Save As dialog to the Web page name. Web page.
box appears. is usually named index.html. Á Click Text Document.
Microsoft WordPad.
■ This area shows
¤ Type the text you want the location where the
to appear on the Web page. program will store the CONTINUED
Web page. You can click
this area to change the
10 location. 11
SET UP A WEB PAGE (CONTINUED) The HTML standard also includes the
<!DOCTYPE> tag, which you can use to
Choose the title for your Web page carefully
since search tools will use the title to catalog
provide Web browsers with information about the Web page. A search tool is a Web site
T
here are some basic HTML tags The <TITLE> tag appears in the head the HTML version you are using. For example, that helps people quickly find information
you should add to every Web page section of your Web page. This tag allows type <!DOCTYPE HTML PUBLIC "-//W3C// on the Web. When users enter words in a
you create. you to give your Web page a descriptive DTD HTML 4.0 Transitional//EN"> before the search tool, your Web page will be more likely
title. Every Web page you create must have <HTML> tag on your Web page to indicate to appear in the search results if the words
The <HTML> tag should appear at the that you are using HTML version 4.0. Many match your Web page title. Popular search
a title. Titles usually appear in the title bar people choose not to use the <!DOCTYPE> tools include Infoseek (www.infoseek.com)
top of every Web page you create. This of a Web browser window. A Web page title tag since Web browsers do not require the tag. and Yahoo! (www.yahoo.com).
tag identifies your document as a Web should contain only letters and numbers.
page containing HTML code.
To save time when creating Web pages, create
The <BODY> tag identifies the body section a document that contains only the <HTML>,
The <HEAD> tag should appear directly of your Web page. This section contains <HEAD>, <TITLE> and <BODY> tags and then
below the <HTML> tag. The <HEAD> tag the content of your Web page, including use this document as a template each time
identifies the head section of your Web the text, images, tables and other elements you create a Web page.
page, which contains information about you want users to see when they visit your
the Web page, such as the title. Web page.
SET UP A WEB PAGE (CONTINUED)
<HTML> <HTML> <HTML> <HTML>

<HEAD> <HEAD> <HEAD>
Fruit and Flowers, Inc. <TITLE> Fruit and Flowers Inc </TITLE> <TITLE>Fruit and Flowers Inc</TITLE>
No garden? No problem! </HEAD> </HEAD> </HEAD>
Our special, patented fer tilizer lets you grow lush flowers and healthy fruit <BODY>
INDOORS! Fruit and Flowers, Inc. Fruit and Flowers, Inc.
Grow beautiful, exotic flowers and impress your friends! No garden? No problem! No garden? No problem! Fruit and Flowers, Inc.
Grow your own fruit and save on your grocery bills! Our special, patented fer tilizer lets you grow lush flowers and healthy fruit Our special, patented fertilizer lets you grow lush flowers and healthy fruit No garden? No problem!
Our fruit selection includes: INDOORS! INDOORS! Our special, patented fertilizer lets you grow lush flowers and healthy fruit
Popular berries such as strawberries, raspberries and blueberries. Grow beautiful, exotic flowers and impress your friends! Grow beautiful, exotic flowers and impress your friends! INDOORS!
Exotic fruit such as mangos, papayas and kiwis. Grow your own fruit and save on your grocery bills! Grow your own fruit and save on your grocery bills! Grow beautiful, exotic flowers and impress your friends!
Our flower selection includes: Our fruit selection includes: Our fruit selection includes: Grow your own fruit and save on your grocery bills!
Seasonal plants such as poinsettias, holly and mistletoe. Popular berries such as strawberries, raspberries and blueberries. Popular berries such as strawberries, raspberries and blueberries. Our fruit selection includes:
Tropical flowers such as orchids, birds of paradise and yellow jasmine. Exotic fruit such as mangos, papayas and kiwis. Exotic fruit such as mangos, papayas and kiwis. Popular berries such as strawberries, raspberries and blueberries.
Our flower selection includes: Our flower selection includes: Exotic fruit such as mangos, papayas and kiwis.
</HTML> Seasonal plants such as poinsettias, holly and mistletoe. Seasonal plants such as poinsettias, holly and mistletoe. Our flower selection includes:
Tropical flowers such as orchids, birds of paradise and yellow jasmine. Tropical flowers such as orchids, birds of paradise and yellow jasmine. Seasonal plants such as poinsettias, holly and mistletoe.
Tropical flowers such as orchids, birds of paradise and yellow jasmine.
</HTML> </HTML>
</BODY>
</HTML>
HTML TAGS ¤ Type </HTML> after all HEAD TAGS ¤ Press Enter twice. TITLE TAGS ¤ Type the title of the BODY TAGS ¤ Type </BODY> directly
⁄ Type <HTML> before the text on the Web page. ⁄ Type <HEAD> directly ⁄ Type <TITLE> directly Web page, using only ⁄ Type <BODY> directly above the </HTML> tag.
‹ Type </HEAD>. letters and numbers.
all the text on the Web Note: Although the <HTML> and below the <HTML> tag. below the <HEAD> tag. below the </HEAD> tag. Note: Although the <BODY> and
page. </HTML> tags are optional, it is Note: Although the <HEAD> and ‹ Type </TITLE>. </BODY> tags are optional, it is
considered proper form to include </HEAD> tags are optional, it is considered proper form to include
these tags. considered proper form to include these tags.
these tags. CONTINUED
12 13
DISPLAY A WEB PAGE
IN A WEB BROWSER If you cannot locate the Web page you want
to open, you may not have saved your Web
Although Microsoft Internet Explorer and
Netscape Navigator are the two most popular
page properly. When saving a Web page, you Web browsers, there are several other Web
isplaying your Web page in a Web browser each section of HTML code, the browser displays
D allows you to see how the page will appear

on the Web.
You need a Web browser program, such as Microsoft
the resulting information on the screen. This means
that a Web browser can display part of a Web page
before it has completely finished processing the page.
must save the page in a text only format and
add the .html or .htm extension to the name
of the page (example: index.html).
browsers available, such as Opera and Lynx. For
information on Opera, visit the www.opera.com
Web site. For information on Lynx, visit the
lynx.browser.org Web site.
Refreshing the display of your Web page in a
Internet Explorer or Netscape Navigator, before you You should display your Web page in several Web
Web browser allows you to see how changes Even though you can display your Web page
can display your Web page in a Web browser. The browsers to see how each browser will display you have made will appear on the Web. After in a Web browser on your computer, other
most recent versions of Microsoft Internet Explorer the Web page. Each Web browser may interpret saving your changes in your text editor or word people on the Web will not be able to view
and Netscape Navigator are available at the HTML tags differently and many Web browsers do processor, click the Refresh or Reload button your page until you transfer the page to a
www.microsoft.com/ie and www.netscape.com not support all of the features of HTML. For example, in the Web browser window. If you are using Web presence provider's Web server.
Web sites. the most current Web browsers may recognize HTML Netscape Navigator, you may need to press
features offered by the latest version of HTML, while the Shift key as you click Reload to properly
A Web browser reads the HTML code used to create refresh your Web page.
older Web browsers may not be able to properly
a Web page and then displays the Web page in the display the features.
Web browser window. As a Web browser reads
DISPLAY A WEB PAGE IN A WEB BROWSER
Open... Ctrl+O
C:\My Documents\Web Pages\index.html
Fruit & Flowers, Inc. No garden? No problem! Our special, patented fertilizer lets you grow lush
flowers and healthy fruit INDOORS! Grow beautiful, exotic flowers and impress your friends!
Grow your own fruit and save on your grocery bills! Our fruit selection includes: Popular berries
such as strawberries, raspberries and blueberries. Exotic fruit such as mangos, papayas and kiwis.
Our flower selection includes: Seasonal plants such as poinsettias, holly and mistletoe. Tropical
flowers such as orchids, birds of paradise and yellow jasmine.
index
⁄ Start the Web browser ‹ Click Open. › Click Browse to locate Note: If you are using Netscape ■ This area shows the Á Click Open. ■ The Web page appears ■ If you later make changes
you want to use to display the Web page on your Navigator, click Choose File. location of the displayed in the Web browser. to the Web page, you can
your Web page. In this Note: If you are using Netscape computer. Web pages. To change ‡ Click OK in the Open refresh the display of the Web
Navigator, click Open Page. ■ The Microsoft Internet dialog box.
example, we started the location, click this page to view the changes. For
Explorer dialog box appears.
Microsoft Internet Explorer. ■ The Open dialog box area. Note: If you are using Netscape more information, see the top
appears. Navigator, click Open. of this page.
¤ To open your Web page in ˇ Click the Web page
the Web browser, click File. you want to open.
14 15
START A NEW PARAGRAPH

Web browsers automatically wrap the
eb browsers usually ignore returns to change the alignment of a paragraph. text in your paragraphs to fit on a user's
W you type in your text editor or word

processor. You must use the <P> tag
to specify where you want each new paragraph
Paragraphs can be left aligned, centered,
right aligned or justified. Changing the
alignment of an important paragraph can
screen. To make sure certain words or
phrases on your Web page will appear
on the same line, use the <NOBR> tag.
to begin. make the paragraph stand out from the TYPE THIS: RESULT:
rest of your Web page.
When you display your Web page in a Web <P>Controlling line breaks is Controlling line breaks is useful when you
useful when you want certain
browser, a blank line will appear between each While the ALIGN attribute is still supported text, such as a name or phone want certain text, such as a name or phone
paragraph you defined using the <P> tag. This by Web browsers, the use of style sheets number, to always appear on number, to always appear on the same line.
can help improve the layout and readability of is now preferred. For information on style the same line. In this example, In this example, I want the text
I want the text <NOBR>Jennifer Jennifer Stewart, Sales Director to always
your Web page by breaking up large sections sheets, see page 196. Stewart, Sales Director</NOBR> appear on the same line.
of text. to always appear on the same
line.</P>
By default, most Web browsers left align
paragraphs. The ALIGN attribute allows you
START A NEW PARAGRAPH
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Bird Watchers Home Page</TITLE> <TITLE>Change Paragraph Alignment</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
Bird Watchers' Home Page <P ALIGN="left" >This paragraph is left aligned. This paragraph is left aligned.
This paragraph is left aligned. This paragraph is left aligned.</P>
<P>Bird watchers appreciate the beauty and wonder of birds and are always
interested in ways to attract them. One of the best and easiest ways to draw <P ALIGN="center">This paragraph is centered. This paragraph is centered.
birds to your backyard is to build a birdhouse. On this page, I will introduce you This paragraph is centered. This paragraph is centered.</P>
to steps you can follow to construct a simple birdhouse.</P>
<P ALIGN="right">This paragraph is right aligned. This paragraph is right
<P>STEP ONE: PREPARATION aligned. This paragraph is right aligned. This paragraph is right aligned.</P>
Decide what type of bird you want to attract. This decision will influence the
dimensions of the house and the size of the entry hole you must drill. Purchase <P ALIGN="justify"> This paragraph is justified. This paragraph is justified. This
wood. Pine is my favorite choice, but other types of wood are fine.</P> paragraph is justified. This paragraph is justified. This paragraph is justified. This
paragraph is justified. This paragraph is justified. This paragraph is justified. </P>
<P>STEP TWO: CUTTING, DRILLING AND ASSEMBLING
Cut the boards so they are the correct dimensions. Select the board that will be </BODY>
the front of the house and drill an entry hole. Carefully assemble the boards to </HTML>
complete the house.</P>
</BODY>
⁄ Type <P> in front of ¤ Type < /P> after each ■ The Web browser displays CHANGE PARAGRAPH ■ The Web browser
each paragraph on your paragraph on your Web a blank line between each ALIGNMENT displays the paragraph
Web page. page. paragraph. ⁄ In the <P> tag for the with the alignment you
paragraph you want to specified.
Note: Although the </P> tag
change, type ALIGN="?"
is optional, you should include
replacing ? with the way
the tag if you plan to format
you want to align the
paragraphs using style sheets. paragraph (left, center,
For information on style sheets, right or justify).
16 see page 196. 17
START A NEW LINE INSERT BLANK SPACES

T
he <BR> tag instructs a Web browser window. An inline element is an element that eb browsers usually ignore extra spaces The code creates a non-breaking space.
to stop placing text and other elements
on the current line and begin a new line
in the Web browser window. The <BR> tag
Web browsers do not automatically place on
a new line, such as an image.
The <BR> tag is also useful for increasing the
W you add when typing the text for your Web
page. If you want to include extra blank
spaces on your Web page, use the code.
Typing instead of typing a space between
two words will prevent the words from being
separated when a Web browser wraps text to fit
is useful for separating short lines of text, such in the window. This ensures that the two words
as the text in a mailing address or poem. Unlike amount of space between elements on your Web Inserting blank spaces is useful for indenting the first will always appear on the same line.
many HTML tags, the <BR> tag does not have page. For example, you can use the <BR> tag to line of a paragraph. Blank spaces are also useful for
a closing tag. add an extra blank line between two paragraphs. separating elements on a Web page, such as images. The <PRE> tag provides another way to add blank
Each <BR> tag you add will create an extra line For example, inserting blank spaces between two spaces to your Web page. The <PRE> tag retains
Many people use the <BR> tag to place inline of space. images that are side by side can prevent the images the spacing of text you type. For information on
elements on their own line in a Web browser from appearing as one large image. the <PRE> tag, see page 22.
START A NEW LINE INSERT BLANK SPACES
<HTML>
<HEAD>
<TITLE>My Poetry Web Page</TITLE> <HTML>
</HEAD> <HEAD>
<BODY> <TITLE>Recipes</TITLE>
</HEAD>
My Poetry Web Page
<P>Welcome to my Web page. Here, you will find a collection of my favorite <BODY>
poems.
Here is the poem of the week:</P> <H2>Beethoven</H2>
<BR>The sun <P>         Ludwig van Beetho
<BR>shines through the Bonn, Germany in 1770. He spent most of his life in Vienna, where he earned a
<BR>green leaves teaching piano and selling his compositions.
<BR>reflecting the sunshine <BR>One of the most fascinating aspects of Beethoven's life was his triumph ov
<BR>of this summer afternoon.
<BR>I watch the child struck him during adulthood. in fact, he composed some of his most powerful wo
<BR>as he runs through the sprinkler hearing.</P>
<BR>carefree, without worries
<BR>remembering my own childhood
<BR>memories I can always carry with me. </BODY>
</HTML>
</BODY>
</HTML>
⁄ Type <BR> in front of ■ You can type several ■ The Web browser displays ⁄ Type where ■ To insert multiple ■ The Web browser
each element you want <BR> tags in a row to each element you specified you want a blank space to blank spaces, type displays the blank space(s)
to appear on a new line. increase the amount of on a new line. appear on your Web page. for each space you want on your Web page.
vertical space that will to add.
appear between two
elements.
18 19
Style sheets can help ensure that the headings on your
Web page are consistent. A style sheet allows you to
specify in one location how you want your headings
to appear. For example, you can have all of your <H2>
headings display the Arial font and appear underlined.
ADD A HEADING TYPE THIS:

<HEAD>
<TITLE>My Web Page</TITLE>
<STYLE>
H2 {font-family:"Arial";text-decoration:underline}
eadings can help organize the information Using heading levels consistently will help your
H on your Web page. Users can glance through

the headings on a Web page to quickly find
information of interest.
users understand the structure of your Web page.
To avoid confusion, do not use more than three
different heading levels on a single Web page.
</STYLE>
</HEAD>
<BODY>
<H2>First Heading</H2>
Style sheets can help you quickly format the headings on your Web page.
<H2>Second Heading</H2>
There are six heading levels you can use. Web browsers usually display headings in bold This saves you from having to format each heading separately.
Heading level 1 (<H1>) is the largest and heading text with a blank line above and below the headings.
level 6 (<H6>) is the smallest. <H1>, <H2> and In most Web browsers, headings are left aligned by
<H3> headings are often used for Web page and default. The ALIGN attribute allows you to change RESULT:
section titles, while <H5> and <H6> headings are the alignment of a heading. While the ALIGN attribute
First Heading
useful for disclaimers and copyright information. is still supported by Web browsers, the use of style
Style sheets can help you quickly format the headings on your Web page.
<H4> headings are usually the same size as the sheets is now preferred. For information on style
main text on a Web page. sheets, see page 196. Second Heading
This saves you from having to format each heading separately.
ADD A HEADING
C:\My Documents\Web Pages\headings.html C:\My Documents\Web Pages\headings.html

<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Headings</TITLE> This is heading level one. <TITLE>Headings</TITLE> This is heading level one.
</HEAD> </HEAD>
<BODY> This is heading level two. <BODY> This is heading level two.
<H1> This is heading level one. </H1> This is heading level three. <H1 ALIGN="right" >This is heading level one.</H1> This is heading level three.
<H2>This is heading level two.</H2> <H2>This is heading level two.</H2>
This is heading level four. This is heading level four.
<H3>This is heading level three.</H3> <H3>This is heading level three.</H3>
<H4>This is heading level four.</H4> This is heading level five. <H4>This is heading level four.</H4> This is heading level five.
<H5>This is heading level five.</H5> <H5>This is heading level five.</H5>
This is heading level six. This is heading level six.
<H6>This is heading level six.</H6> <H6>This is heading level six.</H6>
</BODY> </BODY>
</HTML> </HTML>
⁄ Type <H?> in front of ¤ Type </H?> after the ■ The Web browser CHANGE HEADING ALIGNMENT ■ The Web browser
the text you want to make text you want to make a displays the heading. ⁄ In the <H?> tag for the displays the heading
a heading. Replace ? with heading. Replace ? with heading you want to change, with the alignment
the number of the heading the number you used in type ALIGN="?" replacing ? you specified.
level you want to use, step 1. with the way you want to
from 1 to 6. align the heading (left, center
or right).
20 21
PREFORMAT TEXT ADD A COMMENT
A
dding a comment to your Web page is useful Many people use comment delimiters to hide Web
A
Web browser usually ignores blank lines and When you preformat text, Web browsers will display when you want to remind yourself to update page elements that some Web browsers may not
extra spaces you add when typing the text the text with the exact spacing you typed and will a section of text or indicate why you used recognize. For example, using comment delimiters
for your Web page. The <PRE> tag instructs not wrap the text to fit the size of the Web browser a specific tag. allows you to hide JavaScript on your Web pages
Web browsers to retain the spacing you type in window. When typing the text, consider that long from older Web browsers that do not recognize
your text editor or word processor. lines of text may extend beyond the edge of a Web A comment must be surrounded by the  JavaScript. This will prevent the Web browsers from
browser window. delimiters. Web browsers will ignore the information displaying the code for the JavaScript on your Web
Web browsers display preformatted text in a between the delimiters. This prevents your comments
monospaced font, such as Courier. A monospaced Preformatting text is useful for creating simple tables. page. For information on JavaScript, see page 158.
from appearing on your Web page.
font is a font in which each character takes up Type the text for your table using spaces to line up Comment delimiters are also useful for temporarily
the same amount of space. When typing text you columns of information and then preformat the text. Keep in mind that users who view the HTML code hiding parts of your Web page. For example, you
plan to preformat, use a monospaced font so you Using spaces instead of tabs will help ensure that your for your Web page will be able to read your comments. may want to temporarily hide a Web page area you
can see the text exactly as it will appear in a Web table will appear correctly in a Web browser, since For information on viewing the HTML code for a Web are revising.
browser. the spacing for tabs differs among Web browsers. page, see page 9.
PREFORMAT TEXT ADD A COMMENT
C:\My Documents\Web Pages\index.html C:\My Documents\Web Pages\index.html

<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Movies R Us</TITLE> <TITLE>Fruit and Flowers Inc</TITLE> Fruit & Flowers, Inc.
</HEAD> </HEAD>
<BODY> <BODY> No garden? No problem!
Movies R Us <H3>Fruit & Flowers, Inc.</H3> Our special, patented fertilizer lets you grow lush flowers and healthy fruit INDOORS!
<P>Your one-stop shopping site for videos of all your favorite movies!</P>
Our fruit selection includes:
<P>This Week's Top-Selling Titles:</P> <P><I>No garden? No problem!</I></P>
Popular berries such as strawberries, raspberries and blueberries.
<P>Our special, patented fer tilizer lets you grow lush flowers and healthy fru
Exotic fruit such as mangos, papayas and kiwis.
<PRE> INDOORS!</P>
Comedy Radio CNTR starring Mike Stewart $14.99 Our flower selection includes:
Drama Golden Fields starring Jane Roddingham $19.99 <P>Our fruit selection includes: Seasonal plants such as poinsettias, holly and mistletoe.
Horror Night Hackers starring Josie McGregor $14.99 <BR>Popular berries such as strawberries, raspberries and blueberries. Tropical flowers such as orchids and yellow jasmine.
Sci-Fi Moon Rock starring Alex Rowe $18.99 <BR>Exotic fruit such as mangos, papayas and kiwis.</P>
Classic Road to Jericho starring Rupert Smith $14.99
Western Dusty Roads starring Mac Highway $14.99 
</PRE>
<P>Our flower selection includes:
</BODY> <BR>Seasonal plants such as poinsettias, holly and mistletoe.
⁄ Type <PRE> above ¤ Type < /PRE> below ■ The Web browser ⁄ Type  to complete ■ The Web browser does
the text you want to the text you want to displays the text with want to add a comment. the comment. not display the comment
preformat. preformat. the same spacing you on your Web page.
used when creating ¤ Type the comment. Note: Adding a space on
the Web page. either side of a comment
can help make the comment
easier to read.
22 23
SPECIAL CHARACTERS
INSERT SPECIAL CHARACTERS CHARACTER
"
NUMBER CODE
"
NAME CODE
"
CHARACTER
¿
NUMBER CODE
¿
NAME CODE
¿
CHARACTER
a´
NUMBER CODE
à
NAME CODE
à
& & & À À À á á á
T
he HTML standard provides character Character encoding is useful for adding characters
encoding for adding special characters that are used for creating Web pages, such as <, < < < Á Á Á â â â
to your Web page. This lets you include >, " and &, since Web browsers may misinterpret > > > Â Â Â a˜ ã ã
characters that do not appear on your keyboard, these characters. For example, Web browsers may ¡ ¡ ¡ Ã Ã Ã a¨ ä ä
such as mathematical symbols. interpret the < character as the beginning of a tag. ¨
¢ ¢ ¢ A Ä Ä a˚ å å
When adding a special character, you must specify Keep in mind that the appearance of special £ £ £ Å Å Å æ æ æ
a number code or name code for the character. A characters you add to your Web page will depend ¤ ¤ Æ Æ Æ ç ç ç
number code, also known as a numeric character on the configuration of a user's Web browser
¥ ¥ ¥ Ç Ç Ç e` è è
reference, consists of an ampersand, a number and the fonts installed on the user's computer.
ı
sign, the number of the character and a semicolon. ı ¦ ¦ È È È é é é
A name code, also known as a character entity § § § É É É eˆ ê ê
reference, consists of an ampersand, the name ¨ ¨ ¨ Ê Ê Ê e¨ ë ë
of the character and a semicolon.
© © © Ë Ë Ë `ı ì ì
a
ª ª Ì Ì Ì ´ı í í
INSERT SPECIAL CHARACTERS
« « « Í Í Í ˆı î î
¬ ¬ ¬ Î Î Î ¨ı ï ï
® ® ® Ï Ï Ï o ð ð
– ¯ ¯ –D Ð Ð ñ ñ ñ
<HTML>
<HEAD> ° ° ° ˜
N Ñ Ñ `
o ò ò
<TITLE>Music</TITLE> Jay's Music Web Site
</HEAD> ± ± ± Ò Ò Ò ó ó ó
<BODY> 2000 Jay Hanlen
2
² ² Ó Ó Ó ô ô ô
Welcome to my Web site, where you can download many songs that I have recorded.
<H1><CENTER>Jay's Music Web Site</CENTER></H1> 3
I have been a musician for more than 20 years, and through this time, I have learned to play many ³ ³ Ô Ô Ô ˜
o õ õ
instruments.
<P ALIGN="center"> © 2000 Jay Hanlen</P> Today, I create sound files for my Web site and perform in a band. ‘ ´ ´ Õ Õ Õ ö ö ö
<P>Welcome to my Web site, where you can download many songs tha µ µ µ ¨
O Ö Ö ÷ ÷ ÷
recorded.
<BR>I have been a musician for more than 20 years, and through this t ¶ ¶ ¶ x × × ø ø ø
learned to play many instruments. .
<BR>Today, I create sound files for my Web site and perform in a band
· · Ø Ø Ø `
u ù ù
¸ ¸ ¸ Ù Ù Ù ú ú ú
</BODY>
</HTML>
1
¹ ¹ Ú Ú Ú û û û
˚ º º Û Û Û ü ü ü
⁄ Click where you want ¤ Type the number code ■ The Web browser ■ The appearance of the » » » ¨
U Ü Ü ý ý ý
the special character to or name code for the special displays the special special character depends
appear on your Web page. character (example: © character. on a user's Web browser 14
/ ¼ ¼ Y´ Ý Ý þ þ
or ©). and font settings. 12
/ ½ ½ Þ Þ y¨ ÿ ÿ
34
/ ¾ ¾ ß ß
24 25
HTML FORMAT TEXT 3
The <STRONG> and <EM> tags are also used The <CENTER> tag allows you to horizontally
to emphasize text. In most Web browsers, the center text on your Web page. Centering short
<STRONG> tag bolds text and the <EM> tag lines of text, such as a title or heading, can help
EMPHASIZE TEXT italicizes text.
Example:
emphasize the text.
Example:
<STRONG>This is bold text.</STRONG> <H1><CENTER>Fruit & Flowers Inc.</CENTER></H1>
o emphasize text on your Web page, you The <STRIKE> tag places a line through
T
<EM>This is italicized text.</EM>
may want to bold, italicize, underline or text. The <STRIKE> tag is useful for showing
strike out the text. changes to information on a Web page. For Using multiple tags lets you combine effects when
example, striking out a price is an effective The <DEL> and <INS> tags let you emphasize emphasizing text. For example, using both the <I>
The <B> tag allows you to bold text, while the way to show the price has been reduced. updates to your Web page. Use the <DEL> tag and the <U> tag lets you italicize and underline
<I> tag lets you italicize text. Bold text and tag to emphasize text you want to delete text at the same time. When typing the end tags,
italicized text are useful for introducing new While the <U> and <STRIKE> tags are still and the <INS> tag to emphasize text you switch the order of the tags.
terms and highlighting important phrases on supported by Web browsers, the use of style have inserted. Internet Explorer currently
strikes out deleted text and underlines Example:
a Web page. sheets is now preferred. For information on
inserted text. The <INS> and <DEL> tags
style sheets, see page 196. are not yet fully supported by Web browsers.
<H1><I><U>How to Create an Exciting Web Page</U></I></H1>
The <U> tag underlines text. Be careful when
underlining text since users may mistake the text Example:
for a link. For information on links, see page 74.
Network Cards: <DEL>$50</DEL><INS>$45</INS>
EMPHASIZE TEXT
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Bold or Italicize Text</TITLE> This is plain text. <TITLE>Underline or Strike Out Text</TITLE> This is plain text.
</HEAD> </HEAD>
This is bold text. This text is underlined.
<BODY> <BODY>
This is italicized text. You can strike out this text.
<P>This is plain text.</P> <P>This is plain text.</P>
<P> <B> This is bold text. </B> </P> <P> <U>This text is underlined. </U> </P>
<P> <I>This is italicized text. </I> </P> <P> <STRIKE> You can strike out this text. </STRIKE> </P>
</BODY> </BODY>
</HTML> </HTML>
BOLD TEXT ITALICIZE TEXT ■ The Web browser bolds UNDERLINE TEXT STRIKE OUT TEXT ■ The Web browser
⁄ Type <B> in front ⁄ Type <I> in front or italicizes the text. ⁄ Type <U> in front ⁄ Type <STRIKE> in displays a line under
of the text you want of the text you want of the text you want front of the text you or through the text.
to bold. to italicize. to underline. want to strike out.
¤ Type </B> after ¤ Type < /I> after ¤ Type < /U> after ¤ Type < /STRIKE>
the text you want the text you want the text you want after the text you
to bold. to italicize. to underline. want to strike out.
26 27
HTML FORMAT TEXT 3
SUPERSCRIPT OR SUBSCRIPT TEXT CHANGE THE FONT

T
he <SUP> tag allows you to create Web browsers may display superscript sing the <FONT> tag with the FACE attribute since some users can set their Web browsers
superscript text on your Web page.
Superscript text appears slightly
higher than the main text on a Web page.
and subscript text in a smaller font size
than the main text on your Web page. If
you are using a small font size for the
U lets you change the font for a section of text
on your Web page. You can specify a new
font by name, such as Courier, or by type, such
to display the fonts they prefer.
Although there is no limit to the number of fonts
your Web page can contain, using multiple fonts
main text, your superscript and subscript as monospace.
The <SUB> tag allows you to create subscript text may be too small to read. Make sure may distract users and draw their attention away
text on your Web page. Subscript text the font size you use is large enough to If you specify a font by name, you should specify from the content of your Web page.
appears slightly lower than the main text properly display superscript and subscript more than one font in case your first choice is not
on a Web page. available on a user's computer. One of the fonts While the <FONT> tag and FACE attribute are
text. For information on changing the font still supported by Web browsers, the use of
size of text, see page 30. you specify should be a common font, such as
Superscript text and subscript text are ideal Arial, to increase the probability that a computer style sheets is now preferred. For information
for displaying mathematical equations, will display one of your font choices. on style sheets, see page 196.
chemical formulas, scientific notation
and footnotes. Keep in mind that the fonts you specify may not
appear the way you expect on some computers,
SUPERSCRIPT OR SUBSCRIPT TEXT CHANGE THE FONT
C:\My Documents\Web Pages\super-sub.html

<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Superscript or Subscript Text</TITLE> This text is plain. <TITLE>Classical Music Composers</TITLE>
</HEAD> </HEAD>
<BODY> This text is superscript. <BODY>
This text is subscript.
<P>This text is plain.</P> <H2>Beethoven</H2>
<P><FONT FACE="Old English Text MT, Arial">Ludwig van Beethoven was
<P>This text is <SUP> super </SUP> script.</P> Bonn, Germany in 1770. He spent most of his life in Vienna, where he earn
living giving concerts, teaching piano and selling his compositions.
<P>This text is <SUB> sub </SUB> script.</P> <BR>One of the most fascinating aspects of Beethoven's life was his triump
deafness, which struck him during adulthood. In fact, he composed some of
</BODY> most powerful works after losing his hearing.</FONT></P>
</HTML>
<H2>Bach</H2>
<P>Johann Sebastian Bach was born into a family of musicians in 1685 in
Eisenach, Germany. Bach's works include church organ and choral music, m
for chamber orchestras and over 200 cantatas. Although he was more respe
as an organist during his lifetime, Bach's compositions influenced many late
composers including Beethoven and Mozart </P>
SUPERSCRIPT TEXT SUBSCRIPT TEXT ■ The Web browser ⁄ Type <FONT FACE="?"> in ¤ Type </FONT> ■ The Web browser
⁄ Type <SUP> in front ⁄ Type <SUB> in front displays the text slightly front of the text you want to after the text you displays the text in the
of the text you want to of the text you want to above or below the main change. Replace ? with the want to change. font you specified.
superscript. subscript. text on your Web page. name (example: Arial) or type
(serif, sans-serif or monospace)
¤ Type </SUP> after ¤ Type </SUB> after of the font you want to use.
the text you want to the text you want to
superscript. subscript. Note: To specify more than one
font name, separate each name
28 with a comma (,) and a space. 29
HTML FORMAT TEXT 3
The <BIG> and <SMALL> tags also allow you to In most cases, the 7 font sizes correspond
change the size of text. The <BIG> tag makes text to the point sizes in the following chart.
CHANGE THE FONT SIZE larger than the surrounding text and the <SMALL>
tag makes text smaller than the surrounding text.
The point sizes may vary depending on
the configuration of a user’s Web browser.
Example: Font Size 1 8 points
T
he SIZE attribute lets you change the There are 7 font sizes you can use. The smallest <P>Come to our <BIG>SALE</BIG> on Saturday! Font Size 2 10 points
size of text on your Web page. Increasing font size is 1 and the largest font size is 7. Keep <SMALL>No rain checks.</SMALL></P>
Font Size 3 12 points
the size of text makes the text easier to in mind that the font size you use may not
Font Size 4 14 points
read, while decreasing the size of text allows appear the way you expect on some computers,
you to fit more information on a screen. since some users can set their Web browsers Changing the size of individual characters on Font Size 5 18 points
your Web page can create interesting text effects. Font Size 6 24 points
to display the font size they prefer.
Using the SIZE attribute with the <BASEFONT> For example, you may want to show a large
capital letter at the beginning of a paragraph. Font Size 7 36 points
tag allows you to change the size of all the text While the SIZE attribute, <BASEFONT> tag
on your Web page. Using the SIZE attribute and <FONT> tag are still supported by Web Example:
with the <FONT> tag lets you change the size browsers, the use of style sheets is now <P><FONT SIZE="7">O</FONT>nce upon a time,
of a section of text. preferred. For information on style sheets, there was a princess who lived in a castle.</P>
see page 196.
CHANGE THE FONT SIZE

index - WordPad
C:\My Documents\Web Pages\fontsize.html

<HTML> <HTML>
<HEAD> <HEAD> This is font size one.
Fruit and Flowers Inc.
<TITLE>Fruit and Flowers Inc</TITLE> <TITLE>Font Size</TITLE>
This is font size two.
</HEAD> </HEAD>
<BODY> Our fruit selection includes: <BODY> This is font size three.
Popular berries such as strawberries, raspberries and
<BASEFONT SIZE="5"> blueberries. <P> <FONT SIZE="1">This is font size one. </FONT> </P> This is font size four.
<P>Fruit and Flowers, Inc.</P> Exotic fruit such as mangos, papayas and kiwis. <P><FONT SIZE="2">This is font size two.</FONT></P>
<P>Our fruit selection includes: <P><FONT SIZE="3">This is font size three.</FONT></P> This is font size five.
<BR>Popular berries such as strawberries, raspberries and blueberries. <P><FONT SIZE="4">This is font size four.</FONT></P>
Our flower selection includes:
<BR>Exotic fruit such as mangos, papayas and kiwis.</P>
<P>Our flower selection includes: Seasonal plants such as poinsettias, holly and mistletoe.
<P><FONT SIZE="5">This is font size five.</FONT></P>
<P><FONT SIZE="6">This is font size six.</FONT></P>
This is font size six.
<BR>Seasonal plants such as poinsettias, holly and mistletoe. Tropical flowers such as orchids, birds of paradise and yellow <P><FONT SIZE="7">This is font size seven.</FONT></P>
<BR>Tropical flowers such as orchids, birds of paradise and yellow jasmine jasmine.
</BODY> This is font size seven.
</BODY> </HTML>
</HTML>
CHANGE ALL TEXT ■ The Web browser ■ The <BASEFONT> tag CHANGE SECTION OF TEXT Note: Type a plus (+) or minus (-) ■ The Web browser
⁄ Type <BASEFONT SIZE="?"> displays the text in will not affect the size ⁄ Type <FONT SIZE="?"> sign before the number to specify displays the text in
before the text on your Web the new size. of headings on your Web in front of the text you a size relative to the surrounding the new size.
page. Replace ? with a number page. For information want to change. Replace ? text. For example, type +2 to make
from 1 to 7. The smallest font on headings, see page 20. with a number from 1 to 7. the text two sizes larger than the
size is 1; the largest font size The smallest font size is 1; surrounding text.
is 7. the largest font size is 7. ¤ Type </FONT> after the
text you want to change.
30 31
HTML FORMAT TEXT 3
CHANGE TEXT COLOR

Here are the 16 colors you can specify by Colors you specify using the COLOR attribute with
name and their corresponding hexadecimal
C
hanging the color of text on all or part sign (#) followed by the red, green and blue the <FONT> tag will override colors you specify
of your Web page can help add visual (RGB) components of the color. There are values. using the TEXT attribute with the <BODY> tag.
This allows you to change the color of all the text
interest to your Web page. only 16 colors you can specify by name. aqua #00FFFF navy #000080 on your Web page and also specify a different
color for a section of text.
Using the TEXT attribute with the <BODY> tag The colors you choose may not appear the black #000000 olive #808000
allows you to change the color of all the text on way you expect on some computers since blue #0000FF purple #800080 Example:
your Web page. Using the COLOR attribute with some users can set their Web browsers to <BODY TEXT="navy">
the <FONT> tag lets you change the color of a display the colors they prefer. fuchsia #FF00FF red #FF0000 <P>This text will be navy.</P>
section of text. gray #808080 silver #C0C0C0 <P><FONT COLOR="purple">This text
While the TEXT attribute, COLOR attribute will be purple.</FONT></P>
When changing the color of text, you must and the <FONT> tag are still supported by green #008000 teal #008080 <P>This text will be navy.</P>
specify the name or hexadecimal value for the Web browsers, the use of style sheets is lime #00FF00 white #FFFFFF
color you want to use. A hexadecimal value now preferred. For information on style
maroon #800000 yellow #FFFF00
is a code that tells Web browsers which color sheets, see page 196.
to display. The code is composed of a number
CHANGE TEXT COLOR
C:\My Documents\Web Pages\index.html C:\My Documents\Web Pages\textcolor.html

<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Fruit and Flowers Inc</TITLE> <TITLE>Font Color</TITLE>
</HEAD> </HEAD>
<BODY TEXT="#0000FF" > <BODY>
<P>Fruit and Flowers, Inc.</P> <P> <FONT COLOR="#FF0000"> This text is red. </FONT> </P>
<P>No garden? No problem!</P> <P><FONT COLOR="#0000FF">This text is blue.</FONT></P>
<P>Our special, patented fertilizer lets you grow lush flowers and healthy <P><FONT COLOR="#008000">This text is green.</FONT></P>
INDOORS!</P> <P><FONT COLOR="#000000">This text is black.</FONT></P>
<P>Grow beautiful, exotic flowers and impress your friends! <P><FONT COLOR="#FFFF00">This text is yellow.</FONT></P>
<BR>Grow your own fruit and save on your grocery bills!</P>
</BODY>
<P>Our fruit selection includes: </HTML>
<BR>Popular berries such as strawberries, raspberries and blueberries.
<BR>Exotic fruit such as mangos, papayas and kiwis.</P>
<P>Our flower selection includes:

<BR>Seasonal plants such as poinsettias and mistletoe.
CHANGE ALL TEXT Note: For a list of colors, ■ The Web browser Note: The TEXT attribute will CHANGE SECTION OF TEXT Note: For a list of colors, ■ The Web browser
⁄ In the <BODY> tag, type see the color chart at the displays all the text not affect the color of links on ⁄ Type <FONT COLOR="?"> see the color chart at the displays the text in the
TEXT="?" replacing ? with the front of this book. on the Web page in your Web page. For information in front of the text you want front of this book. color you specified.
the color you specified. on links, see page 74.
name or hexadecimal value to change. Replace ? with the ¤ Type </FONT>
for the color you want to use name or hexadecimal value after the text you
(example: blue or #0000FF). for the color you want to use want to change.
(example: red or #FF0000).
32 33
HTML FORMAT TEXT 3
CHANGE BACKGROUND COLOR CHANGE THE MARGINS

T C
he BGCOLOR attribute allows you to Choose a background color that works well hanging the margins of a Web page allows To change the margins that appear when a user
change the background color of your with the color of your text. For example, red you to adjust the amount of space that displays your Web page in Netscape Navigator,
Web page. text on a blue background can be difficult appears between the contents of the page use the MARGINWIDTH attribute to change the
to read. and the edges of a Web browser window. This can left and right margins and the MARGINHEIGHT
When changing the background color, you help improve the appearance of your Web page. attribute to change the top and bottom margins.
must specify the name or hexadecimal value Keep in mind that the colors you use may not These attributes are not part of the HTML
for the color you want to use. A hexadecimal appear the way you expect on some computers By default, most Web browsers display Web standard and are only supported by Netscape
value is a code that tells Web browsers which since some users can set their Web browsers page margins of approximately 10 pixels. The Navigator.
color to display. The code is composed of a to display the colors they prefer. LEFTMARGIN, RIGHTMARGIN, TOPMARGIN and
number sign (#) followed by the red, green BOTTOMMARGIN attributes allow you to change You should specify the attributes for both Internet
and blue (RGB) components of the color. While the BGCOLOR attribute is still supported the margins that appear when a user displays your Explorer and Netscape Navigator to ensure that
There are only sixteen colors you can specify by Web browsers, the use of style sheets is Web page in Internet Explorer. These attributes are the margins you specify appear the way you want
by name. For more information, see the top now preferred. For information on style sheets, not part of the HTML standard and are not in both Web browsers.
of page 33. see page 196. supported by other Web browsers.
CHANGE BACKGROUND COLOR CHANGE THE MARGINS
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Fruit and Flowers Inc</TITLE> <TITLE>Classical Music Composers</TITLE>
</HEAD> </HEAD>
<BODY LEFTMARGIN ="80" RIGHTMARGIN="80" >
<BODY BGCOLOR="#FF0000" >
<H2>Beethoven</H2>
<H1><CENTER>Fruit and Flowers, Inc.</CENTER></H1> <P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent most of his life
<P><B>No garden? No problem!</B> Vienna, where he earned a living giving concer ts, teaching piano and selling his compos
<BR><I>Our special, patented fer tilizer lets you grow lush flowers and healthy <BR>One of the most fascinating aspects of Beethoven's life was his triumph over deafne
fruit INDOORS!</I></P> which struck him during adulthood. In fact, he composed some of his most powerful work
<P>Grow beautiful, exotic flowers and impress your friends! after losing his hearing.</P>
<BR>Grow your own fruit and save on your grocery bills!</P>
<P>Our fruit selection includes: <H2>Bach</H2>
<BR>Popular berries such as strawberries, raspberries and blueberries. <P>Johann Sebastian Bach was born into a family of musicians in 1685 in Eisenach, Ger
<BR>Exotic fruit such as mangos, papayas and kiwis.</P> Bach's works include church organ and choral music, music for chamber orchestras and o
<P>Our flower selection includes: 200 cantatas. Although he was more respected as an organist during his lifetime, Bach's
<BR>Seasonal plants such as poinsettias, holly and mistletoe. compositions influenced many later composers, including Beethoven and Mozar t.</P>
<BR>Tropical flowers such as orchids, birds of paradise and yellow jasmine.
</P> </BODY>
</HTML>
</BODY>
⁄ In the <BODY> tag, Note: For a list of colors, ■ The Web browser ⁄ In the <BODY> tag, type ¤ Type ="?" replacing ? ■ The Web browser Note: To change the margins
type BGCOLOR="?" see the color chart at the displays the background the attribute for the margin you with a size for the margin displays your Web page that appear in Netscape
replacing ? with the front of this book. color you specified. want to change (LEFTMARGIN, in pixels. with the margin(s) you Navigator, repeat steps 1 to 3,
name or hexadecimal RIGHTMARGIN, TOPMARGIN specified. except type MARGINWIDTH
value for the color you or BOTTOMMARGIN). ‹ Repeat steps 1 and 2
for each margin you want or MARGINHEIGHT in step 1.
want to use (example:
red or #FF0000). to change.
34 35
HTML FORMAT TEXT 3
USE A MONOSPACED FONT CREATE A BLOCK QUOTE

T
se the <TT>, <CODE>, <KBD> or <SAMP> that represents computer code. The <KBD> tag is he <BLOCKQUOTE> tag allows you break up the text in the block quote into
U tag to display text on your Web page in a

monospaced font. A monospaced font is
a font, such as Courier, in which each character
useful for emphasizing text you want users to type.
Use the <SAMP> tag for displaying sample text,
such as output from a computer program.
to create a block quote on your Web
page. A block quote is a section of
text that is separated from the rest of the
paragraphs. For information on the <P> tag,
see page 16.
If you want to display short quotations
takes up the same amount of space. text on your Web page. Block quotes usually
The text that uses the <TT>, <CODE>, <KBD> or appear indented from both sides of a Web within a paragraph on your Web page, the
The <TT> tag is the most commonly used tag for <SAMP> tag will display the monospaced font that is page and are often used for displaying long HTML standard recommends using the <Q>
displaying text in a monospaced font. This tag is set in a user's Web browser. The default monospaced quotations. tag. According to the HTML standard, placing
useful for visually separating words or phrases font is usually Courier New. the <Q> and </Q> tags around the text will
that you want to emphasize but that do not have There is no limit to the amount of text you enclose the text in quotation marks ("").
a specific purpose, such as instructions. Some Web browsers may apply additional formatting can include in a block quote. If a block quote The <Q> tag is not yet supported by most
to text that uses the <CODE>, <KBD> or <SAMP> tag. is very long, consider using the <P> tag to Web browsers.
If your text has a specific purpose, use the <CODE>, For example, Web browsers may bold text that uses
<KBD> or <SAMP> tag to display the text in a the <KBD> tag.
monospaced font. Use the <CODE> tag for text
USE A MONOSPACED FONT CREATE A BLOCK QUOTE

mathquiz - WordPad
<HTML> <HTML> C:\My Documents\Web Pages\mathquiz.html

<HEAD> <HEAD>
<TITLE>Classical Music Composers</TITLE> <TITLE>Madison Toys Limited</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H2>Beethoven</H2> <H3>MADISON WINS GOLD</H3>

<P><TT>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent mo Madison Toys Limited is pleased to announce that The Super Math Quiz, one of
in Vienna, where he earned a living giving concer ts, teaching piano and selling his our best-selling products, received the Gold Medal for Educational Toys. Upon
compositions. presenting the award, International Toy Conference chairperson J.C. White offered
<BR>One of the most fascinating aspects of Beethoven's life was his triumph over the following words of praise:
which struck him during adulthood. In fact, he composed some of his most powerfu
losing his hearing.</TT></P> <BLOCKQUOTE>
The Super Math Quiz is one of the finest educational toys I have ever seen. This
<H2>Bach</H2> toy is both challenging and enter taining. It also reflects the latest research of
<P>Johann Sebastian Bach was born into a family of musicians in 1685 in Eisenac mathematics educators around the world.
Bach's works include church organ and choral music, music for chamber orchestra </BLOCKQUOTE>
200 cantatas. Although he was more respected as an organist during his lifetime,
compositions influenced many later composers, including Beethoven and Mozart.<
</BODY>
</HTML>
⁄ Before the text you want ¤ After the text you want ■ The Web browser ⁄ Type <BLOCKQUOTE> ¤ Type </BLOCKQUOTE> ■ The Web browser displays
to display a monospaced to display a monospaced displays the text in a above the text you want to below the text you want to the text as a block quote.
font, type the tag you want font, type the end tag that monospaced font. display as a block quote. display as a block quote. Block quotes are usually
to use (<TT>, <CODE>, corresponds to the tag indented from both sides
<KBD> or <SAMP>). you used in step 1 (</TT>, of the Web page.
< /CODE>, < /KBD> or
< /SAMP>).
36 37
HTML FORMAT TEXT 3
CREATE AN ORDERED LIST The START and VALUE attributes allow you
to customize your ordered lists. The START
value lets you start your ordered list with
a number other than 1. The VALUE attribute
n ordered list is useful for displaying items By default, a number (1, 2, 3...) appears beside lets you skip a number by assigning a new
A that are in a specific order, such as a set

of instructions or a table of contents.
When creating an ordered list, there are two
each item in an ordered list. The TYPE attribute
lets you change the number style of your list.
While the TYPE attribute is still supported by
number to a list item.
TYPE THIS: RESULT:

Web browsers, the use of style sheets is now <H3>Honorable Mentions</H3> Honorable Mentions
main tags you must use. The <OL> tag marks preferred. For information on style sheets, see <OL START="4">
the beginning of the ordered list and the <LI> page 196.
<LI>P. Robinson</LI> 4. P. Robinson
tag marks the beginning of each item in the list. <LI>K. Faulkner and R. Benton</LI> 5. K. Faulkner and R. Benton
<LI VALUE="7">J. Smith</LI> 7. J. Smith
After creating an ordered list, you can add a <LI>A. Canton</LI>
While there is no limit to the amount of text an new item to the ordered list at any time. A Web 8. A. Canton
<LI>B. Gifford</LI>
item in an ordered list can contain, try to limit browser will automatically renumber the items </OL> 9. B. Gifford
each item to one or two lines of text. This will in the list.
help improve the readability of your list.
CREATE AN ORDERED LIST
<HTML> C:\My Documents\Web Pages\contents.html <HTML> C:\My Documents\Web Pages\contents.html

<HEAD> <HEAD>
<TITLE>Table of Contents</TITLE> <TITLE>Table of Contents</TITLE>
</HEAD> Table of Contents </HEAD> Table of Contents
<BODY> <BODY>
1. Introduction A. Introduction
<H2>Table of Contents</H2> 2. Company History <H2>Table of Contents</H2> B. Company History
3. Mission Statement C. Mission Statement
<OL> 4. Products Offered <OL TYPE="A" > D. Products Offered
<LI> Introduction </LI> 5. Services Offered <LI> Introduction </LI> E. Services Offered
<LI>Company History</LI> 6. Future Goals <LI>Company History</LI> F. Future Goals
<LI>Mission Statement</LI> 7. Conclusion <LI>Mission Statement</LI> G. Conclusion
<LI>Products Offered</LI> <LI>Products Offered</LI>
<LI>Services Offered</LI> <LI>Services Offered</LI>
<LI>Future Goals</LI> <LI>Future Goals</LI>
<LI>Conclusion</LI> <LI>Conclusion</LI>
</OL> </OL>
</BODY> </BODY>
</HTML> </HTML>
⁄ Type <OL> before ‹ Type </LI> after ■ The Web browser CHANGE NUMBER STYLE A – A, B, C ■ The Web browser
the list. each item in the list. displays the ordered list. ⁄ In the <OL> tag, type a – a, b, c displays the ordered
A number appears in front TYPE="?" replacing ? with list with the number
¤ Type <LI> in front Note: Although the </LI> of each item in the list. I – I, II, III style you specified.
of each item in the list. tag is optional, it is considered one of the following
i – i, ii, iii
proper form to include this tag. number styles.
1 – 1, 2, 3
› Type </OL> after
the list.
38 39
HTML FORMAT TEXT 3
CREATE AN UNORDERED LIST An unordered list can use more than one
bullet style. This is useful for grouping
n unordered list is useful when Web browsers usually indent the items in related items in the list. Using more than
A you want to display items that are

in no particular order, such as a list
of products or Web sites.
an unordered list from the left edge of the
Web browser window. A bullet appears
beside each item in the list.
one bullet style may not work properly
in Netscape Navigator.
TYPE THIS: RESULT:

When creating an unordered list, there are By default, Web browsers display unordered <UL TYPE="circle"> Apples
two main tags you must use. The <UL> tag lists with the disc ( ) bullet style. The TYPE <LI>Apples</LI>
<LI TYPE="disc">Carrots</LI> Carrots
marks the beginning of an unordered list attribute allows you to change the bullet style <LI>Pears</LI> Pears
and the <LI> tag marks the beginning of of your list. While the TYPE attribute is still <LI>Oranges</LI> Oranges
each item in the list. supported by Web browsers, the use of style <LI TYPE="disc">Corn</LI> Corn
sheets is now preferred. For information on </UL>
To improve the readability of your unordered style sheets, see page 196.
list, try to limit each item in the list to one or
two lines of text.
CREATE AN UNORDERED LIST
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Pasta Perfection</TITLE> Pasta Perfection <TITLE>Pasta Perfection</TITLE> Pasta Perfection
</HEAD> </HEAD>
<BODY> Perfect pasta every time! <BODY> Perfect pasta every time!
<H2>Pasta Perfection</H2> Our Most Popular Types of Pasta: <H2>Pasta Perfection</H2> Our Most Popular Types of Pasta:
<H3>Perfect pasta every time!</H3> <H3>Perfect pasta every time!</H3>
<P>Our Most Popular Types of Pasta:</P> • Cannelloni <P>Our Most Popular Types of Pasta:</P> Cannelloni
• Lasagna Lasagna
• Linguine Linguine
<UL> <UL TYPE="square" >
• Manicotti Manicotti
<LI> Cannelloni </LI> <LI>Cannelloni</LI>
• Ravioli Ravioli
<LI>Lasagna</LI> • Spaghetti <LI>Lasagna</LI> Spaghetti
<LI>Linguine</LI> <LI>Linguine</LI>
<LI>Manicotti</LI> <LI>Manicotti</LI>
<LI>Ravioli</LI> <LI>Ravioli</LI>
<LI>Spaghetti</LI> <LI>Spaghetti</LI>
</UL> </UL>
</BODY> </BODY>
⁄ Type <UL> before ‹ Type </LI> after ■ The Web browser displays CHANGE BULLET STYLE circle ( ) ■ The Web browser displays
the list. each item in the list. the unordered list. A bullet ( ) ⁄ In the <UL> tag, type the list with the bullet style
appears in front of each item disc ( ) you specified.
¤ Type <LI> in front Note: Although the </LI> TYPE="?" replacing ? with
in the list. the bullet style you want square ( )
of each item in the list. tag is optional, it is considered
proper form to include this tag. to use.
› Type </UL> after
the list.
40 41
HTML FORMAT TEXT 3
CREATE A NESTED LIST CREATE A DEFINITION LIST
A A
nested list is a list within a list. When creating a nested list in your text definition list displays terms and their appear below the terms and are indented
Nested lists allow you to provide editor or word processor, indent each level definitions. This type of list is ideal for from the left side of the Web page.
additional information about an so that you can clearly see the structure a glossary.
item in a list. This lets you create lists with of the list. Web browsers will automatically You do not have to alternate the <DT> and
several levels of items, such as a project indent each item in your list regardless of There are three main tags used for creating <DD> tags in a definition list. If you want to
outline. the indents you add when creating the list. definition lists. The <DL> tag marks the specify several terms for one definition, use
beginning of a definition list, the <DT> tag the <DT> tag several times in a row. Similarly,
To create a nested list, add a new ordered The formatting you can apply to a nested list marks the beginning of each term in the list to specify several definitions for one term,
or unordered list to an existing list on your is the same as the formatting for an ordered and the <DD> tag marks the beginning of use the <DD> tag several times in a row.
Web page. A nested list can include both or unordered list. For example, you can each definition in the list.
ordered and unordered lists. This is useful change the start number, number style
when only some items in your list are in a or bullet style as shown on pages 38 to 41. Web browsers automatically left align the
specific order. For information on ordered terms in a definition list. The definitions
and unordered lists, see pages 38 to 41.
CREATE A NESTED LIST CREATE A DEFINITION LIST
<HTML> <HTML> C:\My Documents\Web Pages\glossary.html

<HEAD> <HEAD>
<TITLE>Table of Contents</TITLE> <TITLE>Internet Glossary</TITLE>
</HEAD> Table of Contents </HEAD>
<BODY> <BODY>
1. Introduction <H2>Internet Glossary</H2>
<H2>Table of Contents</H2> a. Who are we?
b. Brief company history <DL>
<OL> c. How we can help your business <DT> Anonymous FTP </DT>
<LI>Introduction</LI> 2. Mission Statement <DD> A way to transfer files between computers on the Internet without needing a
<OL TYPE="a"> 3. Products Offered password. </DD>
<LI>Who are we?</LI> 4. Services Offered <DT>Anti-virus software</DT>
<LI>Brief company history</LI> 5. Future Goals <DD>Software viruses are annoying bits of code that can corrupt your program
<LI>How we can help your business</LI> 6. Conclusion files. To protect your computer, you should use anti-virus software.</DD>
</OL> </DL>
<LI>Mission Statement</LI>
<LI>Products Offered</LI> </BODY>
<LI>Services Offered</LI> </HTML>
<LI>Future Goals</LI>
<LI>Conclusion</LI>
</OL>
⁄ Create the list you ‹ Create the nested ■ The Web browser ⁄ Type <DL> before ‹ Type <DD> in front of ■ The Web browser
want to contain a nested list the same way you displays the nested list the list. each definition and </DD> displays the definition
list. To create a list, see created the main list. within the main list. Each after each definition. list. Each definition is
page 38 or 40. item in the nested list is ¤ Type <DT> in front indented from the left
Note: You can use indents automatically indented. of each term and </DT> Note: Although the </DT> side of the Web page.
¤ Click where you want to visually separate the nested after each term. and </DD> tags are optional,
the nested list to appear. list from the main list. A Web it is considered proper form to
browser will ignore the indents include these tags.
you add. › Type </DL> after the list.
42 43
HTML ADD IMAGES 4
When adding an image, you must specify the Many people add banners across the top of
location and name of the image on your computer. their Web pages to display information such as
ADD AN IMAGE If an image you want to add to a Web page is

stored in the same folder as the Web page, specify
just the name of the image (example: castle.jpg).
a company logo or advertisement. When adding
a banner to your Web page, use an image that
is approximately 450 pixels wide to ensure it
If an image is stored in a subfolder, specify the will fit across the screen when displayed in a
name of the subfolder and the name of the image Web browser. Banner images are usually in the
T
he <IMG> tag allows you to add an image with small file sizes since these images will transfer
(example: images/castle.jpg). GIF format and are commonly 100 pixels high.
to your Web page. Images are inline elements, faster.
which means Web browsers will automatically Example: Example:
display images within the flow of text rather than Images you add to your Web pages should be in the
<IMG SRC="images/tiger.gif"> <IMG SRC="banner.gif">
on a new line. GIF or JPEG format. For more information on image
formats, see page 56.
There are many places that offer images you can use
Some users have Web browsers that cannot display Use the <CENTER> tag to horizontally center
on your Web pages, such as Web sites and computer an image on your Web page. If the image is on
stores. You can also use a scanner to scan images into images, while others turn off the display of images
the same line as another element, such as a line
a computer or use an image editing program to create to browse the Web more quickly. Use the ALT of text or another image, use the <P> or <BR>
your own images. Make sure you have permission attribute to provide text that will be displayed if an tag to have the image appear on its own line.
to use any images you did not create yourself. image does not appear on your Web page. This will
give users who do not see images information about Example:
Images increase the time it takes for a Web page to the missing image. <BR><CENTER><IMG SRC="logo.jpg"></CENTER>
appear on a screen. Whenever possible, use images
ADD AN IMAGE PROVIDE ALTERNATIVE TEXT

Foster City Zoo - Microsoft Internet Explorer Foster City Zoo - Microsoft Internet Explorer
<HTML> <HTML> C:\My Documents\Web Pages\index.html

<HEAD> <HEAD>
<TITLE>Foster City Zoo</TITLE> <TITLE>Foster City Zoo</TITLE>
</HEAD>
<BODY>
FOSTER CITY ZOO </HEAD>
<BODY>
FOSTER CITY ZOO
<H1><CENTER>FOSTER CITY ZOO</CENTER></H1> <H1><CENTER>FOSTER CITY ZOO</CENTER></H1>
<IMG SRC="tiger.jpg"> <IMG SRC="tiger.jpg" ALT="Image of Tiger" >
</BODY> </BODY>
</HTML> </HTML>
⁄ Type <IMG SRC="?"> Note: For information ■ The Web browser ⁄ Type ALT="?" in the ■ If the image does not
where you want the image on specifying the location displays the image <IMG> tag, replacing ? with appear, the Web browser
to appear, replacing ? with and name of an image, on your Web page. the text you want to display will display the text you
the location and name of see the top of page 45. if the image does not appear. specified.
the image on your computer.
44 45
HTML ADD IMAGES 4
ADD A BACKGROUND IMAGE ADD A BORDER

T
sing the BACKGROUND attribute with the Since background images increase the time it takes he BORDER attribute allows you to add a image link. To remove the border from an image
U <BODY> tag allows you to add a background

image to your Web page. A background
image is a small image that repeats to fill an
for a Web page to appear on a screen, you should
try to use a background image with a small file size.
Make sure the background image you use does
border to an image on your Web page. A
border can make an image stand out and
can improve the appearance of your Web page.
link, specify a border thickness of 0 pixels. After
removing the border, make sure that it is still
clear that the image is a link, since many users
entire Web page. Interesting background images expect image links to display borders. For more
are available at the www.nepthys.com/textures not affect the readability of your Web page. You When adding a border, you must specify a information on image links, see page 74.
and imagine.metanet.com Web sites. may need to change the color of text to help make thickness for the border in pixels. The border
the text on your Web page easier to read. To change you add should be large enough to be visible, While the BORDER attribute is still supported
When adding a background image, use an image the color of text, see page 32. but small enough that it will not draw attention by Web browsers, the use of style sheets is
that creates an interesting background design away from your image. now preferred. For information on style sheets,
without overwhelming your Web page. A good While the BACKGROUND attribute is still supported see page 196.
background image will have invisible edges so by Web browsers, the use of style sheets is now The BORDER attribute is also useful for removing
when the image repeats to fill your Web page, preferred. For information on style sheets, see the border that automatically appears around an
it will have a seamless background. page 196.
ADD A BACKGROUND IMAGE ADD A BORDER

index - WordPad
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Chocolate</TITLE> <TITLE>Skiing</TITLE>
</HEAD>
<BODY BACKGROUND="chocolate.jpg" > Chocolate Lovers' Web Page! </HEAD>
<BODY> Welcome to my Web page about skiing!
<FONT COLOR="#FFFFFF"> This page is dedicated to the millions of people who love chocolate! <H1>Welcome to my Web page about skiing!</H1>
<H1><CENTER>Chocolate Lovers' Web Page!</CENTER></H1> It is designed for those who cannot get enough of the most wonderful food on earth!
<P ALIGN="center"><B>This page is dedicated to the millions of people who love CHOCOLATE! <CENTER><IMG SRC="ski.jpg" BORDER="10" ></CENTER>
chocolate!
<BR>It is designed for those who cannot get enough of the most wonderful food </BODY>
on ear th! </HTML>
<BR><I>CHOCOLATE!</I></B></P>
</FONT>
</BODY>
</HTML>
⁄ In the <BODY> tag, type Note: For information ■ The Web browser ⁄ In the <IMG> tag for Note: To remove an existing ■ The Web browser
BACKGROUND="?" replacing ? on specifying the location repeats the image to the image you want to border, replace ? with the displays a border
with the location and name of and name of an image, fill the entire Web page. display a border, type number 0. around the image.
the background image on your see the top of page 45. BORDER="?" replacing ?
computer. with the border thickness
you want to use in pixels.
46 47
HTML ADD IMAGES 4
WRAP TEXT AROUND AN IMAGE The ALIGN attribute also lets you wrap text
between two images on your Web page. The
images must appear directly above the text
you want to wrap between them.
T
he ALIGN attribute allows you to wrap If you want only some text to wrap around an
text around an image. This can help image, use the CLEAR attribute with the <BR>
give your Web page a professional look. tag to mark where you want to stop wrapping TYPE THIS:
text around the image. Use the left, right <IMG SRC="image1.gif" ALIGN="left">
If you have already used the ALIGN attribute or all value to have the text continue when <IMG SRC="image2.gif" ALIGN="right">
to align an image with text, you cannot wrap the left margin, right margin or both margins A Web browser will wrap this text between the two images. Wrapping text
text around the image. For information are clear of images. between two images can improve the layout of your Web page.
on aligning an image with text, see page 50.
While the ALIGN and CLEAR attributes are
When wrapping text around an image, use still supported by Web browsers, the use of RESULT:
the left or right value to specify how style sheets is now preferred. For information
you want the text to wrap around the image. on style sheets, see page 196. A Web browser will wrap this text between the two images.
The left value places the image on the left Wrapping text between two images can improve the layout
side of the text and the right value places of your Web page.
the image on the right side of the text.
WRAP TEXT AROUND AN IMAGE

index - WordPad index - WordPad
<HTML> <HTML>
<HEAD> C:\My Documents\Web Pages\index.html <HEAD> C:\My Documents\Web Pages\index.html
<TITLE>Foster City Zoo</TITLE> <TITLE>FOSTER CITY ZOO</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H1><CENTER>FOSTER CITY ZOO</CENTER></H1> <H1><CENTER>FOSTER CITY ZOO</CENTER></H1>
<IMG SRC="tiger.jpg" ALIGN="left" > <IMG SRC="tiger.jpg" ALIGN="left">
<FONT SIZE="4"><I>Foster City Zoo is proud to announce the completion of our <FONT SIZE="4"><I>Foster City Zoo is proud to announce the completion of our
newest exhibit:</I></FONT><BR><FONT SIZE="6">The World of Cats</FONT> newest exhibit:</I></FONT><BR><FONT SIZE="6">The World of Cats</FONT>
<BR> <BR CLEAR="left">
Are tigers more ferocious than lions? Which cat can run the fastest? In which parts Are tigers more ferocious than lions? Which cat can run the fastest? In which parts
of Nor th America do cougars live? The answers to these questions and more can of Nor th America do cougars live? The answers to these questions and more can
be found in The World of Cats, the newest exhibit at the Foster City Zoo. From the be found in The World of Cats, the newest exhibit at the Foster City Zoo. From the
king of the jungle to the bobcat of North America, we explore the habitats and king of the jungle to the bobcat of Nor th America, we explore the habitats and
habits of different feline species. The exhibition area is carefully designed to habits of different feline species. The exhibition area is carefully designed to
recreate the environments in which the animals originally lived. Visitors can view recreate the environments in which the animals originally lived. Visitors can view
their favorite wild cats, and find out more about them from various displays. their favorite wild cats, and find out more about them from various displays.
</BODY> </BODY>
</HTML> </HTML>
⁄ To wrap text around ■ To wrap text around ■ The Web browser STOP TEXT WRAP ¤ Type <BR CLEAR="?"> ■ The Web browser
the right side of an image, the left side of an image, displays the text wrapped ⁄ Click where you want replacing ? with the stops the text wrap
type ALIGN="left" in the type ALIGN="right" in the around the image. to stop text from wrapping margin(s) you want where you specified.
<IMG> tag for the image. <IMG> tag for the image. around an image. to be clear of images
before the text continues
(left, right or all).
48 49
HTML ADD IMAGES 4
ALIGN AN IMAGE WITH TEXT ADD SPACE AROUND AN IMAGE

se the ALIGN attribute with the top, information on wrapping text around an image, y default, most Web browsers display only VSPACE attribute allows you to add space to both
U middle or bottom value to vertically

align an image with a line of text. By
default, Web browsers align the bottom of
see page 48.
While the ALIGN attribute is still supported by
Web browsers, the use of style sheets is now
B a few pixels of space between images and
other Web page elements. Increasing the
amount of space around an image can enhance
the top and bottom of an image.
You cannot add space to only one side of an image
using the HSPACE or VSPACE attribute. To add
an image with the bottom of a line of text. the overall appearance of your Web page.
preferred. For information on style sheets, see space to only one side of an image, modify the
If you have more than one image on the same page 196. Adding space between an image and the image using an image editing program.
line, the alignment you specify may not turn surrounding text will make the text easier to
out the way you expect. View your Web page The texttop, absmiddle and absbottom read. Increasing the amount of space between While the HSPACE and VSPACE attributes are still
in several Web browsers to make sure you are values produce results similar to the top, middle two images that appear side by side will prevent supported by Web browsers, the use of style sheets
satisfied with the results. and bottom values, though they are not part of the images from appearing as one large image. is now preferred. For information on style sheets,
the HTML standard. The texttop, absmiddle see page 196.
If you have wrapped text around an image, and absbottom values are not supported by all The HSPACE attribute allows you to add space
you cannot align the image with text. For Web browsers. to both the left and right sides of an image. The
ALIGN AN IMAGE WITH TEXT ADD SPACE AROUND AN IMAGE

alignimage - WordPad Align an Image With Text - Microsoft Internet Explorer Foster City Zoo - Microsoft Internet Explorer
<HTML> <HTML>
C:\My Documents\Web Pages\alignimage.html
<HEAD> <HEAD>
<TITLE>Align an Image With Text</TITLE> <TITLE>Foster City Zoo</TITLE>
</HEAD>
<BODY>
</HEAD>
<BODY> FOSTER CITY ZOO
<P><IMG SRC="scuba.jpg" ALIGN="top">This text appears at the top of an image. <H1><CENTER>FOSTER CITY ZOO</CENTER></H1> Are tigers more ferocious than lions? Which cat can run the
</P> fastest? In which parts of North America do cougars live?
<P><IMG SRC="scuba.jpg" ALIGN="middle">This text appears at the middle of an <IMG SRC="tiger.jpg" ALIGN="left" HSPACE="30" VSPACE="20" > Are tigers more The answers to these questions and more can be found in
image.</P> ferocious than lions? Which cat can run the fastest? In which par ts of North The World of Cats, the newest exhibit at the Foster City
<P><IMG SRC="scuba.jpg" ALIGN="bottom">This text appears at the bottom of an America do cougars live? The answers to these questions and more can be found Zoo. From the king of the jungle to the bobcat of North
image.</P> in The World of Cats, the newest exhibit at the Foster City Zoo. From the king of America, we explore the habitats and habits of different feline
the jungle to the bobcat of North America, we explore the habitats and habits of
species. The exhibition area is carefully designed to recreate
</BODY> different feline species. The exhibition area is carefully designed to recreate the
the environments in which the animals originally lived. Visitors
</HTML> environments in which the animals originally lived. Visitors can view their favorite
wild cats, and find out more about them from various displays. Learn how the wild
can view their favorite wild cats, and find out more about
cats hunt and how mothers rear their cubs. The World of Cats is open six days a them from various displays. Learn how the wild cats hunt and how mothers rear their cubs. The
week during regular zoo hours. World of Cats is open six days a week during regular zoo hours.
</BODY>
</HTML>
⁄ In the <IMG> tag ■ The texttop, absmiddle ■ The Web browser LEFT AND RIGHT SIDES TOP AND BOTTOM ■ The Web browser adds
for the image you want and absbottom values allow aligns the image with ⁄ In the <IMG> tag for ⁄ In the <IMG> tag for space around the image.
to align with text, type you to achieve similar results, the text. the image you want to the image you want to
ALIGN="?" replacing ? with though some Web browsers add space around, type add space around, type
the way you want to align may not recognize these HSPACE="?" replacing ? VSPACE="?" replacing ?
the image with the text values. with the amount of space with the amount of space
(top, middle or bottom). you want to add in pixels. you want to add in pixels.
50 51
HTML ADD IMAGES 4
ADD A HORIZONTAL RULE When you change the width of a horizontal rule
using the WIDTH attribute, the horizontal rule
will appear centered on your Web page. Use the
To add a more elaborate horizontal rule to your
Web page, use an image as a horizontal rule.
Create your own horizontal rule images in an
ALIGN attribute to change the alignment of the image editing program or obtain images on the
horizontal rule. In the <HR> tag, type ALIGN="?" Internet. Interesting horizontal rule images are
T
he <HR> tag allows you to add a horizontal attribute allows you to change the thickness replacing ? with the way you want to align the available at the www.coolgraphics.com/gallery and
rule to your Web page. A horizontal rule is a of a horizontal rule. horizontal rule (left, center or right). www.mediabuilder.com/graphicsline.html Web sites.
line that visually separates sections of a Web
page. For example, you may want to use a horizontal If you do not want a horizontal rule to extend Example: When adding a horizontal rule image to your Web
across your entire Web page, use the WIDTH <HR WIDTH="50%" ALIGN="left"> page, use the <P> or <BR> tag to have the image
rule to separate sections of text or set off headings appear on its own line.
on your Web page. attribute to change the width of the horizontal
rule. You should specify a new width as a Example:
Using the NOSHADE attribute with the <HR> tag
Avoid overusing horizontal rules on your Web page percentage to have the width vary according allows you to remove the three-dimensional <P><IMG SRC="line.gif"></P>
since this can be distracting and can make your Web to the size of the Web browser window. effect from a horizontal rule. The horizontal rule
page difficult to read. Try not to place more than one will appear as a solid, two-dimensional bar with
horizontal rule on each screen. While the SIZE and WIDTH attributes are still no shading.
supported by Web browsers, the use of style
Example:
By default, a horizontal rule you add to your Web sheets is now preferred. For information
page displays a thickness of 2 pixels. The SIZE on style sheets, see page 196. <HR NOSHADE>
ADD A HORIZONTAL RULE
C:\My Documents\Web Pages\horizontalrule.html C:\My Documents\Web Pages\horizontalrule.html

<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Horizontal Rule</TITLE> <TITLE>Horizontal Rule</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
This text appears above the horizontal rule. This horizontal rule is 10 pixels.
<HR SIZE="10" >
<HR>
This horizontal rule extends across half of the page.
This text appears below the horizontal rule. <HR WIDTH="50%" >
</BODY> </BODY>
</HTML> </HTML>
⁄ Type <HR> where you Note: To add space between ■ The Web browser CHANGE THICKNESS CHANGE WIDTH
■ The Web browser
want a horizontal rule to a horizontal rule and the displays the horizontal rule. ⁄ In the <HR> tag, type ⁄ In the <HR> tag, type displays the horizontal
appear on your Web page. surrounding text, use the SIZE="?" replacing ? with WIDTH="?%" replacing ? rule with the new
<P> tag. For information the thickness you want with the percentage of thickness or width.
on the <P> tag, see page 16. the horizontal rule to the Web page you want
display in pixels. the horizontal rule to
extend across.
52 53
HTML ADD IMAGES 4
USE IMAGES IN A LIST The HSPACE attribute allows you to increase

the amount of space that appears between the
images and items in your list. This can improve
reating a list that uses images instead of When adding a bullet image, use the ALIGN the appearance and readability of the list. Specify
C bullets lets you include an eye-catching

list on your Web page. For example, you
may want to add a small version of your company
attribute with the top, middle or bottom value
to specify how you want to align the image with
the text in your list. The top value aligns the top
the amount of space you want to use in pixels.
TYPE THIS: RESULT:

logo to each item in a list of products. of an image with text. The middle value aligns <UL>
the middle of an image with text and the bottom Roses
<BR><IMG SRC="flower.gif" HSPACE="10">Roses
The image you use for a list should be a small value aligns the bottom of an image with text. <BR><IMG SRC="flower.gif" HSPACE="10">Petunias Petunias
image that will fit neatly beside each item in the <BR><IMG SRC="flower.gif" HSPACE="10">Daisies Daisies
list. Interesting bullet images are available on the While the ALIGN attribute is still supported by Web <BR><IMG SRC="flower.gif" HSPACE="10">Sunflowers Sunflowers
Internet at the www.grapholina.com/Graphics and browsers, the use of style sheets is now preferred. </UL>
www.theshockzone.com Web sites. To create your For information on style sheets, see page 196.
own bullet images, use an image editing program
such as Jasc Paint Shop Pro or Adobe Photoshop.
USE IMAGES IN A LIST
<HTML> <HTML> <HTML>

<TITLE>Pasta Perfection</TITLE> <TITLE>Pasta Perfection</TITLE> <TITLE>Pasta Perfection</TITLE>
</HEAD> </HEAD> </HEAD> Pasta Perfection
<BODY> <BODY> <BODY>
Perfect pasta every time!
<H2>Pasta Perfection</H2> <H2>Pasta Perfection</H2> <H2>Pasta Perfection</H2>
<H3>Perfect pasta every time!</H3> <H3>Perfect pasta every time!</H3> <H3>Perfect pasta every time!</H3> Our Most Popular Types of Pasta:
<P>Our Most Popular Types of Pasta:</P> <P>Our Most Popular Types of Pasta:</P> <P>Our Most Popular Types of Pasta:</P>
<UL> <UL> <UL>

<BR> Cannelloni <BR> <IMG SRC="pasta.jpg"> Cannelloni <BR><IMG SRC="pasta.jpg" ALIGN="middle" >Cannelloni Cannelloni
<BR> Lasagna <BR> <IMG SRC="pasta.jpg"> Lasagna <BR><IMG SRC="pasta.jpg" ALIGN="middle" >Lasagna Lasagna
<BR> Linguine <BR> <IMG SRC="pasta.jpg"> Linguine <BR><IMG SRC="pasta.jpg" ALIGN="middle" >Linguine Linguine
<BR> Manicotti <BR> <IMG SRC="pasta.jpg"> Manicotti <BR><IMG SRC="pasta.jpg" ALIGN="middle" >Manicotti Manicotti
<BR> Ravioli <BR> <IMG SRC="pasta.jpg"> Ravioli <BR><IMG SRC="pasta.jpg" ALIGN="middle" >Ravioli Ravioli
<BR> Spaghetti <BR> <IMG SRC="pasta.jpg"> Spaghetti <BR><IMG SRC="pasta.jpg" ALIGN="middle" >Spaghetti
</UL> </UL> </UL> Spaghetti
</BODY> </BODY> </BODY>

</HTML> </HTML> </HTML>
⁄ Type <UL> before ¤ Type <BR> in front › To add the image you Note: For information ˇ To specify how you want Note: For more information ■ The Web browser displays Note: If the image is too
the list. of each item in the list. want to use as a bullet, on specifying the location to align the image with each on aligning images with text, the list. The image you large, see page 60, to
type <IMG SRC="?"> after and name of an image, item, type ALIGN="?" in each see page 50. specified appears in front reduce the size of the image.
‹ Type </UL> after the <BR> tag for each item. see the top of page 45. <IMG> tag. Replace ? with of each item in the list.
the list. Replace ? with the location the alignment you want to
and name of the image use (top, middle or bottom).
on your computer.
54 55
HTML WORK WITH IMAGES 5
CONVERT AN IMAGE
TO GIF OR JPEG
When you convert an image to the GIF or JPEG The PNG (Portable Network Graphics) format
format, the image is automatically compressed. is an image format that has recently been gaining
I
f an image you want to add to your Web page JPEG (Joint Photographic Experts Group) images can
Compression decreases the file size of the image popularity on the Web. PNG images can include
is not a GIF or JPEG image, you can convert the contain approximately 16.7 million colors and are often
so the image will transfer over the Internet more millions of colors and support some of the same
image to the GIF or JPEG format. The GIF and used for photographs and very large images. A JPEG quickly. features as GIF images, such as transparency. Unlike
JPEG formats are the most popular image formats image can contain millions of colors but still maintain JPEG images, PNG images do not lose information
on the Web. a small file size, allowing the image to transfer quickly when compressed. While most Web browsers can
over the Internet. JPEG images usually have the .jpg You should only convert an image to the JPEG display PNG images, they do not yet fully support
GIF (Graphics Interchange Format) images are limited format once you have finished making changes PNG features. To convert an image to the PNG
extension (example: stonehenge.jpg).
to 256 colors and are often used for logos, banners to the image in your image editing program. format, perform the steps below, except select
and computer-generated art. GIF images support To convert an image to the GIF or JPEG format, you When a JPEG image is compressed, the image the Portable Network Graphics format in step 7.
file loses some information. Each time you edit
features such as animation and transparency. For need an image editing program such as Jasc Paint and save a JPEG image, the image compresses
information on animation and transparency, see Shop Pro or Adobe Photoshop. For information on and loses more information. Eventually, this
pages 180 and 68. GIF images have the .gif extension Paint Shop Pro, visit the www.jasc.com Web site. For will reduce the quality of the image.
(example: logo.gif). information on Photoshop, visit the www.adobe.com
Web site.
CONVERT AN IMAGE TO GIF OR JPEG
Save As... F12
CompuServe Graphics Interchange (*.gif)
Company Logo
Tiger
Cougar
Marathon
⁄ Start your image editing ¤ Open the image ‹ Click File. › Click Save As. ˇ If you want to ■ This area shows Á Click in this area ° Click Save.
program. In this example, you want to convert to rename the image, the location where the to list the available image
we started Paint Shop Pro. the GIF or JPEG format. ■ The Save As dialog type a new name. program will store the formats. ■ If you selected the GIF
box appears. image. To change the format in step 7, a dialog
location, click this area. ‡ Click the image box appears, stating that
format you want to use. the image will be limited to
a maximum of 256 colors.
Click Yes to convert the
image.
56 57
DEFINE IMAGE SIZE INCREASE IMAGE SIZE

T
efining the size of an image on your Web space the images will take up on your Web page he WIDTH and HEIGHT attributes allow avoid distorting the image, keep the width and
D page can help the Web page appear on a

screen more quickly since Web browsers
will not have to calculate the size of the image.
before the images transfer to a computer. This
prevents Web browsers from having to change
the layout of your Web page each time a new
you to increase the size of an image on
your Web page without increasing the
file size of the image. This lets you include a large
height values proportional. When specifying a
new size as a percentage of the Web browser
window, you do not need to specify both a width
image transfers. As a result, users can easily read image on your Web page without increasing the and a height. A Web browser will automatically
To define the size of an image, you must first the text on your Web page as your images transfer. time it takes for the Web page to transfer to a calculate the other percentage to ensure the image
determine the size of the image using an image computer. will not be distorted.
editing program. Once you know the dimensions Defining the size of images also ensures that users
of the image in pixels, use the WIDTH and HEIGHT who turn off the display of images will see your When increasing the size of an image, specify a While the WIDTH and HEIGHT attributes can also
attributes to define the size of the image. Web page with the layout you intended. A Web new size for the image in pixels or as a percentage be used to reduce the size of an image, using an
browser will leave a space for each image using of the Web browser window. Avoid making the image editing program is more effective. For more
When you define the size of images on your Web the size you defined. image too large, since the image may appear grainy. information, see page 60.
page, Web browsers can determine how much
When specifying a new size for an image in pixels,
use both the WIDTH and HEIGHT attributes. To
DEFINE IMAGE SIZE CREATE ANIMAGE

INCREASE ARRAYSIZE
index - WordPad
<HTML> <HTML>
<HEAD> <HEAD> C:\My Documents\Web Pages\index.html
<TITLE>Dream Cars</TITLE> <TITLE>Dream Cars</TITLE>
</HEAD> </HEAD>
<BODY BGCOLOR="#C0C0C0"> <BODY BGCOLOR="#C0C0C0">
<H1> <CENTER>Dream Cars</CENTER> </H1> <H1><CENTER>Dream Cars</CENTER></H1>
<CENTER> <IMG SRC="car.jpg" WIDTH="175" HEIGHT="117" > </CENTER> <CENTER> <IMG SRC="car.jpg" WIDTH="325" HEIGHT="218" > </CENTER>
<P> <CENTER>Do you have a dream car? <P> <CENTER>Do you have a dream car?
<BR>Visit the luxurious dream cars on this Web page!</CENTER> </P> <BR>Visit the luxurious dream cars on this Web page!</CENTER> </P>
</BODY> </BODY>
</HTML> </HTML>
DETERMINE IMAGE SIZE ‹ Position the mouse DEFINE IMAGE SIZE ¤ Type HEIGHT="?" ⁄ Define the size of ¤ Replace the WIDTH ■ The Web browser
⁄ Start your image editing anywhere over the image. ⁄ In the <IMG> tag for replacing ? with the the image you want to and HEIGHT values with displays the image
height of the image change. To define the the new width and height with the new size.
program. In this example, ■ This area displays the image, type WIDTH="?"
in pixels. size of an image, see you want to use in pixels.
we started Paint Shop Pro. the width and height replacing ? with the width
page 58.
¤ Open the image you of the image in pixels. of the image in pixels. Then ■ You can also specify
add a blank space. a WIDTH or HEIGHT
want to determine the › Write down the
size of. value as a percentage
width and height values of the Web browser
on a piece of paper. window (example: 30%).
58 59
REDUCE IMAGE SIZE Paint Shop Pro also allows you to specify a new
size for an image as a percentage of its original
size. In the Resize dialog box, click the Percentage
If you do not have an image editing program,
use the WIDTH and HEIGHT attributes to
reduce the size of an image. This will reduce
of Original option ( changes to ). Then type the amount of space the image takes up on
ou may want to reduce the size of a you specify a new width for an image in Paint Shop
Y
the percentage you want to use in the Width area. your Web page, but will not reduce the file
large image so that it will take up less Pro, the program will automatically calculate the size of the image. In the <IMG> tag for
space on your Web page. Reducing the height for you to keep the image in proportion. Many people reduce the size of images to create the image, type WIDTH="?" HEIGHT="?"
size of an image decreases the file size of the thumbnail images. A thumbnail image is a small replacing ? with a new width and height
image. This allows the image to transfer faster After reducing the size of an image, you should version of an image that users can select to display for the image in pixels.
and appear on a user's screen more quickly. save your changes in a new file rather than the larger image. This lets users decide if they
replacing the original image. This lets you keep want to wait for the larger image to transfer to Example:
You should use an image editing program such the original image on your computer in case you their computer. Create a thumbnail image by <IMG SRC="photo.jpg" WIDTH="120" HEIGHT="60">
as Jasc Paint Shop Pro or Adobe Photoshop to need the image at a later time. For example, you linking the smaller image to the larger version.
reduce the size of an image. may want to use the original image for creating
thumbnail images. For information on thumbnail Example:
Most image editing programs allow you to images, see the top of page 61. <A HREF="largeimage.jpg"><IMG SRC="smallimage.jpg"></A>
specify a new size for an image in pixels. When
REDUCE IMAGE SIZE
Resize... Shift+S Save As... F12
⁄ Start your image ‹ Click Image. ˇ Click Pixel Size ■ The program ■ The image appears ¤ Click Save As. ‹ Type a name › Click Save.
editing program. ( changes to ). automatically calculates in the new size. for the new image.
In this example, we › Click Resize. the height for you to keep ■ The Save As dialog
Á Type a new width for SAVE CHANGES box appears. ■ This area shows
started Paint Shop Pro. ■ The Resize dialog the image in this area.
the image in proportion.
the location where the
box appears. ⁄ To create a new
¤ Open the image ‡ Click OK to confirm file that will store program will store the
you want to resize. your change. the image with your image. To change the
changes, click File. location, click this area.
60 61
CROP AN IMAGE REDUCE IMAGE RESOLUTION

ropping an image lets you remove parts Refer to the documentation that came with your educing the resolution of an image will To reduce the resolution of an image you will
C of the image that you do not need. This

is useful when you want to focus a user's
attention on an important part of an image.
image editing program for more information.
After cropping an image, you should save your
changes in a new file rather than replacing the
R decrease the file size of the image. This
will allow the image to transfer faster and
appear on a user's screen more quickly.
need an image editing program such as Jasc Paint
Shop Pro or Adobe Photoshop.
After reducing the resolution of an image, you
When you crop an image, the file size of the image original image. This lets you keep the original The resolution of an image refers to the clarity of should save your changes in a new file rather than
is reduced. This allows the image to transfer faster image on your computer in case you need the the image. Higher resolution images are sharper replacing the original image. This allows you to
and appear on a screen more quickly. image at a later time. Saving the original image and more detailed. Most computer monitors display keep both a low resolution and a high resolution
on your computer also allows you to crop the images at a resolution of 72 dots per inch (dpi). version of the image on your computer. You will
Many image editing programs, such as Jasc Paint image again later if you are unsatisfied with the Images you include on your Web pages do not need to use both versions if you want your Web
Shop Pro and Adobe Photoshop, have a tool you results. need to display a resolution higher than 72 dpi page to display the low resolution version of the
can use to crop an image. If your image editing unless users will be printing the images. image while the higher resolution image transfers.
program does not have a cropping tool, you may For more information, see page 64.
be able to crop the image using a different method.
CROP AN IMAGE REDUCE IMAGE RESOLUTION
Resize... Shift+S
⁄ Start your image › Position the mouse ■ The areas of the ‡ To create a new file ⁄ Start your image editing ‹ Click Image. ˇ Click Actual / Print Size ‡ Click OK to confirm
editing program. In over the top left corner of image you did not that will store the cropped program. In this example, ( changes to ). your change.
this example, we the image area you want select disappear. image, perform steps 1 we started Paint Shop Pro. › Click Resize.
Á Type a new resolution ° To create a new file
started Paint Shop Pro. to keep. to 4 on page 61.
¤ Open the image you ■ The Resize dialog box for the image in this area. that will store the lower
¤ Open the image ˇ Drag the mouse want to change. appears. resolution image, perform
you want to crop. over the image area you steps 1 to 4 on page 61.
want to keep.
‹ Click .
Á Double-click within
62 the area you selected. 63
The image you add using the LOWSRC attribute You should use the ALT attribute each time you
does not need to be a low resolution version add an image to your Web page to provide text
USE LOW RESOLUTION IMAGES of the image you add using the SRC attribute.
Specifying a different image can create an
animated effect, with the image you specify
that will appear for users who do not see images.
Some users have Web browsers that cannot
display images, while others turn off the display
for the LOWSRC attribute changing to the of images to browse the Web more quickly.
se the LOWSRC attribute to have a high resolution version. Use the WIDTH and image you specify for the SRC attribute. These users will see neither the high nor low
U low resolution version of an image

appear on a user's screen while the
higher resolution version of the image
HEIGHT attributes to specify the width and
height of the high resolution version of your
image in pixels. If you do not specify a width
Example:
<IMG SRC="cat.gif" LOWSRC="dog.gif"
WIDTH="300" HEIGHT="200">
resolution version of an image on your Web page.
Example:
<IMG SRC="car.gif" LOWSRC="car_lowres.gif"
transfers to the user's computer. and height, both images may display the WIDTH="240" HEIGHT="200" ALT="Image of
dimensions of the low resolution image. corvette">
Before you can use the LOWSRC attribute, If you want to use only a low resolution version
To determine the width and height of an of an image without having the high resolution
you must create a low resolution version of image, see page 58. version appear later, do not use the LOWSRC
your image as shown on page 63. The low attribute. Add the low resolution version of the
resolution version of the image will have The LOWSRC attribute is not part of the image using the SRC attribute. Using only low
a smaller file size, allowing it to transfer HTML standard and is not supported by resolution images can decrease the file size of
quickly over the Internet. many Web browsers. Web browsers that your Web pages.
do not support the LOWSRC attribute will Example:
The low resolution version of an image only display the high resolution image.
may have smaller dimensions than the <IMG SRC="images/lowresolution.gif"
WIDTH="200" HEIGHT="135">
USE LOW RESOLUTION IMAGES

<TITLE>Foster City Zoo</TITLE> <TITLE>Foster City Zoo</TITLE> <TITLE>Foster City Zoo</TITLE>
</HEAD> </HEAD> </HEAD>
<IMG SRC="cougar.gif" <IMG SRC="cougar.gif" LOWSRC="cougar_lowres.gif" <IMG SRC="cougar.gif" LOWSRC="cougar_lowres.gif" WIDTH="308" HEIGHT="206">
<H1>Foster City Zoo</H1> <H1>Foster City Zoo</H1> <H1>Foster City Zoo</H1>

<P>The spacious grounds of Foster City Zoo were established in 1960 on 350 acres of for <P>The spacious grounds of Foster City Zoo were established in 1960 on 350 acres of for <P>The spacious grounds of Foster City Zoo were established in 1960 on 350 acres of for
and farmland located five miles west of Foster City, NY. Our primary commitment is to educ and farmland located five miles west of Foster City, NY. Our primary commitment is to educ and farmland located five miles west of Foster City, NY. Our primary commitment is to educ
the public about the animal kingdom.</P> the public about the animal kingdom.</P> the public about the animal kingdom.</P>
<P>Foster City Zoo is proud to announce the completion of our newest exhibit, The World <P>Foster City Zoo is proud to announce the completion of our newest exhibit, The World <P>Foster City Zoo is proud to announce the completion of our newest exhibit, The World
Cats. Are tigers more ferocious than lions? Which cat can run the fastest? In which par ts o Cats. Are tigers more ferocious than lions? Which cat can run the fastest? In which par ts o Cats. Are tigers more ferocious than lions? Which cat can run the fastest? In which par ts o
North America do cougars live? The answers to these questions and more can be found in Nor th America do cougars live? The answers to these questions and more can be found in Nor th America do cougars live? The answers to these questions and more can be found in
World of Cats exhibit.</P> World of Cats exhibit.</P> World of Cats exhibit.</P>

⁄ Create a low resolution ¤ Type <IMG SRC="?" where ‹ Type LOWSRC="?" › To ensure that both Note: To determine the width ■ The Web browser displays ■ The high resolution
version of the image you you want the image to appear, replacing ? with the versions of the image and height of an image, see the low resolution image while image will replace the
want to include on your replacing ? with the location location and name of display the proper size, type page 58. the high resolution version low resolution version
Web page as shown on and name of the high resolution the low resolution image WIDTH="?" HEIGHT="?"> transfers to a user's computer. when it transfers to a
page 63. image on your computer. Then on your computer. Then replacing ? with the width user's computer.
add a blank space. add a blank space. and height of the high
resolution image in pixels.
Note: For information on specifying
the location and name of an image,
see the top of page 45.
64 65
REDUCE COLORS IN AN IMAGE Paint Shop Pro allows you to view the number
of colors an image contains. This can help
The available options for reducing the number
of colors in an image depend on the image
you determine whether you should reduce editing program you use. For example, some
the number of colors in the image. Open the image editing programs allow you to choose
A
lthough a GIF image can contain up number of colors. If you are satisfied with
to 256 colors, many simple images can the results, save your changes in a new file. image you want to view the number of colors the colors you want an image to keep. Other
for, select the Colors menu and then click programs may reduce the number of colors
be accurately displayed with fewer colors. If the quality of the image has been significantly Count Colors Used. in an image by combining colors. Consult the
Reducing the number of colors in a GIF image affected, do not save your changes. Try reducing documentation that came with your image
will decrease the file size of the image, allowing the number of colors in the original image again, editing program to determine which options
If an image contains 16 or more colors, Paint
the image to transfer more quickly over the choosing a slightly higher number of colors. your program offers.
Shop Pro allows you to specify the maximum
Internet. number of colors you want the image to
Do not reduce the number of colors in a
contain. Perform steps 1 to 5 below, except
To reduce the number of colors in an image, JPEG image. The JPEG format was specifically select the X Colors option in step 5. In the
you need an image editing program such designed to store images containing millions Palette area of the dialog box that appears,
as Jasc Paint Shop Pro or Adobe Photoshop. of colors using small file sizes. In many cases, type the maximum number of colors you
reducing the number of colors in a JPEG image want the image to contain.
After you reduce the number of colors in an will increase the file size of the image.
image, you can view the image with the new
REDUCE COLORS IN AN IMAGE
Decrease Color Depth

16 Colors (4 bit)... Shift+Ctrl+2
⁄ Start your image ¤ Open the image ‹ Click Colors. ˇ Click the number ■ The Decrease Á Click OK to confirm ■ The image displays the ‡ To create a new file
editing program. In you want to change. of colors you want Color Depth dialog your change. new number of colors. that will store the image
this example, we › Click Decrease the image to contain. box appears. with the new number of
started Paint Shop Pro. Color Depth. colors, perform steps 1
Note: The dialog box that to 4 on page 61.
appears on your screen
may offer different options.
66 67
MAKE IMAGE BACKGROUND
TRANSPARENT If the background of a GIF image is multicolored,
change the background to one color before making
the background transparent. Open the image in
If you have used an image on your Web page for a
link, you may want to remove the colored border
that remains even after you make the background
Paint Shop Pro and then click . Hold down the of the image transparent. To remove the border
ou may want to make the background of a become transparent, giving the image background from an image link, type BORDER="0" in the
Y
Shift key and click the background until a dotted
GIF image transparent so the background a speckled look. line appears around the entire background. Then <IMG> tag for the image.
will blend into your Web page. press the Delete key to change the background
Example:
In some cases, an image background you want to to one color. If you have difficulty changing the
background to one color using this method, try <A HREF="http://www.bakery.com">
You need an image editing program such as Jasc make transparent may appear to be one color when <IMG SRC="cake.jpg" BORDER="0"></A>
Paint Shop Pro or Adobe Photoshop to make the it actually contains several colors. This is due to a using a paint tool to manually color the
background.
background of a GIF image transparent. process called dithering. Dithering combines several
colors within a pixel of an image to simulate another
In order to make the background of a GIF image color. When making the background of an image
transparent, the entire background must contain transparent, make sure the background color does
only one color. Your image editing program will The image you use should be saved in GIF version not appear in the image itself. When you make
make each pixel that contains the color transparent. 89a rather than version 87a. GIF version 89a is a the background of an image transparent, every
pixel in the image that contains the same color
If the background of an image is multicolored, only more recent GIF version that supports advanced as the background will also become transparent.
the pixels that contain the color you specify will features such as transparency. To save an image
in GIF version 89a, see the top of page 71.
MAKE IMAGE BACKGROUND TRANSPARENT

Paint Shop Pro - Fish Paint Shop Pro - Fish Paint Shop Pro - Fish
Fish [1:2] (Background) 2] (Background) Fish [1:2] (Background)
Set Palette Transparency... Shift+Ctrl+V
⁄ Start your image editing › Right-click the ˇ Click Colors. ■ The Set Palette ‡ Click this option · Click to save ■ The Web browser ■ If you no longer want
program. In this example, background area Transparency dialog ( changes to ). your change. displays the image with to display the image with
we started Paint Shop Pro. of the image. Á Click Set Palette box appears. a transparent background. a transparent background,
Transparency. ° Click OK to confirm ■ The background of the repeat steps 1 to 9,
¤ Open the GIF image ■ This area displays your selection. image does not appear selecting No transparency
you want to change. the color you selected. transparent in the image in step 7.
editing program but will
‹ Click . appear transparent on a
Web page.
68 69
INTERLACE A GIF IMAGE To remove the interlacing from an image,

repeat steps 1 to 9 below, except select
Many image editing programs allow you to
change your default settings so that all new
the Noninterlaced option in step 6 GIF images you create will automatically be
( changes to ). interlaced. Refer to the documentation that
nterlacing a GIF image allows the entire To interlace a GIF image, you need an image
I image to appear on a screen as it transfers

to a computer.
A noninterlaced GIF image transfers to a computer
editing program such as Jasc Paint Shop Pro
or Adobe Photoshop.
Interlacing GIF images is particularly useful when
In Paint Shop Pro, the Save Options dialog
box allows you to select the GIF version you
want to use to save your image. GIF version
came with your image editing program for
more information.
If you want a JPEG image on your Web page

one row at a time, from the top of the image you use large images or have many images on 87a was the first version developed. While to appear on a screen as it transfers, make
saving a GIF image in version 87a may result the image a progressive JPEG image. Like an
to the bottom. Users must wait until the image your Web page. Since users can see the images
in a slightly smaller file size, using the more interlaced GIF image, a progressive JPEG image
fully transfers to see the entire image. An as they transfer, they will have a better idea of will initially appear blurry and then gradually
recent version 89a will allow you to take
interlaced GIF image transfers to a computer what the final Web page will look like. advantage of advanced features such as sharpen as it transfers to a computer. To make
by skipping alternate rows. This allows users animation and transparency. a JPEG image progressive, perform steps 1 to 9
to quickly see the entire image. The image will Some older Web browsers do not support interlaced below, except select the Progressive encoding
first appear blurry and then gradually sharpen GIF images. If a Web browser does not support option in step 6 ( changes to ).
as it transfers. interlacing, the images will appear on a screen
as though they were noninterlaced GIF images.
INTERLACE A GIF IMAGE
Save As... F12
Scuba
⁄ Start your image editing ‹ Click File. ■ The Save As dialog ˇ Click Options. ■ The Save Options ‡ Click OK to ■ A dialog box appears, ■ The image is
program. In this example, box appears. dialog box appears. confirm your change. stating that you will replace now interlaced.
we started Paint Shop Pro. › Click Save As. the original image.
■ This area displays the Á Click Interlaced ° Click Save to
¤ Open the GIF image image type. Make sure ( changes to ). save your change. · Click Yes to replace
you want to interlace. the image is a GIF image. the original image.
70 71
CONVERT IMAGE TO WEB Do not convert a JPEG image to Web browser Some image editing programs may not prevent
BROWSER SAFE COLORS

safe colors. JPEG images usually contain millions dithering when you convert an image to Web
of colors. When you convert a JPEG image to browser safe colors. If areas of your image appear
Web browser safe colors, your image editing grainy after you convert the image to Web browser
program has to simulate so many colors that safe colors, consider leaving the image the way
onverting an image to Web browser browser will attempt to simulate colors that the quality of the image is usually significantly it is. You may want to refer to the documentation
C safe colors helps ensure that the image

will appear the way you expect when
displayed in a Web browser.
are not in the set of Web browser safe colors
by dithering. Dithering is a process in which
colors are combined to produce another color.
reduced. By leaving the image the way it is, you
can ensure that the image will at least appear
properly on computers that display more than
256 colors.
that came with your image editing program to
determine if it is possible to turn off dithering
for the program.
This can cause an image to appear grainy.
Web browser safe colors are a set of 216 colors Converting an image to Web browser safe
that can be accurately displayed on computers If your image editing program does not include
colors can help ensure that you will be satisfied a file with Web browser safe colors, such as
that display only 256 colors. The remaining with the way your image appears on a user's the Safety.pal file in Paint Shop Pro, try searching
40 colors are used to display toolbars and other computer. for a file on the program manufacturer's Web
screen elements. site. Refer to the documentation that came with
To convert an image to Web browser safe your image editing program to find the Web site
When a user with a computer that displays only colors, you need an image editing program address.
256 colors views your Web page, the user's Web such as Jasc Paint Shop Pro or Adobe Photoshop.
CONVERT IMAGE TO WEB BROWSER SAFE COLORS
Safety.pal
Load Palette... Shift+O
⁄ Start your image ¤ Open the image you ‹ Click Colors. › Click Load Palette. ■ This area shows Note: The Safety.pal file ■ The program converts ‡ To create a new file
editing program. In want to convert to Web the location of the is located in the Palettes the image to Web browser that will store the image
this example, we browser safe colors. ■ The Load Palette displayed files. folder. safe colors. with the Web browser
started Paint Shop Pro. dialog box appears.
ˇ Click the Safety.pal Á Click Open safe colors, perform
Note: Do not convert a JPEG
file. This file contains to open the file. steps 1 to 4 on page 61.
image to Web browser safe
colors. For more information, the Web browser safe
see the top of page 73. colors.
72 73
HTML CREATE LINKS 6
When creating a link to a Web page in your own Web site, specify the location
of the Web page using a relative URL. If the Web page is stored in the same
folder as the Web page that contains the link, the relative URL can specify
just the name of the Web page (example: prices.html). If the Web page is
CREATE A LINK TO stored in a subfolder, the relative URL must specify the name of the subfolder
and the name of the Web page (example: products/prices.html).
ANOTHER WEB PAGE Example:

<A HREF="products/prices.html">View our latest products!</A>
se the <A> tag to link text or an image such as http://www.maran.com. When Include navigational links on your Web pages to help users move through
U on your Web page to another page on

the Web. When users select the link, the
other Web page will appear. Make sure the text
creating a link to a Web page in your own
Web site, you should use a relative URL.
For more information, see the top of page 75.
your Web site. For example, each Web page in your Web site should include
a link to your home page. Images for navigational links are available at the
www.bycarel.com/buttons and www.station4.com/buttonfactory Web sites.
Example:
or image you use clearly indicates where the link
will take users. Avoid placing two text links side by side on <A HREF="index.html"><IMG SRC="homebutton.gif"></A>
your Web page, since users may find it difficult
A link can take users to a Web page in your to see that there are two separate links. When You may want to remove the border that automatically appears around an
own Web site or to any page on the Web. When creating image links, keep in mind that some image link. In the <IMG> tag for the image you no longer want to display
creating a link to a Web page you did not create, users do not see images. You may want to a border, type BORDER="0".
specify the absolute URL of the Web page. An include corresponding text links for these users. Example:
absolute URL is the full address of the Web page, <A HREF="http://www.maran.com"><IMG SRC="book.gif" BORDER="0"></A>
CREATE A TEXT LINK CREATE AN IMAGE LINK
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Foster City Zoo</TITLE> <TITLE>Foster City Zoo</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H1><CENTER>Foster City Zoo</CENTER></H1> <H1><CENTER>Foster City Zoo</CENTER></H1>

<P>The spacious grounds of Foster City Zoo were established in 1960 on 350 <P>The spacious grounds of Foster City Zoo were established in 1960 on 350
acres of forest and farmland located five miles west of Foster City, NY. Our primary acres of forest and farmland located five miles west of Foster City, NY. Our primary
commitment is to educate the public about the animal kingdom.</P> commitment is to educate the public about the animal kingdom.</P>
<P>Foster City Zoo is proud to announce the completion of our newest exhibit, The <P>Foster City Zoo is proud to announce the completion of our newest exhibit,
World of Cats. Are tigers more ferocious than lions? Which cat can run the fastest? The World of Cats. This week, in keeping with The World of Cats exhibit, the
In which par ts of Nor th America do cougars live? The answers to these questions featured site of the week is all about tigers! Click the image of the tiger below to
and more can be found in The World of Cats exhibit.</P> find out more about tigers.</P>
<P>This week, in keeping with The World of Cats exhibit, the featured site of the <P> <A HREF="http://www.tigerkingdom.com"> <IMG SRC="tiger.jpg"> </A> </P>
week is all about tigers!</P>
</BODY>
<P> <A HREF="http://www.tigerkingdom.com"> Tell me more about tigers </A> </P> </HTML>
</BODY>
</HTML>
⁄ Type the text you Note: To link the text to a ■ The Web browser ■ A user can click the ⁄ Add the image you Note: To link the image to a ■ The Web browser ■ A user can click the
want users to select to Web page in your own Web displays the text link. text link to display the want users to select to Web page in your own Web displays the image link. image link to display the
display another Web page. site, see the top of page 75. The text link appears Web page you specified. display another Web page. site, see the top of this page. A border appears around Web page you specified.
underlined and in color. the image link.
¤ Type <A HREF="?"> in front ‹ Type </A> after ¤ Type <A HREF="?"> in front ‹ Type </A> after
of the text, replacing ? with the text. of the image, replacing ? with the image.
the address of the Web page the address of the Web page
you want to display. you want to display.
74 75
HTML CREATE LINKS 6
CREATE A LINK It is also possible to create a link that will take

users to a specific area on another Web page in
Many people include links at the end of
each section of a long Web page that users
WITHIN A WEB PAGE your Web site. First, name the Web page area
you want users to be able to quickly display. Then
create a link to the area on a different Web page.
can select to return to the top of the page.
Example:
When creating the link, specify the name and location <A NAME="top"></A>Table of Contents
of the Web page that contains the area before the <A HREF="#top">Back to Top</A>
ou may want to include a link on your Web to name the Web page area. The name you
Y page that will take users to another area of

the same Web page. This lets users quickly
display information of interest. For example, you
use should contain only letters and numbers.
After you have named the Web page area, create
a link to the area. The <A> tag with the HREF
number sign (#) and the name of the Web page
area. For information on specifying the name and
location of a Web page, see the top of page 75.
Example:
The ID attribute also lets you name the Web
page area you want users to be able to quickly
may want to create a table of contents that contains display. The ID attribute is not supported
links to different sections of a long Web page. attribute allows you to create a link to a Web On the Web page that contains the area:
by some Web browsers.
page area. When a user selects the link, the Web <A NAME="vacuumcleaners"></A>
To create a link within a Web page, you must first page area you specified will appear on the screen. On the Web page that contains the link: Example:
name the Web page area you want users to be able <A HREF="products.html#vacuumcleaners"> <H1 ID="Introduction">Introduction to My
to quickly display. This area is often referred to as When creating multiple links within the same Vacuum Cleaner Models</A> Web Page</H1>
an anchor. Use the <A> tag with the NAME attribute Web page, make sure you give each linked
Web page area a different name.
CREATE A LINK WITHIN A WEB PAGE
to build a birdhouse. On this page, I will introduce you to steps you can follow to to build a birdhouse. On this page, I will introduce you to steps you can follow to construct a simple birdhouse.</P>
construct a simple birdhouse.</P> construct a simple birdhouse.</P>
<P>STEP ONE: PREPARATION
<P>STEP ONE: PREPARATION <P>STEP ONE: PREPARATION <BR> <A HREF="#step2"> STEP TWO: CUTTING, DRILLING AND ASSEMBLING
<BR>STEP TWO: CUTTING, DRILLING AND ASSEMBLING</P> <BR>STEP TWO: CUTTING, DRILLING AND ASSEMBLING</P> </A> </P>
<P>STEP ONE: PREPARATION <P>STEP ONE: PREPARATION <P>STEP ONE: PREPARATION

<BR>1) Decide what type of bird you want to attract. This decision will influence <BR>1) Decide what type of bird you want to attract. This decision will influence <BR>1) Decide what type of bird you want to attract. This decision will influence
the dimensions of the house and the size of the entry hole you must drill. the dimensions of the house and the size of the entry hole you must drill. the dimensions of the house and the size of the entry hole you must drill.
<BR>2) Purchase wood. Pine is my favorite choice, but other types of wood are <BR>2) Purchase wood. Pine is my favorite choice, but other types of wood are <BR>2) Purchase wood. Pine is my favorite choice, but other types of wood are
fine. fine. fine.
<BR>3) Make sure you have the necessary tools. You will need a saw, drill, <BR>3) Make sure you have the necessary tools. You will need a saw, drill, <BR>3) Make sure you have the necessary tools. You will need a saw, drill,
hammer and nails.</P> hammer and nails.</P> hammer and nails.</P>
<P> STEP TWO: CUTTING, DRILLING AND ASSEMBLING <P> <A NAME="step2"> </A> STEP TWO: CUTTING, DRILLING AND <P> <A NAME="step2"> </A> STEP TWO: CUTTING, DRILLING AND
<BR>1) Cut the boards so they are the correct dimensions. ASSEMBLING ASSEMBLING
<BR>2) Select the board that will be the front of the house and drill an entry <BR>1) Cut the boards so they are the correct dimensions. <BR>1) Cut the boards so they are the correct dimensions.
hole. <BR>2) Select the board that will be the front of the house and drill an entry <BR>2) Select the board that will be the front of the house and drill an entry
<BR>3) Carefully assemble the boards to complete the house.</P> hole. hole.
<BR>3) Carefully assemble the boards to complete the house.</P> <BR>3) Carefully assemble the boards to complete the house.</P>
</BODY>
</HTML> </BODY> </BODY>
</HTML> </HTML>
NAME WEB PAGE AREA ¤ Type <A NAME="?"> ‹ Type </A> to CREATE LINK TO ˇ Type <A HREF="#?"> ■ The Web browser ■ A user can click the
WEB PAGE AREA
⁄ Click in front of the replacing ? with a name complete the naming replacing ? with the name displays the link. link to display the Web
Web page area you want that describes the Web of the Web page area. › Click in front of the text you specified for the Web page area you specified.
users to be able to quickly page area. The name you or image you want users page area in step 2.
display. use should contain only to select to display the Web
letters and numbers. page area you named on Á Type </A> after the
page 76. text or image.
76 77
HTML CREATE LINKS 6
CREATE A LINK TO AN IMAGE CREATE A LINK TO A FILE

I
f you plan to include a large image on your Web Creating a link to an image is also useful when you reating a link that users can select to If the browser cannot display the file, it will
page, consider creating a link that will take users
to the image. This will give users access to the
image without increasing the time it takes for your
want to include an image that some Web browsers
cannot display, such as a Windows bitmap (BMP)
image. When a user selects the link, the image
C transfer a file to their computers lets
you make files such as documents
and programs available to users.
attempt to open the file in a program on the
user's computer. If the user does not have a
program that can display or run the file, the
Web page to transfer to a computer. will appear in a program on the user's computer. Web browser will give the user the option
When creating a link to a file, you must specify to save the file on their computer.
Creating a link to an image is useful when including When creating a link to an image, you should the location of the file on your computer. If
a thumbnail image on your Web page. A thumbnail provide a description of the image, including the file is stored in the same folder as your Include a description beside a link to a file to
image is a small version of an image that users can the size of the linked image in kilobytes (K). This Web page, specify just the name of the file help users decide if they want to transfer the
select to display the larger image. This lets users helps users estimate how long the linked image (example: game.exe). If the file is stored in a file. The description should include the type
decide if they want to wait for the larger image will take to transfer to their computer. subfolder, specify the name of the subfolder and and size of the file. You should also provide
to transfer to their computer. For information on the name of the file (example: programs/game.exe). a link that will take users to a Web site where
reducing an image size, see page 60. they can obtain a program that will display
When a user selects a link to a file, the user's or run the file.
Web browser will attempt to display the file.
CREATE A LINK TO AN IMAGE CREATE A LINK TO A FILE
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>My European Tour</TITLE> <TITLE>Game World</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H1><CENTER><I>My European Tour</I></CENTER></H1> <H1><CENTER><I>Game World</I></CENTER></H1>

<B>Welcome to Brian's Game World, where you can play some of the coolest
<P>After graduating from college, I spent the summer traveling across Europe. I games on the Web!</B>
<BR>I am a computer programming student who loves to create games. This Web
visited popular tourist destinations such as the Eiffel Tower, and discovered parts site features my newest games as well as links to other gaming Web sites.
of the continent that are not quite so well known, but equally spectacular. The
photographs below chronicle my journey.</P> <P>My newest creation is a fantasy game called Dungeon Warrior. Strap on your
armor and prepare to rescue prisoners from a dungeon filled with creatures!</P>
<A HREF="bldglarge.jpg"> <IMG SRC="bldgsmall.jpg"> </A>
Greece (150K). Click the image to view a larger version. <BR> <A HREF="dungeonwarrior.exe"> Dungeon Warrior </A>
<BR>Windows
<P><IMG SRC="landsmall.jpg"> Switzerland (150K). Click the image to view a <BR>3 MB
larger version.</P>
</BODY>
</BODY> </HTML>
</HTML>
⁄ Type the text or add the Note: For information ■ The Web browser ■ A user can click ⁄ Type the text or add the ‹ Type </A> after ■ The Web browser ■ Users can click the
image you want users to select on specifying the location displays the link. the link to display image you want users to select the text or image. displays the link. link to transfer the file
to display the linked image. and name of an image, the linked image. to transfer a file. you specified to their
see the top of page 45. computers.
¤ Type <A HREF="?"> in front ¤ Type <A HREF="?"> in front
of the text or image, replacing ? ‹ Type < /A> after of the text or image, replacing ?
with the location and name the text or image. with the location and name
of the linked image on your of the file on your computer.
computer.
78 79
HTML CREATE LINKS 6
When creating an e-mail link, you can specify the You may want to specify a subject for an e-mail
e-mail address of a person you want to receive a link you create. When a user selects the link, the
copy of the e-mail messages users send. For example, user's e-mail program will automatically display
CREATE AN E-MAIL LINK you can have a supervisor automatically receive

messages sent to your customer service department.
When a user selects your e-mail link, the person's
the subject you specified. This can help you
identify messages sent using the link. While many
Web browsers support this feature, it is not part
e-mail address will automatically appear in the of the HTML standard.
Carbon Copy (Cc) area of the user's e-mail program.
our Web page can include a link that When using text for an e-mail link, make sure Example:
Y will allow users to quickly send an e-mail

message. Creating an e-mail link is useful
when you want users to be able to send you
that the text clearly indicates who will receive
the e-mail messages. This helps users determine
if they are contacting the correct person. For
While many Web browsers support this feature,
it is not part of the HTML standard.
Example:
<A HREF="mailto:[email protected]
<A HREF="mailto:[email protected]
?subject=comments">Send me your comments!</A>
questions and provide feedback that can help example, use informative text such as "E-mail [email protected]">Customer Service</A> When specifying additional information for
improve your Web pages. a Technical Support Representative." an e-mail link, such as an address for the Cc
area and a subject, separate each new item
When creating an e-mail link, you must specify If you use an image for your e-mail link, you you add with an ampersand (&).
the e-mail address of the person you want to should include a corresponding text link for users
Example:
receive the messages users send. For example, who cannot view images. Some users turn off
<A HREF="mailto:[email protected]?
you may want to create an e-mail link that allows the display of images to browse the Web more [email protected]&subject=comments">Send me
users to contact you or one of your employees. quickly, while others use Web browsers that your comments!</A>
cannot display images.
CREATE AN E-MAIL LINK

index - WordPad
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Beethoven Page</TITLE> <TITLE>Beethoven Page</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H1><CENTER><I>BEETHOVEN</I></CENTER></H1> <H1><CENTER><I>BEETHOVEN</I></CENTER></H1>
<P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent most of <P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent most of
his life in Vienna, where he earned a living giving concerts, teaching piano and his life in Vienna, where he earned a living giving concerts, teaching piano and
selling his compositions. One of the most fascinating aspects of Beethoven's life selling his compositions. One of the most fascinating aspects of Beethoven's life
was his triumph over deafness, which struck him during adulthood. In fact, he was his triumph over deafness, which struck him during adulthood. In fact, he
composed some of his most powerful works after losing his hearing.</P> composed some of his most powerful works after losing his hearing.</P>
<P>Do you have interesting facts about Beethoven or a great Beethoven Web <P>Do you have interesting facts about Beethoven or a great Beethoven Web
page?</P> page?</P>
E-mail me and let me know! <A HREF="mailto:[email protected]"> E-mail me and let me know!
</A>
</BODY>
</HTML> </BODY>
</HTML>
⁄ Type the text or add ¤ Type <A HREF="mailto:?"> ‹ Type < /A> after the ■ The Web browser ■ A user can click ■ When a user selects ■ The e-mail program
the image you want in front of the text or image, text or image. displays the e-mail link. the e-mail link to send an e-mail link, the user's will automatically
users to select to send replacing ? with the e-mail a message to the e-mail e-mail program will start. display the e-mail
an e-mail message. address of the person you address you specified. address you specified.
want to receive the messages.
80 81
HTML CREATE LINKS 6
The information available at an FTP site is stored on an FTP server.
The server communicates with Web browsers through a connection
called a port. Most FTP servers use port 21. If an FTP server uses a
different port, you must specify the number of the port in the link.
Type a colon (:) after the address of the FTP site and then type the
number of the port.
CREATE A LINK TO AN FTP SITE Example:
<A HREF="ftp://ftp.megaftp.com:9999">Mega FTP</A>
our Web page can include a link that will take a link to the ftp.cdrom.com site, you must type An FTP site you create a link to may require a user name and
Y users to an FTP (File Transfer Protocol) site.

FTP sites store files that users can download.
Many colleges, universities, government agencies
ftp://ftp.cdrom.com.
When a user selects a link to an FTP site, the main
directory for the site usually appears on the screen.
password. When specifying the address for the FTP site, type
ftp:// followed by the user name and password for the site.
Separate the user name and password with a colon (:). Then
type @ followed by the address of the FTP site.
and companies maintain FTP sites on the Internet. The user can then navigate through the site to find Example:
Some popular FTP sites include ftp.cdrom.com files of interest. <A HREF="ftp://username:[email protected]">Mega FTP</A>
and ftp.winsite.com. You can find a list of FTP
sites at the hoohoo.ncsa.uiuc.edu/ftp Web site. In most cases, users can visit FTP sites anonymously, You may want to create a link to a specific file in an FTP site. This
which means they do not need a user name and allows users to quickly find information without having to navigate
When creating a link to an FTP site, you must password to visit the sites. If an FTP site requires through the site. After the address of the FTP site, type the path
specify the full address of the site, beginning a user name and password, include this information to the file.
the address with ftp://. For example, to create in the link. See the top of page 83 for more information. Example:
<A HREF="ftp://ftp.megaftp.com/pub/newlist.txt">The Latest File</A>
CREATE A LINK TO AN FTP SITE
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Stan's History Home Page</TITLE> <TITLE>Stan's History Home Page</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H1>Stan's History Home Page</H1> <H1>Stan's History Home Page</H1>

<P>Welcome to my history Web site, where you will find all kinds of interesting <P>Welcome to my history Web site, where you will find all kinds of interesting
information on major historical events. I am a History major at McDougall information on major historical events. I am a History major at McDougall
Community College with a special interest in European history.</P> Community College with a special interest in European history.</P>
<IMG SRC="venice.jpg" ALIGN="left"> <IMG SRC="venice.jpg" ALIGN="left">
<H3>Interesting History Exhibits</H3> <H3>Interesting History Exhibits</H3>

<BR>One of my favorite hobbies is visiting history exhibits at museums. Thanks to <BR>One of my favorite hobbies is visiting history exhibits at museums. Thanks to
the Internet, it is possible to visit many exhibits without even leaving home! To visit the Internet, it is possible to visit many exhibits without even leaving home! To visit
some interesting exhibits from the Library of Congress, check out their FTP site! some interesting exhibits from the Library of Congress, check out their FTP site!
<BR> Library of Congress <BR><A HREF="ftp://ftp.loc.gov">Library of Congress</A>
</BODY> </BODY>
</HTML> </HTML>
⁄ Type the text or add ¤ Type <A HREF="?"> in ‹ Type </A> after ■ The Web browser ■ A user can click the ■ When a user selects ■ Users can find files
the image you want users front of the text or image, the text or image. displays the link to link to display the FTP the link, the FTP site of interest in the pub
to select to display an replacing ? with the the FTP site. site you specified. you specified appears. or public directory of
FTP site. address of the FTP site. an FTP site.
82 83
HTML CREATE LINKS 6
OPEN A LINK IN A NEW WINDOW CHANGE LINK COLORS

T T
he TARGET attribute allows you to open a To have a link open in a new, unnamed window, he LINK, VLINK and ALINK attributes and active links. You should also make sure
link in a new window. The window containing use the _blank value with the TARGET attribute. allow you to change the color of links that the colors you choose work well with
the link will remain open, allowing users to Each link that uses the _blank value will open on your Web page. the background color of your Web page.
quickly return to your Web page when they have in a different window.
finished viewing the linked information. Use the LINK attribute to change the color Keep in mind that the link colors you choose
of links that users have not yet selected and may not appear the way you expect on some
To specify that you want all of the links on your
When opening a link in a new window, specify the VLINK attribute to change the color of links computers since some users can set their
Web page to open in the same new window, use
a name for the window using the TARGET the <BASE> tag with the TARGET attribute. This that users have previously selected. The ALINK Web browsers to override the colors you
attribute. The name you specify will identify the saves you from having to enter the information attribute lets you change the color of active links. choose.
window to Web browsers but will not appear in for each link individually. Between the <HEAD> An active link is a link that a user is currently
the window. To have several links open in the and </HEAD> tags, type <BASE TARGET="?"> selecting. While the LINK, VLINK and ALINK attributes
same window, specify the same name for each replacing ? with a name for the window. are still supported by Web browsers, the
link. Window names are case sensitive, so you Example:
When changing the color of links, make sure that use of style sheets is now preferred. For
must use the same uppercase and lowercase you choose different colors for unvisited, visited information on style sheets, see page 196.
<BASE TARGET="main">
letters for each name.
OPEN A LINK IN A NEW WINDOW CHANGE LINK COLORS
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Into the Wild</TITLE> <TITLE>Cool Web Pages</TITLE>
</HEAD> </HEAD>
<BODY> <BODY LINK ="#FF0000" >
<H1> <I>Into the Wild!</I></H1> <H1><CENTER>Wendy's Cool Web Pages</CENTER></H1>
<IMG SRC="cougar.jpg" WIDTH="150" HEIGHT="85" ALIGN="left"> <P>Welcome to my home page on the World Wide Web. My name is Wendy Oates.
<P> <B>Would you like to venture beyond the beaten path? Do so with Into the Wild's I'm a third-year computer science student at City College in Sydney, Australia.</P>
adventure tours.</B>
<BR>Whether you'd like to take a nature photography tour, camp in the rugged wilderness <P>The purpose of this page is to introduce Web surfers to cool pages on the
of the Rocky Mountains or go on a canoeing adventure, we have the trip for you! Web. Visit here every day to learn about a page that has amazing graphics, funny
<BR>We provide once-in-a-lifetime adventures for groups or individuals. Call today for stories or other noteworthy things. Just click on the link below and you will instantly
information on our packages and sign up for an unforgettable experience!</P> go to today's cool page.</P>
<IMG SRC="skier.jpg" WIDTH="150" HEIGHT="85" ALIGN="left"> <P><A HREF="funjokes.html">Today's Cool Page!</A></P>
<BR> <H3><A HREF="skiing.html" TARGET="skiing" >Skiing</A></H3>
<P>Some of our most popular trips are alpine skiing excursions in the Rocky Mountains. <P>Do you know of other cool pages that should be featured here?</P>
We will fly you to the top of the slopes by helicopter and provide comfortable <A HREF="mailto:[email protected]">Let me know!</A>
accommodations at the end of a fun-filled day! Cross-country ski packages are also
available!</P> </BODY>
</HTML>
</BODY>
⁄ In the <A> tag for a link ■ To have multiple links ■ The Web browser ■ A user can click the ⁄ In the <BODY> tag, ¤ Type ="?" replacing ? ■ The Web browser
you want to open in a new open in the same new displays the link. link to open the linked type the attribute for the with the name or displays the link colors
window, type TARGET="?" window, repeat step 1 information in a new type of link you want to hexadecimal value for you specified.
replacing ? with a name for for each link, specifying window. change (LINK, VLINK or the color you want to use
the window. the same name for the ALINK). (example: red or #FF0000).
window.
Note: For a list of colors,
Note: To have a link open in a see the color chart at the
new, unnamed window, type front of this book.
TARGET="_blank" in step 1.
84 85
HTML CREATE LINKS 6
CREATE KEYBOARD SHORTCUTS CHANGE THE TAB ORDER

se the ACCESSKEY attribute with the <A> on Macintosh computers, though Macintosh sers can navigate through the links on When users tab through your links, the tab order
U tag to create keyboard shortcuts for links.

Keyboard shortcuts allow users to select
links without using a mouse.
users will likely use the Command key rather
than the Alt key when shortcuts are supported.
Keyboard shortcuts you create for links will
U your Web page using the Tab key. By
default, users tab through the links in
the order the links appear in your HTML code.
will start with the link you assigned the lowest
value and will end with the link you assigned
the highest value. If two links have the same
Changing the tab order for your links can help value, the link that appears first in your HTML
When creating a keyboard shortcut for a link, override the keyboard shortcuts for a Web users select the links in a logical order. code will precede the other link in the tab order.
specify the letter or number you want to use for browser. For example, if you create an Alt+F
the shortcut. You should also include a description keyboard shortcut, users will no longer be Use the TABINDEX attribute to change the tab The TABINDEX attribute can also be used with
that will let users know how to use the shortcut. able to use Alt+F to display the File menu order for the links on your Web page. To include other HTML elements, such as images and form
in Internet Explorer. a link in the tab order, assign the link a TABINDEX elements.
To select a link using a keyboard shortcut, a user value between 1 and 32,767. To exclude a link
will hold down the Alt key while pressing the Although the ACCESSKEY attribute is part from the tab order, assign the link a negative While the TABINDEX attribute is part of the
letter or number you specified. The user can then of the HTML standard, it is not yet supported TABINDEX value (example: TABINDEX="-1"). HTML standard, it is not yet fully supported
press the Enter key to visit the link. Keyboard by most Web browsers. by most Web browsers.
shortcuts you create for links do not yet work
CREATE KEYBOARD SHORTCUTS CHANGE THE TAB ORDER
<HTML>
<HEAD>
<TITLE>Foster City Zoo</TITLE> <P><IMG SRC="grapes.gif"><A HREF="about.html" TABINDEX="1" ><B>About Our
</HEAD> Company</A>
<BODY>
<IMG SRC="grapes.gif"> <B><A HREF="equipment.html" TABINDEX="3" >Equipment</A>
<H1><CENTER>Foster City Zoo</CENTER></H1>
<CENTER><IMG SRC="tiger.jpg"></CENTER>
<P>Foster City Zoo is proud to announce the completion of our newest exhibit, The World of
<IMG SRC="grapes.gif"> <A HREF="tips.html" TABINDEX="5" >Tips and Tricks</A>
Cats. This week, in keeping with The World of Cats exhibit, the featured site of the week is all
about tigers!
<BR><IMG SRC="grapes.gif"><B> <A HREF="star t.html" TABINDEX="2" >Getting Star ted
<BR><A HREF="http://www.tigerkingdom.com" ACCESSKEY="T" > Press ALT+T to find out </A>
more about tigers! </A> </P>
</BODY> <IMG SRC="grapes.gif"> <A HREF="types.html" TABINDEX="4" >Types of Wine</A>

</HTML>

<IMG SRC="grapes.gif"> <A HREF="resources.html" TABINDEX="6" >Other Resources</A>

</B></P>
</BODY>
</HTML>
⁄ In the <A> tag for a ¤ Add information about ■ The Web browser ■ A user can press the ⁄ In the <A> tag for a link ¤ Repeat step 1 for each ■ Users can tab through
link you want to use a the keyboard shortcut to displays the link with keyboard shortcut you on your Web page, type link you want to include the links on your Web page
keyboard shortcut, type the text for the link. the keyboard shortcut specified to select the TABINDEX="?" replacing ? in the tab order. in the order you specified.
ACCESSKEY="?" replacing ? information you specified. link and then press with a number that specifies
with a letter or number for Enter to visit the link. the position of the link in Note: To exclude a link from the
the shortcut. the tab order. tab order, specify a negative
number in step 1.
86 87
HTML CREATE TABLES 7
Use a table to present information on your Web
page in columns like those found in a newspaper.
For example, to display information in three
CREATE A TABLE columns, create a table that contains one row
with three cells.
reate a table to neatly display information the data in a row or column, while data cells TYPE THIS: RESULT:
C on your Web page, such as financial data

or a price list.
When creating a table, you must use tags to
usually contain the main information in the
table. The text in header cells is bold and
centered in the cells.
<TABLE>
<TR>
<TD>To use a table to display columns, create
a table with one row that contains a cell for
each column you want to display.</TD>
To use a table to
display columns,
create a table
Each cell should
contain the
information for
When you display
your Web page in
a Web browser,
with one row that one column. For the information
create rows and cells in the table. The <TR> Many people use tables to organize the layout <TD>Each cell should contain the information contains a cell for example, you can will appear in
for one column. For example, you can display
tag lets you create rows and the <TH> and of a Web page. For example, adding paragraphs three columns of text or an image beside two each column you display three columns. The
columns of text.</TD> want to display. columns of text width of the
<TD> tags let you create cells. and images to the cells in a table can help you <TD>When you display your Web page in a Web or an image columns will
neatly position text and images on your Web browser, the information will appear in beside two depend on the
There are two types of cells you can create page. Use the <IMG> tag to add an image to columns. The width of the columns will depend columns of text. size of the Web
on the size of the Web browser window.</TD>
in a table. The <TH> tag lets you create header a cell. For information on the <IMG> tag, </TR> browser window.
cells and the <TD> tag lets you create data cells. see page 44. </TABLE>
Header cells usually contain text that describes
CREATE A TABLE
pricelist - WordPad

<TITLE>Product List and Prices</TITLE> <TITLE>Product List and Prices</TITLE> <TITLE>Product List and Prices</TITLE>
<H1><CENTER>Product List and Prices</CENTER></H1> <H1><CENTER>Product List and Prices</CENTER></H1> <H1><CENTER>Product List and Prices</CENTER></H1>
<TABLE> <TABLE>
Product Name and Description <TR> <TR>
Price Per Unit Product Name and Description <TH> Product Name and Description </TH>
Units Available Price Per Unit <TH>Price Per Unit</TH>
Units Available <TH>Units Available</TH>
Blouse - red silk </TR> </TR>
$39.95 <TR> <TR>
150 Blouse - red silk <TD> Blouse - red silk </TD>
$39.95 <TD>$39.95</TD>
Pants - black cotton 150 <TD>150</TD>
$57.98 </TR> </TR>
300 <TR> <TR>
Pants - black cotton <TD>Pants - black cotton</TD>
</BODY> $57.98 <TD>$57.98</TD>
</HTML> 300 <TD>300</TD>
</TR> </TR>
</TABLE> </TABLE>
⁄ Type the data you want ¤ Type the data you ‹ Type <TABLE> before ˇ Type <TR> before ‡ Type <TH> in front of · Type <TD> in front of ■ The Web browser
to appear in the first row want to appear in the the data you entered for the data for each row. the data for each header the data for each data cell. displays the table.
of the table. next row of the table. the table. cell.
Repeat this step until Á Type < /TR> after ‚ Type < /TD> after the
■ Use tabs to visually you finish entering all › Type < /TABLE> after the data for each row. ° Type < /TH> after the data for each data cell.
separate the data in each the data for the table. the data you entered for data for each header cell.
cell. A Web browser will the table. Note: Although the </TR> Note: Although the </TH>
ignore the spacing you add. tag is optional, it is considered and </TD> tags are optional,
proper form to include this tag. it is considered proper form
to include these tags.
88 89
ADD A BORDER ADD A CAPTION
T T
he BORDER attribute allows you to add color of your Web page, Web browsers may he <CAPTION> tag lets you add a The HTML standard specifies that you should
a border to a table. The border will separate display the border in the same color as the caption to a table. Captions are useful for not add more than one caption to a table on
each cell in the table, making the data in background. Use the BORDERCOLOR attribute summarizing the information in a table. your Web page. While some Web browsers
the table easier to read. to specify a different border color. Although support the use of multiple <CAPTION> tags
the BORDERCOLOR attribute is supported by By default, most Web browsers display with one <TABLE> tag, the results are
When adding a border to a table, specify most Web browsers, it is not part of the HTML captions centered above a table. This is useful inconsistent in different Web browsers. For
the thickness you want the border to display standard. for displaying a title for a table. Using the example, Netscape Navigator may reverse the
in pixels. The thickness you specify will only ALIGN attribute with the bottom value allows order of the captions you add.
affect the border around the outside of the table. If you are using a table to organize the layout you to have a caption appear below your
To change the thickness of the border between of your Web page, you may want to temporarily table. Displaying a caption below a table is While the ALIGN attribute is still supported by
the cells in the table, use the CELLSPACING add a border to help you see where to place text, useful when you want to provide additional Web browsers, the use of style sheets is now
attribute as shown on page 104. images and other elements. You can easily remove information about a table or summarize the preferred. For information on style sheets, see
the border once your Web page is complete. data in a table. page 196.
A table border usually appears in gray on a
Web page. If you have changed the background
ADD A BORDER ADD A CAPTION

pricelist - WordPad
C:\My Documents\Web Pages\pricelist.html

<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Product List and Prices</TITLE> <TITLE>Schedule of Events</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H1><CENTER>Product List and Prices</CENTER></H1> <TABLE BORDER="10">

<CAPTION> Upcoming Events </CAPTION>
<TABLE BORDER="10" > <TR>
<TR> <TH>Date</TH>
<TH>Product Name and Description</TH> <TH>Event</TH>
<TH>Price Per Unit</TH> <TH>Time</TH>
<TH>Units Available</TH> <TH>Location</TH>
</TR> <TH>Expected Turnout</TH>
<TR> </TR>
<TD>Blouse - red silk</TD> <TR>
<TD>$39.95</TD> <TD>June 21</TD>
<TD>150</TD> <TD>Opening Ceremonies</TD>
</TR> <TD>9:00 a.m. - 11:30 a.m.</TD>
⁄ In the <TABLE> tag, ■ If you want to specify ■ The Web browser ⁄ Type <CAPTION> directly ¤ Type the caption ■ The Web browser
type BORDER="?" a color for the border, displays the table with below the <TABLE> tag for you want the table displays the caption
replacing ? with the type BORDERCOLOR="?" the border you specified. the table you want to display to display. for the table.
thickness you want replacing ? with the name a caption.
to use for the border or hexadecimal value for ‹ Type </CAPTION>
in pixels. the color you want to use. ■ If you want the caption after the caption.
to appear below the table,
Note: For a list of colors, see type ALIGN="bottom" in
the color chart at the front of the <CAPTION> tag.
this book.
90 91
CREATE COLUMN GROUPS A table can contain both
TYPE THIS: RESULT:
structural and non-structural
column groups. This allows <TABLE BORDER="2">
T
he <COLGROUP> and <COL> tags allow you without defining a structure for your table. <COLGROUP> Score 1 Score 2 Average
you to divide structural column
to create column groups in a table. Column This is useful when all of your columns groups (<COLGROUP>) into
<COL SPAN="1">
groups divide a table into vertical sections, contain the same type of information. <COL SPAN="1"> 50 75 62.5
sections using non-structural <COL SPAN="1">
allowing you to format one or more columns of column groups (<COL>). You </COLGROUP> 45 72 58.5
cells at the same time. Once you have created column groups in do not need to include the <TR> <TH>Score 1</TH>
a table, you can format the column groups. SPAN attribute in a <COLGROUP> <TH>Score 2</TH>
<TH>Average</TH> </TR> <COLGROUP>
Use the <COLGROUP> tag to create structural For example, use the BGCOLOR attribute with tag that is divided into non-
<TR> <TD>50</TD> (Structural column group)
column groups that divide your table into logical a <COLGROUP> or <COL> tag to add color structural column groups, <TD>75</TD>
sections. For example, you may want to use one to all the cells in a column group. For more since the <COL> tags define <TD>62.5</TD> </TR> <COL>
the number of columns in the <TR> <TD>45</TD> (non-structural column group)
structural column group for a column containing information on adding color to cells, see page 96.
structural column group. <TD>72</TD>
headings and another structural column group <TD>58.5</TD> </TR>
for the rest of the columns in your table. Although the <COLGROUP> and <COL> tags </TABLE>
are part of the HTML standard, they are not
The <COL> tag allows you to create non-structural currently supported by some Web browsers.
column groups that divide your table into sections
CREATE STRUCTURAL COLUMN GROUPS CREATE NON-STRUCTURAL COLUMN GROUPS
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Product List and Prices</TITLE> <TITLE>Schedule of Events</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H1><CENTER>Product List and Prices</CENTER></H1> <TABLE BORDER="8">

<COL SPAN="1">
<TABLE BORDER="8"> <COL SPAN="3">
<COLGROUP SPAN="1"> </COLGROUP> <COL SPAN="1">
<COLGROUP SPAN="2"></COLGROUP> <TR>
<TR> <TH>Date</TH>
<TH>Product Name and Description</TH> <TH>Event</TH>
<TH>Price Per Unit</TH> <TH>Time</TH>
<TH>Units Available</TH> <TH>Location</TH>
<TR> </TR>
<TH>Blouse - red silk</TH> <TR>
<TD>$39.95</TD> <TD>June 21</TD>
<TD>150</TD> <TD>Opening Ceremonies</TD>
</TR> <TD>9:00 a.m. - 11:30 a.m.</TD>
<TR> <TD>Skylight Stadium</TD>
<TH>Pants - black cotton</TH> <TD>5,000</TD>
<TD>$57 98</TD> </TR>
⁄ To create a structural column ¤ Type < /COLGROUP>. ■ The Web browser ■ The table is divided ⁄ To create a non-structural ¤ Repeat step 1 for ■ The Web browser ■ The table is divided
group, type <COLGROUP SPAN= displays the table on into structural column column group, type <COL SPAN= each non-structural displays the table on into non-structural
"?"> after the <TABLE> tag, Note: The </COLGROUP> your Web page. groups. You can now "?"> after the <TABLE> tag, column group you your Web page. column groups. You
replacing ? with the number tag is optional. format the column replacing ? with the number of want to create. can now format the
of columns you want the ‹ Repeat steps 1 and 2 groups. columns you want the column column groups.
column group to contain. for each structural column group to contain.
Note: If you have added a caption group you want to create. Note: If you have added a caption to
to your table, perform step 1 after your table, perform step 1 after the
the <CAPTION> tag. <CAPTION> tag.
92 93
CREATE ROW GROUPS Once you have created row groups in a table,
you can format the row groups. For example,
use the ALIGN attribute with the <THEAD>,
The HTML standard recommends entering
the <TFOOT> information for your table
above the <TBODY> information to have Web
<TBODY> or <TFOOT> tag to change the browsers display the footer row group while
se the <THEAD>, <TBODY> and <TFOOT> The <TFOOT> tag allows you to create a footer
U
alignment of data in every cell in the row the data for the body row groups transfers
tags to create row groups in a table. Row row group in a table. This is useful for summary group. For more information on changing to a user's computer. This will allow users to
groups divide a table into horizontal data or totals that appear at the bottom of your the alignment of data in a table, see page 98. view the summary information for your table
sections, allowing you to quickly format multiple table. The <TFOOT> tag can only appear once while waiting for the main data in the table to
Example:
appear. Web browsers do not yet support this
rows of cells at the same time. in a table. <TBODY ALIGN="left"> feature. As a result, some Web browsers may
display the footer row group above the body
The <THEAD> tag allows you to create a header You do not need to include all three types of row
row group if you use this method.
row group in your table. This is useful for headings groups in a table. For example, you may only The HTML standard specifies that when you
that you want to format differently than the main want to create a body row group. print a long table containing header and footer
data in your table. The <THEAD> tag can only row groups, Web browsers should print the
appear once in a table. Although the <THEAD>, <TBODY> and <TFOOT> header and footer information on every page.
tags are part of the HTML standard, they are not This will help make long tables easier to follow.
Use the <TBODY> tag to create one or more body yet supported by many Web browsers. Web browsers do not yet support this feature.
row groups in your table. Body row groups usually
contain the rows of data in your table.
CREATE ROW GROUPS
<HTML> <TBODY> </TR>

<HEAD> <TR> <TR>
<TITLE>Schedule of Events</TITLE> <TD>June 21</TD> <TD>June 22</TD>
</HEAD> <TD>Opening Ceremonies</TD> <TD>Sporting Events</TD>
<BODY> <TD>9:00 a.m. - 11:30 a.m.</TD> <TD>9:00 a.m. - 5:00 p.m.</TD>
<TD>Skylight Stadium</TD> <TD>Skylight Stadium</TD>
<TABLE BORDER="8"> <TD>5,000</TD> <TD>2,500</TD>
<THEAD> </TR> </TR>
<TR> <TR> <TR>
<TH>Date</TH> <TD>June 22</TD> <TD>June 23</TD>
<TH>Event</TH> <TD>Spor ting Events</TD> <TD>Awards Presentations</TD>
<TH>Time</TH> <TD>9:00 a.m. - 5:00 p.m.</TD> <TD>11:00 a.m. - 1:30 p.m.</TD>
<TH>Location</TH> <TD>Skylight Stadium</TD> <TD>College Arena</TD>
<TH>Expected Turnout</TH> <TD>2,500</TD> <TD>1,000</TD>
</TR> </TR> </TR>
</THEAD> <TR> </TBODY>
<TR> <TD>June 23</TD> <TFOOT>
<TD>June 21</TD> <TD>Awards Presentations</TD> <TR>
<TD>Opening Ceremonies</TD> <TD>11:00 a.m. - 1:30 p.m.</TD> <TD COLSPAN="5" ALIGN="center">All times are subject to change</TD>
<TD>9:00 a.m. - 11:30 a.m.</TD> <TD>College Arena</TD> </TR>
<TD>Skylight Stadium</TD> <TD>1,000</TD> </TFOOT>
<TD>5,000</TD> </TR> </TABLE>
</TR> </TBODY>
<TR> <TR> </BODY>
<TD>June 22</TD> <TD COLSPAN="5" ALIGN="center">All times are subject to change</TD> </HTML>
<TD>Sporting Events</TD>
⁄ To create a header row ¤ Type </ THEAD> after ‹ To create a body row › Type </TBODY> below ˇ To create a footer row Á Type </ TFOOT> after the ■ The Web browser ■ The table is divided into
group, type <THEAD> above the last row you want group, type <TBODY> above the last row you want to group, type <TFOOT> above last row you want to include displays the table on row groups. You can now
the first row you want to to include in the group. the first row you want to include in the group. the first row you want to in the group. your Web page. format the row groups.
include in the group. include in the group. include in the group.
■ You can repeat steps 3 Note: Although the </THEAD>,
and 4 to create multiple </TBODY> and </TFOOT>
body row groups in a table. tags are optional, it is considered
proper form to include these tags.
94 95
ADD COLOR ADD A BACKGROUND IMAGE
T
he BGCOLOR attribute lets you add color to a followed by the red, green and blue (RGB) se the BACKGROUND attribute to add a image to, a Web browser will cut off the image
table on your Web page. This can help emphasize
important information in the table.
You can add color to a cell (<TH> or <TD>), a row
components of the color. For a list of the colors that
you can specify by name, see the top of page 33.
For a more complete list of colors, see the color
U background image to a single cell or an entire
table. Adding a background image to a single
cell can help make the information in the cell stand
to fit in the table.
When adding a background image to an entire table,
consider that different Web browsers will display the
chart at the front of this book. out. Adding a background image to an entire table
(<TR>), a column group (<COLGROUP> or <COL>), a can add an interesting design to the table. background image in different ways. For example,
row group (<THEAD>, <TBODY> or <TFOOT>) or an Make sure the color you use does not affect the Microsoft Internet Explorer will repeat the
entire table (<TABLE>). For information on column readability of your table. You may need to change Interesting background images are available at the background image to fill the entire table, while
groups and row groups, see pages 92 to 95. the color of text to make the table easier to read. www.nepthys.com/textures and imagine.metanet.com Netscape Navigator will repeat the image in each
Web sites. Make sure the background image you cell in the table.
When adding color, specify the name or hexadecimal While the BGCOLOR attribute is still supported choose does not affect the readability of your table.
value for the color you want to use. A hexadecimal by Web browsers, the use of style sheets is now You should also make sure that the background image Although the BACKGROUND attribute is supported by
value is a code that tells Web browsers which color to preferred. For information on style sheets, see is an appropriate size. If you use a background that most Web browsers, it is not part of the HTML
display. The code is composed of a number sign (#) page 196. is larger than the cell or table you are adding the standard for tables.
ADD COLOR ADD A BACKGROUND IMAGE

index - WordPad

<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Schedule of Events</TITLE> <TITLE>Schedule of Events</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<TABLE BORDER="8"> <H2>Schedule of Events</H2>

<TR BGCOLOR="#FF0000" > <TABLE BORDER="10" BACKGROUND="clouds.jpg" >
<TH>Date</TH> <TR>
<TH>Event</TH> <TH>Date</TH>
<TH>Time</TH> <TH>Event</TH>
<TH>Location</TH> <TH>Time</TH>
<TH>Expected Turnout</TH> <TH>Location</TH>
<TR> </TR>
<TD>June 21</TD> <TR>
<TD>Opening Ceremonies</TD> <TD>June 21</TD>
<TD>9:00 a.m. - 11:30 a.m.</TD> <TD>Opening Ceremonies</TD>
<TD>Skylight Stadium</TD> <TD>9:00 a.m. - 11:30 a.m.</TD>
⁄ Click in the tag for the cell ¤ Type BGCOLOR="?" ■ The Web browser displays ⁄ Click in the tag for ¤ Type BACKGROUND="?" ■ The Web browser
(<TH> or <TD>), row (<TR>), replacing ? with the the cell, row, column group, the cell (<TH> or <TD>) replacing ? with the location displays the table with
column group (<COLGROUP> name or hexadecimal row group or entire table in or table (<TABLE>) you and name of the image on the background image
or <COL>), row group (<THEAD>, value for the color you the color you specified. want to display a your computer. you specified.
<TBODY> or <TFOOT>) or want to use (example: background image.
table (<TABLE>) you want red or #FF0000). Note: For information on
to add color to. specifying the location and
name of an image, see the
Note: For more information on top of page 45.
column groups and row groups,
see pages 92 to 95.
96 97
When you specify an alignment for the data The HTML standard includes the justify value
in a row, column group or row group, you can for aligning data with both the left and right edges
ALIGN DATA IN A TABLE later specify a different alignment for the data in
an individual cell. The alignment you specify for
of a cell. Web browsers do not currently support
this value.
the cell will override the alignment you specified
Example:
for the row, column group or row group.
T
he ALIGN and VALIGN attributes You can change the alignment of data in <TR ALIGN="justify">
Example:
allow you to change the horizontal a cell (<TH> or <TD>), a row (<TR>), a
and vertical alignment of data in column group (<COLGROUP> or <COL>) <TR ALIGN="right">
<TD>This text is right aligned.</TD> The HTML standard specifies that the char value
a table. or a row group (<THEAD>, <TBODY> or <TD ALIGN="center">This text is centered.</TD> allows you to align the same character in cells.
<TFOOT>). For information on column <TD>This text is right aligned.</TD> Type ALIGN="char" CHAR="?" in the tag for a cell,
Use the ALIGN attribute to change the groups and row groups, see pages 92 to 95. </TR> row, column group or row group, replacing ? with
horizontal alignment of data. By default, the character you want to align. Web browsers
the data in header cells (<TH>) is centered If you add cell padding to your table, The baseline value lets you vertically align data do not currently support the char value.
and the data in data cells (<TD>) is left the cell padding will affect the alignment with the bottom of the first line of text in other Example:
aligned. of data. For example, if you specify a cell cells. Only Netscape Navigator currently supports
<TR ALIGN="char" CHAR=".">
padding of 4 pixels and align data with the the baseline value.
The VALIGN attribute lets you change the top of a cell, the data will appear 4 pixels Example:
vertical alignment of data. By default, data below the top of the cell. For information <TD VALIGN="baseline">I want to align this data.</TD>
appears in the middle of each cell in a table. on cell padding, see page 104.
ALIGN DATA HORIZONTALLY ALIGN DATA VERTICALLY

prices - WordPad
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Product List and Prices</TITLE> <TITLE>Product List and Prices</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H1> <CENTER>Product List and Prices</CENTER> </H1> <H1> <CENTER>Product List and Prices</CENTER> </H1>
<CENTER> <CENTER>
<TABLE BORDER="10"> <TABLE BORDER="10">
<TR> <TR VALIGN="top" >
<TH ROWSPAN="3">Sierra Fashions</TH> <TH ROWSPAN="3">Sierra Fashions</TH>
<TH>Product Name and Description</TH> <TH>Product Name and Description</TH>
<TH>Price Per Unit</TH> <TH>Price Per Unit</TH>
<TH>Units Available</TH> <TH>Units Available</TH>
</TR> </TR>
<TR ALIGN="right" > <TR>
<TD>Blouse - red silk</TD> <TD>Blouse - red silk</TD>
<TD>$39.95</TD> <TD>$39.95</TD>
<TD>150</TD> <TD>150</TD>
</TR> </TR>
<TR> <TR>
<TD>Pants - black cotton</TD> <TD>Pants - black cotton</TD>
<TD>$57 98</TD> <TD>$57 98</TD>
⁄ Click in the tag for the cell ¤ Type ALIGN="?" ■ The Web browser ⁄ Click in the tag for the cell ¤ Type VALIGN="?" ■ The Web browser
(<TH> or <TD>), row (<TR>), replacing ? with the displays the data in the (<TH> or <TD>), row (<TR>), replacing ? with the displays the data in the
column group (<COLGROUP> or way you want to align cell, row, column group column group (<COLGROUP> or way you want to align cell, row, column group
<COL>) or row group (<THEAD>, the data (left, center or row group with the <COL>) or row group (<THEAD>, the data (top, middle or row group with the
<TBODY> or <TFOOT>) that or right). alignment you specified. <TBODY> or <TFOOT>) that or bottom). alignment you specified.
contains the data you want to contains the data you want to
align horizontally. align vertically.
Note: For information on column groups Note: For information on column groups
and row groups, see pages 92 to 95. and row groups, see pages 92 to 95.
98 99
CHANGE THE SIZE OF A TABLE CHANGE THE SIZE OF A CELL
C C
hanging the size of a table is useful when Use the HEIGHT attribute to change the height hanging the size of a cell in a table cell, all the cells in the same row will display
you want a table to take up a specific of a table by specifying a new height in pixels can help improve the layout of the the new height.
amount of space on your Web page. or as a percentage of the Web browser window. table. Use the WIDTH attribute to
The HEIGHT attribute is not part of the HTML specify a new width for a cell in pixels or If you specify a width or height that is smaller
The WIDTH attribute allows you to change the standard for tables and some Web browsers do as a percentage of the table. The HEIGHT than the contents of a cell in the column or
width of a table by specifying a new width in not fully support this attribute. attribute lets you specify a new height for row, a Web browser will display the column or
pixels or as a percentage of the Web browser a cell in pixels. row as small as the contents of the cell allows.
window. When specifying a width in pixels, use If you specify a width or height that is smaller
a width of 600 pixels or less to ensure the entire than the contents of a table, a Web browser You do not need to change the size of While the WIDTH and HEIGHT attributes are
table will fit on a user's screen. If you want the will display the table as small as the contents each individual cell in your table. When still supported by Web browsers, the use of
width of your table to vary according to the size of the table allow. you change the width of a cell, all the cells style sheets is now preferred. For information
of the Web browser window, specify the width in the same column will display the new on style sheets, see page 196.
as a percentage of the Web browser window. width. When you change the height of a
CHANGE THE SIZE OF A TABLE CHANGE THE SIZE OF A CELL

index - WordPad Schedule of Events - Microsoft Internet Explorer

<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Schedule of Events</TITLE> <TITLE>Recipes</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H2>Schedule of Events</H2> <H2>Recipes</H2>

<TABLE BORDER="10" WIDTH="600" HEIGHT="300" > <TABLE BORDER="5">
<TR> <TR>
<TH>Date</TH> <TH WIDTH="200" HEIGHT="100" >Recipe</TH>
<TH>Event</TH> <TH>Food Group</TH>
<TH>Time</TH> <TH>Preparation Time</TH>
<TH>Location</TH> <TH>Notes</TH>
<TH>Expected Turnout</TH> </TR>
</TR> <TR>
<TR> <TD>Vegetarian Lasagna</TD>
<TD>June 21</TD> <TD>Pasta</TD>
<TD>Opening Ceremonies</TD> <TD>45 minutes</TD>
<TD>9:00 a.m. - 11:30 a.m.</TD> <TD>Good vegetarian dish</TD>
<TD>Skylight Stadium</TD> </TR>
⁄ Click in the <TABLE> ‹ To change the ■ The Web browser ⁄ Click in the <TH> or ‹ To change the ■ The Web browser
tag for the table you want height, type HEIGHT="?" displays the table with <TD> tag for the cell you height, type HEIGHT="?" displays the cell with the
to resize. replacing ? with a height the width and height want to resize. replacing ? with a height size you specified. All the
in pixels (example: 300) you specified. in pixels (example: 100). cells in the same column
¤ To change the width, type or as a percentage of the ¤ To change the width, type or row also display the
WIDTH="?" replacing ? with a WIDTH="?" replacing ? with a new width or height.
window (example: 50%).
width in pixels (example: 600) width in pixels (example: 200)
or as a percentage of the or as a percentage of the
window (example: 50%). table (example: 50%).
100 101
Using the COLSPAN and ROWSPAN attributes
in the same <TH> or <TD> tag allows you
to span a cell across columns and down
SPAN CELLS rows at the same time.
TYPE THIS: RESULT:

panning cells allows you to combine two When spanning a cell across columns or
S
<TABLE BORDER="10">
<TR>
or more cells in a row or column into one down rows, you must specify the number <TH>Schedule</TH>
large cell. This is useful when you want of cells you want the cell to span across. <TD>Othello</TD>
<TD>Hamlet</TD>
to display a title across the top or down the <TD>Julius Caesar</TD>
Some common errors people make when </TR> Schedule Othello Hamlet Julius Caesar
side of your table. Spanning cells is also useful <TR>
spanning cells include accidentally extending Preview Aug.28, 2000
when you want to display a heading across <TD>Preview</TD> To Be Announced
Sep.30, 2000
a row past the edge of a table or moving <TD COLSPAN="2" ROWSPAN="2">To Be Opening Night
multiple rows or columns. Announced</TD>
data to the wrong column or row. To avoid <TD>Aug.28, 2000</TD>
</TR>
Use the COLSPAN attribute with the <TH> problems when spanning cells, you should <TR>
or <TD> tag to span a cell across columns. sketch your table on a piece of paper before <TD>Opening Night</TD>
<TD>Sep.30, 2000</TD>
Use the ROWSPAN attribute with the <TH> you begin. This allows you to clearly see the </TR>
</TABLE>
or <TD> tag to span a cell down rows. layout of your table.
SPAN CELLS
prices - WordPad prices - WordPad
C:\My Documents\Web Pages\prices.html C:\My Documents\Web Pages\prices.html

<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Product List and Prices</TITLE> Product List and Prices <TITLE>Product List and Prices</TITLE> Product List and Prices
</HEAD> </HEAD>
<BODY> <BODY>
New Spring Line Product Name and Description Price Per Unit Units Available
<H1><CENTER>Product List and Prices</CENTER></H1> Product Name and Description Price Per Unit Units Available <H1><CENTER>Product List and Prices</CENTER></H1> Sierra Fashions Blouse - red silk $39.95 150
<CENTER> Blouse - red silk $39.95 150 <CENTER> Pants - black cotton $57.98 300
<TABLE BORDER="10"> Pants - black cotton $57.98 300 <TABLE BORDER="10">
<TR> <TR>
<TH COLSPAN="3" >New Spring Line</TH> <TH ROWSPAN="3" >Sierra Fashions</TH>
</TR> <TH>Product Name and Description</TH>
<TR> <TH>Price Per Unit</TH>
<TH>Product Name and Description</TH> <TH>Units Available</TH>
<TH>Price Per Unit</TH> </TR>
<TH>Units Available</TH> <TR>
</TR> <TD>Blouse - red silk</TD>
<TR> <TD>$39.95</TD>
<TD>Blouse red silk</TD> <TD>150</TD>
SPAN CELLS ACROSS COLUMNS ■ The Web browser spans SPAN CELLS DOWN ROWS ■ The Web browser
⁄ In the <TH> or <TD> the cell across the number ⁄ In the <TH> or <TD> spans the cell down
tag for the cell you want to of columns you specified. tag for the cell you want the number of rows
span across columns, type to span down rows, type you specified.
COLSPAN="?" replacing ? with ROWSPAN="?" replacing ?
the number of columns you with the number of rows you
want the cell to span across. want the cell to span down.
102 103
CHANGE CELL SPACING Setting the CELLSPACING and CELLPADDING
attributes to 0 can make two images in a table
AND CELL PADDING appear as one image. To completely remove

the space between cells, you should also set
the BORDER attribute to 0.
T
he CELLSPACING and CELLPADDING in a table. Increasing the cell padding can make TYPE THIS: RESULT:
attributes are often used to improve the a table appear less cluttered. By default, the cell <TABLE BORDER="0" CELLSPACING="0"
layout and readability of a table. padding for a table is 1 pixel. CELLPADDING="0">
<TR>
<TD COLSPAN="2"><IMG SRC="banner.gif"></TD>
The CELLSPACING attribute lets you change Changing the cell padding for a table will affect </TR>
the amount of space between each cell in a table. the alignment of data in the table. For example, <TR>
<TD><IMG SRC="landscape.gif"></TD>
Changing the cell spacing will change the size if you align data with the top of a cell and then <TD>This Web page includes information This Web page includes information
of the border between cells. Specify the amount specify a cell padding of 4 pixels, the data will about my trip to Europe. I want to about my trip to Europe. I want to share
share with you all the interesting places with you all the interesting places and
of space you want to use in pixels. By default, appear 4 pixels below the top of the cell. For and people I encountered. I have included people I encountered. I have included
tables display a cell spacing of 2 pixels. information on changing the alignment of data some tips and tricks to help make your next some tips and tricks to help make your
in a table, see page 98. trip to Europe enjoyable.</TD> next trip to Europe enjoyable.
The CELLPADDING attribute lets you change the </TR>
</TABLE>
amount of space around the contents of each cell
CHANGE CELL SPACING AND CELL PADDING
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Product Inventory</TITLE> <TITLE>Product Inventory</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<TABLE BORDER="8" CELLSPACING="10" > <TABLE BORDER="8" CELLPADDING="10" >

<TR> <TR>
<TH COLSPAN="5">McKenzie Fashions Inc.</TH> <TH COLSPAN="5">McKenzie Fashions Inc.</TH>
</TR> </TR>
<TR> <TR>
<TH ROWSPAN="5">Products</TH> <TH ROWSPAN="5">Products</TH>
<TH>Code</TH> <TH>Code</TH>
<TH>Category</TH> <TH>Category</TH>
<TH>Price</TH> <TH>Price</TH>
<TH>Units Available</TH> <TH>Units Available</TH>
</TR> </TR>
<TR> <TR>
<TD>01-468</TD> <TD>01-468</TD>
<TD>Fall</TD> <TD>Fall</TD>
<TD>$75.00</TD> <TD>$75.00</TD>
<TD>1068</TD> <TD>1068</TD>
CHANGE CELL SPACING Note: Set the cell spacing ■ The Web browser CHANGE CELL PADDING Note: Set the cell padding ■ The Web browser
⁄ In the <TABLE> tag for to 0 to remove the space displays the table with ⁄ In the <TABLE> tag for to 0 to remove the space displays the table with
the table you want to change, between cells. the cell spacing you the table you want to change, around the contents of the cell padding you
type CELLSPACING="?" specified. type CELLPADDING="?" each cell. specified.
replacing ? with the amount replacing ? with the amount
of space you want to appear of space you want to appear
between each cell in pixels. around the contents of each
cell in pixels.
104 105
External Borders Internal Borders
SPECIFY WHICH BORDERS TO DISPLAY Use one of the following values for the
FRAME attribute to specify the external
borders you want your table to display.
Use one of the following values for the
RULES attribute to specify the internal
borders you want your table to display.
W
hen you add a border to a table using column groups and row groups. When displaying SPECIFY THE VALUE TO DISPLAY SPECIFY THE VALUE TO DISPLAY
the BORDER attribute, the border internal borders between column groups and row
void No external borders. none No internal borders.
automatically appears around the outside groups, keep in mind that only structural column
of the table and between each cell. Use the FRAME groups will display the borders. For information on above A border above the table. cols Borders between columns.
and RULES attributes to display only some table column groups and row groups, see pages 92 to 95. below A border below the table. rows Borders between rows.
borders. rhs A border on the right side groups Borders between column
Using the FRAME and RULES attributes in the of the table. groups and row groups.
The FRAME attribute lets you specify which external same <TABLE> tag allows you to create interesting lhs A border on the left side all All internal borders (default).
borders you want to display. For example, you may border designs for a table. For example, you can of the table.
want to display borders above and below a table or create a table that displays vertical borders on hsides Borders on the top and
on only the right side of the table. each side of columns, with no horizontal borders. bottom of the table.
vsides Borders on the left and right
The RULES attribute lets you specify which internal While the FRAME and RULES attributes are part sides of the table.
borders you want to display. For example, display of the HTML standard, these attributes are not
border All external borders (default).
borders between rows or columns or between yet supported by some Web browsers.
SPECIFY EXTERNAL BORDERS SPECIFY INTERNAL BORDERS
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Schedule of Events</TITLE> <TITLE>Schedule of Events</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H2>Schedule of Events</H2> <H2>Schedule of Events</H2>

<TABLE BORDER="8" FRAME="hsides" > <TABLE BORDER="8" RULES="rows" >
<TR> <TR>
<TH>Date</TH> <TH>Date</TH>
<TH>Event</TH> <TH>Event</TH>
<TH>Time</TH> <TH>Time</TH>
<TH>Location</TH> <TH>Location</TH>
<TH>Expected Turnout</TH> <TH>Expected Turnout</TH>
</TR> </TR>
<TR> <TR>
<TD>June 21</TD> <TD>June 21</TD>
<TD>Opening Ceremonies</TD> <TD>Opening Ceremonies</TD>
<TD>9:00 a.m. - 11:30 a.m.</TD> <TD>9:00 a.m. - 11:30 a.m.</TD>
<TD>Skylight Stadium</TD> <TD>Skylight Stadium</TD>
<TD>5,000</TD> <TD>5,000</TD>
</TR> </TR>
⁄ Add a border to ¤ In the <TABLE> tag for ■ The Web browser ⁄ Add a border to ¤ In the <TABLE> tag for ■ The Web browser
your table as shown the table, type FRAME="?" displays the table with your table as shown the table, type RULES="?" displays the table with
on page 90. replacing ? with the value the external borders you on page 90. replacing ? with the value the internal borders
for the external borders specified. for the internal borders you you specified.
you want to display (void, want to display (none, cols,
above, below, rhs, lhs, rows, groups or all).
hsides, vsides or border).
Note: For more information,
Note: For more information, see see the top of this page.
the top of page 107.
106 107
PREVENT TEXT WRAPPING IN CELLS CREATE NESTED TABLES

A
Web browser will usually automatically may cause your table to extend past the edge esting a table within another table allows Some people prefer to create the main table and
wrap the text in a cell depending on the
size of the table and the size of the Web
browser window. Use the NOWRAP attribute to
of a Web browser window.
When using the NOWRAP attribute in a cell,
keep in mind that the text in the cell will not
N you to create more complex table
layouts.
To nest a table, you first create the main table, leaving
nested table separately. This can help you identify
possible layout problems with the tables. Once you
are satisfied with the appearance of both tables,
prevent the text in a cell from wrapping. This copy the contents of the table you want to nest
is useful when you want all the text in a cell appear on one line if the <P> or <BR> tags the cell you want to contain the nested table empty. into the empty cell in the main table.
to appear on one line. appear in the cell. For information on the <P> You can then nest a table by creating a new table in
and <BR> tags, see pages 16 and 18. the empty cell. You can format nested tables as you would format
Use the NOWRAP attribute only in cells that any other table. For example, you may want to add
contain a small amount of text, such as cells While the NOWRAP attribute is still supported When creating the tables, make sure you include color to a nested table as shown on page 96.
containing a title or product name. Using the by Web browsers, the use of style sheets is all the end tags (</TH>, </TD>, </TR> and
NOWRAP attribute in a cell that contains a large now preferred. For information on style sheets, </TABLE>) for both the main table and the nested Avoid overusing nested tables on your Web page,
amount of text will create a very large cell that see page 196. table. Forgetting to include an end tag may adversely since this can affect the performance of a user's
affect the layout of the tables. Web browser.
PREVENT TEXT WRAPPING IN CELLS CREATE NESTED TABLES
<HTML> <H2>Product List and Prices</H2>

<HEAD>
<TITLE>Schedule of Events</TITLE> <TABLE BORDER="8">
</HEAD> <TR>
<BODY> <TH>Product Name and Description</TH>
<TH>Price Per Unit</TH>
<H2>Schedule of Events</H2> <TH>Units Available</TH>
<TABLE BORDER="10"> </TR>
<TR> <TR>
<TH>Date</TH> <TD>
<TH>Event</TH> <TABLE BORDER="1">
<TH>Time</TH> <TR>
<TH>Location</TH> <TD>White silk blouse - long sleeved</TD>
<TH>Expected Turnout</TH> </TR>
</TR> <TR>
<TR> <TD>Red silk blouse - long sleeved</TD>
<TD NOWRAP >June 21, 2000</TD> </TR>
<TD>Opening Ceremonies</TD> <TR>
<TD>9:00 a.m. - 11:30 a.m.</TD> <TD>Black silk blouse - long sleeved</TD>
<TD>Skylight Stadium</TD> </TR>
<TD>5,000</TD> </TABLE>
</TR> </TD>
<TR> <TD>$39.95</TD>
<TD>June 21</TD> TD /TD
⁄ In the <TH> or <TD> tag Note: The text in the cell will ■ The Web browser ⁄ Create the table you want ‹ Create the nested ■ The Web browser
for the cell that contains text not appear on one line if the displays the text on to contain a nested table, table as you created the displays the nested table
you want to appear on one <P> or <BR> tags appear one line. leaving the cell you want main table. within the main table.
line, type NOWRAP. in the cell. to contain the table empty.
Note: You can use indents to
¤ Click in the cell you want visually separate the nested
to contain the nested table. table from the main table.
A Web browser will ignore
the indents you add.
108 109
WRAP TEXT AROUND A TABLE Use the center value with the ALIGN
attribute to horizontally center a table
on your Web page. Text will not wrap
T
he ALIGN attribute allows you to wrap stop wrapping text around the table. Use around a table you horizontally centered.
text around a table. This can help give the left, right or all value to have the
your Web page a professional look. text continue when the left margin, right TYPE THIS: RESULT:
margin or both margins are clear of tables. <TABLE ALIGN="center" BORDER="1">
When wrapping text around a table, use the <TR>
left or right value to specify how you You should only wrap text around small <TH>Product</TH>
<TH>Price Per Unit</TH>
want the text to wrap around the table. The tables on your Web page. Wrapping text </TR>
left value places the table on the left side around large tables may produce unexpected <TR> C:\My Documents\Web Pages\index.html
<TD>Hammer</TD>
of the text, while the right value places results, such as text overlapping the table. <TD>$14.95</TD> Product Price Per Unit
</TR>
the table on the right side of the text. <TR> Hammer $14.95
While the ALIGN and CLEAR attributes <TD>Saw</TD> Saw $29.95
If you want only some of the text to wrap are still supported by Web browsers, the <TD>$29.99</TD>
</TR> Welcome to Jacob & Sons Carpentry Supply Store! We've been a fixture in the Lincoln community
around a table, use the CLEAR attribute with use of style sheets is now preferred. For </TABLE> for over eighty years, maintaining our commitment to traditional tools and quality craftsmanship. But
the <BR> tag to mark where you want to information on style sheets, see page 196.
WRAP TEXT AROUND A TABLE

Biography - Microsoft Internet Explorer Biography - Microsoft Internet Explorer
<HTML> <TR>
<HEAD> <TD>Best Hits</TD>
<TITLE>Biography</TITLE> <TD>2000</TD>
</HEAD> </TR>
<BODY> </TABLE>
<H1><CENTER>The Jazz Kings' Biography</CENTER></H1> <P>The Jazz Kings burst onto the music scene in 1994 with their debut album
entitled Midnight Jazz. Since then, the band has been gaining popularity throu
<TABLE BORDER="8" ALIGN="left" > the United States.</P> <BR CLEAR="left">
<TR>
<TH>Record Name</TH> <P>The band consists of five talented musicians who met in New Orleans in
<TH>Year Produced</TH> Since then, they have produced four albums and have toured throughout the
</TR> States and Europe. Although their albums are great, the band really must be
<TR> live to be truly appreciated! The Jazz Kings play with a great deal of energy,
<TD>Midnight Jazz</TD> the audience is always dancing in unison by the end of the first song! Whethe
<TD>1994</TD> they're playing a small club, or a large stadium, the band is always at their be
</TR> when on stage.</P>
<TR>
<TD>Summer Songs</TD> <P>The Jazz Kings' newest album, Best Hits, is a collection of songs from th
<TD>1996</TD> previous recordings. Be sure to pick it up at your local record store!</P>
⁄ To wrap text around ■ To wrap text around ■ The Web browser STOP TEXT WRAP ¤ Type <BR CLEAR="?"> ■ The Web browser
the right side of a table, the left side of a table, displays the text wrapped ⁄ Click where you want replacing ? with the stops the text wrap
type ALIGN="left" in the type ALIGN="right" in around the table. to stop text from wrapping margin(s) you want to where you specified.
<TABLE> tag for the table. the <TABLE> tag for around a table. be clear of tables before
the table. the text continues (left,
right or all).
110 111
HTML ADD SOUNDS AND VIDEOS 8
CREATE A LINK TO A SOUND SOUND CONSIDERATIONS

our Web page can contain a link When creating a link to a sound, make sure the
Y that users can select to play a

sound.
There are many places that offer sounds
sound you use is a type of sound commonly used
on the Web. For more information on sound types,
see page 113. You should also make sure you have
Sound Type
There are several types of sound you
permission to use any sounds you did not create Type of Sound Extension Used For
you can use on your Web pages, such as the yourself. can include on a Web page. The most
www.wavcentral.com and www.soundamerica.com popular type of sound is WAV. The MIDI .mid Instrumental music
Web sites. You can also purchase sound collections When a user selects a sound link, the user's Web file extension for a sound indicates
at many computer stores or record your own browser will attempt to play the sound. If the Web the sound type. MP3 .mp3 Songs
sounds. To record sounds, your computer must browser cannot play the sound, the browser will
The following chart displays sound RealAudio .ra Live broadcasts
have sound capabilities and a sound recording try to open the sound in a program on the user's
types commonly used on the Web.
program. Popular sound recording programs computer. If the user does not have an appropriate WAV .wav Short sound clips
include Microsoft Sound Recorder and QuickTime. program, the Web browser will allow the user to
save the sound on their computer.
Provide a Description Provide a Program Link
CREATE A LINK TO A SOUND
When creating a link to a sound, you should Some users may not have a program installed on
provide a short description of the sound to their computers that will allow them to play a sound
help users decide if they want to play the you added to your Web page. Consider including a
sound. The description should include the link on your Web page that will take users to a Web
<HTML>
<HEAD> sound type, size and length of time the site where they can obtain a program that will play
<TITLE>Classical Music Composers</TITLE> sound will play. Users may not want to the sound. For example, if your Web page contains
</HEAD>
<BODY> play a sound with a large file size, since RealAudio sounds, include a link to the www.real.com
<H1>Bach</H1> the sound may take a long time to transfer Web site where users can obtain the RealPlayer
to their computer. program. If you have included MP3 sounds on your
Eisenach, Germany. Bach's works include church organ and choral music, music Web page, you may want to include a link to the
for chamber orchestras and over 200 cantatas. Although he was more respected
as an organist during his lifetime, Bach's compositions influenced many later
www.nullsoft.com Web site where users can obtain
composers, including Beethoven and Mozar t. Bach is still considered one of the the Winamp program.
greatest composers of the Baroque period (1600-1750).</P> Provide Sound Alternatives
<P>Sound clips from some of Bach's most famous works:
<BR> <A HREF="matthew.au"> St. Matthew Passion </A>
Some users may be hearing impaired or
<BR>Brandenburg Concer tos</P> use computers that do not have sound
Specify Location of Sounds
</BODY> capabilities. Consider including a description
</HTML> or text version of important sounds on your You should store all of your Web pages and sounds
Web page. If the sound is a long clip from in one folder on your computer. If the folder contains
a movie, performance or speech, you may many files, you may want to store your sounds in a
⁄ Type the text or add the Note: For information on ■ The Web browser ■ When a user selects the want to include a link to a text version of subfolder. If a sound you want to add to a Web page
image you want users to specifying the location and displays the sound link sound link, the sound will the sound. is stored in the same folder as the Web page, specify
select to play the sound. name of a sound, see page 113. on your Web page. transfer to their computer just the name of the sound (example: birdcall.wav).
‹ Type </A> after the and play. If a sound is stored in a subfolder, specify the
¤ Type <A HREF="?"> in
front of the text or image, text or image. name of the subfolder and the name of the sound
replacing ? with the location (example: sounds/birdcall.wav).
and name of the sound on
your computer.
112 113
The HIDDEN attribute lets you hide the controls The HTML standard recommends that you use the
for a sound. This is useful when you want to add <OBJECT> tag to add objects such as embedded
ADD AN EMBEDDED SOUND a background sound to your Web page. When

hiding the controls for a sound, you should use
the AUTOSTART attribute with the true value
sounds to your Web page. Since Web browsers do
not currently fully support the <OBJECT> tag, the
<EMBED> tag is more commonly used.
to ensure the sound plays automatically when
To add an embedded sound using the <OBJECT>
T
he <EMBED> tag allows you to add an the false value to prevent a sound from playing a user visits your Web page.
tag, use the DATA attribute to specify the location
embedded sound to your Web page. automatically. If you want an embedded sound Example: and name of the sound on your computer. Type
An embedded sound will play directly to play continuously, use the LOOP attribute with <EMBED SRC="backgroundmusic.wav" text you want to appear if a Web browser does not
on your Web page. the true value. HIDDEN AUTOSTART="true" LOOP="true"> support the <OBJECT> tag between the <OBJECT>
and </OBJECT> tags.
When you add an embedded sound, your Web To play an embedded sound, a Web browser
Example:
page will display sound controls that allow users must have the correct plug-in installed. A plug-in Use the <NOEMBED> tag to provide alternative text
to start and stop the sound. Use the WIDTH is software that adds features to a Web browser. <OBJECT DATA="firecracker.wav">
that will appear if a Web browser does not support Firecracker Sounds Here</OBJECT>
and HEIGHT attributes to specify a size for If a user's Web browser does not have the correct the <EMBED> tag. The alternative text you provide
the sound controls. plug-in, the browser may prompt the user to will not appear if a Web browser recognizes the
download the plug-in from the Web. <EMBED> tag.
By default, some Web browsers automatically Example:
play an embedded sound when users visit the While the <EMBED> tag is supported by most Web
<EMBED SRC="meow.wav"><NOEMBED>Sound
Web page. Use the AUTOSTART attribute with browsers, it is not part of the HTML standard. of my cat's meow.</NOEMBED>
ADD AN EMBEDDED SOUND

<TITLE>Classical Music Composers</TITLE> <TITLE>Classical Music Composers</TITLE> <TITLE>Classical Music Composers</TITLE>
<H1>Beethoven</H1> <H1>Beethoven</H1> <H1>Beethoven</H1>

<P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent most of his life <P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent most of his life <P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent most of his life
Vienna, where he earned a living giving concerts, teaching piano and selling his compos Vienna, where he earned a living giving concerts, teaching piano and selling his compos Vienna, where he earned a living giving concer ts, teaching piano and selling his compos
<BR>One of the most fascinating aspects of Beethoven's life was his triumph over deafn <BR>One of the most fascinating aspects of Beethoven's life was his triumph over deafn <BR>One of the most fascinating aspects of Beethoven's life was his triumph over deafn
which struck him during adulthood. In fact, he composed some of his most powerful work which struck him during adulthood. In fact, he composed some of his most powerful work which struck him during adulthood. In fact, he composed some of his most powerful work
losing his hearing.</P> losing his hearing.</P> losing his hearing.</P>
<EMBED SRC="beethoven.wav"> <EMBED SRC="beethoven.wav" WIDTH="170" HEIGHT="25" > <EMBED SRC="beethoven.wav" WIDTH="170" HEIGHT="25" AUTOSTART="false"
LOOP="true" >
</BODY> </BODY>
</HTML> </HTML> </BODY>
</HTML>
⁄ Type <EMBED SRC="?"> Note: For information on ¤ In the <EMBED> tag, ‹ If you do not want the › If you want the sound ■ The Web browser ■ Users can use the
where you want the controls specifying the location type WIDTH="?" HEIGHT="?" sound to play automatically to play continuously until displays the sound sound controls to start
for the sound to appear on and name of a sound, replacing ? with the width when a user visits your Web a user clicks the Stop or controls on your Web or stop the sound at
your Web page. Replace ? see page 113. and height of the sound page, type AUTOSTART="false" Pause button or displays page. any time.
with the location and name of controls in pixels. in the <EMBED> tag. another Web page, type
the sound on your computer. LOOP="true" in the
<EMBED> tag.
114 115
ADD AN EXTERNAL VIDEO VIDEO CONSIDERATIONS

ou may want to create a link on your includes the video type, size and length of
Y Web page that users can select to play

a video. A video that users play by
selecting a link is called an external video.
time the video will play. This can help users
decide if they want to play the video. You
should also make sure the video is a type
Video Types
of video commonly used on the Web. For There are several types of video you Type of Video Extension
There are many places where you can more information, see page 117. can include on a Web page. The file
find videos for your Web pages, such extension for a video indicates the AVI .avi
as the www.picturesnow.com and When a user selects a video link, the user's video type.
www.jurassicpunk.com Web sites. You Web browser will attempt to play the video. MPEG .mpg or .mpeg
can also purchase collections of videos If the Web browser cannot play the video, The following chart displays video
types commonly used on the Web. QuickTime .mov or .qt
at computer stores or record videos. For the browser will try to open the video in a
information on recording videos, see page 117. program on the user's computer. If the user
does not have an appropriate program, the
When creating a link to a video, provide Web browser will allow the user to save
a short description of the video that File Size Provide a Program Link
the video on their computer.
Video files tend to be the largest files on the Some users may not have a program installed
ADD AN EXTERNAL VIDEO Web. The file size of a video depends on its on their computer that will allow them to play a
resolution, sound quality and length. Videos video you added to your Web page. You should
with large file sizes can take a long time to consider including a link on your Web page that
transfer to a computer. For example, a video will take users to a Web site where they can
larger than 10 Megabytes (MB) can take more obtain a program that will play the video. For
<HTML>
<HEAD> than an hour to download depending on the example, if you include QuickTime videos on
<TITLE>Dream Cars</TITLE> speed of your Internet connection. Whenever your Web page, you may want to include a link
</HEAD>
<BODY> possible, you should use videos with small to the www.apple.com/quicktime/download
file sizes. Web site where users can obtain the QuickTime
<H1>Dream Cars</H1>
<P>Do you have a dream car? Then be sure to visit the luxurious dream cars on Player program.
this Web page!
<BR>Check out your dream car in action!</P>
<A HREF="fastcar.avi"> <IMG SRC="car.jpg"> </A> 1.41 MB AVI Video (17 Record Videos
seconds) Specify Location of Videos
If your computer has a video capture card
</BODY>
</HTML>
or built-in video capture capabilities, you You should store all of your Web pages and
can connect a VCR, video camera or DVD videos in one folder on your computer. If the
player to your computer to record videos. folder contains many files, you may want to
Video capture cards usually include all the store your videos in a subfolder. If a video you
necessary cables and software you need want to add to a Web page is stored in the
to record videos. Make sure you have same folder as the Web page, specify just the
⁄ Type the text or add ¤ Type <A HREF="?"> in front ■ The Web browser ■ When a user selects the permission to record videos that you did name of the video (example: airplane.avi). If
the image you want of the text or image, replacing ? displays the video link video link, the video will not create yourself. When recording videos, a video is stored in a subfolder, specify the
users to select to play with the location and name of on your Web page. transfer to their computer keep in mind that long videos will have name of the subfolder and the name of the
the video. the video on your computer. and play. large file sizes and will take a long time video (example: videos/airplane.avi).
Note: For information on specifying to transfer to a computer.
the location and name of a video,
see page 117.
‹ Type </A> after the text
116 or image. 117
To wrap text around a video on your Web page, The HTML standard recommends that you use
use the ALIGN attribute with the left or right the <OBJECT> tag to add objects such as internal
ADD AN INTERNAL VIDEO value. The left value will place the video on
the left side of the text and the right value
will place the video on the right side of the text.
videos to your Web page. Since Web browsers do
not currently fully support the <OBJECT> tag, the
<EMBED> tag is more commonly used.
Example: When using the <OBJECT> tag, the DATA attribute
T
he <EMBED> tag allows you to add an the AUTOSTART attribute with the true value to
<EMBED SRC="race.avi" WIDTH="120" allows you to specify the location and name of
internal video to your Web page. An internal have a video play automatically when a user visits the video on your computer. Type the text you
HEIGHT="100" ALIGN="left">
video will play directly on your Web page. your Web page. Using the LOOP attribute with the want to appear if a Web browser does not support
true value lets you have a video play continuously. the <OBJECT> tag between the <OBJECT> and
When adding an internal video, you should Some people add internal AVI videos to their </OBJECT> tags.
specify the size of the video using the WIDTH To play an internal video, a Web browser must Web pages using the DYNSRC attribute with the
Example:
and HEIGHT attributes. This ensures that the have the correct plug-in installed. A plug-in is <IMG> tag. Since only Internet Explorer currently
video will appear correctly in a Web browser. software that adds features to a Web browser. supports the DYNSRC attribute, you should also <OBJECT DATA="dance.avi" WIDTH="200"
Use a video player program such as Windows If a user's Web browser does not have the use the SRC attribute to specify the location of HEIGHT="175">Dance video</OBJECT>
Media Player or QuickTime Player to determine correct plug-in, the browser may prompt the an image on your computer that will appear if
a Web browser cannot display the video.
the correct width and height of a video. user to download the plug-in from the Web.
Example:
The AUTOSTART and LOOP attributes allow you While the <EMBED> tag is supported by most <IMG DYNSRC="commercial.avi"
to specify the way you want a video to play. Use Web browsers, it is not part of the HTML standard. SRC="product.jpg">
ADD AN INTERNAL VIDEO

<HEAD> <HEAD> <HEAD> C:\My Documents\Web Pages\index.html
<TITLE>Scuba Diving</TITLE> <TITLE>Scuba Diving</TITLE> <TITLE>Scuba Diving</TITLE>
<H1> <CENTER>The Beauty of Scuba Diving!</CENTER></H1> <H1><CENTER>The Beauty of Scuba Diving!</CENTER></H1> <H1> <CENTER>The Beauty of Scuba Diving!</CENTER></H1>
<P> <CENTER>Have you ever dreamed of scuba diving and witnessing first hand the beauty <P><CENTER>Have you ever dreamed of scuba diving and witnessing first hand the beauty <P><CENTER>Have you ever dreamed of scuba diving and witnessing first hand the beauty
the ocean?</CENTER> </P> the ocean?</CENTER></P> the ocean?</CENTER></P>
<CENTER> <EMBED SRC="scuba.avi"> </CENTER> <CENTER><EMBED SRC="scuba.avi" WIDTH="320" HEIGHT="240" ></CENTER> <CENTER> <EMBED SRC="scuba.avi" WIDTH="320" HEIGHT="240" AUTOSTART="true"
LOOP="true" ></CENTER>
</BODY> </BODY>
</HTML>
⁄ Type <EMBED SRC="?"> Note: For information on ¤ In the <EMBED> tag, Note: Use a video player ‹ If you want the video to › If you want the video ■ The Web browser ■ A user can click the
where you want the video specifying the location type WIDTH="?" HEIGHT="?" program to determine the play automatically when a to play continuously until displays the video on video to start or stop
to appear on your Web and name of a video, see replacing ? with the width correct width and height user visits your Web page, a user clicks the video your Web page. the video at any time.
page. Replace ? with the page 117. and height of the video in of the video. type AUTOSTART="true" in or displays another Web
location and name of the pixels. the <EMBED> tag. page, type LOOP="true"
video on your computer. in the <EMBED> tag.
118 119
HTML CREATE FORMS 9
INTRODUCTION TO FORMS
orms allow you to gather information
F from users who visit your Web pages.

For example, forms allow users to send
you questions and comments about your
CGI SCRIPTS
Process Information
Web pages. Some forms allow users to
purchase products and request services. When a Web server receives information from additional characters that the user did not type.
a form, the server runs a program called a For example, each space is represented by a
Common Gateway Interface (CGI) script that plus sign (+) and each name and value pair
SET UP FORMS processes the information. The CGI script is separated by an ampersand (&). Characters
you use determines how the information is that are not numbers or letters, such as a dollar
Gather Information processed. For example, a CGI script may send sign ($), are represented by a percent sign and
the form results in an e-mail message, save the the hexadecimal equivalent for the character
Form elements such as text boxes, text areas, option using the element, a value is assigned
results in a document or add the results to a (example: %24).
check boxes and menus allow users to enter to the element. The name of the element
database on your Web server. Most CGI scripts
information and select options on a form. and its corresponding value will be sent to a Once a CGI script has processed the form
are written in the Perl programming language.
Form elements are also known as controls. Web server or to an e-mail address when the results, the script usually displays a message
user clicks a submit button on the form. For When a Web browser sends the information a in the user's Web browser window, indicating
When adding an element to a form, you must example, if a user types "Cathy" in a text box user entered in a form, the browser encodes the that the information was successfully sent.
usually provide a name for the element. The you named "firstname," the name and value information, causing the form results to contain
name will identify the element in the form pair "firstname=Cathy" will appear in the
results and will not appear on your Web page. form results.
When a user enters information or selects an
Obtain CGI Scripts
Most Web servers contain CGI scripts for a File Transfer Protocol (FTP) program such
Design Forms processing forms. These scripts are often stored as WS_FTP Pro or Fetch.
in a directory named "cgi-bin." Contact your Web
Forms you design should be visually appealing information users will enter. For example, Some Internet Service Providers (ISPs) do not
server administrator to determine the location of
and easy to use. To ensure an entire form will a text box that requests a phone number allow CGI scripts on their Web servers for
a CGI script on your Web server.
fit on a screen, the form should be a maximum should be 10 to 15 characters wide. You security reasons. If your ISP does not allow you
of approximately 40 lines high and 75 characters may also want to add sample text to a text If your Web server does not offer CGI scripts, you to use CGI scripts on your Web server, you may
wide. box or large text area to help users enter can find CGI scripts on the Web or write your want to use a form hosting service to process
the correct information. own CGI scripts. The www.cgi-resources.com, your form results. Form hosting services are
When adding elements to your form, group
www.free-scripts.net and www.hotscripts.com available at the www.creative-dr.com and
related elements together and make sure the Some forms use JavaScript to instruct a
Web sites offer CGI scripts. You may need to www.response-o-matic.com Web sites. If you
text you include beside each element clearly Web browser to perform a task when users
modify a CGI script you find on the Web. prefer not to work with CGI scripts, you can
explains the information you want users to fill out the form. For example, JavaScript
set up your form to send information to an
enter. When adding elements such as text boxes can instruct a Web browser to verify that Once you find a CGI script, you will need to e-mail address. Some Web browsers do not
and large text areas, make sure the size you a user entered valid information in a form. transfer the CGI script to your Web server using support sending form information by e-mail.
specify for each element is appropriate for the
120 121
HTML CREATE FORMS 9
A Web browser can send the information from Use the ACCEPT-CHARSET attribute with the
a form using the get or post method. The get <FORM> tag to specify the character sets your Web
SET UP A FORM method contacts the Web server and sends the
form information in one step, while the post
method contacts the server and then sends the
server must support to interpret the information
users send. For example, if users will enter Russian
characters, your Web server may need to support
form information separately. The post method the KO18-R character set. The ACCEPT-CHARSET
se the <FORM> tag to set up a form A CGI (Common Gateway Interface) script is
U
is more secure and is suitable for large forms. attribute is not yet supported by Web browsers.
on your Web page. You must set up a program that a Web server runs to process Some Web servers can only receive form Example:
a form before you can add information the information from a form. Contact your Web information that is transmitted using a specific <FORM METHOD="post" ACTION="/cgi-bin/order.pl"
to the form. A Web page can contain more server administrator to determine the location method. Check with your Web server administrator ACCEPT-CHARSET="KO18-R">
than one form. of a CGI script on your Web server. to determine which method you should use.
Example:
The METHOD attribute lets you specify how If you choose to have your Web browser send <FORM METHOD="get" ACTION="/cgi-bin/order.pl">
the information a user enters in a form will form results to an e-mail address, use the
transfer over the Internet. The most common ENCTYPE attribute with the text/plain value Many CGI scripts instruct Web browsers to display a
transmission method is post. to ensure that the information users enter in message once a user's information has been sent to the
the form will transfer in the proper format. Web server. This message usually appears in the current
Use the ACTION attribute to specify where a Sending form results to an e-mail address is Web browser window. Using the TARGET attribute
Web browser will send the information a user useful if your Web server does not allow you allows you to specify the name of a new window or
enters in your form. A Web browser can send to use CGI scripts. Some Web browsers do frame where you want the message to appear.
the information to a CGI script on your Web not support sending form results to an e-mail Example:
server or to an e-mail address you specify. address. <FORM METHOD="post" ACTION="/cgi-bin/order.pl"
TARGET="new_window">
SET UP A FORM

<HEAD> <HEAD> <HEAD> <HEAD>
<TITLE>Customer Survey</TITLE> <TITLE>Customer Survey</TITLE> <TITLE>Customer Survey</TITLE> <TITLE>Customer Survey</TITLE>
</HEAD> </HEAD> </HEAD> </HEAD>
<BODY> <BODY> <BODY> <BODY>
<H1><CENTER>Customer Survey</CENTER></H1> <H1><CENTER>Customer Survey</CENTER></H1> <H1> <CENTER>Customer Survey</CENTER> </H1> <H1> <CENTER>Customer Survey</CENTER></H1>
<P>Please take a moment to fill out our customer survey:</P> <P>Please take a moment to fill out our customer survey:</P> <P>Please take a moment to fill out our customer survey:</P> <P>Please take a moment to fill out our customer survey:</P>
<FORM METHOD="post" ACTION="/cgi-bin/survey.pl"> <FORM METHOD="post" ACTION="/cgi-bin/survey.pl"> <FORM METHOD="post" ENCTYPE="text/plain" <FORM METHOD="post" ENCTYPE="text/plain" ACTION="mailto:[email protected]">
</FORM> </FORM>
</BODY> </BODY> </BODY> </BODY>

</HTML> </HTML> </HTML> </HTML>
SEND FORM DATA ¤ Type ACTION="?"> ‹ Type </FORM> to ■ You have now set up SEND FORM DATA IN ¤ Type ENCTYPE="text/plain" ‹ Type ACTION="mailto:?"> › Type </FORM> to
TO A CGI SCRIPT replacing ? with the location complete the form. a form on your Web page. AN E-MAIL MESSAGE to ensure the information replacing ? with the e-mail complete the form.
⁄ Type <FORM of the CGI script on your To add elements to the ⁄ Type <FORM users enter in the form will address where you want to
Web server that will process form, see pages 124 to 139. transfer in the proper format. send the results of the form. ■ You have now set
METHOD="post" where METHOD="post" where
the information submitted Then add a blank space. up a form on your
you want the form to you want the form to Web page. To add
appear on your Web page. by the form. appear on your Web page. elements to the form,
Then add a blank space. Then add a blank space. see pages 124 to 139.
Note: To determine the location
of the CGI script on your Web server,
122 contact your Web server administrator. 123
HTML CREATE FORMS 10
Create a password box to prevent other Many people use JavaScript to make sure users
people from viewing confidential information enter the correct information in a form. For example,
a user types, such as a credit card number. use JavaScript to verify that a user typed numbers
CREATE A TEXT BOX When a user types information in a password
box, an asterisk (*) appears for each character.
rather than letters in a text box that requests a Zip
Code. Use the ONSUBMIT event attribute in the <FORM>
A password box will not protect the tag to activate the JavaScript when a user clicks the
information as it transfers over the Internet. Submit button. For more information on JavaScript,
ext boxes allow users to enter a short line of a text box is approximately 20 typed characters.
T of text. Text boxes are commonly used for

entering names, addresses and short responses.
When creating a text box, use the NAME attribute
The width you specify will not affect the number
of characters a user can enter in the text box.
To specify the maximum number of characters a
Example:
Enter your password:<INPUT TYPE="password"
NAME="pwd" SIZE="8" MAXLENGTH="7">
see page 158.
Example:
<FORM NAME="form1" METHOD="post" ACTION="/cgi-bin/survey.pl"
ONSUBMIT="return verifyZip()">
to provide a name for the text box. The name you user can enter in a text box, use the MAXLENGTH
Use the VALUE attribute to specify text that you
specify will identify the text box in the form results. attribute. This can help ensure users enter the want to appear in a text box. Users can edit or
The name can contain letters and numbers, but correct information in a text box. For example, delete this text to enter their own information.
should not contain spaces or punctuation. If you if you want users to enter the abbreviation for This lets you provide instructions about the
want to include spaces in a name, use an underscore their state, set the MAXLENGTH attribute to 2. information you want users to enter in a text
character (_) instead. box.
Example:
Use the SIZE attribute to specify the width you
Your Birth Date:<INPUT TYPE="text" NAME="bdate"
want a text box to display. By default, the width VALUE="mmddyy">
CREATE A TEXT BOX

beaches - WordPad beaches - WordPad beaches - WordPad

<TITLE>Beaches</TITLE> <TITLE>Beaches</TITLE> <TITLE>Beaches</TITLE>
<H1><CENTER>Beaches Around the World</CENTER> </H1> <H1> <CENTER>Beaches Around the World</CENTER> </H1> <H1> <CENTER>Beaches Around the World</CENTER></H1>
<H3><CENTER>Vote for your favorite beach!</CENTER> </H3> <H3> <CENTER>Vote for your favorite beach!</CENTER> </H3> <H3> <CENTER>Vote for your favorite beach!</CENTER> </H3>
<CENTER><IMG SRC="beach.jpg"></CENTER> <CENTER> <IMG SRC="beach.jpg"> </CENTER> <CENTER><IMG SRC="beach.jpg"></CENTER>
<FORM METHOD="post" ACTION="/cgi-bin/survey.pl"> <FORM METHOD="post" ACTION="/cgi-bin/survey.pl"> <FORM METHOD="post" ACTION="/cgi-bin/survey.pl">

<BR> My favorite beach is: <BR>My favorite beach is: < INPUT TYPE="text" NAME="beach" <BR>My favorite beach is: <INPUT TYPE="text" NAME="beach" SIZE="50"
</FORM> </FORM> MAXLENGTH="45" >
</FORM>
</BODY> </BODY>
</HTML>
My favorite beach is:
⁄ Between the <FORM> Note: If you want the text box to ¤ Type <INPUT TYPE="text" ‹ Type NAME="?" › To define the width of ˇ If you want to define ■ The Web browser ■ A user can click
and </FORM> tags, type appear on its own line, use the and then add a blank space. replacing ? with a word the text box, type SIZE="?" the maximum number of displays the text box. in the text box and
the text you want to <P> or <BR> tag. For more that describes the text box. replacing ? with the width characters that users can type the requested
appear beside the text information, see pages 16 and 18. Then add a blank space. you want to use in enter in the text box, type information.
box. Then add a blank characters. MAXLENGTH="?" replacing ?
space. Note: The text you enter in step 3 with the maximum number
will identify the text box in the form of characters.
results and will not appear on your
Web page. Á Type > to complete the
text box.
124 125
HTML CREATE FORMS 9
Any text you type between the <TEXTAREA> Use the DISABLED attribute to prevent people
and </TEXTAREA> tags will appear in the from using a form element. A disabled element
will usually appear grayed-out on your form.
CREATE A LARGE TEXT AREA
large text area on your Web page. Users can
then edit or delete the text to enter their own For example, disabling a large text area that is
information. This is useful when you want to only needed if users select a particular option
provide instructions or examples for users. will prevent users from entering unnecessary
se the <TEXTAREA> tag to create a the text area you create will fit on a computer information. You can then add a JavaScript that
U
Example:
large text area on your form where screen and will be wide enough to clearly will enable the large text area if the appropriate
<TEXTAREA NAME="comments" ROWS="10" option is selected. Netscape Navigator does not
users can enter several lines or display the text a user types. COLS="25" WRAP="soft">Please enter your
currently support the DISABLED attribute.
comments here.</TEXTAREA>
paragraphs of text. This is useful for gathering
comments or questions. Use the WRAP attribute to specify how you Example:
want the text a user enters in a large text area Use the READONLY attribute to prevent users <TEXTAREA NAME="other" ROWS="5" COLS="20"
The NAME attribute allows you to provide a to wrap. The soft value wraps text within a WRAP="soft" DISABLED>If "other," please
from editing the information in a form element. specify.</TEXTAREA>
name for a large text area you create. The large text area but will not wrap text in the For example, making a large text area read-only
name will identify the text area in the form form results. The hard value wraps text in is useful when the text area contains information
results. both the text area and the form results. Use you want a user to verify. Netscape Navigator
the off value when you do not want the text does not currently support the READONLY
The ROWS and COLS attributes allow you to attribute.
a user types to wrap automatically. Although
specify a height and width for a large text area. the WRAP attribute is supported by most Web Example:
Since users will not be able to resize a large browsers, it is not part of the HTML standard. <TEXTAREA NAME="message" ROWS="10"
text area on your Web page, make sure that COLS="30" READONLY></TEXTAREA>
CREATE A LARGE TEXT AREA

<TITLE>Customer Survey</TITLE> <TITLE>Customer Survey</TITLE> <TITLE>Customer Survey</TITLE>
<CENTER><FONT SIZE="5">Customer Survey</FONT></CENTER> <CENTER><FONT SIZE="5">Customer Survey</FONT></CENTER> <CENTER><FONT SIZE="5">Customer Survey</FONT></CENTER>

<P>Please take a moment to rate this Web site: <P>Please take a moment to rate this Web site: <P>Please take a moment to rate this Web site:
<INPUT TYPE="radio" NAME="rating" VALUE="excellent" CHECKED>Excellent <INPUT TYPE="radio" NAME="rating" VALUE="excellent" CHECKED>Excellent <INPUT TYPE="radio" NAME="rating" VALUE="excellent" CHECKED>Excellent
<BR> <INPUT TYPE="radio" NAME="rating" VALUE="verygood">Very Good <BR><INPUT TYPE="radio" NAME="rating" VALUE="verygood">Very Good <BR><INPUT TYPE="radio" NAME="rating" VALUE="verygood">Very Good
<BR><INPUT TYPE="radio" NAME="rating" VALUE="good">Good <BR><INPUT TYPE="radio" NAME="rating" VALUE="good">Good <BR><INPUT TYPE="radio" NAME="rating" VALUE="good">Good
<BR><INPUT TYPE="radio" NAME="rating" VALUE="poor">Poor</P> <BR><INPUT TYPE="radio" NAME="rating" VALUE="poor">Poor</P> <BR><INPUT TYPE="radio" NAME="rating" VALUE="poor">Poor</P>
<P> Suggestions/Comments: <P>Suggestions/Comments: <P>Suggestions/Comments:

<BR> <TEXTAREA <BR><TEXTAREA NAME="commentbox" ROWS="5" <BR><TEXTAREA NAME="commentbox" ROWS="5" COLS="65" WRAP="hard">
</TEXTAREA>
<P> <INPUT TYPE="submit" VALUE="Send"> <P><INPUT TYPE="submit" VALUE="Send">
<INPUT TYPE="reset" VALUE="Clear"></P> <INPUT TYPE="reset" VALUE="Clear"></P> <P><INPUT TYPE="submit" VALUE="Send">
</FORM> </FORM> <INPUT TYPE="reset" VALUE="Clear"></P>
</FORM>
</BODY> </BODY>
</HTML>
⁄ Between the <FORM> ¤ Type <TEXTAREA and ‹ Type NAME="?" replacing ? › Type ROWS="?" ˇ Type COLS="?" replacing ? Á Type WRAP="?"> ■ The Web browser ■ If the text a user types
and </FORM> tags, type then add a blank space. with a word that describes replacing ? with a height with a width for the text area replacing ? with the way displays the text area. does not fit in the text
the text you want to the text area. Then add a for the text area in rows. in characters. Then add a you want the text a user area, the user can scroll
appear beside the large Note: If you want the text blank space. Then add a blank space. blank space. types in the text area to ■ A user can click in the through the text using
text area. area to appear on its own line, wrap (soft, hard or off). text area and type the the scroll bar.
use the <P> or <BR> tag. Note: The text you enter in step 3 requested information.
For more information, see will identify the text area in the form ‡ Type < /TEXTAREA> to
pages 16 and 18. results. The text will not appear on complete the text area.
the Web page.
126 127
HTML CREATE FORMS 9
CREATE CHECK BOXES
nclude check boxes on your form if you the name "on" for each selected check box,
I
If your form contains only one group of check
want users to be able to select one or making it impossible to determine which boxes, you may want to use the NAME attribute
more options. options a user selected. to name each check box rather than the group of
check boxes. The VALUE attribute can then be set
The NAME attribute allows you to provide a The names you specify using the NAME and to a value you want to appear beside the check
name for each group of check boxes you create. VALUE attributes can contain letters and box name in the form results, such as on or yes.
The names you specify will identify each group numbers, but should not contain spaces or
of check boxes in the form results. punctuation. If you want to include spaces TYPE THIS: RESULT:
in a name, use an underscore character (_) <FORM METHOD="post" ACTION="/cgi-bin/questionnaire.pl"> Please tell us which types of media
The VALUE attribute allows you to specify a instead. <P>Please tell us which types of media you have purchased in
you have purchased in the last year:
name for each check box in a group. The name the last year:</P>
<INPUT TYPE="checkbox" NAME="books" VALUE="on">Books Books
you specify for a check box will appear in the You may want to use the CHECKED attribute <BR><INPUT TYPE="checkbox" NAME="audiocds" VALUE="on">Audio CDs
form results if a user selects the check box. to have one or more check boxes automatically <BR><INPUT TYPE="checkbox" NAME="tapes" VALUE="on">Cassettes Audio CDs
Use a name that you can easily identify, such appear selected on your form. This is useful <BR><INPUT TYPE="checkbox" NAME="datacds" VALUE="on">CD-ROMs Cassettes
</FORM> CD-ROMs
as the text that appears beside the check box when you expect that most users will select
on your Web page. If you do not use the a particular check box on your form.
VALUE attribute, the form results will display
CREATE CHECK BOXES

<TITLE>Music Survey</TITLE> <TITLE>Music Survey</TITLE> <TITLE>Music Survey</TITLE>
<H1> <CENTER>Music Survey</CENTER></H1> <H1> <CENTER>Music Survey</CENTER></H1> <H1> <CENTER>Music Survey</CENTER> </H1>

<P>We'd like to serve you better! Please tell us about your listening interests:</P> <P>We'd like to serve you better! Please tell us about your listening interests:</P> <P>We'd like to serve you better! Please tell us about your listening interests:</P>
<BR> <INPUT TYPE="checkbox" NAME="music" <BR> <INPUT TYPE="checkbox" NAME="music" VALUE="classical" CHECKED <BR><INPUT TYPE="checkbox" NAME="music" VALUE="classical" CHECKED > Classical
</FORM> </FORM> <BR> <INPUT TYPE="checkbox" NAME="music" VALUE="jazz">Jazz
<BR> <INPUT TYPE="checkbox" NAME="music" VALUE="r&b">R&B
</BODY> </BODY> <BR> <INPUT TYPE="checkbox" NAME="music" VALUE="rock">Rock
</HTML> </HTML> </FORM>
</BODY>
</HTML>
⁄ Between the <FORM> ¤ Type NAME="?" replacing ? ‹ To specify the information › If you want the check box ˇ Type > to complete ‡ Repeat steps 1 to 6 ■ The Web browser ■ Users can click the check
and </FORM> tags, type with a word that describes for one check box, type to be selected automatically, the check box. for each check box you displays the check boxes. box for each option they want
<INPUT TYPE="checkbox" the group of check boxes VALUE="?" replacing ? with add a blank space and then want to create. to select ( changes to ).
and then add a blank you want to create. Then a word that describes the type CHECKED. Á Type the text you
space. add a blank space. check box. want to appear beside Note: If you want each check
the check box on your box to appear on its own line,
Note: The text you enter in step 2 Note: The text you enter in step 3 Web page. use the <P> or <BR> tag.
will identify the group of check will identify the check box in the For more information, see
boxes in the form results and will form results and will not appear pages 16 and 18.
128 not appear on your Web page. on your Web page. 129
HTML CREATE FORMS 9
CREATE RADIO BUTTONS
nclude radio buttons on your form when display the name "on" for the selected radio
I you want users to select only one of several

options.
Use the NAME attribute to provide a name for
button, making it impossible to determine
which option a user selected.
The names you specify using the NAME and
The ACCESSKEY attribute allows you to add keyboard
shortcuts to form elements such as radio buttons. Type
ACCESSKEY="?" in the tag for the element, replacing ?
with a letter or number. Users can hold down the Alt key
and press the letter or number to select the form element.
each group of radio buttons you create. The VALUE attributes can contain letters and While the ACCESSKEY attribute is part of the HTML
names you specify will identify each group numbers, but should not contain spaces or standard, it is not currently supported by all Web browsers.
of radio buttons in the form results. punctuation. If you want to include spaces
in a name, use an underscore character (_) TYPE THIS: RESULT:
The VALUE attribute allows you to specify a instead. <FORM METHOD="post" ACTION="/cgi-bin/questionnaire.pl">
name for each radio button in a group. The Please select your age:
<P>Please select your age:</P>
name you specify for a radio button will appear To have one of the radio buttons in a group <INPUT TYPE="radio" NAME="age" VALUE="under_21" ACCESSKEY="1">Under 21 (Alt-1)
Under 21 (Alt-1)
in the form results if a user selects the radio automatically appear selected on your form, <BR><INPUT TYPE="radio" NAME="age" VALUE="21_29" ACCESSKEY="2">21-29 (Alt-2)
<BR><INPUT TYPE="radio" NAME="age" VALUE="30_40" ACCESSKEY="3">30-40 (Alt-3) 21-29 (Alt-2)
button. Use a name that you can easily identify, use the CHECKED attribute. Pre-selecting the <BR><INPUT TYPE="radio" NAME="age" VALUE="over_40" ACCESSKEY="4">Over 40 (Alt-4) 30-40 (Alt-3)
such as the text that appears beside the radio most popular options can help users save </FORM> Over 40 (Alt-4)
button on your Web page. If you do not use time when entering information.
the VALUE attribute, the form results will
CREATE RADIO BUTTONS

<H1> <CENTER>Customer Survey</CENTER></H1> <H1><CENTER>Customer Survey</CENTER></H1> <H1> <CENTER>Customer Survey</CENTER></H1>

<P ALIGN="center">Please take a moment to rate this Web site:</P> <P ALIGN="center">Please take a moment to rate this Web site:</P> <P ALIGN="center">Please take a moment to rate this Web site:</P>
<INPUT TYPE="radio" NAME="rating" <INPUT TYPE="radio" NAME="rating" VALUE="excellent"> Excellent <INPUT TYPE="radio" NAME="rating" VALUE="excellent" CHECKED >Excellent
</FORM> </FORM> <BR> <INPUT TYPE="radio" NAME="rating" VALUE="verygood">Very Good
<BR> <INPUT TYPE="radio" NAME="rating" VALUE="good">Good
</BODY> </BODY> <BR> <INPUT TYPE="radio" NAME="rating" VALUE="poor">Poor
</HTML> </HTML> </FORM>
</BODY>
</HTML>
⁄ Between the <FORM> ¤ Type NAME="?" replacing ? ‹ To specify the information › Type the text you want ˇ Repeat steps 1 to 4 Á If you want a radio button ■ The Web browser ■ A user can click a
and </FORM> tags, type with a word that describes for one radio button, type to appear beside the radio for each radio button to be selected automatically, displays the radio buttons. radio button to select
<INPUT TYPE="radio" and the group of radio buttons VALUE="?"> replacing ? with button on your Web page. you want to create. type CHECKED after the VALUE one of several options
then add a blank space. you want to create. Then add a word that describes the attribute for the radio button. ( changes to ).
a blank space. radio button. Note: If you want each radio
button to appear on its own Note: You can have only one
Note: The text you enter in step 2 Note: The text you enter in step 3 line, use the <P> or <BR> radio button in a group selected
will identify the group of radio will identify the radio button in the tag. For more information, automatically.
buttons in the form results and form results and will not appear on see pages 16 and 18.
130 will not appear on your Web page. your Web page. 131
HTML CREATE FORMS 9
CREATE A MENU The <OPTGROUP> tag lets you divide your
menu into submenus. This is useful if you want
Use the MULTIPLE attribute with the <SELECT>
tag to allow users to select multiple menu options.
to organize a large menu into categories. Use Users can hold down the Ctrl key and then click
the LABEL attribute to give each submenu a title. each option they want to select. When you use the
I
f you want to provide users with a list of The <OPTION> tag allows you to specify
options to choose from, add a menu to information for one menu option. Use the While the <OPTGROUP> tag is part of the HTML MULTIPLE attribute, the menu will appear as a list
standard, it is not currently supported by Web rather than as a drop-down menu.
your form. Menus are commonly used VALUE attribute to specify a name for the browsers.
for displaying lists of age groups, states and option. The name will appear in the form Example:
products. results if a user selects the option. Use a Example: <P>Which of the following states have you
name that you can easily identify, such as <P>What is your favorite snack food?</P> visited?</P>
Use the NAME attribute to specify a name the text that appears in the menu on your <SELECT NAME="snackfood"> <SELECT NAME="states" MULTIPLE>
for a menu you create. The name will identify <OPTGROUP LABEL="Healthy"> <OPTION VALUE="NY">NY
Web page. <OPTION VALUE="apple">Apple <OPTION VALUE="CA">CA
the menu in the form results. <OPTION VALUE="OH">OH
<OPTION VALUE="banana">Banana
You may want to use the SELECTED </OPTGROUP> </SELECT>
By default, a menu appears on a form as a attribute to have an option in the menu <OPTGROUP LABEL="Junk Food">
drop-down menu with only the first option automatically appear selected on your <OPTION VALUE="chips">Chips
visible. If you want more than one option to form. This is useful when you expect <OPTION VALUE="cookie">Cookie
be visible, use the SIZE attribute to specify most users will select an option. <OPTION VALUE="chocolate">Chocolate Bar
the number of options you want users to see </OPTGROUP>
</SELECT>
without having to use a scroll bar.
CREATE A MENU

<H1><CENTER>Customer Survey</CENTER></H1> <H1><CENTER>Customer Survey</CENTER></H1> <H1><CENTER>Customer Survey</CENTER></H1>
<P>Please select your age:</P> <P>Please select your age:</P> <P>Please select your age:</P> 20-64

<SELECT NAME="age" SIZE="4"> <SELECT NAME="age" SIZE="4"> <SELECT NAME="age" SIZE="4">
</FORM> <OPTION VALUE="child"> Under 12 <OPTION VALUE="child">Under 12
</FORM> <OPTION VALUE="teen">13-19
</BODY> <OPTION VALUE="adult" SELECTED >20-64
</HTML> </BODY> <OPTION VALUE="senior">65 or Older
</HTML> </SELECT>
</FORM>
</BODY>
⁄ Between the <FORM> ¤ Type SIZE="?"> ‹ To specify the information › Type the text you want ˇ Repeat steps 3 and 4 ‡ Type < /SELECT> to ■ The Web browser ■ A user can click a
and </FORM> tags, type replacing ? with the for one menu option, to appear in the menu on for each menu option you complete the menu. displays the menu. menu option to select
<SELECT NAME="?" replacing ? number of options you type <OPTION VALUE="?"> your Web page. want to appear in the menu. the option. A selected
with a word that describes the want users to see in the replacing ? with a word that menu option appears
menu. Then add a blank space. menu without having describes the menu option. Á If you want a menu option highlighted.
to use the scroll bar. to be selected automatically,
Note: The text you enter in step 1 will Note: The text you enter in step 3 type SELECTED after the VALUE
identify the menu in the form results will identify the menu option in the attribute for the menu option.
and will not appear on your Web page. form results and will not appear on
your Web page.
132 133
HTML CREATE FORMS 9
When a user uploads a file, your Web server must If your form is set up to send form results to an
ALLOW USERS TO UPLOAD FILES run a CGI script to process the file. Most regular
CGI scripts cannot process uploaded files. To find
CGI scripts for uploaded files, visit the script
e-mail address, the files users upload will usually
appear as e-mail attachments. Sending form
results in an e-mail message is useful if your
collections at the www.cgi-resources.com and Web server does not contain a CGI script that
www.hotscripts.com Web sites. can process form results.
A
form can include an area that allows users The name will identify the files to the
to send you files. Allowing users to upload Web server. If the CGI script on your Web server can only Example:
files is useful for collecting information process certain types of files, use the ACCEPT <FORM METHOD="post" ENCTYPE="multipart/form-data"
that is best displayed in a separate file, such as When you allow users to upload files, your attribute with the <INPUT> tag to specify the types ACTION="mailto:[email protected]">
a résumé or an order form. The files users send Web page will display a box where users can of files users can send. List the MIME
enter the location and name of the file they (Multi-purpose Internet Mail Extensions) types,
are usually stored on your Web server.
want to send. The SIZE attribute allows you separating each type with a comma (,). MIME
In the <FORM> tag, use the ENCTYPE attribute to specify a width for the box. Increasing the types are part of the MIME standard that specifies
how files will be formatted when transferred
with the multipart/form-data value to width of the box can help ensure that users over the Internet. Although the ACCEPT attribute
ensure that the files users send will transfer will be able to see the entire path to the file. is part of the HTML standard, it is not yet
in the proper format. Your Web page will also display a Browse supported by Web browsers.
button to help users locate the files they Example:
Use the NAME attribute with the <INPUT> tag want to send.
to provide a name for the files users send. <INPUT TYPE="file" NAME="usersimage"
ACCEPT="image/gif, image/jpeg, image/png">
ALLOW USERS TO UPLOAD FILES

<TITLE>Employment Oppor tunities</TITLE> <TITLE>Employment Opportunities</TITLE> <TITLE>Employment Oppor tunities</TITLE>
<P> <B>Interested in working for our company? Please fill out the information below:</B></P> <P> <B>Interested in working for our company? Please fill out the information below:</B> </P> <P> <B>Interested in working for our company? Please fill out the information below:</B> </P>
<FORM METHOD="post" ACTION="/cgi-bin/info.pl" ENCTYPE="multipart/form-data" > <FORM METHOD="post" ACTION="/cgi-bin/info.pl" ENCTYPE="multipart/form-data"> <FORM METHOD="post" ACTION="/cgi-bin/info.pl" ENCTYPE="multipart/form-data">
<BR> <INPUT TYPE="radio" NAME="sex" VALUE="male" CHECKED>Mr. <BR> <INPUT TYPE="radio" NAME="sex" VALUE="male" CHECKED>Mr. <BR> <INPUT TYPE="radio" NAME="sex" VALUE="male" CHECKED>Mr.
<BR> <INPUT TYPE="radio" NAME="sex" VALUE="female">Ms. <BR> <INPUT TYPE="radio" NAME="sex" VALUE="female">Ms. <BR> <INPUT TYPE="radio" NAME="sex" VALUE="female">Ms.
<P>First Name: <INPUT TYPE="text" NAME="name" SIZE="25"> <P>First Name: <INPUT TYPE="text" NAME="name" SIZE="25"> <P>First Name: <INPUT TYPE="text" NAME="name" SIZE="25">
<BR>Last Name: <INPUT TYPE="text" NAME="name" SIZE="25"></P> <BR>Last Name: <INPUT TYPE="text" NAME="name" SIZE="25"> </P> <BR>Last Name: <INPUT TYPE="text" NAME="name" SIZE="25"> </P>
<BR> Files: <INPUT TYPE="file" <BR>Files:<INPUT TYPE="file" NAME="resume" SIZE="45" >
<P> <INPUT TYPE="submit" VALUE="Send"></P> <P> <INPUT TYPE="submit" VALUE="Send"> </P> <P> <INPUT TYPE="submit" VALUE="Send"> </P>
</FORM> </FORM> </FORM>

■ To allow users to ⁄ In the <FORM> tag, type ¤ Between the <FORM> ‹ Type <INPUT TYPE="file" › Type NAME="?" replacing ? ˇ To define the width ■ The Web browser displays ■ A user can also click
upload files, make sure ENCTYPE="multipart/form-data" and </FORM> tags, type and then add a blank space. with a word that describes the of the box where an area that allows users to the Browse button to open
the METHOD attribute to ensure the files users send the text you want to appear files users will send. Then add users will enter the send you files. a dialog box that will help
is set to post in the will transfer in the proper beside the area that will a blank space. location and name of them locate the file they
<FORM> tag. For more format. allow users to send you files. the file they want to ■ A user can click in the want to send.
information on the Note: The text you enter in step 4 send, type SIZE="?"> box and type the location
METHOD attribute, Note: If you want the area to appear will identify the files to the Web replacing ? with a and name of the file they
see page 122. on its own line, use the <P> or server and will not appear on your width in characters. want to send.
<BR> tag. For more information, Web page.
134 see pages 16 and 18. 135
HTML CREATE FORMS 9
The <BUTTON> tag lets you create a submit or reset Using JavaScript allows you to have a user's Web
button that displays an image. Between the <BUTTON> browser perform a task when a user clicks a submit
and </BUTTON> tags, use the <IMG> tag to specify or reset button. Use the ONCLICK event attribute
CREATE A SUBMIT the image you want to use. Then type the text you
want to appear on the button. Although the <BUTTON>
tag is part of the HTML standard, it is currently only
with the <INPUT> tag to activate the JavaScript.
For example, you may want to have a dialog box
appear asking users to confirm that they want to
AND RESET BUTTON supported by Internet Explorer.

Example:
submit the form.
Example:
<BUTTON TYPE="submit"><IMG SRC="dollarsign.gif"> <INPUT TYPE="submit" ONCLICK="return confirm('Do
ncluding a submit button on your form allows elements so the form displays its original settings.
I
Order Now</BUTTON> you wish to send information?')">
users to send the information they entered in This lets users start over if they have made a
your form. mistake while filling out your form.
You may want to provide a user with multiple submit
Use the VALUE attribute to specify the text you The VALUE attribute lets you specify the text you buttons. This is useful if your CGI script will process
the form differently depending on the button a user
want to appear on a submit button. If you do not want to appear on a reset button. If you do not clicks. Use the NAME attribute with the <INPUT> tag
use the VALUE attribute, the submit button will use the VALUE attribute, the reset button will to provide a different name for each button. This will
automatically display the text "Submit Query" automatically display the text "Reset." help you identify which button a user clicked in the
or "Submit." form results.
When a user clicks a submit or reset button, their
Example:
Creating a reset button on your form allows Web browser will send or clear the information
users to clear the information they entered in in all the form elements. The user will not be <INPUT TYPE="submit" NAME="personal"
your form. When a user clicks the reset button, able to reverse submitting or resetting the form. VALUE="Send Personal Information">
<INPUT TYPE="submit" NAME="order"
the user's Web browser will reset the form VALUE="Send Order">
CREATE A SUBMIT BUTTON CREATE A RESET BUTTON
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Customer Survey</TITLE> <TITLE>Customer Survey</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H1> <CENTER>Customer Survey</CENTER></H1> <H1><CENTER>Customer Survey</CENTER></H1>
<FORM METHOD="post" ACTION="/cgi-bin/survey.pl"> <FORM METHOD="post" ACTION="/cgi-bin/survey.pl">

<P>Please take a moment to rate this Web site:</P> <P>Please take a moment to rate this Web site:</P>
<INPUT TYPE="radio" NAME="rating" VALUE="excellent" CHECKED>Excelle <INPUT TYPE="radio" NAME="rating" VALUE="excellent" CHECKED>Excelle
<BR> <INPUT TYPE="radio" NAME="rating" VALUE="verygood">Very Good <BR><INPUT TYPE="radio" NAME="rating" VALUE="verygood">Very Good
<BR> <INPUT TYPE="radio" NAME="rating" VALUE="good">Good <BR><INPUT TYPE="radio" NAME="rating" VALUE="good">Good
<BR> <INPUT TYPE="radio" NAME="rating" VALUE="poor">Poor <BR><INPUT TYPE="radio" NAME="rating" VALUE="poor">Poor
<P> <INPUT TYPE="submit" VALUE="Send"> </P> <P><INPUT TYPE="submit" VALUE="Send">

<INPUT TYPE="reset" VALUE="Clear"> </P>
</FORM>
</FORM>
</BODY>
⁄ Between the <FORM> ¤ Type VALUE="?"> replacing ? ■ The Web browser ■ When a user clicks ⁄ Between the <FORM> ¤ Type VALUE="?"> replacing ? ■ The Web browser ■ When a user clicks the
and </FORM> tags, type with the text you want to displays the submit button. the submit button, the and </FORM> tags, type with the text you want to displays the reset button. reset button, the form clears
<INPUT TYPE="submit" appear on the submit button. information they entered <INPUT TYPE="reset" appear on the reset button. and once again displays its
and then add a blank in the form will transfer and then add a blank original settings.
space. Note: If you want the submit button to to the Web server. space. Note: If you want the reset button to
appear on its own line, use the <P> appear on its own line, use the <P>
or <BR> tag. For more information, or <BR> tag. For more information,
136 see pages 16 and 18. see pages 16 and 18. 137
HTML CREATE FORMS 9
CREATE A GRAPHICAL
SUBMIT BUTTON CREATE A HIDDEN FIELD
A A
graphical submit button is an image that image you want to use. To specify the location hidden field is a form element that will not view the form results, the name or number will
allows users to enter information and submit and name of an image, see the top of page 45. appear on your Web page, but will appear identify the form a user filled out.
the results of their form at the same time. in the form results. Hidden fields are useful
The NAME attribute allows you to provide a for including information such as the date and time Some people use hidden fields to provide
When a user clicks a graphical submit button, the name for a graphical submit button. The name you created a form. information that their CGI Script will use when
horizontal and vertical coordinates of the user's will identify the horizontal (x) and vertical (y) processing their form. For example, a hidden
mouse pointer are submitted along with the rest coordinates of a user's mouse pointer in the When creating a hidden field, use the NAME field may specify a subject for e-mail messages
of the information in the form. This is useful when form results. The coordinates will be measured attribute to provide a name for the hidden containing form results.
the areas of an image represent different options, in pixels from the top left corner of the image. field and the VALUE attribute to specify the
such as the locations on a map or floor plan. You information you want the hidden field to contain. Some CGI scripts can add hidden fields to a form
should provide text that warns users that clicking You may want to use a custom CGI script to for you. For example, once a user has entered
the image will submit all their information. process the results of a graphical submit button. If your Web pages contain multiple forms, hidden personal information in a form, your CGI script
For example, a script can instruct a Web browser fields can help you identify the information users may be able to add the information to hidden
Use the SRC attribute with the <INPUT> tag to to display a magnified version of the area a user submit. For example, use a hidden field to assign fields in another form so the user will not have
specify the location and name of the GIF or JPEG clicks. each form a different name or number. When you to enter the information again.
CREATE A GRAPHICAL SUBMIT BUTTON CREATE A HIDDEN FIELD
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Feedback Form</TITLE> <TITLE>Feedback Form</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H1><CENTER>Feedback Form</CENTER></H1> <H1><CENTER>Feedback Form</CENTER></H1>
<P>Please take a moment to provide us with your feedback:</P> <P>Please take a moment to provide us with your feedback:</P>
<FORM METHOD="post" ACTION="/cgi-bin/survey.pl"> <FORM METHOD="post" ACTION="/cgi-bin/survey.pl">

Comments:<TEXTAREA NAME="commentbox" ROWS="5" COLS="50" WRAP></TE
<P>Click your region below to submit your comments: <INPUT TYPE="hidden" NAME="feedback" VALUE="Form1">
<BR> <INPUT TYPE="image" SRC="map.gif" NAME="location"> <BR>First Name:<INPUT TYPE="text" NAME="firstname" SIZE="20">
Password:<INPUT TYPE="password" NAME="pass" SIZE="20">
</FORM> <BR>Last Name:<INPUT TYPE="text" NAME="lastname" SIZE="20">
<BR>Comments:<TEXTAREA NAME="commentbox" ROWS="5" COLS="50" WRAP
</BODY> </TEXTAREA>
</HTML> </FORM>
</BODY>
⁄ Between the <FORM> ‹ Type NAME="?"> ■ The Web browser ■ When a user clicks the ⁄ Between the <FORM> ¤ Type NAME="?" ■ The Web browser does
and </FORM> tags, type replacing ? with a word displays the image. image, the horizontal (x) and </FORM> tags, type replacing ? with a word not display the hidden field.
<INPUT TYPE="image" and that describes the image. and vertical (y) coordinates <INPUT TYPE="hidden" that describes the hidden
then add a blank space. of the mouse pointer will and then add a blank field. Then add a blank
Note: The text you enter in be sent to the Web server space. space.
¤ Type SRC="?" replacing ? step 3 will identify the image along with the rest of the
with the location and name of in the form results and will information in the form. ‹ Type VALUE="?">
the image on your computer. not appear on your Web page. replacing ? with the
Then add a blank space. information you want the
hidden field to contain.
138 139
HTML CREATE FORMS 9
Since most Web browsers do not yet support the
ORGANIZE FORM ELEMENTS <FIELDSET> tag, you may want to use tables
to organize form elements on your Web page.
TYPE THIS:
I
f your form contains many elements, you The <LEGEND> tag allows you to add a title
<FORM METHOD="post" ACTION="/cgi-bin/signup.pl">
may want to use the <FIELDSET> tag to your grouped elements. If you choose <TABLE BORDER="3">
to organize the elements into groups. A to include a title, use the ALIGN attribute <TR>
<TD><INPUT TYPE="checkbox" NAME="ads" VALUE="yes">
Web browser that supports the <FIELDSET> to specify if you want the title to appear at Would like to receive our advertisements by e-mail?
<BR><INPUT TYPE="checkbox" NAME="public" VALUE="yes">
tag will visually separate the elements you the left, right, top or bottom of the group of Do you want your name to be in our public directory?</TD>
include in a group. For example, Internet elements. Only the left and right values <TD><INPUT TYPE="submit" VALUE="Submit"></TD>
</TR>
Explorer displays a thin, solid border around are currently supported. While the ALIGN </TABLE>
</FORM>
the elements. attribute is still supported by Web browsers,
the use of style sheets is now preferred. For
Organizing form elements can help users information on style sheets, see page 196.
understand your form by dividing the form RESULT:
into logical sections. For example, you may Although the <FIELDSET> and <LEGEND>
Would like to receive our advertisements by e-mail?
want to create one group for required tags are part of the HTML standard, only Submit
Do you want your name to be in our public directory?
information and another group for optional Internet Explorer currently supports these tags.
information.
ORGANIZE FORM ELEMENTS

<TITLE>Customer Information</TITLE> <TITLE>Customer Information</TITLE> <TITLE>Customer Information</TITLE>
<H4><CENTER>Please fill out the following information so we can serve you better: <H4><CENTER>Please fill out the following information so we can serve you better: <H4> <CENTER>Please fill out the following information so we can serve you better:
</CENTER></H4> </CENTER></H4> </CENTER></H4>
<FORM METHOD="post" ACTION="/cgi-bin/customers.pl"> <FORM METHOD="post" ACTION="/cgi-bin/customers.pl"> <FORM METHOD="post" ACTION="/cgi-bin/customers.pl">

<FIELDSET> <FIELDSET> <FIELDSET>
<BR>Name: <INPUT TYPE="text" NAME="name" SIZE="30" MAXLENGTH="15"> <LEGEND ALIGN="left"> <LEGEND ALIGN="left"> Required Information </LEGEND>
<BR>E-mail: <INPUT TYPE="text" NAME="email" SIZE="30" MAXLENGTH="15"> <BR>Name: <INPUT TYPE="text" NAME="name" SIZE="30" MAXLENGTH="15"> <BR>Name: <INPUT TYPE="text" NAME="name" SIZE="30" MAXLENGTH="15">
<BR>Credit Card: <INPUT TYPE="password" NAME="credit" SIZE="30" MAXLENGTH=" <BR>E-mail: <INPUT TYPE="text" NAME="email" SIZE="30" MAXLENGTH="15"> <BR>E-mail: <INPUT TYPE="text" NAME="email" SIZE="30" MAXLENGTH="15">
<BR>Address: <TEXTAREA NAME="address" ROWS="3" COLS="30" WRAP> </TEXTAR <BR>Credit Card: <INPUT TYPE="password" NAME="credit" SIZE="30" MAXLENGTH=" <BR>Credit Card: <INPUT TYPE="password" NAME="credit" SIZE="30" MAXLENGTH="
</FIELDSET> <BR>Address: <TEXTAREA NAME="address" ROWS="3" COLS="30" WRAP></TEXTAR <BR>Address: <TEXTAREA NAME="address" ROWS="3" COLS="30" WRAP></TEXTAR
</FIELDSET> </FIELDSET>
<P>What is your salary range?
<BR><INPUT TYPE="radio" NAME="salary" VALUE="over50">Over $50,000 <P>What is your salary range? <P>What is your salary range?
<BR><INPUT TYPE="radio" NAME="salary" VALUE="35to50">$35,000 to $50,000 <BR><INPUT TYPE="radio" NAME="salary" VALUE="over50">Over $50,000 <BR><INPUT TYPE="radio" NAME="salary" VALUE="over50">Over $50,000
<BR><INPUT TYPE="radio" NAME="salary" VALUE="20to34">$20,000 to $34,000 <BR><INPUT TYPE="radio" NAME="salary" VALUE="35to50">$35,000 to $50,000 <BR><INPUT TYPE="radio" NAME="salary" VALUE="35to50">$35,000 to $50,000
<BR><INPUT TYPE="radio" NAME="salary" VALUE="under20">Under $20,000</P> <BR><INPUT TYPE="radio" NAME="salary" VALUE="20to34">$20,000 to $34,000 <BR><INPUT TYPE="radio" NAME="salary" VALUE="20to34">$20,000 to $34,000
</FORM> <BR><INPUT TYPE="radio" NAME="salary" VALUE="under20">Under $20,000</P> <BR><INPUT TYPE="radio" NAME="salary" VALUE="under20">Under $20,000</P>
</FORM> </FORM>
⁄ Type <FIELDSET> ¤ Type < /FIELDSET> ‹ Directly below › Type ALIGN="?"> ˇ Type the text Á Type </LEGEND> ■ The Web browser ■ The title for the group
directly above the first after the last element the <FIELDSET> tag, replacing ? with the for the title. to complete the title. groups the form of elements appears in
element you want you want to include type <LEGEND to specify location where you elements together. the location you specified.
include in the group. in the group. a title for the group of want to place the title ‡ Repeat steps 1 to 6
elements. Then add a in relation to the group for each set of elements
blank space. of elements on the you want to group
form (left, right, top together on the form.
or bottom).
140 141
HTML CREATE FORMS 9
LABEL FORM ELEMENTS CHANGE THE TAB ORDER

se the <LABEL> tag to identify the text Similarly, users can click a label for a text box sers can navigate through the elements When users tab through your form, the tab order
U beside a form element as a label for the

element. This instructs Web browsers
to interpret the text as part of the form element.
to place the cursor in the text box.
You may want to label a form element to have
Web browsers apply specialized settings to the
U on your form using the Tab key. By default,
users tab through the elements in the order
the elements appear in your HTML code. Changing
will start with the element you assigned the lowest
value and will end with the element you assigned
the highest value. If two elements have the same
the tab order for your form can help users fill out value, the element that appears first in your HTML
To label a form element, use the ID attribute label. For example, Web browsers configured your form in a logical order. code will precede the other element in the tab order.
to identify the element you want to label. Then for the hearing impaired may read labels using
use the FOR attribute with the <LABEL> tag a speech-synthesizer. To change the tab order, use the TABINDEX attribute The TABINDEX attribute can also be used with
to identify the text for the label. with the tags for every element on your form. To elements outside of your form, such as images
While the <LABEL> tag is part of the HTML include an element in the tab order, assign the (<IMG>), links (<A>) and image map
Labeling form elements can help users quickly standard, it is not currently supported by many element a TABINDEX value between 1 and 32,767. areas (<AREA>).
enter information in a form. For example, when Web browsers. To exclude an element from the tab order, assign
a user clicks the label beside a check box on the element a negative TABINDEX value (example: While the TABINDEX attribute is part of the HTML
your Web page, the check box will be selected. TABINDEX="-1"). standard, it is not yet fully supported by most Web
browsers.
LABEL FORM ELEMENTS CHANGE THE TAB ORDER
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Music Survey</TITLE> <TITLE>Feedback Form</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
Feedback Form:
<H1><CENTER>Music Survey</CENTER></H1> <H1> <CENTER>Feedback Form</CENTER></H1>
Please take a moment to provide us with your comments:
<FORM METHOD="post" ACTION="/cgi-bin/survey.pl"> <P>Please take a moment to provide us with your comments:</P>
<P>We'd like to serve you better! Please tell us about your listening interests:</P>
<INPUT TYPE="checkbox" NAME="music" VALUE="jazz" ID="jazz" > <LABEL FOR="jazz"> <FORM METHOD="post" ACTION="/cgi-bin/feedback.pl">
Jazz </LABEL> <BR>First Name:<INPUT TYPE="text" NAME="firstname" SIZE="20" TABINDEX="1" > First Name: Password:
<BR><INPUT TYPE="checkbox" NAME="music" VALUE="r&b">R&B Password:<INPUT TYPE="password" NAME="pass" SIZE="20" TABINDEX="3" >
Last Name:
<BR><INPUT TYPE="checkbox" NAME="music" VALUE="rock">Rock <BR>Last Name:<INPUT TYPE="text" NAME="lastname" SIZE="20" TABINDEX="2" >
</FORM> <BR>Comments:<TEXTAREA NAME="commentbox" ROWS="5" COLS="50" WRAP
TABINDEX="4" > </TEXTAREA>
</BODY> </FORM>
</HTML>
</BODY> Comments:
</HTML>
⁄ In the tag for the form ¤ Before the text you ■ The Web browser ■ In this example, users ⁄ In the tag for an ¤ Repeat step 1 for each ■ Users can tab through
element that you want want to use as the label displays the form can select the check box element on your form, type element on the form. the elements on your form
to use a label, type ID="?" for the form element, element and its label. or the text "Jazz" to select TABINDEX="?" replacing ? in the order you specified.
replacing ? with a word type <LABEL FOR="?"> the item. with a number that specifies Note: To exclude an element
that describes the element. replacing ? with the word the position of the element from the tab order, specify a
you typed in step 1. in the tab order. negative number in step 1.
‹ After the text you

want to use as the label
for the form element,
142 type < /LABEL>. 143
HTML CREATE FRAMES 10
CREATE FRAMES Combining framesets allows you to create complex

frame layouts that contain both rows and columns.
To combine framesets, use the <FRAMESET> tag to
divide a frame in your original frameset into rows
rames allow you to divide a Web The <FRAMESET> tag allows you to create
F
or columns.
browser window into sections. Each a set of frames, called a frameset, that divides
section will display a different Web a Web browser window into rows or columns. TYPE THIS: RESULT:
page in your Web site. You must specify a height or width for each <HTML>
row or column using a percentage of the <HEAD>
Frames are useful when you want to keep Web browser window, a number of pixels <TITLE>My Home Page</TITLE> C:\My Documents\Web Pages\index.html
information on the screen at all times. or an asterisk (*). When you use an asterisk, </HEAD>
For example, place a table of contents or <FRAMESET ROWS="110,*">
the size of the frame will depend on the size <FRAME NAME="banner" SRC="banner.html">
navigational links in a frame to help users of your other frames. For example, if one <FRAMESET COLS="150,*">
move through your Web pages and find frame uses 70% of the window, the frame <FRAME NAME="contents" SRC="contents.html">
information of interest. with the asterisk will use 30% of the window. <FRAME NAME="main" SRC="startpage.html">
</FRAMESET>
To create frames, set up a Web page that </FRAMESET>
Use the <FRAME> tag to specify information </HTML>
defines the structure of the frames using for each frame, such as the name of the frame
the <FRAMESET> and <FRAME> tags. and the Web page you want to appear in the
frame.
CREATE FRAMES

<TITLE>Oceanography.com</TITLE> <TITLE>Oceanography.com</TITLE> <TITLE>Oceanography.com</TITLE> Come discover the beauty of the ocean!
<FRAMESET <FRAMESET ROWS="50,*"> <FRAMESET ROWS="50,*">
<FRAME NAME="banner" SRC="banner.html">
</HTML> </HTML> <FRAME NAME="mainpage" SRC="mainpage.html">
</FRAMESET>
</HTML>
⁄ Set up a Web page as ¤ Type <FRAMESET ‹ To create frames in ■ To create frames in › To specify the information Note: To specify the location ■ The Web browser ■ Scroll bars appear
shown on pages 10 to 13. directly below the rows, type ROWS="a,b..."> columns, type COLS="a,b..."> for one frame, type and name of a Web page displays the frames. automatically when
Do not type any text for </HEAD> tag. Then replacing a, b and so on replacing a, b and so on with <FRAME NAME="?" replacing ? in your Web site, see the a frame is too small
the Web page or include add a blank space. with the height of each the width of each column you with a name for the frame. top of page 75. to display the contents
the <BODY> tags. row you want to create. want to create. Then add a blank space. of an entire Web page.
Á Repeat steps 4
ˇ Type SRC="?"> replacing ? and 5 for each frame
with the location and name you created in step 3.
of the Web page you want
to appear in the frame.
‡ Type < /FRAMESET>.
144 145
PROVIDE ALTERNATIVE
FRAME CONSIDERATIONS INFORMATION
W
hile frames are useful for effectively consideration before using frames. Consider
presenting your Web site in an the following advantages and disadvantages of ome Web browsers cannot display frames, Some people prefer to provide only a short
easy-to-navigate format, there
are several factors you should take into
frames to determine if frames are appropriate
for your Web site. S while others allow users to turn off the display
of frames. You should use the <NOFRAMES>
tag to provide alternative information that will
explanation of why users cannot see their Web
pages. If you include only a short explanation, you
may also want to provide a link that will take users
appear if a user's Web browser does not display to a version of your Web site that does not use
ADVANTAGES OF USING FRAMES frames. If you do not provide alternative information, frames. For information on creating a link to
users with Web browsers that do not display frames another Web page, see page 74.
If your Web site is large and complex, frames Using frames also allows you to keep information, will see a blank screen.
The information you provide using the <NOFRAMES>
offer many advantages that can help users better such as your company logo or a disclaimer, on the
The alternative information you provide can include tag will not appear if a user's Web browser can
understand your Web site structure and navigate screen at all times without having to add the
through your Web pages. information to every Web page in your Web site.
information from your Web pages. The <NOFRAMES> display frames.
tag supports the use of HTML tags, allowing you to
Frames display multiple Web pages in one Web Many Web page authors find frames useful for include elements such as images and tables in your
browser window. This allows you to display a variety displaying a navigation bar that contains links to the alternative information.
of information on the screen at once. For example, Web pages in their Web site. This lets users see the
you can display a table of contents for your Web structure of the Web site at all times and allows PROVIDE ALTERNATIVE INFORMATION
site, copyright information and the current Web them to easily access information of interest.
page on the screen at the same time.
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Oceanography.com</TITLE> <TITLE>Oceanography.com</TITLE>
</HEAD> </HEAD>
DISADVANTAGES OF USING FRAMES <FRAMESET ROWS="50,*"> <FRAMESET ROWS="50,*">

<FRAME NAME="banner" SRC="banner.html"> <FRAME NAME="banner" SRC="banner.html">
<FRAME NAME="mainpage" SRC="oceanography.html"> <FRAME NAME="mainpage" SRC="oceanography.html">
<NOFRAMES> <NOFRAMES>
Designing a frames-based Web site requires careful It is difficult to predict how your frames will appear This Web page uses frames. Your current Web browser does not display frames or <BODY>
frame viewing has been turned off. This Web page uses frames. Your current Web browser does not display frames or
organization and planning. There are several on a user's computer, since the resolution of a user's </NOFRAMES> frame viewing has been turned off.
</FRAMESET> </BODY>
disadvantages you should consider before using monitor determines the amount of information that </NOFRAMES>
frames. appears in the frames. People using lower screen </HTML> </FRAMESET>
resolutions will not see as much information in each </HTML>

Since frames divide a Web browser window into frame.
sections, the viewing area for each Web page is
reduced. Web pages designed to be displayed in You should also keep in mind that not all Web
an entire Web browser window may not fit well browsers support frames. If you want to ensure that
in frames. all users will be able to view your Web pages, you
will need to design a non-frames version of your
When creating frames, it can be difficult to Web site. ⁄ Type <NOFRAMES> ¤ Type the information › Type <BODY> directly Note: The <BODY> and
determine the best size for each frame. Although directly above the last you want to appear if a above the information </BODY> tags are optional.
users can scroll through the information in a </FRAMESET> tag on Web browser does not you typed in step 2.
frame, they may become annoyed if they have to your Web page. display frames. ■ If a user views your Web
continually scroll to view important information. ˇ Type < /BODY> directly page in a Web browser that
‹ Type </NOFRAMES>. below the information does not display frames, the
you typed in step 2. information you specified
will appear.
146 147
If a Web page does not display well in a frame, The HTML standard also includes the _self
use the TARGET attribute with the _blank or and _parent values for the TARGET attribute.
_top value to open the Web page in a window. The _self value opens a linked Web page in
CREATE A LINK TO A FRAME The _blank value opens a linked Web page in
a new, unnamed window. The _top value opens
the frame containing the link. The _parent
value opens a linked Web page in the frameset
a linked Web page in the current window, containing the link. Use the _parent value to
replacing the frames. specify the target for a link in a nested frameset.
se the TARGET attribute with the <A> tag You assigned names to your frames when you
U to create a link that users can select to

display a Web page in another frame.
Creating links to frames can help users move
created the frames on page 144. If you do not
use the TARGET attribute to specify the name
of a frame, the link will open in the frame that
Example:
<A HREF="survey.html" TARGET="_top">Take
the Survey</A>
For information on nested framesets, see page 155.
Example:
<A HREF="comingsoon.html" TARGET="_self">Upcoming
Movies</A>
contains the link.
through your Web site. For example, create
navigation links in one frame that will open in If you plan to have all the links on a Web page If you have set the default target for the links
another frame. This lets you keep the navigation open in the same frame, set the default target on a Web page, you can still have some links
links on the screen while users browse through for the links using the <BASE> tag with the open in a different frame. Use the TARGET
attribute in the <A> tag for each link you want
your Web pages. TARGET attribute. This will save you time since to open in a different frame. The target you
you will not need to specify a target for each specify for an individual link will override the
When creating a link to a frame, specify the link you create. default target for the links on the Web page.
name of the frame using the TARGET attribute.
CREATE A LINK TO A FRAME

ABC Corporation - Microsoft Internet Explorer

<TITLE>Table of Contents</TITLE> <TITLE>Table of Contents</TITLE> <TITLE>Table of Contents</TITLE>
</HEAD> </HEAD> <BASE TARGET="main">
<BODY> <BODY> </HEAD>
<BODY>
<H2>Table of Contents</H2> <H2>Table of Contents</H2>
<H2>Table of Contents</H2>
<A HREF="intro.html" Introduction <A HREF="intro.html" TARGET="main"> Introduction </A>
<BR> <A HREF="intro.html">Introduction</A>
</BODY> </BODY> <BR> <A HREF="history.html">Company History</A>
</HTML> </HTML> <BR> <A HREF="mission.html">Mission Statement</A>
<BR> <A HREF="products.html">Products Offered</A>
<BR> <A HREF="services.html">Services Offered</A>
<BR> <A HREF="future.html">Future Goals</A>
<BR> <A HREF="conclusion.html">Conclusion</A>
</BODY>
</HTML>
⁄ On the Web page you ¤ Type <A HREF="?" in ‹ Add a blank space and then › Type </A> after ■ The Web browser ■ Users can click the link SET THE DEFAULT TARGET ¤ Type <BASE TARGET="?">
want to display the link, front of the text or image, type TARGET="?"> replacing ? the text or image. displays the link. to display the Web page in ⁄ To have all the links replacing ? with the name
type the text or add the replacing ? with the with the name of the frame the frame you specified. on a Web page open in of the frame where you
image you want users to location and name of the where you want the Web page the same frame, click want all the links on the
select to display a Web Web page you want to to appear. between the <HEAD> Web page to open.
page in another frame. appear in another frame. and </HEAD> tags.
Note: You assigned names to your Note: You assigned names to
Note: To specify the location and frames in step 4 on page 144. your frames in step 4 on page 144.
name of a Web page in your own
Web site, see the top of page 75.
148 149
PREVENT USERS FROM
HIDE OR DISPLAY SCROLL BARS RESIZING FRAMES
y default, Web browsers will only display When hiding the scroll bars for a frame, se the NORESIZE attribute to prevent users Make sure that the frames you have prevented
B scroll bars for a frame when a Web page

contains too much information to fit in
the frame. Use the SCROLLING attribute with
keep in mind that the scroll bars will be
hidden even if some information does not
fit in the frame. If a user displays your Web
U from resizing your frames. This is useful
when you do not want the layout of your
frames to change.
users from resizing are large enough to attractively
display the information they contain. Keep in mind
that users who view your Web pages at lower
the no or yes value to hide or display the page using a small Web browser window or resolutions will see less information in each frame.
scroll bars for a frame at all times. a low screen resolution, your information If you do not prevent users from resizing frames,
may no longer fit in the frame. After hiding users can drag a frame border to a new location to If you have hidden the borders around your frames,
If you never want a frame to display scroll the scroll bars for a frame, you should view resize a frame. Users may want to change the size users will automatically be unable to resize the
bars, specify the no value. Hiding the scroll the frame at a lower screen resolution to of a frame to display more information in the frame. frames. You will only need to use the NORESIZE
bars for a frame is useful for reducing clutter make sure users will not need the scroll bars attribute if you later redisplay the frame borders.
in a small frame. If you always want a frame When you prevent users from resizing a frame, users For information on hiding frame borders, see
to display all the information in the frame.
to display scroll bars, specify the yes value. will also be unable to resize frames that share the page 152.
This is useful when the scroll bars improve same frame border. This saves you from having to
the layout of a frame. use the NORESIZE attribute for all of your frames.
HIDE OR DISPLAY SCROLL BARS PREVENT USERS FROM RESIZING FRAMES
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Oceanography.com</TITLE> <TITLE>Oceanography.com</TITLE>
</HEAD> </HEAD>
Come discover the beauty of the ocean! Come discover the beauty of the ocean!
<FRAMESET ROWS="50,*"> <FRAMESET ROWS="50,*">
<FRAME NAME="banner" SRC="banner.html" SCROLLING="no" > <FRAME NAME="banner" SRC="banner.html" NORESIZE >
<FRAME NAME="mainpage" SRC="oceanography.html" SCROLLING="yes" > <FRAME NAME="mainpage" SRC="oceanography.html">
</FRAMESET> </FRAMESET>
</HTML> </HTML>
HIDE SCROLL BARS DISPLAY SCROLL BARS ■ The Web browser hides ⁄ Type NORESIZE in the ¤ Repeat step 1 for ■ The Web browser will
⁄ Type SCROLLING="no" ⁄ Type SCROLLING="yes" or displays the scroll bars <FRAME> tag for a frame each frame you do not not allow users to resize
in the <FRAME> tag for in the <FRAME> tag for the for the frame. you do not want users to want users to resize. the frames you specified.
the frame you never want frame you always want to resize.
Note: When you prevent
to display scroll bars. display scroll bars. users from resizing a frame,
users will automatically be
unable to resize frames that
share the same frame border.
150 151
CHANGE FRAME BORDERS The FRAMESPACING attribute also allows you to
change the thickness of your frame borders. Type
FRAMESPACING="?" in the first <FRAMESET> tag,
Use the BORDERCOLOR attribute with the <FRAME>
tag to change the color of the border
for an individual frame. This can help draw
replacing ? with the thickness you want to use in attention to the frame. When changing the
T
here are several options available for changing Although the BORDER and BORDERCOLOR attributes pixels. The FRAMESPACING attribute is not part of color of an individual frame, keep in mind that
the appearance of the borders between your are supported by most Web browsers, they are not the HTML standard and is currently supported only many Web browsers do not yet fully support the
frames. part of the HTML standard for frames. by Internet Explorer. BORDERCOLOR attribute with the <FRAME> tag.
Web browsers may produce inconsistent results
Example:
Use the BORDER attribute with the <FRAMESET> To hide all the borders between your frames, use depending on the layout of your frames.
<FRAMESET ROWS="35%,*" FRAMESPACING="10">
tag to change the thickness of your frame borders. the FRAMEBORDER attribute with the <FRAMESET> Example:
By default, most Web browsers display frame tag. This is useful when you want to make the <FRAME NAME="navigation" SRC="navigation.html"
borders with a thickness of 6 pixels. contents of your frames appear as one Web page. BORDERCOLOR="red">
The HTML standard specifies that you can use the
After you hide the frame borders, a space may FRAMEBORDER attribute with the <FRAME> tag to
Web browsers usually display frame borders in remain between the frames. To completely remove hide the borders for an individual frame. Specify a
gray. Using the BORDERCOLOR attribute with the the space, set the BORDER attribute to 0 pixels. value of 0 to hide the borders. Most Web browsers
<FRAMESET> tag allows you to change the color do not yet fully support the FRAMEBORDER attribute
of your frame borders. This is useful when you While the FRAMEBORDER attribute with the with the <FRAME> tag.
want to coordinate the color of the borders with <FRAMESET> tag is supported by most Web Example:
the background color of the Web pages in your browsers, it is not part of the HTML standard. <FRAME NAME="mainpage" SRC="index.html" FRAMEBORDER="0">
frames.
CHANGE FRAME BORDERS
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Oceanography.com</TITLE> Come discover the beauty of the ocean! <TITLE>Oceanography.com</TITLE> Come discover the beauty of the ocean!
</HEAD> </HEAD>
<FRAMESET ROWS="50,*" BORDER="8" BORDERCOLOR="#0066CC" > <FRAMESET ROWS="50,*" FRAMEBORDER="0" >

<FRAME NAME="banner" SRC="banner.html"> <FRAME NAME="banner" SRC="banner.html">
<FRAME NAME="mainpage" SRC="oceanography.html"> <FRAME NAME="mainpage" SRC="oceanography.html">
</HTML> </HTML>
⁄ To change the thickness of ¤ To change the color ■ The Web browser HIDE FRAME BORDERS Note: To completely remove ■ The Web browser
frame borders, type BORDER="?" of frame borders, type displays the frames with ⁄ To hide all frame borders, the space between frames, hides the borders
in the first <FRAMESET> tag, BORDERCOLOR="?" in the borders you specified. type BORDER="0" in the first around your frames.
type FRAMEBORDER="0" in
replacing ? with the thickness the first <FRAMESET> the first <FRAMESET> tag. <FRAMESET> tag.
you want to use in pixels. tag, replacing ? with the
name or hexadecimal
value for the color you
want to use.
Note: For a list of colors, see
152 the color chart at the front of
153
this book.
CHANGE FRAME MARGINS CREATE NESTED FRAMESETS

C
hanging the margins of a frame allows If you want the contents of a frame to appear esting a frameset within another frameset the nested frameset. When entering the
you to adjust the amount of space between
the contents of the frame and the edges
of the frame. This can help improve the layout
directly beside the edges of the frame, set
the margins of the frame to 0 pixels. Only
some Web browsers can display margins
N allows you to create more elaborate frame
layouts. A frameset is a set of frames that
divide a Web browser window into sections. For
information for this frame, specify the location
and name of the inner frameset rather than the
location and name of a Web page.
of a frame. set to 0 pixels. information on creating framesets, see page 144.
Combining framesets can produce results similar
By default, most Web browsers display frame When changing the frame margins, make Nested framesets consist of two separate frameset to nesting framesets, though you may find nested
margins of approximately 10 pixels. Use the sure you specify both a margin width and documents–an inner frameset and an outer framesets easier to work with, since the framesets
MARGINWIDTH and MARGINHEIGHT attributes margin height. If you only specify one margin frameset. You can create an inner frameset as you are stored in separate files. For information on
to change the size of the margins for a frame. size, your Web browser may automatically would create any frameset document. The inner combining framesets, see the top of page 145.
The MARGINWIDTH attribute lets you specify a change the other margin to the smallest size frameset should have a simple design, since it will
new size in pixels for the left and right margins. the browser supports. appear in a frame rather than in an entire window. You should not create nested framesets that
The MARGINHEIGHT attribute lets you specify a contain more than two framesets, since this can
new size in pixels for the top and bottom margins. When creating an outer frameset, you must affect the performance of a user's Web browser.
determine which frame you want to contain
CHANGE FRAME MARGINS CREATE NESTED FRAMESETS
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Fruit and Flowers</TITLE> <TITLE>ABC Corporation Home Page</TITLE>
</HEAD> Discover the joys of growing your own! </HEAD>
<FRAMESET ROWS="90,*">
<FRAMESET ROWS="40,*"> <FRAME NAME="banner" SRC="banner.html">
<FRAME NAME="banner" SRC="banner.html"> <FRAMESET COLS="150,*">
<FRAME NAME="main" SRC="main.html" MARGINWIDTH="55" <FRAME NAME="contents" SRC="contents.html">
MARGINHEIGHT="55" > <FRAME NAME="innerframeset" SRC="inner.html">
</FRAMESET>
</HTML>
</HTML>
⁄ In the <FRAME> tag for ¤ Type MARGINHEIGHT="?" ■ The Web browser displays ⁄ Create the frames ¤ Create the frames for ■ The Web browser
the frame you want to change, replacing ? with the amount the frame with the margins for the inner frameset the outer frameset. When displays the inner
type MARGINWIDTH="?" of space you want the you specified. as shown on page 144. creating the frame that frameset nested within
replacing ? with the amount top and bottom margins you want to contain the the outer frameset.
of space you want the left to display in pixels. inner frameset, enter the
and right margins to display location and name of the
in pixels. Then add a blank inner frameset you created
space. in step 1 rather than the
location and name of a
154 Web page. 155
Use the ALIGN attribute with the left or Use the SCROLLING attribute to hide or display
right value to wrap text around an inline frame. the scroll bars for an inline frame. If you never
The left value places the inline frame on the want an inline frame to display scroll bars,
CREATE AN INLINE FRAME left side of the text and the right value places
the inline frame on the right side of the text.
specify the no value. Hiding the scroll bars
is useful for reducing clutter in a small frame.
If you always want an inline frame to display
Example:
scroll bars, specify the yes value. This is useful
se the <IFRAME> tag to create an inline Make sure the size you specify is large enough
U
<IFRAME SRC="products.html" NAME="products" when the scroll bars will improve the layout
frame on your Web page. An inline frame, to properly display the contents of the frame. WIDTH="400" HEIGHT="300" ALIGN="left"></IFRAME> of a frame.
or floating frame, is a frame that appears Users will not be able to resize an inline frame
Example:
within the content of a Web page. Unlike on your Web page.
Use the MARGINWIDTH and MARGINHEIGHT <IFRAME SRC="sales.html" NAME="sales" WIDTH="400"
conventional frames, inline frames do not require HEIGHT="300" SCROLLING="no"></IFRAME>
you to create a frameset on a separate Web page. Although the <IFRAME> tag is part of the HTML attributes to change the size of the margins for
standard, it is currently only supported by Internet an inline frame. The MARGINWIDTH attribute
Use the NAME attribute to provide a name for Explorer. To specify text that will appear for users lets you specify a new size in pixels for the left
and right margins. The MARGINHEIGHT attribute
an inline frame. Naming an inline frame allows with other Web browsers, type the text between lets you specify a new size in pixels for the top
you to later create links that will open another the <IFRAME> and </IFRAME> tags. You may and bottom margins.
Web page in the inline frame. To create a link want to include a link in the alternative text that
Example:
to a frame, see page 148. will allow these users to access the Web page
in the inline frame. <IFRAME SRC="advertising.html" NAME="advertising"
Use the WIDTH and HEIGHT attributes to WIDTH="300" HEIGHT="300" MARGINWIDTH="10"
MARGINHEIGHT="5"></IFRAME>
specify a width and height for an inline frame.
CREATE AN INLINE FRAME

<TITLE>Oceanography</TITLE> <TITLE>Oceanography</TITLE> <TITLE>Oceanography</TITLE>
<IMG SRC="banner.jpg"> <IMG SRC="banner.jpg"> <IMG SRC="banner.jpg">
<IFRAME SRC="introduction.html" <IFRAME SRC="introduction.html" NAME="intro" WIDTH="600px" HEIGHT="150px"> <IFRAME SRC="introduction.html" NAME="intro" WIDTH="600px" HEIGHT="150px">
This Web site contains inline frames. Your browser does not suppor t inline frames.
<IMG SRC="scuba.jpg" ALIGN="right"> <IMG SRC="scuba.jpg" ALIGN="right"> </IFRAME>
<P><B>The field of oceanography can be broken down into three main areas of study:</B> <P><B>The field of oceanography can be broken down into three main areas of study:</B>
<BR><I>Physical Oceanography</I> is concerned with the physical attributes of the ocean <BR><I>Physical Oceanography</I> is concerned with the physical attributes of the ocean <IMG SRC="scuba.jpg" ALIGN="right">
water, such as currents and temperature. water, such as currents and temperature. <P> <B>The field of oceanography can be broken down into three main areas of study:</B>
<BR><I>Chemical Oceanography</I> focuses on the chemistry of ocean waters. <BR><I>Chemical Oceanography</I> focuses on the chemistry of ocean waters. <BR> <I>Physical Oceanography</I> is concerned with the physical attributes of the ocean
<BR><I>Marine Biology</I> is the study of flora and fauna and the interaction between the <BR><I>Marine Biology</I> is the study of flora and fauna and the interaction between the water, such as currents and temperature.
atmosphere and the ocean.</P> atmosphere and the ocean.</P> <BR> <I>Chemical Oceanography</I> focuses on the chemistry of ocean waters.
<BR> <I>Marine Biology</I> is the study of flora and fauna and the interaction between the
</BODY> </BODY> atmosphere and the ocean.</P>
</HTML> </HTML>
</BODY>
</HTML>
⁄ On the Web page that you Note: To specify the location ¤ Type NAME="?" ‹ Type WIDTH="?" › Type the text you ˇ Type < /IFRAME> ■ The Web browser ■ Scroll bars automatically
want to contain an inline frame, and name of a Web page in replacing ? with a HEIGHT="?"> replacing ? want to appear if a to complete the displays the inline appear when a Web page
type <IFRAME SRC="?" replacing ? your own Web site, see the name for the inline with a width and height for Web browser does not inline frame. frame on your Web contains too much information
with the location and name of top of page 75. frame. Then add a the inline frame in pixels or support inline frames. page. to fit in the frame.
the Web page you want to appear blank space. as a percentage of the Web
in the inline frame. Then add a browser window.
blank space.
156 157
HTML USING JAVASCRIPT 11
ADD JAVASCRIPT TO A WEB PAGE
A
dding JavaScript to a Web page can help Do not enter any HTML tags or plain text between
make the page interactive and entertaining. the <SCRIPT> tags, since Web browsers will
There are many places on the Internet that According to the HTML standard, you should
For example, JavaScript can perform tasks attempt to interpret the information as JavaScript.
offer JavaScripts. For example, JavaScripts use the <META> tag to specify the default
such as displaying alert messages, validating are available at the javascript.internet.com, scripting language used on your Web page.
information in forms and changing images in The <SCRIPT> tags are often placed in the
www.javascripts.com and www.javascripts- Between the <HEAD> and </HEAD> tags, type
response to mouse movements. head section of a Web page, though JavaScript galore.com Web sites. Make sure you have <META HTTP-EQUIV="Content-Script-Type"
can also be included in the body of a Web page. permission to use any JavaScripts you find CONTENT="?"> replacing ? with the scripting
JavaScripts are small programs written using the A JavaScript you obtain on the Internet usually on the Internet. Most JavaScripts come with language you are using. For example, type
JavaScript scripting language. Although the names includes instructions that indicate where you instructions on how to properly add the text/javascript for JavaScript or text/vbscript for
are similar, JavaScript and Java have very little in should place the JavaScript on your Web page. JavaScript to your Web page. VBScript.
common. If you know the JavaScript scripting language, Example:
Although JavaScript is the most common scripting you can create your own JavaScripts. To <META HTTP-EQUIV="Content-Script-Type"
The <SCRIPT> tag allows you to add JavaScript to language on the Web, many Web browsers also learn more about creating JavaScripts, CONTENT="text/javascript">
your Web page. Enter the code for the JavaScript recognize other scripting languages, such as visit the www.htmlgoodies.com/primers/jsp
between the <SCRIPT> and </SCRIPT> tags. VBScript. Web site.
ADD JAVASCRIPT TO A WEB PAGE Some JavaScript functions, such as

Although the TYPE attribute is still document.write(), instruct your Web
supported by Web browsers, the LANGUAGE browser to add information to your Web
attribute is now preferred for specifying the page. If the JavaScript you are using does
<HTML> scripting language you are using. The value not add information to your Web page, you
<HEAD>
<TITLE>Grape Expectations</TITLE> of the LANGUAGE attribute is the name of may want to use the DEFER attribute with
</HEAD>
the language, such as JavaScript or the <SCRIPT> tag to help your Web page
<BODY>
VBScript. You may want to use both the appear on a user's screen more quickly. The
<SCRIPT TYPE="text/javascript">
var correctwidth=800 LANGUAGE and TYPE attributes to help DEFER attribute informs Web browsers that
var correctheight=600
ensure that Web browsers will know which they do not need to create any Web page
if (screen.width<correctwidth||screen.height<correctheight)
document.write("IMPORTANT: This Web page is best viewed with screen resolution scripting language you are using. content.
"+correctwidth+"x"+correctheight+" or above. Your current resolution is "+screen.width+"x"+
screen.height+". If possible, please change the resolution!")
Example: Example:
</SCRIPT>
<H1>Grape Expectations</H1> <SCRIPT LANGUAGE="JavaScript" <SCRIPT TYPE="text/javascript"

TYPE="text/javascript"> DEFER>alert('Welcome to my Web Page!');
<H4> <CENTER><I>A guide to homemade wine-making for the wine connoisseur!</I>
</CENTER></H4> </SCRIPT>
<P> <IMG SRC="barrel.gif" HSPACE="10" VSPACE="10" ALIGN="left" WIDTH="80"
HEIGHT="110">Welcome to our Web site about wine-making. Our names are Rosemary
and Alan Baker, and we have been making our own wine for 20 years. Currently we have
over 200 bottles of homemade wine in our wine cellar. These pages contain everything you JavaScript can perform actions on a user's
computer and therefore presents security Dynamic HTML (DHTML) is a combination
risks. For example, some Web browsers of technologies, including JavaScript, HTML,
allow JavaScript to read files that may contain Cascading Style Sheets and others. DHTML
⁄ Type <SCRIPT TYPE ¤ Type the code for ■ The Web browser runs sensitive information, such as files that store allows you to create complex animated and
="text/javascript"> on your the JavaScript. the JavaScript on your passwords. When adding JavaScript to your interactive Web pages that do not need to
Web page. Web page. Web page, keep in mind that some users be processed by a Web server.
‹ Type </SCRIPT> to
Note: To determine where to place complete the JavaScript. turn off JavaScript in their Web browsers
the JavaScript on your Web page, because of the security risks.
check the instructions included
with the JavaScript.
158 159
STORE JAVASCRIPT
HIDE JAVASCRIPT IN A SEPARATE FILE
I
se the  delimiters to hide The <NOSCRIPT> tag allows you to provide f you want to use the same JavaScript on To store a JavaScript in a separate file, you must
U JavaScript from older Web browsers that

cannot run JavaScript. This will prevent
the Web browsers from displaying the code for
alternative text that will be displayed in Web
browsers that do not run JavaScript. This lets you
provide users with information about the missing
several Web pages, consider storing the
JavaScript code in a separate file. Then
include a reference to the file on each Web
type the JavaScript code into a new file in a
word processor or text editor and save the file
in the text-only format. Use the .js extension
the JavaScript on your Web page. JavaScript. page that you want to use the JavaScript. when naming the file.
This prevents you from having to type the
When hiding JavaScript, type two slashes (//) in Using the <NOSCRIPT> tag does not guarantee JavaScript code on each Web page. On each Web page you want to use the
front of the final delimiter (-->) to prevent Web that the alternative text you provide will appear. JavaScript, use the <SCRIPT> tag with the
browsers that recognize JavaScript from interpreting For example, the alternative text may not appear Storing JavaScript in a separate file is also SRC attribute to specify the location and name
the delimiter as part of the JavaScript code. if there is an error in the JavaScript code. useful for JavaScript code you plan to use of the JavaScript file on your computer. You can
on only one Web page. For example, if the specify the location and name of a JavaScript
If you have stored JavaScript code in a separate Some older Web browsers that support JavaScript JavaScript code is long, saving the code in file as you would specify the location and name
file, you do not need to hide the JavaScript. may both run the JavaScript and display the a separate file will make your Web page of an image. For more information, see the top
For information on storing JavaScript code in alternative text you provide. less cluttered and easier to read. of page 45.
a separate file, see page 161.
HIDE JAVASCRIPT PROVIDE ALTERNATIVE TEXT STORE JAVASCRIPT IN A SEPARATE FILE
var correctwidth=800
<HTML> <HTML> var correctheight=600 <HTML>
<HEAD> <HEAD> if (screen.width<correctwidth||screen.height<correctheight) <HEAD>
<TITLE>Grape Expectations</TITLE> <TITLE>Grape Expectations</TITLE> document.write("IMPORTANT: This Web page is best viewed with screen resolution "+ <TITLE>Grape Expectations</TITLE>
</HEAD> </HEAD> correctwidth+"x"+correctheight+" or above. Your current resolution is "+screen.width+"x"+ </HEAD>
<BODY> <BODY> screen.height+". If possible, please change the resolution!") <BODY>
<SCRIPT TYPE="text/javascript"> <SCRIPT TYPE="text/javascript"> <SCRIPT TYPE="text/javascript" SRC="myscript.js"> </SCRIPT>

 //--> HEIGHT="110">Welcome to our Web site about wine-making. Our names are Rosema
</SCRIPT> </SCRIPT> Alan Baker, and we have been making our own wine for 20 years. Currently we have o
<NOSCRIPT> This site is best viewed at a resolution of 800x600. </NOSCRIPT> bottles of homemade wine in our wine cellar. These pages contain everything you need
<H1>Grape Expectations</H1> to make your own red, white or blush wine, including the equipment you need, what ki
<H1>Grape Expectations</H1> grapes you should buy and tips and tricks to make your wine the best you've ever taste
<H4> <CENTER> <I>A guide to homemade wine-making for the wine connoisseur!</I> jump right in and don't be afraid to have <I>Grape Expectations!</I></P>
</CENTER> </H4> <H4> <CENTER> <I>A guide to homemade wine-making for the wine connoisseur!</I>
</CENTER> </H4> <P> <IMG SRC="grapes.gif"> <B><A HREF="equipment.html">Equipment</A> &
<P> <IMG SRC="barrel.gif" HSPACE="10" VSPACE="10" ALIGN="left" WIDTH="80" HE             &n
⁄ Type  directly above ⁄ Type <NOSCRIPT> directly ‹ Type < /NOSCRIPT>. ⁄ Create a new file ‹ Save the file in the › On a Web page you want Á Type </SCRIPT> to
below the <SCRIPT> tag. the </SCRIPT> tag. below the </SCRIPT> tag. in a word processor text-only format. Use to use the JavaScript, type complete the JavaScript.
■ If JavaScript does not or text editor. the .js extension to <SCRIPT TYPE="text/javascript"
■ If a user displays your ¤ Type the text you want run, the Web browser name the file (example: and then add a blank space. ‡ Repeat steps 4 to 6 on
Web page in an older Web to display if a Web browser will display the text you ¤ Type the code for myscript.js). each Web page you want
browser that cannot run does not run JavaScript. specified. the JavaScript. ˇ Type SRC="?"> replacing ? to use the JavaScript.
JavaScript, the JavaScript with the location and name
code will not appear. of the JavaScript file on your
computer.
160 161
INTRINSIC EVENTS
ADD AN EVENT THAT MOUSE EVENTS
RUNS A JAVASCRIPT A mouse event runs a JavaScript when a

user performs an action with the mouse.
For example, a mouse event can run a
JavaScript when a user clicks an element,
presses the mouse button, releases the
mouse button or moves the mouse.
I
f you do not want a JavaScript on your Web will type the JavaScript code directly in the tag. EVENT EVENT OCCURS WHEN USED WITH
page to run as soon as the Web page appears Some JavaScripts you find on the Internet may
ONCLICK A user clicks an element. Most tags.
on a user's screen, add an event to control recommend that you type the JavaScript in
when the JavaScript will run. For example, use the head section of your Web page and then ONDBLCLICK A user double-clicks an element. Most tags.
the ONCLICK event to have a JavaScript run add a reference to the JavaScript in the tag. ONMOUSEDOWN A user presses the mouse button. Most tags.
when a user clicks an element. Check the instructions provided with a JavaScript ONMOUSEUP A user releases the mouse button. Most tags.
to determine where to place the JavaScript. ONMOUSEOVER A user positions the mouse over an element. Most tags.
The HTML standard defines a collection of
events that you can use. These events are often The HTML standard recommends that you ONMOUSEMOVE A user moves the mouse while the mouse Most tags.
is over an element.
called "intrinsic events," since they are commonly specify the default scripting language when you
ONMOUSEOUT A user moves the mouse away from Most tags.
included as attributes in HTML tags. Intrinsic add an event that runs a JavaScript to a Web an element.
events can be used with most HTML tags. page. To specify the default scripting language, ONFOCUS A user selects or tabs to an element. <A>, <AREA>, <LABEL>,
see page 159. <INPUT>, <SELECT>,
The value of an event you add to a tag is the <BUTTON>, <TEXTAREA>
JavaScript you want to run. In most cases, you ONBLUR A user deselects or tabs away from <A>, <AREA>, <LABEL>,
an element. <INPUT>, <SELECT>,
<BUTTON>, <TEXTAREA>
ADD AN EVENT THAT RUNS A JAVASCRIPT
index - WordPad
KEYBOARD EVENTS
A keyboard event runs a JavaScript when keyboard events with form elements
<HTML>
<HEAD> C:\My Documents\Web Pages\index.html a user presses a key on the keyboard. that allow you to enter text, such as
<TITLE>Choose a Color</TITLE> Some Web browsers only support using text boxes and large text areas.
</HEAD>
<BODY>
<H3><CENTER>Select a background color:</CENTER> </H3>

EVENT EVENT OCCURS WHEN USED WITH
<P><CENTER><B><A HREF="index.html" ONMOUSEOVER ="document.bgColor='red'" > ONKEYPRESS A user presses and releases a key on Most tags.
Change To Red</A></B></CENTER> the keyboard.
<BR><CENTER><B><A HREF="index.html" ONMOUSEOVER="document.bgColor='orange'">
Change To Orange</A></B></CENTER> ONKEYDOWN A user presses a key on the keyboard. Most tags.
<BR><CENTER><B><A HREF="index.html" ONMOUSEOVER="document.bgColor='yellow'">
Change To Yellow</A></B></CENTER> </P> ONKEYUP A user releases a key on the keyboard. Most tags.
</BODY>
</HTML>
DOCUMENT EVENTS
A document event runs a JavaScript when in a form or when a Web browser
a user changes or enters information processes an element, such as a frame.
EVENT EVENT OCCURS WHEN USED WITH

⁄ In the tag for the element ¤ Type ="?" replacing ? ■ The Web browser runs ONSELECT A user selects text in a form element. <INPUT>, <TEXTAREA>
you want to associate with with the JavaScript that the JavaScript when a user ONCHANGE A user changes a form element's value <INPUT>, <SELECT>,
a JavaScript, type the event you want to run when performs the event you and then leaves the element. <TEXTAREA>
that you want to run the the event occurs. specified. ONSUBMIT A user clicks the submit button on a form. <FORM>
JavaScript. ONRESET A user clicks the reset button on a form. <FORM>
Note: If your JavaScript contains
quotation marks, use single ONLOAD A Web page appears in a frame or window. <BODY>, <FRAMESET>
quotation marks (') to differentiate ONUNLOAD A Web page disappears from a frame <BODY>, <FRAMESET>
them from the quotation marks (") or window.
162 that enclose the entire JavaScript. 163
CREATE A BUTTON THAT CREATE A LINK THAT
RUNS A JAVASCRIPT RUNS A JAVASCRIPT
se the <BUTTON> tag to create a button is usually the code for the JavaScript you want se the <A> tag to create a link that users When specifying the text you want to use for a
U that users can click to run a JavaScript.

This lets you give users control over when
a JavaScript will run. For example, users can
to use.
The text you type between the <BUTTON> and
</BUTTON> tags will appear on the button. You
U can select to run a JavaScript. This lets
you give users control over when a
JavaScript will run.
link, make sure the text clearly indicates what will
happen when users select the link. This can help
prevent users who have Web browsers that do
click a button to run a JavaScript that performs not run JavaScript from trying to use the link.
a calculation or displays the current date may also want to use the <IMG> tag between Unlike a link to another Web page, a link that runs
and time. the <BUTTON> and </BUTTON> tags to specify a JavaScript contains JavaScript code rather than A link that runs a JavaScript can be an image link.
an image you want to appear on the button. the URL of a Web page. When users select the When using an image link, keep in mind that
To create a button that runs a JavaScript, use the This can help you enhance the appearance link, their Web browser will run the JavaScript and some users do not see images. You may want to
TYPE attribute with the button value to specify of the button. display the results in the Web browser window. include corresponding text links for these users.
that you want to create a button. Then use the For example, users can select a link that runs a
ONCLICK event attribute to specify the JavaScript Although the <BUTTON> tag is part of the JavaScript that asks them for information and then
that you want to run when a user clicks the HTML standard, it is not yet supported by generates a new Web page based on their answers.
button. The value of the ONCLICK event attribute some Web browsers.
CREATE A BUTTON THAT RUNS A JAVASCRIPT CREATE A LINK THAT RUNS A JAVASCRIPT
<HTML> <HTML>
<HEAD> C:\My Documents\Web Pages\index.html <HEAD>
<TITLE>Grape Expectations</TITLE> <TITLE>Course Average Calculator</TITLE>
</HEAD>
</HEAD>
<BODY>
<BODY>
<P>Enter the mark you received in each of your four courses and click the link to determine
<BUTTON TYPE="button" ONCLICK="document.bgColor='yellow'"> Click here to change your average mark:</P>
the background color </BUTTON> <FORM NAME="marks">
<INPUT TYPE="text" NAME="mark1" SIZE="5">
<H1>Grape Expectations</H1> <INPUT TYPE="text" NAME="mark2" SIZE="5">
<INPUT TYPE="text" NAME="mark3" SIZE="5">
<H4> <CENTER> <I>A guide to homemade wine-making for the wine connoisseur!</I> <INPUT TYPE="text" NAME="mark4" SIZE="5">
</CENTER> </H4> </FORM>
<P> <IMG SRC="barrel.gif" HSPACE="10" VSPACE="10" ALIGN="left" WIDTH="80" <A HREF="javascript:{

HEIGHT="110">Welcome to our Web site about wine-making. Our names are Rosemary and var avg = (parseInt(document.marks.mark1.value) +
Alan Baker and we have been making our own wine for 20 years. Currently we have over parseInt(document.marks.mark2.value) +
200 bottles of homemade wine in our wine cellar. These pages contain everything you need parseInt(document.marks.mark3.value) +
to know to make your own red, white or blush wine, including the equipment you need, what parseInt(document.marks.mark4.value) ) /4;
kind of grapes you should buy and tips and tricks to make your wine the best you've ever '<HTML><BODY>Your average mark is: ' + avg +
tasted! So jump right in and don't be afraid to have <I>Grape Expectations!</I></P> ' percent.</BODY> </HTML>';
}"> Find your average </A>
<P><IMG SRC="grapes.gif"><B><A HREF="start.html">Getting Started</A>

⁄ Type <BUTTON TYPE="button" ‹ Type the text you ■ The Web browser ■ The JavaScript you ⁄ Click where you want the ‹ Type the text for ■ The Web browser displays ■ The JavaScript you
and then add a blank space. want to appear on the displays the button. specified will run when link to appear on your Web page. the link. the link. The link appears specified will run when
button. a user clicks the button. underlined and in color. a user clicks the link.
¤ Type ONCLICK="?"> ¤ Type <A HREF="javascript:?"> › Type </A> to
replacing ? with the JavaScript › Type < /BUTTON> to replacing ? with the JavaScript complete the link.
you want to run when a user complete the button. you want to run when a user
clicks the button. clicks the link.
164 165
ADD THE DATE AND TIME DISPLAY AN ALERT MESSAGE

se the Date() function to add the time set in their computer, the incorrect date se JavaScript to add an alert message The alert message will help ensure that
U current date and time to your Web

page. This instructs a Web browser
to display the date and time whenever a
and time will appear on your Web page.
When you use the JavaScript shown below,
most Web browsers will display the day,
U that will appear when a user visits
your Web page.
Alert messages are useful for providing users
users who visit your Web page read the
information since they will have to click an
OK button before they can browse through
user displays or refreshes the Web page. your Web page.
month, year and time on a Web page. Some with information. For example, use an alert
Adding the current date and time to your Web browsers may also include time zone message to provide instructions about an You may want to add an alert message that
Web page will make the Web page appear information. There are other JavaScripts element on your Web page, such as a form. will appear when a user performs an action.
up-to-date. This is useful for Web pages available that allow you to display more For example, you can add an alert message
that are regularly updated, such as pages elaborate date and time information. For If you want to guarantee that users read that will appear when a user clicks a submit
displaying news items. example, a JavaScript can format the date important information about your Web page, button on a form. For information on adding
and time or display a real-time clock on such as a disclaimer or a copyright statement, JavaScript that will run when a user performs
A Web browser will use the built-in clock your Web page. Date and time JavaScripts include the information in an alert message. an action, see page 162.
in a user's computer to determine the date are available at the javascript.internet.com
and time. If a user has the wrong date and Web site.
ADD THE DATE AND TIME DISPLAY AN ALERT MESSAGE

index - WordPad
<HTML>
<HTML> C:\My Documents\Web Pages\index.html <HEAD>
<TITLE>Spor ts Pools</TITLE>
<HEAD>
</HEAD>
<TITLE>ABC Corporation</TITLE> <BODY>
</HEAD>
<BODY> <H1> <I> <CENTER>Spor ts Pools</CENTER> </I> </H1>
<H2> <CENTER>Welcome to the <BR>ABC Corporation Home Page</CENTER> <H3> <CENTER>Enter our weekly pools and compete against thousands of spor ts fans! Weekly
prizes are awarded to the winners!</CENTER> </H3>
<P>Our Web site offers useful information about the company as well as a detail <SCRIPT TYPE="text/javascript">
catalog.</P> alert('Congratulations to last week\'s winner John Huggins of New Jersey! Good luck in this
<P>Whether you would like to order an item online, or simply find out more abou week\'s pool!')
Corporation, you are sure to find what you are looking for on our Web site.</P> </SCRIPT>
<P>The site is updated regularly, to ensure the information is up-to-date.</P> </BODY>
</HTML>
<SCRIPT TYPE="text/javascript"> document.write(Date()) </SCRIPT>
</BODY>
</HTML>
⁄ Click where you ‹ Type document.write(Date( )) ■ The Web browser ⁄ Type <SCRIPT TYPE= ¤ Type alert('?') replacing ? ■ The Web browser ■ A user can click the
want the date and to add the date and time. displays the current "text/javascript"> to begin with the message you want displays the message OK button to remove
time to appear on date and time on your the JavaScript. to appear when a user first in a dialog box when the dialog box.
your Web page. › Type </SCRIPT> to complete Web page. displays your Web page. a user first visits your
the JavaScript. Web page.
¤ Type <SCRIPT TYPE= ‹ Type </SCRIPT> to
"text/javascript"> to complete the JavaScript.
begin the JavaScript.
166 167
DISPLAY A POP-UP WINDOW CHANGE STATUS BAR FOR A LINK
se JavaScript to display a pop-up window that There are many JavaScripts available that let you y default, when a user positions the In this case, the value of the ONMOUSEOVER
U will appear when a user visits your Web page.

Pop-up windows are useful for providing users
with information. For example, use a pop-up window
display different types of pop-up windows. For
example, you may want to use a pop-up window
that will automatically close after a period of time.
B mouse over a link on a Web page, the
address of the linked Web page appears
in the status bar of the Web browser window.
event attribute is a JavaScript that contains text
you want to appear in the status bar of a Web
browser window. When specifying the text,
to announce a sale or upcoming event. JavaScripts are available at the javascript.internet.com Use JavaScript to customize the text that will type a backslash (\) before any quotation
Web site. appear in the status bar for a link. marks or apostrophes you want to include
When creating a pop-up window, specify the (example: Mike\'s Home Page).
location and name of the Web page you want Specifying your own text for the status bar
to appear in the window. For information on allows you to give users extra information Some Web browsers also support using the
To add scroll bars to a pop-up window,
specifying the location and name of a Web page type ,scrollbars=yes directly after the width about a link. This is particularly useful for ONMOUSEOVER event attribute with the <IMG>
in your own Web site, see the top of page 75. for the window. Make sure you do not add links that have complex URLs. tag to have text appear in the status bar when
any blank spaces to the code. a user positions the mouse over an image.
You should also specify the width and height you The ONMOUSEOVER event attribute with the This is useful for images that do not have
want the pop-up window to display. Pop-up windows Example: <A> tag lets you add a JavaScript that will run
<BODY ONLOAD="javascript:window.open('index.html',
accompanying text.
are usually large enough to display the Web page 'homepage','HEIGHT=200,WIDTH=150,scrollbars=yes')">
when a user positions the mouse over a link.
in the pop-up window but small enough to avoid
blocking your Web page in the Web browser window.
DISPLAY A POP-UP WINDOW CHANGE STATUS BAR FOR A LINK
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Grape Expectations</TITLE> <TITLE>Foster City Zoo</TITLE>
</HEAD> </HEAD>
<BODY ONLOAD="javascript:window.open('sale.html', 'sale', 'HEIGHT=250,WIDTH=250')" > <BODY>
<H1>Grape Expectations</H1> <H1> <CENTER>Foster City Zoo</CENTER> </H1>

<CENTER> <IMG SRC="tiger.jpg"> </CENTER>
<H4> <CENTER><I>A guide to homemade wine-making for the wine connoisseur!</I> <P>The spacious grounds of Foster City Zoo were established in 1960 on 350 acres of forest
</CENTER></H4> and farmland located five miles west of Foster City, NY. Our primary commitment is to educate
the public about the animal kingdom.</P>
<P><IMG SRC="barrel.gif" HSPACE="10" VSPACE="10" ALIGN="left" WIDTH="80" <P>Foster City Zoo is proud to announce the completion of our newest exhibit, The World of
HEIGHT="110">Welcome to our Web site about wine-making. Our names are Rosemary and Cats. This week, in keeping with The World of Cats exhibit, the featured site of the week is all
Alan Baker and we have been making our own wine for 20 years. Currently we have over 200 about tigers!
bottles of homemade wine in our wine cellar. These pages contain everything you need to
know to make your own red, white or blush wine, including the equipment you need, what <BR><A HREF="http://www.tigerkingdom.com" ONMOUSEOVER="window.status=' More About
kind of grapes you should buy and tips and tricks to make your wine the best you've ever Tigers! ';return true" >Click here</A> to find out more about tigers!</P>
tasted! So jump right in and don't be afraid to have <I>Grape Expectations!</I></P>
</BODY>
<P> <IMG SRC="grapes.gif"><B><A HREF="equipment.html">Equipment</A>   </HTML>

<IMG SRC="grapes.gif"><A HREF="start.html">Getting Started</A>


⁄ In the <BODY> tag ¤ Type '?', replacing ? ■ The Web browser ■ A user can click ⁄ In the <A> tag for the ‹ Type ';return true" to ■ The Web browser ■ The text you specified
of the Web page you with a name for the displays the window to close the window. link you want to display complete the JavaScript. displays the link. appears in the status bar
want to display a pop-up window. when a user first visits descriptive text in the status when a user positions
window, type ONLOAD= your Web page. bar, type ONMOUSEOVER= Note: Make sure you type the the mouse over the link.
"javascript:window.open('?', ‹ Type 'HEIGHT=?, "window.status='. double quotes (") and single
replacing ? with the location WIDTH=?')" replacing ? quotes (') correctly in steps 1
and name of the Web page with a height and width ¤ Type the text you want and 3.
that you want to appear in pixels for the pop-up to appear in the status bar.
in the pop-up window. window.
168 169
Use the WIDTH and HEIGHT attributes with the If you want to create an image rollover that is not
<IMG> tag to specify the dimensions for an image a link, create a text link that will activate the image
rollover. This ensures that both images will rollover. When a user positions the mouse over
CREATE AN IMAGE ROLLOVER display the same size on your Web page.
Example:
the text link, the image rollover will change. When
creating the image rollover, place the text for the
link and the </A> tag before the <IMG> tag for the
<IMG SRC="logo.gif" NAME="rollover" image rollover.
se JavaScript to create an image rollover, Then use the ONMOUSEOVER event attribute WIDTH="100" HEIGHT="50">
U which is an image link that changes to

another image when a user positions
the mouse over the link.
to specify the image you want to appear when
a user positions the mouse over the link. Use
the ONMOUSEOUT event attribute to specify the
The name you specify for your original image
using the NAME attribute does not need to be
"rollover" as shown in step 2 below. If you use
Example:
<A HREF="zoo.html"
ONMOUSEOVER="document.rollover.src='giraffe.gif'"
ONMOUSEOUT="document.rollover.src='lion.gif'">
image you want to appear when a user moves Come see the animals!</A><IMG SRC="lion.gif"
Image rollovers are often used to enhance a different name, make sure you adjust the NAME="rollover">
the mouse away from the link. Most people
menus on a Web page. For example, creating values of the ONMOUSEOVER and ONMOUSEOUT
specify the original image for the ONMOUSEOUT event attributes to use the name you choose. If your
an image rollover for each item in a menu can event attribute so that the original image will Web page contains more than one image rollover,
help users determine which menu item they reappear when a user moves their mouse each image rollover must use a different name.
are selecting. When a user positions the mouse away from the link.
over an item, the item will change. Example:
When creating an image rollover, use images <A HREF="family.html"
To create an image rollover, add the image you that are the same size to prevent Web browsers
ONMOUSEOVER="document.picture.src='parents.jpg'"
ONMOUSEOUT="document.picture.src='kids.jpg'">
want to originally appear on your Web page from resizing one of the images to match <IMG SRC="kids.jpg" NAME="picture"></A>
and make the image a link using the <A> tag. the other.
CREATE AN IMAGE ROLLOVER

<TITLE>In Focus</TITLE> <TITLE>In Focus</TITLE> <TITLE>In Focus</TITLE>
<H1> <CENTER> <FONT COLOR="#FF0000">IN FOCUS</FONT><I> Wildlife Photography <H1><CENTER><FONT COLOR="#FF0000">IN FOCUS</FONT><I> Wildlife Photography <H1> <CENTER><FONT COLOR="#FF0000">IN FOCUS</FONT><I> Wildlife Photography
</I> </CENTER> </H1> </I></CENTER></H1> </I></CENTER></H1>
<CENTER> <IMG SRC="cougar.jpg" NAME="rollover"> </CENTER> <CENTER> <A HREF="photos.html"> <IMG SRC="cougar.jpg" NAME="rollover"> </A> <CENTER> <A HREF="photos.html" ONMOUSEOVER="document.rollover.src='duck.jpg'"
</CENTER> ONMOUSEOUT="document.rollover.src='cougar.jpg'" ><IMG SRC="cougar.jpg" NAME=
<P> <B> <CENTER> Click the image above to view a selection of wildlife photographs taken by "rollover"></A></CENTER>
our professional photographers.</CENTER></B></P> <P><B><CENTER>Click the image above to view a selection of wildlife photographs taken by
our professional photographers.</CENTER></B></P> <P><B><CENTER> Click the image above to view a selection of wildlife photographs taken by
</BODY> our professional photographers.</CENTER></B> </P>
</HTML> </BODY>
</HTML> </BODY>
</HTML>
⁄ Type <IMG SRC="?" Note: For information on ‹ Before the <IMG> tag, Note: To link the image to a ˇ In the <A> tag, type Á Type ONMOUSEOUT= ■ The Web browser displays ■ A user can click the
replacing ? with the location specifying the location and type <A HREF="?"> replacing ? Web page in your own Web ONMOUSEOVER="document. "document.rollover.src='?'" the image you specified in image to display the
and name of the image you name of an image, see the with the address of the Web site, see the top of page 75. rollover.src='?'" replacing ? replacing ? with the location step 1. Web page you specified.
want to originally appear on top of page 45. page you want to appear with the location and name and name of the image you
your Web page. Then add a when a user clicks the image.
› After the <IMG> tag, of the image you want to added in step 1. ■ When a user positions
blank space. ¤ Type NAME="rollover"> type </A> to complete
appear when a user positions the mouse over the image,
to specify a name for the the link. Note: Make sure you include the image will change to the
the mouse over the original
image. image. Then add a blank both the single (') and double (") image you specified in step 5.
170 space. quotation marks in steps 5 and 6. 171
VALIDATE FORM INFORMATION When specifying the characters that you do
not want users to enter in step 1 on page 172,
JavaScript can be used to validate almost any
type of form information. For example, there are
type each character without adding spaces JavaScripts available that will verify whether users
se JavaScript to validate the information form element. This can help ensure that between the characters. When entering letters, have filled in all the required information in a form,
U that users enter in a form on your Web

page. This helps ensure that users enter
the correct information.
users enter all the information you require. For
example, specify a minimum of 10 characters
for a text box that requests a telephone number
keep in mind that you must enter uppercase
and lowercase letters separately. To specify
a range of characters that you do not want
users to enter, see the following chart.
whether they have entered a valid e-mail address
or whether they have entered information in the
proper format. If you know the JavaScript scripting
language, you can create your own form validation
to ensure that users include the area code. JavaScripts. To find JavaScripts on the Internet that
There are many ways to validate form information SPECIFY USERS CANNOT ENTER will validate information in your forms, visit the
using JavaScript. For example, use JavaScript When using JavaScript to validate form javascript.internet.com and www.javascripts.com
to ensure that a user does not enter specific information, you can create an error message A-Z Uppercase letters. Web sites.
a-z Lowercase letters.
characters in a text box or large text area. This that you want to appear when users enter
0-9 Any number.
is useful for detecting errors that users may incorrect information. The error message you \d Any number.
make, such as accidentally entering a name create should help users determine how to \s Any spacing.
in a text box that requests a telephone number. enter the correct information. For example, \w Any letters, numbers or the
a message such as "Please enter a valid Zip underscore character (_).
JavaScript is also useful for verifying that users Code" is more helpful than a message that
enter the minimum number of characters in a reads "Invalid Entry."
VALIDATE CHARACTERS VALIDATE MINIMUM LENGTH

Customer Information - Microsoft Internet Explorer Customer Information - Microsoft Internet Explorer
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Customer Information</TITLE> <TITLE>Customer Information</TITLE>
</HEAD> </HEAD>
<BODY>
Customer Information <BODY>
Customer Information
<H1> <CENTER>Customer Information</CENTER></H1> <H1> <CENTER>Customer Information</CENTER> </H1>
Please enter the following information: Please enter the following information:
<P>Please enter the following information:</P> <P>Please enter the following information:</P>
<FORM METHOD="post" ACTION="/cgi-bin/address.pl"> <FORM METHOD="post" ACTION="/cgi-bin/address.pl">

First Name: 555-1212 First Name:
<BR>First Name:<INPUT TYPE="text" NAME="firstname" SIZE="20" ONCHANGE="var <BR>First Name:<INPUT TYPE="text" NAME="firstname" SIZE="20">
Last Name: Last Name:
pattern=/[0-9]/; if (pattern.test(this.value)) alert('Please enter a valid name.')" > <BR>Last Name:<INPUT TYPE="text" NAME="lastname" SIZE="20">
<BR>Last Name:<INPUT TYPE="text" NAME="lastname" SIZE="20"> Street Address: <BR>Street Address:<INPUT TYPE="text" NAME="street" SIZE="30"> Street Address:
<BR>Street Address:<INPUT TYPE="text" NAME="street" SIZE="30"> <BR>Zip Code:<INPUT TYPE="text" NAME="zip" SIZE="5">
Zip Code: Zip Code:
<BR>Zip Code:<INPUT TYPE="text" NAME="zip" SIZE="5"> <BR>Phone Number:<INPUT TYPE="text" NAME="phone" SIZE="10" ONCHANGE="
<BR>Phone Number:<INPUT TYPE="text" NAME="phone" SIZE="10"> Phone Number: if (this.value.length < 10) aler t('Please include your area code.')" > Phone Number: 555-1212
</FORM> </FORM>
</BODY> </BODY>
</HTML> </HTML>
⁄ In the <INPUT> or ¤ Type if (pattern.test ■ The Web browser ■ If a user enters any ⁄ In the <INPUT> or ¤ Type alert('?')" ■ The Web browser ■ If a user enters
<TEXTAREA> tag for the text (this.value)) alert('?')" displays the text box of the characters you <TEXTAREA> tag for the text replacing ? with the displays the text box fewer characters than
box or large text area you want replacing ? with the error or large text area on specified in step 1, the box or large text area you want error message you or large text area on you specified in step 1,
to validate, type ONCHANGE= message you want to your form. error message you to validate, type ONCHANGE=" want to display if a your form. the error message you
"var pattern=/[?]/; replacing ? display if a user enters created will appear. if (this.value.length < ?) user enters too few created will appear.
with the characters you do the characters you replacing ? with the minimum characters.
not want users to enter. specified in step 1. number of characters you
want users to enter.
Note: See the top of page 173
for more information.
172 173
HTML WEB PAGE EXTRAS 12
INDENT TEXT USING LISTS CREATE A DROP CAP
T A
he HTML standard does not provide a tag When you use the <UL> tag to indent text, drop cap is a large capital letter The drop cap image you create should
for indenting text. Using the <UL> tag Web browsers will indent every line in the you can use at the beginning of a have a transparent background to ensure
allows you to trick Web browsers into section of text. To indent only the first line paragraph to enhance the appearance that it will blend into the background
indenting text. of text, use the <DD> tag. The <DD> tag is of the paragraph. of your Web page. For information on
designed to mark the beginning of a definition making an image background transparent,
The <UL> tag is designed for creating unordered when creating a definition list. For more To add a drop cap to your Web page, create see page 68.
lists, which are indented from the left edge of a information on definition lists, see page 43. a GIF image of the drop cap and then add
Web page. When creating an unordered list, you the image to your page. Use the <IMG> tag to add a drop cap
use the <LI> tag to have each list item display a Although most Web browsers support using image to your Web page. Add the image
bullet. Using the <UL> tag without the <LI> tag the <UL> and <DD> tags to indent text, the To create a drop cap image, you will need beside the paragraph you want to contain
allows you to indent text without displaying a HTML standard recommends that you use an image editing program such as Jasc Paint the drop cap and use the ALIGN attribute
bullet beside the text. For more information on style sheets to indent text. For more Shop Pro or Adobe Photoshop. Consult the with the left value to wrap the text in
unordered lists, see page 40. information on style sheets, see page 196. documentation that came with your image the paragraph around the image.
editing program to determine how to create
an image.
INDENT TEXT USING LISTS CREATE A DROP CAP
<HTML> C:\My Documents\Web Pages\index.html <HTML>

<HEAD> <HEAD>
<TITLE>Classical Music Composers</TITLE> <TITLE>Classical Music Composers</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H2>Beethoven</H2> <H2>Beethoven</H2>
<P> <UL> Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent most of <P> <IMG SRC="dropcap.gif" ALIGN="left"> udwig van Beethoven was born in Bonn, Ge
in Vienna, where he earned a living giving concerts, teaching piano and selling his in 1770. He spent most of his life in Vienna, where he earned a living giving concer ts, te
compositions. piano and selling his compositions.
<BR>One of the most fascinating aspects of Beethoven's life was his triumph over deafn <BR>One of the most fascinating aspects of Beethoven's life was his triumph over deafn
which struck him during adulthood. In fact, he composed some of his most powerful work which struck him during adulthood. In fact, he composed some of his most powerful work
losing his hearing. </UL> </P> losing his hearing.</P>
<H2>Bach</H2> <H2>Bach</H2>
<P>Johann Sebastian Bach was born into a family of musicians in 1685 in Eisenach, Ge <P>Johann Sebastian Bach was born into a family of musicians in 1685 in Eisenach, Ge
Bach's works include church organ and choral music, music for chamber orchestras and Bach's works include church organ and choral music, music for chamber orchestras and
200 cantatas. Although he was more respected as an organist during his lifetime, Bach's 200 cantatas. Although he was more respected as an organist during his lifetime, Bach's
compositions influenced many later composers, including Beethoven and Mozart.</P> compositions influenced many later composers, including Beethoven and Mozar t.</P>
</BODY> </BODY>
</HTML> </HTML>
⁄ Type <UL> in front ¤ Type < /UL> after the ■ The Web browser Note: To indent only the first ⁄ In your image editing ¤ In your HTML document, ■ The Web browser ■ The surrounding
of the text you want to text you want to indent. indents the text. line of text in a paragraph, program, create the letter type <IMG SRC="?" ALIGN= displays the drop cap text wraps around
indent. type <DD> in front of the for your drop cap, making "left"> where you want the on your Web page. the drop cap.
paragraph and type </ DD> the background of the drop cap to appear, replacing ?
after the paragraph. image transparent as with the location and name of
shown on page 68. the drop cap image on your
computer.
Note: To specify the location and
name of an image, see the top of
174 page 45. 175
CREATE A MARQUEE Use the BGCOLOR attribute to change the
background color of a marquee. Specify the
To change the size of a marquee, use the WIDTH
and HEIGHT attributes to specify a new size in
name or hexadecimal value for the color you pixels or as a percentage of the Web browser
se the <MARQUEE> tag when you of times you want scrolling text to move window. Changing the width or height of a marquee
U
want to use. For a list of colors, see the color
want to have text scroll across a user's across the screen. chart at the front of this book. will not change the size of the text in the marquee.
screen. Example: Example:
Use the SCROLLAMOUNT attribute to specify
<MARQUEE BEHAVIOR="scroll" DIRECTION="left" <MARQUEE BEHAVIOR="alternate" DIRECTION="right"
The BEHAVIOR attribute allows you to specify the number of pixels you want text to move SCROLLAMOUNT="2" SCROLLDELAY="60" SCROLLAMOUNT="5" SCROLLDELAY="80" WIDTH="600"
the way you want text for a marquee to scroll. at a time. The SCROLLDELAY attribute lets BGCOLOR="red">Breaking News!</MARQUEE> HEIGHT="30">SALE! Two days only!</MARQUEE>
Use the scroll value to have text enter on you specify the number of milliseconds you
one side of the screen and exit on the opposite want to elapse between each movement. Use the HSPACE and VSPACE attributes to add
side. The slide value has text enter on one By default, Internet Explorer uses a minimum space around a marquee on your Web page. The
side of the screen and stop when it reaches When creating a marquee, enter the text SCROLLDELAY value of 60 milliseconds, even if HSPACE attribute adds space to the left and right
the opposite side. Use the alternate value you want the marquee to display between you specify a smaller value. Use the TRUESPEED sides of a marquee and the VSPACE attribute adds
to have text move back and forth across the the <MARQUEE> and </MARQUEE> tags. You attribute to override the minimum value. This is space to the top and bottom of a marquee. Specify
screen. can format text for a marquee as you would useful when you want text to scroll more quickly the amount of space in pixels.
format any text on your Web page. Only across the screen.
Example:
The DIRECTION attribute allows you to Internet Explorer supports the <MARQUEE> Example:
<MARQUEE BEHAVIOR="scroll" DIRECTION="right"
specify the direction you want text to scroll. tag, though other Web browsers will display <MARQUEE BEHAVIOR="scroll" DIRECTION="left" SCROLLAMOUNT="5" SCROLLDELAY="60" HSPACE="10"
Use the LOOP attribute to specify the number the text you specify for a marquee as SCROLLAMOUNT="2" SCROLLDELAY="10" TRUESPEED>Visit VSPACE="10">Visit the new, updated photo
non-scrolling text. our Web site!</MARQUEE> gallery.</MARQUEE>
CREATE A MARQUEE

<TITLE>Grape Expectations</TITLE> <TITLE>Grape Expectations</TITLE> <TITLE>Grape Expectations</TITLE>
<MARQUEE BEHAVIOR="scroll" DIRECTION="left" <MARQUEE BEHAVIOR="scroll" DIRECTION="left" LOOP="25" SCROLLAMOUNT="6" <MARQUEE BEHAVIOR="scroll" DIRECTION="left" LOOP="25" SCROLLAMOUNT="6"
SCROLLDELAY="90"> Order your wine-making supplies today! </MARQUEE>
<H1>Grape Expectations</H1> <H1>Grape Expectations</H1>
<H1>Grape Expectations</H1>
<H4> <CENTER> <I>A guide to homemade wine-making for the wine connoisseur!</I> <H4><CENTER><I>A guide to homemade wine-making for the wine connoisseur!</I>
</CENTER> </H4> </CENTER></H4> <H4><CENTER> <I>A guide to homemade wine-making for the wine connoisseur!</I>
</CENTER></H4>
<P> <IMG SRC="barrel.gif" HSPACE="10" VSPACE="10" ALIGN="left" WIDTH="80" <P><IMG SRC="barrel.gif" HSPACE="10" VSPACE="10" ALIGN="left" WIDTH="80"
HEIGHT="110">Welcome to our Web site about wine-making. Our names are Rosemary and HEIGHT="110">Welcome to our Web site about wine-making. Our names are Rosemary and <P><IMG SRC="barrel.gif" HSPACE="10" VSPACE="10" ALIGN="left" WIDTH="80"
Alan Baker and we have been making our own wine for 20 years. Currently we have over 200 Alan Baker and we have been making our own wine for 20 years. Currently we have over 200 HEIGHT="110">Welcome to our Web site about wine-making. Our names are Rosemary and
bottles of homemade wine in our wine cellar. These pages contain everything you need to bottles of homemade wine in our wine cellar. These pages contain everything you need to Alan Baker and we have been making our own wine for 20 years. Currently we have over 200
know to make your own red, white or blush wine, including the equipment you need, what know to make your own red, white or blush wine, including the equipment you need, what bottles of homemade wine in our wine cellar. These pages contain everything you need to
kind of grapes you should buy and tips and tricks to make your wine the best you've ever kind of grapes you should buy and tips and tricks to make your wine the best you've ever know to make your own red, white or blush wine, including the equipment you need, what
tasted! So jump right in and don't be afraid to have <I>Grape Expectations!</I></P> tasted! So jump right in and don't be afraid to have <I>Grape Expectations!</I></P> kind of grapes you should buy and tips and tricks to make your wine the best you've ever
tasted! So jump right in and don't be afraid to have <I>Grape Expectations!</I></P>
<P> <IMG SRC="grapes.gif"> <B> <A HREF="equipment.html">Equipment</A>   <P><IMG SRC="grapes.gif"><B><A HREF="equipment.html">Equipment</A>
                            <P><IMG SRC="grapes.gif"><B><A HREF="equipment.html">Equipment</A>

⁄ Type <MARQUEE where ‹ To specify which › To specify the number ˇ Type SCROLLAMOUNT="?" Á Type SCROLLDELAY="?"> ‡ Type the text you want ■ The Web browser displays
you want the marquee to direction you want of times you want text replacing ? with the number replacing ? with the number the marquee to display. the marquee on your Web
appear on your Web page. the text to scroll, to scroll across the screen, of pixels you want the text of milliseconds you want to page using the settings you
type DIRECTION="left" type LOOP="?" replacing ? to move at a time. elapse before each movement ° Type </MARQUEE> to specified.
¤ Type BEHAVIOR="?" or DIRECTION="right". with the number of times. of the text. complete the marquee.
replacing ? with the way you
want the text for the marquee to Note: To have the text scroll
scroll (scroll, slide or alternate). continuously, type LOOP="infinite"
in step 4.
176 177
PLACE TEXT OVER AN IMAGE If you want a border to appear around the image,
add a border to the table containing the image.
Set the BORDER attribute to a value greater than
When you add an image to a table, the image
is displayed as a block-level element, meaning
that a blank line appears above and below the
0 pixels to specify a width for the border. image. If you want the image to appear on the
same line as the surrounding elements, use
I
f you want text to appear on top of an image same size as the image you want to add to Example:
style sheets to change the table containing the
on your Web page, you can use a table to the cell. To determine the size of an image, <TABLE BORDER="10" CELLPADDING="0"
image to an inline element. For information on
position the text and the image. see page 58. Use the BACKGROUND attribute changing the display of elements, see page 229.
to add the image to the background of the cell.
To place text over an image using a table, create Placing text over an image is useful for creating Example:
a table with one row that contains one cell. Set The VALIGN attribute allows you to specify the navigation buttons on your Web page. To create <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"
STYLE="display: inline">
the BORDER, CELLPADDING and CELLSPACING way you want to vertically align the text over a navigation button, make the text that appears
attributes to a value of 0 pixels to remove the the image. The text you type between the <TD> over the image a link. Text you make a link will
appear underlined.
borders and spacing from the cell. This helps and </TD> tags will appear over the image.
ensure that the text and image will line up Example:
properly. Text can also be placed over an image by <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0">
absolutely positioning the text using style <TR>
<TD WIDTH="70" HEIGHT="72" BACKGROUND="button.gif"
Use the WIDTH and HEIGHT attributes to specify sheets. For information on absolute positioning, VALIGN="middle"><A HREF="index.html">Home</A></TD>
a size for the cell in pixels. To ensure the entire see page 236. </TR>
</TABLE>
image will appear in the cell, make the cell the
PLACE TEXT OVER AN IMAGE
<H1><I>Into the Wild!</I></H1> <H1><I>Into the Wild!</I></H1> <H1><I>Into the Wild!</I></H1>

<P><B>Would you like to venture beyond the beaten path? Do so with Into the Wild's <P><B>Would you like to venture beyond the beaten path? Do so with Into the Wild's <P><B>Would you like to venture beyond the beaten path? Do so with Into the Wild's
adventure tours.</B> adventure tours.</B> adventure tours.</B>
<BR>Whether you'd like to take a nature photography tour, camp in the rugged wilderness of <BR>Whether you'd like to take a nature photography tour, camp in the rugged wilderness of <BR>Whether you'd like to take a nature photography tour, camp in the rugged wilderness of
the Rocky Mountains or go on a canoeing adventure, we have the trip for you! the Rocky Mountains or go on a canoeing adventure, we have the trip for you! the Rocky Mountains or go on a canoeing adventure, we have the trip for you!
<BR>We provide once-in-a-lifetime adventures for groups or individuals. Call today for <BR>We provide once-in-a-lifetime adventures for groups or individuals. Call today for <BR>We provide once-in-a-lifetime adventures for groups or individuals. Call today for
information on our packages and sign up for an unforgettable experience!</P> information on our packages and sign up for an unforgettable experience!</P> information on our packages and sign up for an unforgettable experience!</P>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"> <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"> <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR> <TR> <TR>
<TD WIDTH="150" HEIGHT="100" <TD WIDTH="150" HEIGHT="100" BACKGROUND="skier.jpg" VALIGN="bottom"> <TD WIDTH="150" HEIGHT="100" BACKGROUND="skier.jpg" VALIGN="bottom">
Skiing in the Rockies</TD>
<P>Some of our most popular trips are alpine skiing excursions in the Rocky Mountains. <P>Some of our most popular trips are alpine skiing excursions in the Rocky Mountains. </TR>
We will fly you to the top of the slopes by helicopter and provide comfortable We will fly you to the top of the slopes by helicopter and provide comfortable </TABLE>
accommodations at the end of a fun-filled day! Cross-country ski packages are also accommodations at the end of a fun-filled day! Cross-country ski packages are also
available!</P> available!</P> <P>Some of our most popular trips are alpine skiing excursions in the Rocky Mountains. We
will fly you to the top of the slopes by helicopter and provide comfortable accommodations at
</BODY> </BODY> the end of a fun-filled day! Cross-country ski packages are also available!</P>
</HTML> </HTML>
</BODY>
</HTML>
⁄ Type <TABLE BORDER="0" ‹ To create a cell the same › To add the image to ˇ Type VALIGN="?"> Á Type the text you ° Type < /TR> to ■ The Web browser Note: If the text is difficult to
CELLPADDING="0" size as the image you want the background of the cell, replacing ? with the way want to appear over complete the row. places the text over read, you may want to change
CELLSPACING="0"> to create to use, type <TD WIDTH="?" type BACKGROUND="?" you want to vertically the image. the image. the color of the text or apply
a table that will not display HEIGHT="?" replacing ? with replacing ? with the align the text over the · Type < /TABLE> to
‡ Type < /TD> to complete the table. other formatting to the text.
any borders or extra spacing. the width and height of the location and name of the image (top, middle or
image in pixels. image you want to use. bottom).
complete the cell.
¤ Type <TR> to create a row
in the table. Note: To determine the size of an Note: To specify the location and
image, see page 58. name of an image, see the top
of page 45.
178 179
USE ANIMATED GIF IMAGES CREATE TOOL TIPS FOR ELEMENTS

T
se animated GIF images to add interest to Some image editing programs offer tools for creating he TITLE attribute allows you to provide You do not need to create tool tips for
U your Web pages. Adding an animated GIF

image is similar to adding a regular image
to a Web page.
your own animated GIF images. For example, Jasc Paint
Shop Pro comes with the Animation Shop program.
You can also obtain programs on the Internet, such as
additional information about an element
on your Web page. When a user positions
the mouse over the element, Web browsers will
images if you have used the ALT attribute
to provide alternative text for the images.
Images you have provided alternative text
the GIF Construction Set program, which is available display the information as a tool tip, which is for will automatically display the alternative
Animated GIF image files consist of a series of images at the www.mindworkshop.com/alchemy/gifcon.html a small box containing text. text as a tool tip. For information on adding
that Web browsers display one after another. Since Web site. alternative text to images, see page 44.
the animation is a collection of images, users do The TITLE attribute can be used with most
not need a special program to view the animation. When adding animated GIF images to your Web pages, HTML tags. For example, use the TITLE Although the TITLE attribute is part of
Anyone who uses a Web browser that displays keep in mind that animated images often have large file attribute with the <A> tag to add a tool tip the HTML standard, it is currently only
images will be able to see animated GIF images. sizes and may take a long time to appear on a user's to a link. This can help users determine where supported by Internet Explorer.
screen. Overusing animated GIF images may adversely the link will take them. Tool tips are also useful
Interesting animated GIF images are available at the affect the transfer speed of your Web pages. for adding brief instructions or examples to
www.animfactory.com and www.animationlibrary.com form elements to help users determine the
Web sites. Make sure you have permission to use type of information they should enter.
animated GIF images you obtain on the Internet.
USE ANIMATED GIF IMAGES CREATE TOOL TIPS FOR ELEMENTS
<HTML>
<HEAD> <H4> <CENTER> <I>A guide to homemade wine-making for the wine connoisseur!</I>
<TITLE>In Focus</TITLE> </CENTER> </H4>
</HEAD>
<BODY> IN FOCUS Wildlife Animation <P> <IMG SRC="barrel.gif" HSPACE="10" VSPACE="10" ALIGN="left" WIDTH="80"
HEIGHT="110">Welcome to our Web site about wine-making. Our names are Rosemary
and Alan Baker, and we have been making our own wine for 20 years. Currently we have
<H1><CENTER><FONT COLOR="#FF0000">IN FOCUS</FONT> <I> Wildlife Animation<
over 200 bottles of homemade wine in our wine cellar. These pages contain everything you
</CENTER></H1>
need to know to make your own red, white or blush wine, including the equipment you need,
what kind of grapes you should buy and tips and tricks to make your wine the best you've
<CENTER> <IMG SRC="bear.gif"> </CENTER> ever tasted! So jump right in and don't be afraid to have <I>Grape Expectations!</I> </P>
<P><B><CENTER>Welcome to IN FOCUS. This Web site is designed to showcase the <IMG SRC="grapes.gif"> <B> <A HREF="start.html" TITLE="Everything you need to know to
work of some of the country's best computer graphic artists!</CENTER> </B> </P> start making your own wine!">Getting Started</A>

</BODY>
</HTML> Welcome to IN FOCUS. This Web site is designed to showcase the work of some <IMG SRC="grapes.gif"> <B> <A HREF="equipment.html">Equipment</A>
of the country's best computer graphic artists!
<IMG SRC="grapes.gif"> <A HREF="tips.html">Tips and Tricks</A> </B>
</BODY>
</HTML>
⁄ Create or obtain the ¤ Type <IMG SRC="?"> ■ The Web browser ⁄ In the tag for the Note: The TITLE attribute ■ When a user positions
animated GIF image you where you want the animated displays the animated element you want cannot be used with the <BASE>, the mouse over the element,
want to add to your image to appear, replacing ? image on your Web page. to display a tool tip, <BASEFONT>, <HEAD>, the Web browser displays
Web page. with the location and name of type TITLE="?" replacing ? <HTML>, <META>, <PARAM>, the information you specified
the image on your computer. with the text you want <SCRIPT> or <TITLE> tag. as a tool tip.
to appear when a user
Note: For information on specifying positions the mouse
the location and name of an image, over the element.
see the top of page 45.
180 181
CREATE A WATERMARK USE A HIT COUNTER

A
se a watermark to add an interesting visual move over the image. If the image affects the dding a hit counter, or access counter, to There are a wide variety of hit counters available,
U effect to your Web page. A watermark is a

background image that remains stationary
while a user scrolls through the contents of a
readability of the text, you may need to change
the color of the text. To change the color of text,
see page 32.
your Web page allows you to keep track of
the number of times people have visited
your Web page.
including hit counters that can perform advanced
tasks, such as determining where users are from,
the time of day the users visited your Web page
Web page. and the average length of time users displayed
The background image you use for a watermark A hit counter displays the number of times a Web your page.
To create a watermark, use the BACKGROUND attribute can be a small image that repeats to fill the page has been loaded. For example, a hit counter
with the <BODY> tag to add a background image to background area or a large image that takes will display "50" if one person loads the Web page
your Web page. To prevent the background image up the entire background of the Web page. 50 times or if 50 people load the page once.
from moving when a user scrolls through your Web
page, use the BGPROPERTIES attribute with the Using the BACKGROUND and BGPROPERTIES
fixed value. attributes to create a watermark is currently only OBTAIN A HIT COUNTER
supported by Internet Explorer.
When selecting a background image for a watermark,
keep in mind that the text on your Web page will Before obtaining a hit counter, you should contact Some companies offer hit counters for a fee. There
your Web presence provider to make sure that they are also free hit counters available. Companies
CREATE A WATERMARK
allow hit counters on their Web server. Some Web that offer free hit counters may require your Web
presence providers offer hit counters you can use. site to be non-profit and display an advertisement
Your Web presence provider may also offer a Web for the company on your Web page. Free hit
page that helps you add a hit counter to your counters are available at the counter.bloke.com,
<HTML>
Web page. www.pagecount.com and www.sitemeter.com
<HEAD> Web sites.
<TITLE>Classical Music Composers</TITLE> If your Web presence provider does not offer a hit
</HEAD>
<BODY BACKGROUND="clouds.jpg" BGPROPERTIES="fixed" > counter, you can find hit counters on the Internet.
<H2>Beethoven</H2>
<P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent most of his life
Vienna, where he earned a living giving concerts, teaching piano and selling his
compositions.
<BR>One of the most fascinating aspects of Beethoven's life was his triumph over deafn
which struck him during adulthood. In fact, he composed some of his most powerful work
after losing his hearing.</P>
ADD A HIT COUNTER
<H2>Bach</H2>
<P>Johann Sebastian Bach was born into a family of musicians in 1685 in Eisenach,
Germany. Bach's works include church organ and choral music, music for chamber
orchestras and over 200 cantatas. Although he was more respected as an organist durin A hit counter can be added to any page in your Web Gateway Interface) scripts, which are programs that
lifetime, Bach's compositions influenced many later composers, including Beethoven and
Mozar t.</P> site. Most people add a hit counter to their home a Web server runs to process information. If your
<H2>Mozar t</H2>
page, since this is the first page people will see when Web server does not allow you to use CGI scripts,
<P>Wolfgang Amadeus Mozar t was born on January 27, 1756, in Salzburg, Austria. He w they visit the Web site. If you want to determine which you may want to use a different type of hit counter,
the youngest person to ever compose music His unique style is very recognizable and
of your pages are the most popular, add hit counters such as a Java applet hit counter. A Java applet is a
to multiple Web pages in your Web site. program written using the Java programming language.
⁄ In the <BODY> tag, Note: To specify the location ■ The Web browser ■ When a user scrolls
type BACKGROUND="?" and name of an image, see the displays the background through the Web page, For information on Java applets, see page 190.
The method you use to add a hit counter to your
replacing ? with the top of page 45. image on your Web page. the background image
Web page depends on the type of hit counter you
location and name of the will not move.
background image on your
¤ Type BGPROPERTIES= are adding. Some hit counters use CGI (Common
"fixed" to make the image
computer that you want to
use as a watermark. Then a watermark.
add a blank space.
182 183
USE PIXEL SHIMS
If you use a colored pixel shim, you may want The <SPACER> tag also lets you add a block of
pixel shim is a small GIF image that you you want to use. To create an invisible pixel to add space around the pixel shim to prevent space to a Web page. Use the block value with
A can add to your Web page to help adjust

the spacing between elements on the page.
Pixel shims transfer quickly over the Internet
shim, make the pixel shim image transparent
as shown on page 68.
Once you have created a pixel shim, use the
elements from appearing directly beside the pixel
shim. This can help enhance the appearance of
your Web page. Use the HSPACE attribute to add
space to both the left and right sides of a pixel
the TYPE attribute to create the block of space.
The WIDTH and HEIGHT attributes allow you to
specify a width and height for the block of space.
To wrap text around the block of space, use the
and are supported by most Web browsers. shim. The VSPACE attribute allows you to add ALIGN attribute with the left or right value.
<IMG> tag to add the pixel shim to your Web
space to both the top and bottom of a pixel shim. The <SPACER> tag is not part of the HTML
To create a pixel shim image, you will need an page. Use the WIDTH and HEIGHT attributes Specify the amount of space you want to add in standard and is only supported by Netscape
image editing program such as Jasc Paint Shop to specify the dimensions for the amount of pixels. Navigator.
Pro or Adobe Photoshop. The pixel shim image space you want the pixel shim to occupy.
Example: Example:
you create should be one pixel wide and one pixel
high. Consult the documentation that came with If you want the pixel shim to appear beside a <IMG SRC="myshim.gif" WIDTH="100" <SPACER TYPE="block" WIDTH="100" HEIGHT="350"
your image editing program to determine how block of text, use the ALIGN attribute with the HEIGHT="400" ALIGN="left" HSPACE="10" ALIGN="left">
left or right value to wrap the text around VSPACE="10">
to create an image.
the pixel shim.
If you want to add a block of colored space to
your Web page, create a pixel shim in the color
USE PIXEL SHIMS

<TITLE>Into the Wild</TITLE> <TITLE>Into the Wild</TITLE> <TITLE>Into the Wild</TITLE>
<H1><I>Into the Wild!</I></H1> <H1><I>Into the Wild!</I></H1> <H1> <I>Into the Wild!</I> </H1>
<P><IMG SRC="cougar.jpg" ALIGN="left"> <P><IMG SRC="cougar.jpg" ALIGN="left"> <P> <IMG SRC="cougar.jpg" ALIGN="left">
<IMG SRC="myshim.gif" <IMG SRC="myshim.gif" WIDTH="50" HEIGHT="35"> <IMG SRC="myshim.gif" WIDTH="50" HEIGHT="35" ALIGN="left" >
<B>Would you like to venture beyond the beaten path? Do so with Into the Wild's a <B>Would you like to venture beyond the beaten path? Do so with Into the Wild's a <B>Would you like to venture beyond the beaten path? Do so with Into the Wild's a
tours.</B> tours.</B> tours.</B>
<BR>Whether you'd like to take a nature photography tour, camp in the rugged wil <BR>Whether you'd like to take a nature photography tour, camp in the rugged wil <BR>Whether you'd like to take a nature photography tour, camp in the rugged wil
<BR>We provide once-in-a-lifetime adventures for groups or individuals. Call today <BR>We provide once-in-a-lifetime adventures for groups or individuals. Call today <BR>We provide once-in-a-lifetime adventures for groups or individuals. Call today
<P><IMG SRC="skier.jpg" ALIGN="right"> <P><IMG SRC="skier.jpg" ALIGN="right"> <P> <IMG SRC="skier.jpg" ALIGN="right">
<H3>Skiing</H3> <H3>Skiing</H3> <H3>Skiing</H3>
Some of our most popular trips are alpine skiing excursions in the Rocky Mountain Some of our most popular trips are alpine skiing excursions in the Rocky Mountain Some of our most popular trips are alpine skiing excursions in the Rocky Mountain
fly you to the top of the slopes by helicopter and provide comfor table accomodatio fly you to the top of the slopes by helicopter and provide comfortable accomodatio fly you to the top of the slopes by helicopter and provide comfor table accomodatio
⁄ In your image editing ¤ In your HTML document, ‹ Type WIDTH="?" ■ You can also specify a › To wrap text around the Note: Specifying the left ■ The Web browser displays
program, create a GIF image type <IMG SRC="?" where HEIGHT="?"> replacing ? WIDTH or HEIGHT value pixel shim, type ALIGN="left" value will wrap text around the the pixel shim as a space on
that measures 1 pixel by you want to add the pixel with a width and height in as a percentage of the or ALIGN="right" after the right side of the pixel shim, your Web page.
1 pixel. shim, replacing ? with the pixels for the amount of Web browser window HEIGHT attribute. while specifying the right
location and name of the space you want the pixel (example: 30%). value will wrap text around the
Note: To create an invisible pixel pixel shim image on your shim to occupy. left side of the pixel shim.
shim, make the image transparent computer.
as shown on page 68.
Note: To specify the location and
name of an image, see the top of
184 page 45. 185
DISPLAY ANOTHER WEB To create a slide show that automatically displays
a series of Web pages, perform the steps below
Some Web servers can automatically refresh
embedded files on a Web page, such as images
PAGE AUTOMATICALLY for each Web page you want to include in the
slide show. If you want the slide show to run
continuously, make sure the last Web page
and videos. This is useful for updating information
such as a weather map or a traffic video. Contact
your Web presence provider to determine if your
specifies the location of the first Web page in Web server will allow you to automatically refresh
T
he <META> tag allows you to have a Web the user's Web browser. Use the HTTP-EQUIV
the slide show. If you do not want the slide show embedded files.
page automatically display another Web attribute with the Refresh property to to run continuously, do not perform the steps
page after a certain period of time. This specify that you want a Web server to include below for the last Web page in the slide show.
is useful for creating interesting title pages for instructions in the HTTP header fields that
your Web site and for redirecting Web browsers will have Web browsers automatically display If you want Web browsers to automatically
when a Web page has moved. a new page. redisplay the same Web page, do not include the
URL attribute when performing the steps below.
A Web page that automatically displays another Use the CONTENT attribute to specify the This allows you to repeatedly refresh your Web
Web page is a client-pull document. Client-pull number of seconds you want to elapse before page and is useful for updating Web pages that
documents instruct Web browsers to retrieve the Web browser automatically displays another contain information that is constantly changing,
information from a Web server. Web page. The URL attribute lets you specify such as the weather or news.
the location and name of the Web page you Example:
When a user displays a Web page, the Web want to automatically appear. Make sure you <META HTTP-EQUIV="Refresh" CONTENT="30">
server that stores the page sends HTTP header give users enough time to read the contents
fields containing information about the page to of your Web page.
DISPLAY ANOTHER WEB PAGE AUTOMATICALLY

<TITLE>This Page Has Moved</TITLE> <TITLE>This Page Has Moved</TITLE> <TITLE>This Page Has Moved</TITLE>
<META HTTP-EQUIV="Refresh" <META HTTP-EQUIV="Refresh" CONTENT="10; <META HTTP-EQUIV="Refresh" CONTENT="10; URL=www.abccorporation.com">
<H1>This Page Has Moved!</H1> <H1>This Page Has Moved!</H1> <H1>This Page Has Moved!</H1>
<B>Please update your bookmarks! The new ABC Corporation Home Page is located at: <B>Please update your bookmarks! The new ABC Corporation Home Page is located at: <B>Please update your bookmarks! The new ABC Corporation Home Page is located at:
<A HREF="http://www.abccorporation.com"> <I>www.abccorporation.com</I> </A></B> <A HREF="http://www.abccorporation.com"><I>www.abccorporation.com</I></A> </B> <A HREF="http://www.abccorporation.com"><I>www.abccorporation.com</I> </A></B>
<P><B>You will automatically be taken to the new Web site in 10 seconds.</B> </P> <P><B>You will automatically be taken to the new Web site in 10 seconds.</B></P> <P> <B>You will automatically be taken to the new Web site in 10 seconds.</B> </P>

⁄ Between the <HEAD> and ¤ Type CONTENT="?; ‹ Type URL=?"> replacing ? Note: To specify the location ■ The Web browser ■ After the time period
</HEAD> tags on the Web replacing ? with the number with the location and name and name of a Web page in displays the first Web you specified, the other Web
page you want to automatically of seconds you want to of the Web page you want to your own Web site, see the page. page will automatically appear.
display another Web page, type elapse before another Web automatically appear. top of page 75.
<META HTTP-EQUIV="Refresh" page appears on the screen.
and then add a blank space. Then add a blank space.
186 187
Use one of the following numbers to specify
the page transition you want to appear when
ADD PAGE TRANSITIONS a user enters or exits your Web page. Specifying
transition number 23 will have a Web browser
randomly select the transition that will appear.
se the <META> tag to add page by a number. For a list of the available page
U
TRANSITION TRANSITION TRANSITION TRANSITION
transitions to your Web pages. Page transitions, see the top of page 189. NUMBER NUMBER
transitions are interesting visual effects 0 Box In 12 Random Dissolve
that appear when a user displays or leaves When adding a page transition to your Web 1 Box Out 13 Split Vertical In
your Web page. Page transitions are supported page, specify the amount of time you want 2 Circle In 14 Split Vertical Out
only by Internet Explorer. the transition to last in seconds. Keep in 3 Circle Out 15 Split Horizontal In
mind that some users may become impatient 4 Wipe Up 16 Split Horizontal Out
To have a transition appear when a user displays with page transitions that last more than a 5 Wipe Down 17 Strips Left Down
your Web page, add a Page-Enter transition. few seconds. 6 Wipe Right 18 Strips Left Up
To have a transition appear when a user leaves 7 Wipe Left 19 Strips Right Down
your Web page, add a Page-Exit transition. Avoid overusing page transitions on your 8 Vertical Blinds 20 Strips Right Up
Web pages. Users may become annoyed with 9 Horizontal Blinds 21 Random Bars Horizontal
There are many different page transitions you a Web site that displays page transitions for 10 Checkerboard Across 22 Random Bars Vertical
can use, such as Box In and Checkerboard every Web page. 11 Checkerboard Down 23 Random Transition
Across. Each page transition is represented
ADD A PAGE-ENTER TRANSITION ADD A PAGE-EXIT TRANSITION

Grape Expectations - Microsoft Internet Explorer
<HTML> <HTML>
<HEAD> <HEAD> C:\My Documents\Web Pages\index.html
<TITLE>Grape Expectations</TITLE> <TITLE>Grape Expectations</TITLE>
<META HTTP-EQUIV="Page-Enter" CONTENT="RevealTrans(Duration=3, Transition=8)"> <META HTTP-EQUIV="Page-Exit" CONTENT="RevealTrans(Duration=3, Transition =12)">
</HEAD> </HEAD>
<BODY> <BODY>
<H4> <CENTER><I>A guide to homemade wine-making for the wine connoisseur!</I> <H4> <CENTER><I>A guide to homemade wine-making for the wine connoisseur!</I>
</CENTER></H4> </CENTER> </H4>
<P> <IMG SRC="barrel.gif" HSPACE="10" VSPACE="10" ALIGN="left" WIDTH="80" <P> <IMG SRC="barrel.gif" HSPACE="10" VSPACE="10" ALIGN="left" WIDTH="80"
HEIGHT="110">Welcome to our Web site about wine-making. Our names are Rosemary and HEIGHT="110">Welcome to our Web site about wine-making. Our names are Rosemary and
Alan Baker and we have been making our own wine for 20 years. Currently we have over 200 Alan Baker and we have been making our own wine for 20 years. Currently we have over 200
bottles of homemade wine in our wine cellar. These pages contain everything you need to bottles of homemade wine in our wine cellar. These pages contain everything you need to
know to make your own red, white or blush wine, including the equipment you need, what know to make your own red, white or blush wine, including the equipment you need, what
kind of grapes you should buy and tips and tricks to make your wine the best you've ever kind of grapes you should buy and tips and tricks to make your wine the best you've ever
tasted! So jump right in and don't be afraid to have <I>Grape Expectations!</I></P> tasted! So jump right in and don't be afraid to have <I>Grape Expectations!</I> </P>
<P> <IMG SRC="grapes.gif"><B><A HREF="equipment.html">Equipment</A>   <P> <IMG SRC="grapes.gif"> <B> <A HREF="equipment.html">Equipment</A>

<IMG SRC="grapes.gif"><A HREF="start.html">Getting Started</A>    <IMG SRC="grapes.gif"> <A HREF="star t.html">Getting Started</A>
⁄ Between the <HEAD> ¤ Type Transition=?)"> ■ When a user visits ⁄ Between the <HEAD> ¤ Type Transition=?)"> ■ When a user displays
and </HEAD> tags, type replacing ? with the your Web page, the page and </HEAD> tags, type replacing ? with the a different Web page, your
<META HTTP-EQUIV= number for the transition will appear on the screen <META HTTP-EQUIV= number for the transition Web page will leave the
"Page-Enter" CONTENT= you want to use. using the page transition "Page-Exit" CONTENT= you want to use. screen using the page
"RevealTrans(Duration=?, you specified. "RevealTrans(Duration=?, transition you specified.
replacing ? with the number Note: For a list of transitions, replacing ? with the Note: For a list of transitions,
of seconds you want the see the top of page 189. number of seconds you see the top of this page.
transition to last. want the transition to last.
188 189
ADD A JAVA APPLET The HTML standard recommends that you use
the <OBJECT> tag to add objects such as Java
Some Java applets are part of a compressed file
called a Java archive, or JAR file. To use a Java
applets to your Web pages. Since Web browsers applet stored in a Java archive, use the CODE
Java applet is a program written using the proper extension in the name. Most Java applets do not yet fully support the <OBJECT> tag, the attribute to specify the name of the Java applet
A Java programming language. Java applets are

useful for adding animated and interactive
information to your Web pages.
have the .class extension.
Use the WIDTH and HEIGHT attributes to specify
the width and height of a Java applet in pixels.
<APPLET> tag is more commonly used.
In the <OBJECT> tag, type CLASSID="java: ?"
replacing ? with the location and name of the
in the Java archive. Then use the ARCHIVE
attribute to specify the location and name of
the Java archive file on your computer.
Java applet on your computer. The text you type Example:
There are many places on the Internet that offer If you do not specify the correct dimensions, between the <OBJECT> and </OBJECT> tags <APPLET CODE="lightshow.class" WIDTH="320"
Java applets. For example, Java applets are all or part of the applet may not appear on your will appear if a Web browser does not support HEIGHT="240" ARCHIVE="applets/visualfx.jar">
available at the javaboutique.internet.com and Web page. the <OBJECT> tag. </APPLET>
www.javashareware.com Web sites. If you know Example:
the Java programming language, you can create Some users may have older Web browsers that
cannot run Java applets, while others may turn off <OBJECT CLASSID="java:applets/lightshow.class" ActiveX is another programming technology
your own Java applets. To learn more about Java, WIDTH="320" HEIGHT="240">Flashing that allows you to create applets. Applets
visit the java.sun.com Web site. Java applets in their Web browsers. To specify text lights</OBJECT> created with ActiveX, called ActiveX controls,
that will appear for users with Web browsers that are commonly used to create drop-down menus
When adding a Java applet, use the CODE attribute do not run Java applets, type the text between the and dialog boxes. Many Web browsers do not
to specify the location and name of the Java applet <APPLET> and </APPLET> tags. support ActiveX controls. To learn more about
on your computer. Remember to include the ActiveX, visit the vb-world.net/activex Web site.
ADD A JAVA APPLET

<TITLE>Fireworks</TITLE> <TITLE>Fireworks</TITLE> <TITLE>Fireworks</TITLE>
<APPLET CODE="fireworks.class"> <APPLET CODE="fireworks.class" WIDTH="480" HEIGHT="200" > <APPLET CODE="fireworks.class" WIDTH="480" HEIGHT="200"> Your Web browser is unable
to display Java Applets. </APPLET>
<H1>Welcome to my fireworks Web page!</H1> <H1>Welcome to my fireworks Web page!</H1>
<P>There is nothing more exciting than celebrating the Fourth of July with some amazing <P>There is nothing more exciting than celebrating the Fourth of July with some amazing <H1>Welcome to my fireworks Web page!</H1>
fireworks!</P> fireworks!</P> <P>There is nothing more exciting than celebrating the Four th of July with some amazing
fireworks!</P>
</BODY> </BODY>
</HTML>
⁄ Click where you want Note: You can specify the ‹ In the <APPLET> tag, Note: Java applets you obtain › Type the text you ˇ Type </APPLET> to ■ The Web browser runs
the Java applet to appear location and name of a Java type WIDTH="?" HEIGHT="?" on the Internet usually come want to appear if a Web complete the Java applet. the Java applet on your
on your Web page. applet as you would specify replacing ? with the width with instructions that indicate browser does not run Web page.
the location and name of an and height of the Java applet the correct width and height Java applets.
¤ Type <APPLET CODE="?"> in pixels.
replacing ? with the location image. For more information, of the applet.
and name of the Java applet. see the top of page 45.
190 191
The coordinates you need for an image area
depend on the shape of the image area.
CREATE AN IMAGE MAP (40, 40) (140, 40)
n image map divides an image into different Before creating an image map, use an image
A areas that each link to a different Web page.

When a user clicks an area of the image, the
linked Web page will appear.
editing program such as Jasc Paint Shop Pro or
Adobe Photoshop to determine the coordinates
of each image area you want the image map to Rectangle
(240,160) (40,160) (240,160)
Polygon (Irregular Shape)

contain. Top left corner Each point on the polygon
The image you use for an image map should have
Bottom right corner
several distinct areas that users can select. For this To create an image map, add the image you
reason, photographs do not usually make good want to use to your Web page and give the
image maps. image map a name using the USEMAP attribute.
(140,100)
Then use the <MAP> tag with the NAME attribute Note: You need the coordinates
Most image maps are client-side image maps. to begin defining the information for the image (220,100) of the right edge of the circle to
Client-side image maps are interpreted by a user's map. The information for an image map can calculate the radius of the circle.
Web browser and are simpler to create than appear anywhere on your Web page. To calculate the radius, subtract the
server-side image maps, which are interpreted by Circle first coordinate for the center of the
a CGI script. For more information on server-side Center of circle circle (140) from the first coordinate
image maps, see the top of page 195. Right edge of circle for the right edge of the circle (220).
CREATE AN IMAGE MAP
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>ABC University Web Site</TITLE> <TITLE>ABC University Web Site</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H1> <I> <CENTER>Welcome to ABC University</CENTER></I></H1> <H1><I> <CENTER>Welcome to ABC University</CENTER></I></H1>
<P> <CENTER>Click a depar tment for more information:</CENTER></P> <P> <CENTER>Click a depar tment for more information:</CENTER> </P>
<CENTER> <IMG SRC="departments.gif" </CENTER> <CENTER> <IMG SRC="departments.gif" USEMAP="#menumap"> </CENTER>

<MAP NAME="menumap">
</BODY>
</HTML> </BODY>
</HTML>
DETERMINE COORDINATES ‹ Position the mouse › Write down the Á Repeat steps 3 to 5 CREATE AN IMAGE MAP ¤ Type <IMG SRC="?" ‹ Type USEMAP="#?"> ˇ Type <MAP NAME="?">
OF IMAGE AREAS over a point on the image coordinates displayed until you have all the replacing ? with the location replacing ? with a name replacing ? with the image
⁄ Click where you want
⁄ Start your image editing for the coordinates you in this area. coordinates for each the image map to appear and name of the image for the image map. map name you typed in
program. In this example, need. image area you want on your Web page. on your computer that you step 3.
ˇ Repeat steps 3 and 4 to create. want to use as an image › Click where you want
we started Paint Shop Pro. Note: For information on the until you have all the to enter the information for
map. Then add a blank space.
¤ Open the image you want coordinates you need, see the coordinates you need the image map. Most people
for the image area. Note: For information on specifying enter this information at the CONTINUED
to use as an image map. top of page 193.
the location and name of an image, bottom of the Web page.
192 see the top of page 45. 193
CREATE AN IMAGE MAP (CONTINUED) Image map editors are programs that can
help you create image maps. These programs
If your Web server has a CGI script that
supports image maps, you can create a
se the <AREA> tag to specify the first image area you defined. If you accidentally determine the necessary coordinates and server-side image map. When a user clicks
U information for each image area you

want your image map to include.
The SHAPE attribute lets you specify the shape
enter coordinates that are outside of the
image, Web browsers will ignore these
coordinates.
define image areas for you. Mapedit is a
popular image map editor that is available
at the www.boutell.com/mapedit Web site.
a server-side image map, the coordinates of
the mouse pointer are sent to the Web server
and are interpreted by a CGI script. The CGI
script then instructs the Web browser to
perform an action, such as displaying another
of an image area. Use the rect value for a Use the HREF attribute to specify the address Use the ALT attribute with each <AREA> tag
Web page. When creating a server-side image
rectangle, the circle value for a circle and of the Web page you want to appear when to provide text labels for the image areas in
map, you must specify the location of the
the poly value for a polygon. users click an image area. This address, called your image map. When a user positions the
CGI script on your Web server. Then use the
mouse pointer over an image area, most Web
a destination URL, will usually appear at the browsers will display a box containing the text
ISMAP attribute with the <IMG> tag to create
The COORDS attribute allows you to define the bottom of a Web browser window when a the image map.
you provided. This can help users determine
coordinates for an image area. The shape of the user positions the mouse pointer over the where clicking an image area will take them. Example:
image area determines the coordinates you need image area. Example: <A HREF="cgi-bin/imap"><IMG SRC="sitemap.gif"
to define. ISMAP></A>
You should provide text links below your <AREA SHAPE="rect" COORDS="9,6,142,63"
If you accidentally enter coordinates that cause image map so users who do not see images HREF="abcscience.html" ALT="Visit the
two image areas to overlap, most Web browsers Science Department!">
will still be able to access the links you
will interpret the overlapping area as part of the included in your image map.
CREATE AN IMAGE MAP (CONTINUED)

<TITLE>ABC University Web Site</TITLE> <TITLE>ABC University Web Site</TITLE> <TITLE>ABC University Web Site</TITLE>
<H1><I> <CENTER>Welcome to ABC University</CENTER> </I> </H1> <H1><I><CENTER>Welcome to ABC University</CENTER></I></H1> <H1><I><CENTER>Welcome to ABC University</CENTER> </I> </H1>
<P><CENTER>Click a depar tment for more information:</CENTER> </P> <P><CENTER>Click a department for more information:</CENTER></P> <P> <CENTER>Click a department for more information:</CENTER> </P>
<CENTER><IMG SRC="depar tments.gif" USEMAP="#menumap"> </CENTER> <CENTER><IMG SRC="departments.gif" USEMAP="#menumap"></CENTER> <CENTER> <IMG SRC="departments.gif" USEMAP="#menumap"></CENTER>
<MAP NAME="menumap"> <MAP NAME="menumap"> <MAP NAME="menumap">
<AREA SHAPE="rect" <AREA SHAPE="rect" COORDS="9,6,142,63" <AREA SHAPE="rect" COORDS="9,6,142,63" HREF="abcscience.html">
<AREA SHAPE="rect" COORDS="143,6,274,63" HREF="abcenglish.html">
</BODY> </BODY> <AREA SHAPE="rect" COORDS="9,64,142,121" HREF="abcmath.html">
</HTML> </HTML> <AREA SHAPE="rect" COORDS="143,64,274,121" HREF="abchistory.html">
</MAP>
</BODY>
</HTML>
Á Type <AREA to specify ‡ Type SHAPE="?" ° For a rectangle, ■ For a circle, · Add a blank space and then ‚ Repeat steps 6 to 9 ■ The Web browser ■ A user can click an
the information for one replacing ? with the type COORDS="a,b,c,d" type COORDS="a,b,r" type HREF="?"> replacing ? with for each image area. displays the image map area of the image map
image area of the image shape of the area (rect where a,b are the where a,b are the the address of the Web page on your Web page. to display the linked
map. Then add a blank for rectangle, circle for coordinates of the top coordinates for the you want to appear when users — Type </MAP> to Web page.
space. circle or poly for an left corner and c,d are center of the circle click the image area. complete the image map.
irregular shape). Then the coordinates of the and r is the radius.
add a blank space. bottom right corner. Note: To link the image area to a Web
■ For a polygon, page in your own Web site, replace ?
type COORDS="a,b,c,d..." with the location and name of the Web
where a,b,c,d and so on page on your computer. For more
are the coordinates of information, see the top of page 75.
194 each point on the polygon. 195
HTML SET UP STYLE SHEETS 13
CREATE AN INTERNAL STYLE SHEET Many HTML tags perform tasks that can also
be performed with style sheets. These tags are
To define properties that will apply to elements
that use more than one tag, type each tag
called deprecated tags. The HTML standard separated by a space. For example, type
sing an internal style sheet allows you Style sheets allow you to format and lay out recommends that you use style sheets instead H1 CENTER to define properties for elements
U to define in one centralized location the

formatting and layout for a Web page.
This saves you from having to type information
Web pages in ways you cannot accomplish
with HTML tags alone. Style sheets are also
easy to update and can help keep your Web
of deprecated tags, though Web browsers
still support these tags. When using style
sheets, keep in mind that Web browsers do
not currently support all the features of style
that use both the <H1> and <CENTER> tags.
Make sure you type the tags in the order they
appear on your Web page. For example, type
H1 CENTER rather than CENTER H1. If you type
in each individual tag. Style sheets are also page consistent, since you can change the sheets. the tags in the incorrect order, Web browsers
known as Cascading Style Sheets (CSS). appearance of all the elements that use a will not apply the properties.
particular tag at once. To define the properties for several tags at Example:
Use the <STYLE> tag to create an internal
the same time, type each tag separated by H1 CENTER {color: red}
style sheet. When creating a style sheet, If a user displays your Web page in an older
a comma (,). Web browsers will apply the
specify the name of the tag you want to define Web browser that cannot understand style properties you define to each tag you specify.
properties for, such as H1 or P, and then list sheets, the style sheet information may appear
Example:
the properties you want the tag to use. The on your Web page. To prevent this information
properties you define for a tag will affect all the from appearing, you should hide your internal H1, H2, H3 {font-family: "Arial"}
elements on your Web page that use the tag. style sheet.
CREATE AN INTERNAL STYLE SHEET

<HEAD> <HEAD> <HEAD> <HEAD>
<TITLE>Classical Music Composers</TITLE> <TITLE>Classical Music Composers</TITLE> <TITLE>Classical Music Composers</TITLE> <TITLE>Classical Music Composers</TITLE>
<STYLE> <STYLE> <STYLE> <STYLE>
H1 H1 { text-align: center; font-style: italic } H1 {text-align: center; font-style: italic} 
<H1>Beethoven</H1> <H1>Beethoven</H1> <BODY> </STYLE>
<P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent <P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent </HEAD>
Vienna, where he earned a living giving concerts, teaching piano and sell Vienna, where he earned a living giving concerts, teaching piano and sell <H1>Beethoven</H1> <BODY>
compositions. compositions. <P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent
<BR>One of the most fascinating aspects of Beethoven's life was his trium <BR>One of the most fascinating aspects of Beethoven's life was his trium Vienna, where he earned a living giving concerts, teaching piano and sell <H1>Beethoven</H1>
which struck him during adulthood. In fact, he composed some of his mos which struck him during adulthood. In fact, he composed some of his mos compositions. <P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent
after losing his hearing.</P> after losing his hearing.</P> <BR>One of the most fascinating aspects of Beethoven's life was his trium Vienna, where he earned a living giving concer ts, teaching piano and sell
which struck him during adulthood. In fact, he composed some of his mos compositions.
<H1>Bach</H1> <H1>Bach</H1> after losing his hearing.</P> <BR>One of the most fascinating aspects of Beethoven's life was his trium
<P>Johann Sebastian Bach was born into a family of musicians in 1685 in <P>Johann Sebastian Bach was born into a family of musicians in 1685 in which struck him during adulthood. In fact, he composed some of his mos
Bach's works include church organ and choral music, music for chamber o Germany. Bach's works include church organ and choral music, music for <H1>Bach</H1> after losing his hearing.</P>
⁄ On the Web page you ¤ Type a tag you want ‹ Type { to begin the › Enter properties for the Á Repeat steps 2 to 5 ‡ Type < /STYLE> to HIDE AN INTERNAL ¤ Type --> directly above
want to use a style sheet, to define properties for. properties for the tag. tag. A semi-colon (;) must for each tag you want complete the style sheet. STYLE SHEET the </STYLE> tag.
type <STYLE> between the separate each property. to define properties for. ⁄ Type <!-- directly
<HEAD> and </HEAD> tags. To add properties, see ■ If a user displays your Web
below the <STYLE> tag. page in an older Web browser
pages 206 to 237.
that cannot understand style
ˇ Type } to end the sheets, the Web browser
properties for the tag. will ignore the style sheet
information.
196 197
CREATE AN EXTERNAL STYLE SHEET To use more than one external style sheet on the
same Web page, import the style sheets using the
Use the /* and */ delimiters to add a comment
to a style sheet. Comments are useful for adding
@import command. Add the <STYLE> and reminders to your style sheets. The comments
sing an external style sheet allows you for, such as H1 or P, and then list the properties </STYLE> tags to the HEAD section of the Web you add will not appear when users view your
U to define in one centralized location

the formatting and layout for multiple
Web pages.
you want the tag to use. The properties you
define for a tag will affect all the elements that
use the tag on your Web pages.
page you want to use the style sheets. For each style
sheet you want to import, type @import url ("?");
between the <STYLE> and </STYLE> tags replacing
? with the location and name of the style sheet.
Web page. Since Web browsers will ignore the
information between the /* and */ delimiters,
you can use the delimiters to temporarily hide
style sheet information you are revising. The
Unlike internal style sheets, which appear at After you create an external style sheet, link the Some Web browsers, such as Netscape Navigator, hidden style sheet information will not be
do not currently support the @import command. applied until you remove the delimiters.
the top of a Web page, external style sheets style sheet to each Web page in your Web site
are stored in a separate file. This allows you that you want to use the properties you defined. Example: Example:
to update the styles for multiple Web pages If you want all the Web pages in your Web site <STYLE> P {color: black} /*Might look better blue*/
by changing information in a single file rather to use the same styles, create a link on each @import url("styles/newssheet.css");
@import url("styles/mystyles.css");
than on each Web page. For information on Web page. This can help give your Web site </STYLE>
internal style sheets, see page 196. a consistent appearance.
When creating an external style sheet, specify
the name of a tag you want to define properties
CREATE AN EXTERNAL STYLE SHEET
H1 H1 { text-align: center; font-style: italic } H1 {text-align: center; font-style: italic} <HTML>

P {color: #FF0000} <HEAD>
<TITLE>Classical Music Composers</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="styles/mystyles.css">
</HEAD>
<BODY>
<H1>Beethoven</H1>
<P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent m
Vienna, where he earned a living giving concer ts, teaching piano and sellin
<BR>One of the most fascinating aspects of Beethoven's life was his triump
which struck him during adulthood. In fact, he composed some of his most
losing his hearing.</P>
<H1>Bach</H1>
Bach's works include church organ and choral music, music for chamber or
200 cantatas. Although he was more respected as an organist during his lif
compositions influenced many later composers including Beethoven and Mo
⁄ Create a new document ¤ Type a tag you want ‹ Type { to begin the › Enter properties for the Á Repeat steps 2 to 5 ‡ Save the document Perform the following steps on · Type HREF="?">
in a word processor or text to define properties for. properties for the tag. tag. A semi-colon (;) must for each tag you want in the text-only format. each Web page you want to link replacing ? with the
editor. separate each property. to define properties for. Use the .css extension the style sheet to. location and name
To add properties, see to name the document of the style sheet
pages 206 to 237. (example: mystyles.css). ° Type <LINK REL="stylesheet" on your computer.
TYPE="text/css" between the
ˇ Type } to end the <HEAD> and </HEAD> tags.
properties for the tag. Then add a blank space.
198 199
APPLY STYLES LOCALLY APPLY STYLES USING ID

T
se the STYLE attribute when you want Applying a style locally is useful even if your he ID attribute allows you to apply a style properties you use to define the formatting for
U to apply a style to a single instance of a

tag without changing the appearance of
other elements that use the tag. For example,
Web page already contains an internal or external
style sheet. The local style you use will override
any styles defined for the same tag in the internal
to an individual element on your Web page
using a style sheet.
To apply a style using the ID attribute, you must
the style will only apply to the element you
identified using the ID attribute.
Applying styles using the ID attribute rather
use the STYLE attribute in the <P> tag to or external style sheet. For information on internal
change the appearance of a single paragraph. and external style sheets, see pages 196 to 199. assign a unique name, or identifier, to the tag than applying styles locally makes your Web
for the element you want to apply the style to. pages easy to update since the styles are located
Applying a style locally allows you to take When you apply styles locally, your Web pages According to the HTML standard, you must not in one centralized location. For information on
advantage of the formatting and layout features will be more difficult to update since the styles use the same identifier with more than one tag applying styles locally, see page 200.
offered by styles without having to create a style are not located in one centralized location. You on your Web page.
sheet. This is useful when you want to perform should use internal or external style sheets if If you want to apply styles to more than one
a task that cannot be accomplished with HTML you plan to update the style of your Web pages Once you have identified the tag you want to element that uses a specific tag, you should
tags alone, such as changing the margins for regularly. apply a style to, you can set up a style for the create a class for the tag rather than using
your Web page. tag in your internal or external style sheet. The the ID attribute. To create a class, see page 202.
APPLY STYLES LOCALLY APPLY STYLES USING ID

<TITLE>Grape Expectations</TITLE> <TITLE>Company News</TITLE> <TITLE>Company News</TITLE>
</HEAD> <STYLE> <STYLE>
<BODY> H1#announcements H1#announcements { font-style: italic; color: #FF0000 }
</STYLE> </STYLE>
<H1 STYLE=" font-style: italic; color: #9900CC " >Grape Expectations</H1 </HEAD> </HEAD>
<BODY> <BODY>
<H4><CENTER><I>A guide to homemade wine-making for the wine conn
</I></CENTER></H4> <H1 ID="announcements" ><CENTER>Announcements</CENTER></H1> <H1 ID="announcements"><CENTER>Announcements</CENTER> </H1>
<P>Due to the popularity of our new product line, we are pleased to anno <P>Due to the popularity of our new product line, we are pleased to anno
<P><IMG SRC="barrel.gif" HSPACE="10" VSPACE="10" ALIGN="left" WID be increasing production this month! Our distribution area will be increase be increasing production this month! Our distribution area will be increase
HEIGHT="110">Welcome to our Web site about wine-making. Our names more customers than ever will be able to enjoy our products!</P> more customers than ever will be able to enjoy our products!</P>
Alan Baker, and we have been making our own wine for 20 years. Current
200 bottles of homemade wine in our wine cellar. These pages contain ev <H1><CENTER>Company History</CENTER></H1> <H1><CENTER>Company History</CENTER> </H1>
to know to make your own red, white or blush wine, including the equipme <P>ABC Corporation has been supplying consumers with top quality prod <P>ABC Corporation has been supplying consumers with top quality prod
kind of grapes you should buy and tips and tricks to make your wine the b <BR>Throughout these years, customers have grown to depend on ABC C <BR>Throughout these years, customers have grown to depend on ABC C
tasted! So jump right in and don't be afraid to have <I>Grape Expectation fantastic customer service, as well as our quality products. fantastic customer service, as well as our quality products.
<BR>We have been the recipient of many awards throughout the years, a <BR>We have been the recipient of many awards throughout the years, a
⁄ In the tag for the ¤ Enter properties for ■ The Web browser ⁄ In the tag for the ¤ On your internal or › Type { to begin the ˇ Enter properties for the
element you want to the element between displays the element element you want to apply external style sheet, type properties for the tag. tag. A semi-colon (;) must
change, type STYLE="". the quotation marks. with the properties a style to, type ID="?" the tag you used in step 1. separate each property.
A semi-colon (;) must you specified. replacing ? with a unique To add properties, see
separate each property. name for the element. ‹ Type #? replacing ? with pages 206 to 237.
To add properties, see the name you assigned the
pages 206 to 237. element in step 1. Then add Á Type } to end the
a blank space. properties for the tag.
200 201
A generic class is a class that you can use with
different tags. For example, a generic class can
format both elements that use the <H2> tag and
CREATE A CLASS elements that use the <P> tag. When setting up a
generic class in your style sheet, type a period (.)
followed by a name for the class.
TYPE THIS: RESULT:
I
f you want to apply a style to only some of Once you have set up a class, use the CLASS
the elements on your Web page that use a attribute to specify the elements on your Web <HTML>
Generic Classes
specific tag, create a class for the tag. For page you want to include in the class. The <HEAD>
example, create a class of introductory paragraphs elements you include must use the tag you <TITLE>Create a Generic Class</TITLE> A generic class allows you to
<STYLE> apply the style you define for the
(P.intro) that you want to format differently created the class for. .definition {font-style: italic; text-align: center} class to elements that use different
than regular paragraphs (P). </STYLE> tags. For example, you can format
The elements that you include in a class will </HEAD> both a heading and a paragraph
To create a class for a tag, you must first set up display the properties you define for the class as <BODY> using the same class.
the class in your internal or external style sheet. well as any properties you have defined for the <H2 CLASS="definition">Generic Classes</H2>
When setting up a class, specify the tag you original tag in your style sheet. For example, if you <P CLASS="definition">A generic class allows you to
want to create the class for and provide a name have formatted a class of introductory paragraphs apply the style you define for the class to elements
for the class. Then add properties to define the (P.intro) in red and regular paragraphs (P) with that use different tags. For example, you can format
both a heading and a paragraph using the same class.</P>
formatting you want the class to use. italics, the introductory paragraphs will display
</BODY>
both the red and italic formatting. </HTML>
CREATE A CLASS

<STYLE> <STYLE> <STYLE>
P. impor tant P.important { font-style: italic; color: #FF0000 } P.impor tant {font-style: italic; color: #FF0000}
</STYLE> </STYLE> </STYLE>

<P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent most of <P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent most of <P CLASS="impor tant" >Ludwig van Beethoven was born in Bonn, Germany in 177
Vienna, where he earned a living giving concer ts, teaching piano and selling his Vienna, where he earned a living giving concerts, teaching piano and selling his spent most of his life in Vienna, where he earned a living giving concer ts, teaching
compositions. compositions. and selling his compositions.
<BR>One of the most fascinating aspects of Beethoven's life was his triumph over <BR>One of the most fascinating aspects of Beethoven's life was his triumph over <BR>One of the most fascinating aspects of Beethoven's life was his triumph over
which struck him during adulthood. In fact, he composed some of his most powerfu which struck him during adulthood. In fact, he composed some of his most powerfu which struck him during adulthood. In fact, he composed some of his most powerfu
after losing his hearing.</P> after losing his hearing.</P> after losing his hearing.</P>
<H2>Bach</H2> <H2>Bach</H2> <H2>Bach</H2>

<P>Johann Sebastian Bach was born into a family of musicians in 1685 in Eisenac <P>Johann Sebastian Bach was born into a family of musicians in 1685 in Eisenac <P CLASS="impor tant" >Johann Sebastian Bach was born into a family of musicia
Germany. Bach's works include church organ and choral music, music for chamber Germany. Bach's works include church organ and choral music, music for chamber in Eisenach, Germany. Bach's works include church organ and choral music, music
orchestras and over 200 cantatas. Although he was more respected as an organist orchestras and over 200 cantatas. Although he was more respected as an organist chamber orchestras and over 200 cantatas. Although he was more respected as a
his lifetime Bach's compositions influenced many later composers including Beeth his lifetime Bach's compositions influenced many later composers including Beeth during his lifetime Bach's compositions influenced many later composers includin
SET UP A CLASS ¤ Type a name for the ‹ Type { to begin the › Enter properties for the DEFINE EACH CLASS AREA ‡ Type CLASS="?" ■ The Web browser
⁄ On your internal or class you want to create. properties for the class. class. A semi-colon (;) must Á Click in the tag before replacing ? with the displays each element
external style sheet, type separate each property. an element you want to name of the class you you included in the class
the tag you want to create To add properties, see include in the class. typed in step 2. with the properties you
a class for, followed by a pages 206 to 237. specified.
Note: The element must use ° Repeat steps 6 and 7
period (.). ˇ Type } to end the for each element you
the tag you typed in step 1.
properties for the class. want to include in the
class.
202 203
The <SPAN> tag allows you to apply a style to a section of
text on your Web page. For example, use the <SPAN> tag to
format only part of a paragraph or heading on your Web
page. The <SPAN> tag is an inline tag, which means that it
will not add blank lines to your Web page like the <DIV> tag.
APPLY STYLES USING DIV TYPE THIS: RESULT:

<HTML>
Style Sheets
<HEAD>
T
he <DIV> tag allows you to apply a Once you have set up a DIV style, use the
<TITLE>Learn HTML</TITLE> Internal style sheets are part of
style to an area of your Web page. All <DIV> tag to indicate each Web page area <STYLE> a Web page and affect only the
the elements in the area will display you want to use the style. The <DIV> tag is a SPAN.newterm {font-weight: bold; font-style: italic} information on that Web page.
the formatting for the style, regardless of the block-level tag, which means that a blank line </STYLE> External style sheets are stored
tags they use. This lets you quickly format an will appear before and after elements that use </HEAD> in a separate file and can be
area without having to define styles for each the tag on your Web page. For this reason, the <BODY> applied to multiple Web pages.
tag individually. <DIV> tag should surround other block-level <H4>Style Sheets</H4>
tags such as <P> or <H1> rather than <P><SPAN CLASS="newterm">Internal style
To apply styles using the <DIV> tag, you interrupting them. For example, interrupting sheets</SPAN> are part of a Web page and affect
must first set up a DIV style in your internal a paragraph with the <DIV> tag will make only the information on that Web page.
or external style sheet. To set up a DIV style, the paragraph appear as two paragraphs. <SPAN CLASS="newterm">External style sheets</SPAN>
provide a name for the style and then add are stored in a separate file and can be applied
properties to define the formatting you want to multiple Web pages.</P>
the style to use. </BODY>
</HTML>
APPLY STYLES USING DIV

DIV.beethoven DIV.beethoven { background: #FFFF10; font-style: italic } DIV.beethoven {background: #FFFF10; font-style: italic}
<H2>Beethoven</H2> <H2>Beethoven</H2> <DIV CLASS="beethoven">

<P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent most of <P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent most of <H2>Beethoven</H2>
Vienna, where he earned a living giving concer ts, teaching piano and selling his Vienna, where he earned a living giving concerts, teaching piano and selling his <P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent most of
compositions. compositions. Vienna, where he earned a living giving concer ts, teaching piano and selling his
<BR>One of the most fascinating aspects of Beethoven's life was his triumph over <BR>One of the most fascinating aspects of Beethoven's life was his triumph over compositions.
which struck him during adulthood. In fact, he composed some of his most powerfu which struck him during adulthood. In fact, he composed some of his most powerfu <BR>One of the most fascinating aspects of Beethoven's life was his triumph over
after losing his hearing.</P> after losing his hearing.</P> which struck him during adulthood. In fact, he composed some of his most powerfu
<H2>Bach</H2> <H2>Bach</H2> </DIV>
<P>Johann Sebastian Bach was born into a family of musicians in 1685 in Eisenac <P>Johann Sebastian Bach was born into a family of musicians in 1685 in Eisenac
Germany. Bach's works include church organ and choral music, music for chamber Germany. Bach's works include church organ and choral music, music for chamber <H2>Bach</H2>
orchestras and over 200 cantatas. Although he was more respected as an organist orchestras and over 200 cantatas. Although he was more respected as an organist <P>Johann Sebastian Bach was born into a family of musicians in 1685 in Eisenac
his lifetime Bach's compositions influenced many later composers including Beeth his lifetime Bach's compositions influenced many later composers including Beeth Germany Bach's works include church organ and choral music music for chamber
SET UP A DIV STYLE ¤ Type { to begin the ‹ Enter properties for the USE THE DIV TAG Á Type </DIV> after the ■ The Web browser displays
⁄ On your internal or properties for the DIV style. DIV style. A semi-colon (;) ˇ Type <DIV CLASS="?"> Web page area. the Web page area(s) with
external style sheet, type must separate each property. in front of a Web page the properties you specified.
To add properties, see ‡ Repeat steps 5 and 6
DIV.? replacing ? with a area you want to use the for each Web page area
name for the DIV style pages 206 to 237. DIV style you created. you want to use the DIV
you want to create. › Type } to end the Replace ? with the name style.
properties for the DIV style. of the DIV style you typed
204 in step 1. 205
HTML FORMAT TEXT USING STYLE SHEETS 14
BOLD TEXT ITALICIZE TEXT

sing the font-weight property with 900 the boldest. A value of 400 is equivalent
U the bold value lets you bold all of the

text on your Web page that uses a specific
tag. Bolding text is useful for emphasizing
to the normal font weight, while 700 is the font
weight that appears when you use the bold
value. Web browsers may display some values
T
he font-style property allows you to
italicize all the text on your Web page that
uses a specific tag.
computer, a Web browser may display the font
using an oblique version. When you specify the
oblique value, a user's computer may be able
to display the text as oblique even if an oblique
information on your Web page. with the same boldness, since most fonts do not Fonts usually offer italic versions and may also version is not available.
have nine font weights available. For example, a have oblique versions. The italic and oblique
The bolder and lighter values also allow Web browser may display a value of 200 with versions of a font are often similar, though they Using the normal value allows you to remove
you to change the boldness of text. The bolder the same boldness as 300. may display a different slant. Use the italic italic formatting from all the text on your Web
value increases the boldness of text relative to value to display text using an italic version of the page that uses a specific tag. This is useful when
the surrounding text, while the lighter value The normal value removes bold formatting from current font and the oblique value to display text text has inherited italic formatting from a parent
decreases the boldness of text relative to the text. This is useful for tags that automatically using an oblique version of the font. Some Web element. For example, use the normal value to
surrounding text. bold text, such as heading tags (H1 to H6) or browsers do not yet support the oblique value. remove italic formatting from bold text (B) that
the tag for a header cell in a table (TH). has inherited italic formatting from a parent
The boldness of text can also be specified as If you specify the italic value and no italic paragraph element (P).
a multiple of 100, with 100 the lightest and version of the font is available on a user's
BOLD TEXT ITALICIZE TEXT
<HTML> <HTML>
<HEAD> <HEAD>
<STYLE> <STYLE>
P { font-weight: bold } H2 { font-style: italic }
</STYLE> </STYLE>
</HEAD> </HEAD>
<BODY> <BODY>
<P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent <P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent
Vienna, where he earned a living giving concerts, teaching piano and sell Vienna, where he earned a living giving concer ts, teaching piano and sell
compositions. compositions.
<BR>One of the most fascinating aspects of Beethoven's life was his trium <BR>One of the most fascinating aspects of Beethoven's life was his trium
which struck him during adulthood. In fact, he composed some of his mos which struck him during adulthood. In fact, he composed some of his mos
after losing his hearing.</P> after losing his hearing.</P>
<P>Johann Sebastian Bach was born into a family of musicians in 1685 in <P>Johann Sebastian Bach was born into a family of musicians in 1685 in
⁄ To bold all the text that ‹ Type bold to bold ■ The Web browser Note: To remove the bolding ⁄ To italicize all the ‹ Type the way you ■ The Web browser
uses a specific tag, click the text. bolds all the text that from text, type normal in step 3. text that uses a specific want to italicize the italicizes all the text
between the brackets { } uses the tag. tag, click between the text (italic, oblique or that uses the tag.
for the tag. ■ You can also specify brackets { } for the tag. normal).
a boldness for the text
¤ Type font-weight: and relative to the surrounding ¤ Type font-style: and
then add a blank space. text (bolder or lighter) or then add a blank space.
by using a multiple of 100,
with 100 the lightest and
900 the boldest.
206 207
ADD A LINE TO TEXT INDENT TEXT

se the text-decoration property The overline value allows you to place se the text-indent property to a size of -40px to shift the first line of text
U to add a line to all the text on your

Web page that uses a specific tag.
There are three different types of lines you
a line above text. The overline value is
not yet supported by some Web browsers.
Using the none value removes line formatting
U indent the first line of all the text on
your Web page that uses a specific tag.
When indenting text, specify a size for the
40 pixels to the left, making the rest of the
text appear indented. Hanging indents are
commonly used for creating a bibliography
can add to text. or glossary.
from text. This is useful for removing the indent in pixels, millimeters, centimeters,
The underline value lets you place a line underlines that automatically appear for text inches, points, picas, x-height, em or as a Before creating a hanging indent, use the
below text. Be careful when underlining text, links. When removing underlines from text percentage of the text block width. Using margin-left property to increase the size
since users may mistake the text for a link. links, keep in mind that many users expect x-height specifies an indent size based on of the left margin. This will help ensure that
For information on links, see page 74. links to be underlined. You may want to add the height of the lowercase letter "x" for the when the first line of text shifts to the left it
formatting, such as a background color, to current font (example: 5ex), while using em will not extend past the left edge of a Web
Use the line-through value to place a emphasize the links. changes the indent size based on the height browser window. Specify a left margin size
line through text. People often use this value of the current font (example: 5em). that is equal to or greater than the indent size
to strike out information they are revising. you want to use. To use the margin-left
Specifying a negative indent size lets you property, see page 225.
create a hanging indent. For example, specify
ADD A LINE TO TEXT INDENT TEXT
<HTML> <HTML>
<HEAD> <HEAD>
<STYLE> <STYLE>
H2 { text-decoration: underline } P { text-indent: 40px }
</STYLE> </STYLE>
</HEAD> </HEAD>
<BODY> <BODY>
⁄ To add a line to all the ‹ Type the kind of ■ The Web browser ⁄ To indent the first line Note: You can also specify an ■ The Web browser
text that uses a specific line you want to add displays all the text that of all the text that uses a indent size as a percentage of indents the first line of all
tag, click between the (underline, line-through, uses the tag with the kind specific tag, click between the text block width (example: the text that uses the tag.
brackets { } for the tag. overline or none). of line you specified. the brackets { } for the tag. 10%) or in millimeters (mm),
¤ Type text-decoration: ¤ Type text-indent: ? centimeters (cm), inches (in),
and then add a blank replacing ? with the amount points (pt), picas (pc),
space. of space you want to use in x-height (ex) or em.
pixels (example: 40px).
208 209
Use the font property to change multiple font When applying styles locally, enclose font names
settings at the same time, such as the style, size in single quotation marks (' ') rather than double
CHANGE THE FONT and font of text. Some Web browsers require
you to enter the font settings in a particular order.
For example, you may need to enter a font style
quotation marks (" "). For information on applying
styles locally, see page 200.
Example:
before a font size.
<P STYLE="font-family: 'Arial'">
se the font-family property to change The available font types include serif, sans-serif,
U the font of all of the text on your Web page

that uses a specific tag. You can specify
a new font by name, such as Courier, or by type,
cursive, fantasy and monospace. Netscape
Navigator does not currently support the fantasy
or cursive types.
Example:
P {font: italic 14pt "Arial", "Verdana"}
The @font-face command embeds a font in your

To make all the text on your Web page that uses
a specific tag blink, use the text-decoration
property with the blink value. Blinking text is
such as monospace. Web page so that Web browsers will display the useful for drawing attention to information on
When you specify a font by type, a user's Web font even if a user does not have the font installed your Web page. The blink value is currently
If you specify a font by name, you should specify browser will look for a font installed on the on their computer. Embedded fonts must currently only supported by Netscape Navigator.
more than one font in case your first choice is not user's computer that matches the requested type. be in the Embedded OpenType (EOT) format, though
Example:
available on a user's computer. One of the fonts Many people include a font type after a list of font other formats may be supported in the future. The
@font-face command is currently only supported H1 {text-decoration: blink}
you specify should be a common font, such as names to ensure that they will have control over
Arial, to increase the probability that a computer the font a Web browser displays if the fonts they by Internet Explorer.
will display one of your font choices. Web browsers specified by name are not available. Example:
will use the first font that matches a font installed @font-face {font-family: "Chess Utrecht"; src:
on a user's computer. url("fonts/chessut.eot")}
P {font-family: "Chess Utrecht"}
CHANGE THE FONT

H2 { font-family: } H2 {font-family: "Monotype Corsiva" } H2 {font-family: "Monotype Corsiva" , "Arial" }

<P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent m <P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent m <P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent m
Vienna, where he earned a living giving concer ts, teaching piano and sellin Vienna, where he earned a living giving concer ts, teaching piano and sellin Vienna, where he earned a living giving concerts, teaching piano and sellin
compositions. compositions. compositions.
<BR>One of the most fascinating aspects of Beethoven's life was his triump <BR>One of the most fascinating aspects of Beethoven's life was his triump <BR>One of the most fascinating aspects of Beethoven's life was his triump
which struck him during adulthood. In fact, he composed some of his most p which struck him during adulthood. In fact, he composed some of his most p which struck him during adulthood. In fact, he composed some of his most

<P>Johann Sebastian Bach was born into a family of musicians in 1685 in <P>Johann Sebastian Bach was born into a family of musicians in 1685 in <P>Johann Sebastian Bach was born into a family of musicians in 1685 in
Germany Bach's works include church organ and choral music music for c Germany Bach's works include church organ and choral music music for c Germany Bach's works include church organ and choral music music for c
⁄ To change the font of all ¤ Type font-family: and ‹ Type the name of ■ You can also specify › To specify another font ˇ Repeat step 4 for each ■ The Web browser
the text that uses a specific then add a blank space. the font you want to a font using a font type choice, type a comma (,) font you want to specify. displays all the text
tag, click between the use, enclosed in (serif, sans-serif, cursive, and then add a blank space. that uses the tag in
brackets { } for the tag. quotation marks (" "). fantasy or monospace). Then type your font choice. the font you specified.
Note: You should specify more
than one font in case your first
font choice is not available on
a user's computer.
210 211
CHANGE THE FONT SIZE CHANGE THE CASE OF TEXT
se the font-size property to change You can also specify a font size as a descriptive se the text-transform property to inherited case formatting from a parent element. For
U the size of all the text on your Web

page that uses a specific tag. Increasing
the size of text can make the text easier to
or relative size. Specify a descriptive font size
using a value such as small, medium or
large. Specify a relative font size using a
U change the case of all the text on your
The capitalize value allows you to change
example, use the none value to remove lowercase
formatting from bold text (B) that has inherited the
formatting from a parent paragraph element (P).
read, while decreasing the size of text allows value such as larger or smaller or by
you to fit more information on a screen. using a percentage (example: 150%). When the first letter of each word to an uppercase
you specify a relative font size for text, the letter. This is useful for formatting all the titles Use the font-variant property with
There are many ways to specify a new size size of the text will depend on the size of and headings on your Web page at once. the small-caps value to display all the
for text. For example, specify a size in points, the surrounding text. text on your Web page that uses a specific
pixels, millimeters, centimeters, inches, picas, The uppercase value lets you change all the tag in small caps. This changes lowercase
x-height or em. Use x-height to specify a font Keep in mind that the font size you use may letters in each word to uppercase letters, while letters to small uppercase letters. The
size based on the height of the lowercase not appear the way you expect on some the lowercase value lets you change all the font-variant property is not yet
letters to lowercase letters. supported by most Web browsers.
letter "x" for the current font (example: 2ex). computers, since some users can set their
Use em to change the font size based on the Web browsers to display the font size they Using the none value allows you to remove case
Example:
height of the current font (example: 2em). prefer. formatting from all the text on your Web page that H1 {font-variant: small-caps}
uses a specific tag. This is useful when text has
CHANGE THE FONT SIZE CHANGE THE CASE OF TEXT
<HTML> <HTML>
<HEAD> <HEAD>
<STYLE> <STYLE>
P { font-size: 14pt } H2 { text-transform: uppercase }
</STYLE> </STYLE>
</HEAD> </HEAD>
<BODY>
<BODY>
<H2>Beethoven</H2>
<H2>Beethoven</H2>
<P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent most of h
Vienna, where he earned a living giving concer ts, teaching piano and selling his <P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent mo
compositions. Vienna, where he earned a living giving concer ts, teaching piano and selling
<BR>One of the most fascinating aspects of Beethoven's life was his triumph over d compositions.
which struck him during adulthood. In fact, he composed some of his most powerful <BR>One of the most fascinating aspects of Beethoven's life was his triumph
after losing his hearing.</P> which struck him during adulthood. In fact, he composed some of his most po
<H2>Bach</H2>
<P>Johann Sebastian Bach was born into a family of musicians in 1685 in Eisenac <H2>Bach</H2>
Germany. Bach's works include church organ and choral music, music for chamber <P>Johann Sebastian Bach was born into a family of musicians in 1685 in Ei
orchestras and over 200 cantatas. Although he was more respected as an organist Germany. Bach's works include church organ and choral music, music for cha
⁄ To change the font ‹ Type a font size in points (pt), ■ The Web browser displays Note: You can also specify a ⁄ To change the case of all ‹ Type the case of ■ The Web browser
size of all the text that pixels (px), millimeters (mm), all the text that uses the tag font size relative to the font size the text that uses a specific tag, text you want to use displays all the text that
uses a specific tag, click centimeters (cm), inches (in), in the font size you specified. of the surrounding text (smaller click between the brackets { } (capitalize, uppercase, uses the tag in the case
between the brackets { } picas (pc), x-height (ex) or em. or larger) or as a percentage of for the tag. lowercase or none). of text you specified.
for the tag. the font size of the surrounding
■ You can also type a descriptive ¤ Type text-transform: and
¤ Type font-size: and font size (xx-small, x-small, small, text (example: 150%). then add a blank space.
then add a blank space. medium, large, x-large or xx-large).
212 213
CHANGE ALIGNMENT OF TEXT CHANGE THE TEXT COLOR

y default, most Web browsers left align and right margins by adding space between the se the color property to change the color The color property also supports specifying a
B text. Use the text-align property to

change the alignment of all the text on
your Web page that uses a specific tag. This is
words in each line of text. This may negatively
affect the word spacing of the text.
When you use the text-align property for
U of all of the text on your Web page that
uses a specific tag.
When changing the color of text, specify the name
color by the amount of red, green and blue (r,g,b)
in the color. Specify the amounts as values from
0 to 255 or as percentages.
useful for emphasizing text on your Web page.
a table, Web browsers will align the text in the or hexadecimal value for the color you want to The color property is also useful for changing
The text you align with the text-align table and will not change the alignment of the use. A hexadecimal value is a code that tells Web the color of other elements on your Web page,
property must use a block-level tag. A block-level table on your Web page. Some Web browsers, browsers which color to display. The code is such as horizontal rules, form elements and tables.
tag, such as <P> or <TABLE>, displays a blank such as Netscape Navigator, do not support composed of a number sign (#) followed by the The color property cannot be used to change
line before and after elements that use the tag. using the text-align property to change red, green and blue (RGB) components of the the color of images on your Web page.
the alignment of text in a table. color. For a list of the colors that you can specify
The text-align property supports the left, by name, see the top of page 33.
center, right and justify values. The
justify value aligns text with both the left
CHANGE ALIGNMENT OF TEXT CHANGE THE TEXT COLOR
<HTML>
<HTML>
<HEAD>
<HEAD> <TITLE>Classical Music Composers</TITLE>
<TITLE>Classical Music Composers</TITLE> <STYLE>
<STYLE> H2 { color: #FF0000 }
H2 { text-align: center } </STYLE>
</STYLE> </HEAD>
</HEAD> <BODY>
<BODY>
<H2>Beethoven</H2>
<H2>Beethoven</H2> <P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent mo
<P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent m Vienna, where he earned a living giving concer ts, teaching piano and selling
Vienna, where he earned a living giving concerts, teaching piano and sellin <BR>One of the most fascinating aspects of Beethoven's life was his triumph
compositions. which struck him during adulthood. In fact, he composed some of his most po
<BR>One of the most fascinating aspects of Beethoven's life was his triump after losing his hearing.</P>
after losing his hearing.</P> <H2>Bach</H2>
<P>Johann Sebastian Bach was born into a family of musicians in 1685 in Ei
<H2>Bach</H2> Germany. Bach's works include church organ and choral music, music for cha
<P>Johann Sebastian Bach was born into a family of musicians in 1685 in orchestras and over 200 cantatas. Although he was more respected as an org
⁄ To change the alignment ‹ Type the way you ■ The Web browser ⁄ To change the color of all ‹ Type the name or ■ The Web browser Note: You can also specify a color
of all the text that uses a want to align the text displays all the text that the text that uses a specific tag, hexadecimal value for displays all the text by providing the amount of red,
specific tag, click between (left, center, right or uses the tag with the click between the brackets { } the color you want to that uses the tag in green and blue (r,g,b) in the color
the brackets { } for the tag. justify). alignment you specified. for the tag. use (example: red or the color you specified. as values or as percentages. For
#FF0000). example, type rgb(255,0,0) or
¤ Type text-align: and then ¤ Type color: and then add
add a blank space. a blank space. Note: For a list of colors, rgb(100%,0%,0%) to display
see the color chart at the the text in red.
front of this book.
214 215
CHANGE THE LINE SPACING CHANGE THE LETTER SPACING

T
se the line-height property to depend on the current font size. If you later he letter-spacing property lets you The letter-spacing property also supports
U change the line spacing, or leading, of

all the text on your Web page that uses
a specific tag. Increasing the line spacing can
change the font size, the line spacing will
also change.
Line spacing can also be specified as a
change the letter spacing, or kerning, of
all the text on your Web page that uses
a specific tag.
negative values (example: -1px). Specifying a
negative value decreases the amount of space
between letters.
make text on your Web page easier to read.
percentage of the text size (example: 150%) When changing the letter spacing, people While the letter-spacing property is
When changing the line spacing, people or in millimeters, centimeters, inches, pixels, commonly specify a new size in points or part of the HTML standard, it is not currently
commonly specify a number that will points, picas, x-height or em. Use x-height to pixels. You can also specify a letter spacing supported by some Web browsers.
be multiplied by the current font size to specify a new line spacing based on the height in millimeters, centimeters, inches, picas,
determine the new line spacing. For example, of the lowercase letter "x" for the current font x-height or em. Use x-height to specify a letter To change the spacing between words rather
specifying a value of 2.0 will make the (example: 2ex). Use em to change the line spacing based on the height of the lowercase than letters, use the word-spacing property.
line spacing twice the size of the text. spacing based on the height of the current letter "x" for the current font (example: 2ex). Changing the word spacing can help make text
font (example: 2em). Use em to change the letter spacing based on easier to read. The word-spacing property
When you change the line spacing by the height of the current font (example: 2em). is not currently supported by most Web
specifying a number, the line spacing will browsers.
CHANGE THE LINE SPACING CHANGE THE LETTER SPACING
<HTML> <HTML>
<HEAD> <HEAD>
<STYLE> <STYLE>
P { line-height: 2.0 } H2 { letter-spacing: 2pt }
</STYLE> </STYLE>
</HEAD> </HEAD>
<BODY> <BODY>
⁄ To change the line ‹ Type the number ■ The Web browser Note: You can also specify the ⁄ To change the letter Note: You can also ■ The Web browser Note: To change the spacing
spacing of all the text that that you want to multiply displays all the text that line spacing as a percentage of spacing of all the text that uses specify the amount of displays all the text that between words rather than letters,
uses a specific tag, click by the current font size uses the tag with the line the text size (example: 150%) or in a specific tag, click between space in millimeters (mm), uses the tag with the letter type word-spacing instead of
between the brackets { } to determine the line spacing you specified. millimeters (mm), centimeters (cm), the brackets { } for the tag. centimeters (cm), spacing you specified. letter-spacing in step 2.
for the tag. spacing (example: 2.0). inches (in), pixels (px), points (pt), inches (in), picas (pc),
¤ Type letter-spacing: ?
¤ Type line-height: and picas (pc), x-height (ex) or em. replacing ? with the amount x-height (ex) or em.
then add a blank space. of space you want to use in
points or pixels (example: 2pt
or 2px).
216 217
Many other style sheet properties, such as the If you change the appearance of links (A)
background and font-family properties, can be without using a pseudo-class, every type of link
CHANGE APPEARANCE OF LINKS used to change the appearance of links. When using
multiple properties, make sure you separate each
property with a semi-colon (;). In Netscape Navigator,
on your Web page will use the same style. This
can be confusing to users, since they will not be
able to see the difference between visited and
when you change the appearance of one type of link, unvisited links.
se the :link, :visited and the amount of red, green and blue (r,g,b) the other types of links will automatically display the
U :active pseudo-classes to change

the appearance of all the unvisited,
visited and active links (A) on your Web page.
in the color as values from 0 to 255 or as
percentages.
When changing the color of links, make sure
same style.
Example:
A:link {background: red; font-family: "Courier"}
Example:
A {color: green}
An active link is a link that a user is currently

selecting. you specify a different color for each type of
link. The colors you choose should work well Use the :hover pseudo-class to specify how you
want links to appear when users position the mouse
Pseudo-classes are similar to classes, but have with the background color of your Web page.
over the links. This can help users see which link
predetermined names rather than names you they are selecting. For example, you can have the
assign. For information on classes, see page 202. Using the text-decoration property with
color of a link change when a user positions the
the none value allows you to remove the mouse over the link. The :hover pseudo-class is
The color property allows you to change underline from links. When you remove the currently only supported by Internet Explorer.
the color of links by specifying the name or underline from one type of link, Netscape
Example:
hexadecimal value for the color you want to Navigator automatically removes the underline
use. You can also specify a color by providing from other types of links. A:hover {color: green}
CHANGE APPEARANCE OF LINKS

A:link { } A:link { color: #FF0000 } A:link {color: #FF0000; text-decoration: none }
<H1>Grape Expectations</H1> <H1>Grape Expectations</H1> <H1>Grape Expectations</H1>
<H4><CENTER><I>A guide to homemade wine-making for the wine connoisse <H4> <CENTER> <I>A guide to homemade wine-making for the wine connoisse <H4><CENTER><I>A guide to homemade wine-making for the wine connoisse
</CENTER></H4> </CENTER> </H4> </CENTER> </H4>
<P><IMG SRC="barrel.gif" HSPACE="10" VSPACE="10" ALIGN="left" WIDTH= <P> <IMG SRC="barrel.gif" HSPACE="10" VSPACE="10" ALIGN="left" WIDTH= <P> <IMG SRC="barrel.gif" HSPACE="10" VSPACE="10" ALIGN="left" WIDTH=
HEIGHT="110">Welcome to our Web site about wine-making. Our names are R HEIGHT="110">Welcome to our Web site about wine-making. Our names are R HEIGHT="110">Welcome to our Web site about wine-making. Our names are R
and Alan Baker and we have been making our own wine for 20 years. Currently and Alan Baker and we have been making our own wine for 20 years. Currently and Alan Baker and we have been making our own wine for 20 years. Currently
over 200 bottles of homemade wine in our wine cellar. These pages contain ev over 200 bottles of homemade wine in our wine cellar. These pages contain ev over 200 bottles of homemade wine in our wine cellar. These pages contain ev
you need to know to make your own red, white or blush wine, including the equ you need to know to make your own red, white or blush wine, including the equ you need to know to make your own red, white or blush wine, including the equ
you need, what kind of grapes you should buy and tips and tricks to make your you need, what kind of grapes you should buy and tips and tricks to make your you need, what kind of grapes you should buy and tips and tricks to make your
best you've ever tasted! So jump right in and don't be afraid to have <I>Grape best you've ever tasted! So jump right in and don't be afraid to have <I>Grape best you've ever tasted! So jump right in and don't be afraid to have <I>Grape
⁄ Click between the <STYLE> ‹ Click between › To specify a color for ˇ Type the name or Á To remove the ■ If you use both the color ■ The Web browser Note: You can also specify a color
and </STYLE> tags. the brackets { }. the links, type color: and hexadecimal value for the underline from the links, and text-decoration displays the unvisited, for links by providing the amount
then add a blank space. color you want to use type text-decoration: none. properties, make sure you visited or active links in of red, green and blue (r,g,b) in the
¤ Type A:? { } replacing ? with (example: red or #FF0000). separate the properties with the color you specified, color as values or as percentages.
the type of link you want to a semi-colon (;). without an underline.
change (link, visited or active). For example, type rgb(255,0,0)
Note: For a list of colors, see the
or rgb(100%,0%,0%) to display
color chart at the front of this book.
the links in red.
218 219
HTML LAY OUT WEB PAGES USING STYLE SHEETS 15
You may want to specify both a background image The background-position property allows
and a background color for elements on your Web you to specify a starting position for a background
page. The color you specify will appear on a user's image. The image will repeat to fill the background
screen as the background image transfers. Users area from this starting position. When specifying a
ADD A BACKGROUND IMAGE who do not see images will see the background
color instead of the background image.
starting position, enter the horizontal and vertical
coordinates for the new position as percentages
(example: 40% 30%), lengths (example: 10px 30px)
Example:
or by using descriptive values (example: top left).
se the background property to add repeat-x value to make the background
U
H1 {background: red url("images/fruit.gif")}
Example:
a background image to every element image repeat horizontally. To have the
on your Web page that uses a specific background image repeat vertically, use the P {background: url("images/splash.gif");
The HTML standard also includes properties that background-position: 10px 30px}
tag. Interesting background images are repeat-y value. The no-repeat value let you specify the information for a background
available at the www.nepthys.com/textures prevents a background image from repeating. image separately. Use the background-image
and imagine.metanet.com Web sites. property to specify the image you want to use,
Specify a background image for the body of the background-repeat property to specify
When adding a background image, you must your Web page (BODY) to add the background how you want the image to repeat and the
specify the location and name of the image on image to your entire Web page. By default, the background-attachment property to specify
your computer. Make sure that the background background image you add will move when a if you want the image to remain stationary.
image you use works well with the elements user scrolls through the Web page. If you want A semi-colon (;) must separate each property
you use.
on your Web page. the background image to remain stationary
when a user scrolls through the Web page, Example:
By default, a Web browser will repeat the use the fixed value. The fixed value is not BODY {background-image: url("images/trees.gif");
background image you add until it fills the currently supported by some Web browsers. background-repeat: repeat-y;
background area for an element. Use the background-attachment: fixed}
ADD A BACKGROUND IMAGE

P { background: } P {background: url("background.jpg") } P {background: url("background.jpg") repeat }

<P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent most of <P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent most of <P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent most of
Vienna, where he earned a living giving concer ts, teaching piano and selling his Vienna, where he earned a living giving concerts, teaching piano and selling his Vienna, where he earned a living giving concer ts, teaching piano and selling his
<BR>One of the most fascinating aspects of Beethoven's life was his triumph over <BR>One of the most fascinating aspects of Beethoven's life was his triumph over <BR>One of the most fascinating aspects of Beethoven's life was his triumph over
which struck him during adulthood. In fact, he composed some of his most powerfu which struck him during adulthood. In fact, he composed some of his most powerfu which struck him during adulthood. In fact, he composed some of his most powerfu

<P>Johann Sebastian Bach was born into a family of musicians in 1685 in Eisenac <P>Johann Sebastian Bach was born into a family of musicians in 1685 in Eisenac <P>Johann Sebastian Bach was born into a family of musicians in 1685 in Eisenac
Germany. Bach's works include church organ and choral music, music for chamber Germany. Bach's works include church organ and choral music, music for chamber Germany. Bach's works include church organ and choral music, music for chamber
orchestras and over 200 cantatas. Although he was more respected as an organist orchestras and over 200 cantatas. Although he was more respected as an organist orchestras and over 200 cantatas. Although he was more respected as an organist
his lifetime Bach's compositions influenced many later composers including Beeth his lifetime Bach's compositions influenced many later composers including Beeth his lifetime Bach's compositions influenced many later composers including Beeth
⁄ To add a background ¤ Type background: and ‹ Type url("?") replacing ? Note: For information on › Type the way you want Note: When adding a background ■ The Web browser
to every element that then add a blank space. with the location and name specifying the location and the background image to image to the body of a Web page displays every element
uses a specific tag, click of the background image name of an image, see the repeat behind each element (BODY), type an option to specify if that uses the tag with
between the brackets { } on your computer. top of page 45. (repeat, repeat-x, repeat-y you want the image to move (scroll) the background image
for the tag. or no-repeat). or remain stationary (fixed) when a you specified.
user scrolls through the Web page.
220 221
ADD A BACKGROUND COLOR SET THE WIDTH AND HEIGHT
T T
he background property allows you to and blue (r,g,b) in the color. Specify the amounts he width and height properties allow If the dimensions you specify for text elements
add a background color to every element as values from 0 to 255 or as percentages. you to specify a width and height for every are too small to properly display their contents,
on your Web page that uses a specific tag. element on your Web page that uses a Web browsers will usually display the elements
To add a background color to your entire Web specific tag. This is useful when you want the with the width you specified, but ignore the
When adding a background color, specify the page, use the background property to specify elements to all display the same size. height.
name or hexadecimal value for the color you a color for the body of your Web page (BODY).
want to use. A hexadecimal value is a code that Specify a width or height for elements in pixels When specifying both a width and height for
tells Web browsers which color to display. The After adding a background color to the elements or as a percentage of their parent element's images (IMG), you may want to use the auto
code is composed of a number sign (#) followed that use a specific tag, make sure that the width or height. You can also specify a width value for either the width or height. Web
by the red, green and blue (RGB) components color you selected works well with the color or height in millimeters, centimeters, inches, browsers will calculate a size for the auto
of the color. For a list of colors you can specify of the elements. For example, adding a blue points, picas, x-height or em. Use x-height to value based on the size you specified for the
by name, see the top of page 33. background to red text can make the text specify a width or height based on the height other dimension. This can help prevent your
difficult to read. of the lowercase letter "x" for the current font image from becoming distorted due to resizing.
The background property also supports (example: 2ex). Use em to specify a width or The auto value is not supported by some Web
specifying a color by the amount of red, green height based on the height of the current font browsers.
(example: 2em).
ADD A BACKGROUND COLOR SET THE WIDTH AND HEIGHT
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Classical Music Composers</TITLE> <TITLE>Sunshine Vacations</TITLE>
<STYLE> <STYLE>
H2 { background: #FF0000 } IMG { width: 180px; height: 121px }
</STYLE> </STYLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H2>Beethoven</H2> <H2><CENTER> <I>Sunshine Vacations</I></CENTER></H2>

<P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent mos <P>Welcome to Sunshine Vacations - The travel agency that goes the extra mi
Vienna, where he earned a living giving concer ts, teaching piano and selling h vacation the trip of a lifetime!</P>
compositions. <IMG SRC="arizona.jpg">
<BR>One of the most fascinating aspects of Beethoven's life was his triumph o <IMG SRC="beach.jpg">
which struck him during adulthood. In fact, he composed some of his most pow <IMG SRC="skier.jpg">
</BODY>
<H2>Bach</H2> </HTML>
<P>Johann Sebastian Bach was born into a family of musicians in 1685 in Eise
Germany. Bach's works include church organ and choral music, music for cham
orchestras and over 200 cantatas Although he was more respected as an orga
⁄ To add a background ‹ Type the name or ■ The Web browser Note: You can also specify a ⁄ To set the width and ¤ Type width: ?; height: ? ■ The Web browser Note: To set the width or height
color to every element that hexadecimal value for displays every element background color by providing height of every element replacing ? with a width displays every element that individually, specify only a
uses a specific tag, click the color you want to use that uses the tag with the amount of red, green and blue that uses a specific tag, and height in pixels uses the tag with the width width or height in step 2 and
between the brackets { } (example: red or #FF0000). the background color (r,g,b) in the color as values or as click between the (example: 180px) or as a and height you specified. leave out the semi-colon (;).
for the tag. you specified. percentages. For example, type brackets { } for the tag. percentage (example: 30%).
Note: For a list of colors, see the
¤ Type background: and rgb(255,0,0) or rgb(100%,0%,0%) Note: You can also specify a height
color chart at the front of this book.
then add a blank space. to display a red background. or width in millimeters (mm),
centimeters (cm), inches (in),
222 points (pt), picas (pc), x-height (ex) 223
or em.
ADD PADDING CHANGE THE MARGINS
se the padding property to add space, The padding you specify for elements will appear se the margin-top, margin-bottom, (example: 2ex). Use em to change the margin size
U or padding, around every element on your

Specify the amount of padding you want to use
between each element and its border. For information
on margins and borders, see pages 225 and 226.
Although the padding property is part of the HTML
U margin-left and margin-right properties
to change the margins for every element on
your Web page that uses a specific tag.
based on the height of the current font (example: 2em).
You can specify a negative value for a margin to reduce
the amount of space around elements (example: -1px).
for elements in pixels or as a percentage of their standard, it is not currently supported by some Web Changing the margins adjusts the amount of
parent element's width. You can also specify padding browsers. transparent space around elements. The margin size
in millimeters, centimeters, inches, points, picas, you specify will be added to any padding or borders Use the margin property to change all
x-height or em. Use x-height to specify padding you have added to the elements. For more information the margins at once for elements that use a
The padding-left, padding-right, specific tag. Specifying one value will change
based on the height of the lowercase letter "x" for padding-top and padding-bottom on adding padding and borders, see pages 224 and 226. all the margins to the same size. Specifying
the current font (example: 2ex). Use em to specify properties allow you to specify a different four values will change the margins in the
padding based on the height of the current font padding for each side of elements that use Specify a new margin size as a percentage of an
following order: top, right, bottom, left.
(example: 2em). a specific tag. Separate each property you element's width or in pixels, millimeters, centimeters,
use with a semi-colon (;). inches, points, picas, x-height or em. Use x-height Example:
Think of the elements on your Web page as appearing Example: to specify a margin size based on the height of P {margin: 15px 30px 20px 10px}
in invisible boxes, with each element in the center of P {padding-left: 10px; padding-right: 20px} the lowercase letter "x" for the current font
a box, surrounded by padding, borders and margins.
ADD PADDING CHANGE THE MARGINS
<HTML>
<HEAD> <HTML>
<TITLE>Classical Music Composers</TITLE> <HEAD>
<STYLE> <TITLE>Classical Music Composers</TITLE>
P { padding: 60px } <STYLE>
</STYLE> P { margin-left: 60px }
</HEAD> </STYLE>
<BODY> </HEAD>
<BODY>
<H2>Beethoven</H2>
<P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent mos <H2>Beethoven</H2>
Vienna, where he earned a living giving concer ts, teaching piano and selling h <P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent m
compositions. Vienna, where he earned a living giving concerts, teaching piano and sellin
<BR>One of the most fascinating aspects of Beethoven's life was his triumph o
compositions.
which struck him during adulthood. In fact, he composed some of his most pow
<BR>One of the most fascinating aspects of Beethoven's life was his triump
<H2>Bach</H2> after losing his hearing.</P>
<P>Johann Sebastian Bach was born into a family of musicians in 1685 in Eise
Germany. Bach's works include church organ and choral music, music for cham <H2>Bach</H2>
orchestras and over 200 cantatas Although he was more respected as an orga <P>Johann Sebastian Bach was born into a family of musicians in 1685 in
⁄ To change the padding ‹ Type the amount of ■ The Web browser Note: You can also specify the ⁄ To change a margin for ‹ Type the amount of ■ The Web browser Note: You can also specify the
for every element that space for the padding in displays every element padding as a percentage of the every element that uses a space for the margin in displays every element margin size as a percentage of the
uses a specific tag, click pixels (example: 60px). that uses the tag with the parent element's width (example: specific tag, click between pixels (example: 60px). that uses the tag with the element's width (example: 10%) or in
between the brackets { } padding you specified. 10%) or in millimeters (mm), the brackets { } for the tag. margin you specified. millimeters (mm), centimeters (cm),
for the tag. › Repeat steps 1 to 3
centimeters (cm), inches (in), ¤ Type margin-?: replacing ? for each margin you want inches (in), points (pt), picas (pc),
¤ Type padding: and points (pt), picas (pc), with the margin you want to to change, separating x-height (ex) or em.
then add a blank space. x-height (ex) or em. change (top, bottom, left or each margin setting with
right). Then add a blank space. a semi-colon (;).
224 225
Use the none value with the border property to Some Web browsers support using the border-width,
remove borders from elements. This is useful for border-style and border-color properties
ADD A BORDER removing the borders that automatically appear
around images you have used as links. Some Web
browsers do not yet support the none value.
to specify the thickness, style and color for borders
separately. Separate each property you use with a
semi-colon (;). If you specify one value for a property,
the value will affect all four sides of your borders. If
Example:
T
he border property allows you to place a When adding a border, you must specify a border you specify two values, the first value will affect the
border around every element on your Web style or the border will not appear on your Web page. IMG {border: none} top and bottom borders and the second value will
page that uses a specific tag. Adding borders The available styles include solid, double, groove, affect the left and right borders. Specifying four values
ridge, inset, outset, dotted, and dashed. will affect the sides of your borders in the following
to elements is useful for making the elements Use the border-left, border-right, order: top, right, bottom, left.
stand out. Some Web browsers do not yet support the dotted border-top and border-bottom properties
and dashed border styles. to specify the information for each side of your Example:
To specify a thickness for a border, use a descriptive borders separately. Separate each property you H1 {border-width: 14px; border-style: double solid;
value (thin, medium or thick) or specify a value You can specify a color for a border using the name use with a semi-colon (;). Some Web browsers border-color: red green blue yellow}
in pixels, millimeters, centimeters, inches, points, of the color, the hexadecimal value of the color or do not yet support these properties.
picas, x-height or em. Use x-height to specify a the amount of red, green and blue in the color (r,g,b). Example:
thickness based on the height of the lowercase
Netscape Navigator does not currently support using H1 {border-left: solid 3px; border-right:
letter "x" for the current font (example: 2ex). Use solid 3px; border-top: double 6px;
em to specify a thickness based on the height of the border property for images (IMG), tables (TABLE)
border-bottom: double 6px}
the current font (example: 2em). or embedded elements (EMBED), such as sounds.
ADD A BORDER

H2 { border: } H2 {border: medium double } H2 {border: medium double #FF0000 }

<P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent mo <P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent mo <P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent mo
Vienna, where he earned a living giving concerts, teaching piano and selling Vienna, where he earned a living giving concerts, teaching piano and selling Vienna, where he earned a living giving concer ts, teaching piano and selling
<BR>One of the most fascinating aspects of Beethoven's life was his triumph <BR>One of the most fascinating aspects of Beethoven's life was his triumph <BR>One of the most fascinating aspects of Beethoven's life was his triumph
which struck him during adulthood. In fact, he composed some of his most po which struck him during adulthood. In fact, he composed some of his most po which struck him during adulthood. In fact, he composed some of his most po

<P>Johann Sebastian Bach was born into a family of musicians in 1685 in Ei <P>Johann Sebastian Bach was born into a family of musicians in 1685 in Ei <P>Johann Sebastian Bach was born into a family of musicians in 1685 in Ei
Germany. Bach's works include church organ and choral music, music for cha Germany. Bach's works include church organ and choral music, music for cha Germany. Bach's works include church organ and choral music, music for cha
⁄ To add a border to ¤ Type border: and ‹ To specify a thickness for › Type the border style ˇ To specify a color for the Note: You can also specify a color ■ The Web browser
every element that uses a then add a blank space. the border, type a thickness you want to use (solid, border, add a blank space by providing the amount of red, displays every element
specific tag, click between (thin, medium or thick) or a double, groove, ridge, and then type the name or green and blue (r,g,b) in the color that uses the tag with
the brackets { } for the tag. value in pixels (example: 5px) inset, outset, dotted or hexadecimal value for the as values or percentages. For the border you specified.
and then add a blank space. dashed). color you want to use example, type rgb(255, 0, 0) or
(example: red or #FF0000). rgb(100%, 0%, 0%) to display
Note: You can also specify a thickness For a list of colors, see the
in millimeters (mm), centimeters (cm), the text in red.
color chart at the front of
inches (in), points (pt), picas (pc), this book.
226 x-height (ex) or em. 227
WRAP TEXT AROUND ELEMENTS CHANGE DISPLAY OF ELEMENTS
T T
he float property allows you to wrap You cannot use the float property to wrap he display property allows you to block-level elements, such as headings (H1 to
text around every element on your Web text around elements that you have absolutely specify how you want to display all H6), within the flow of text.
page that uses a specific tag. For example, positioned. For information on absolute the elements on your Web page that
you may want to wrap text around images (IMG), positioning, see page 236. use a specific tag. Use the list-item value to display elements
tables (TABLE) or H1 headings (H1). as list items. List-item elements will appear as
Use the block value to display elements as block-level elements that display bullets. The
Use the clear property with the left, right
When wrapping text around elements, use the block-level elements. A block-level element list-item value is not yet supported by
or both value to stop text that uses a specific
left value to wrap text around the right side tag from wrapping around elements. The left is offset from the rest of your Web page with many Web browsers.
of each element. The right value allows value stops text from wrapping around elements a blank line above and below the element. The
you to wrap text around the left side of each that use the float: left style. The right block value is useful for displaying elements Using the none value allows you to hide every
element. value stops text from wrapping around elements such as images (IMG) and links (A) on their element on your Web page that uses a specific
that use the float: right style. Use the own lines. tag. When you hide elements, the surrounding
To ensure text wraps correctly around elements, both value to stop text from wrapping around elements will shift to fill the space previously
each element in your HTML document should elements that use either style. The inline value lets you display elements occupied by the hidden elements. You may
appear directly before the text you want to Example: as inline elements. An inline element appears want to temporarily hide elements that you
wrap around the element. H1 {clear: left} on the same line as the surrounding elements. have not yet completed.
The inline value is useful for displaying
WRAP TEXT AROUND ELEMENTS CHANGE DISPLAY OF ELEMENTS
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Into the Wild</TITLE> <TITLE>Classical Music Composers</TITLE>
<STYLE> <STYLE>
IMG { float: left } H2 { display: inline }
</STYLE> </STYLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H1><I>Into the Wild!</I></H1> <P> <H2>Beethoven: </H2>

Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent most of his
<IMG SRC="cougar.jpg" WIDTH="150" HEIGHT="85"> Vienna, where he earned a living giving concer ts, teaching piano and selling his
<P><B>Would you like to venture beyond the beaten path? Do so with Into the Wi compositions.
adventure tours.</B> <BR>One of the most fascinating aspects of Beethoven's life was his triumph over
<BR>Whether you'd like to take a nature photography tour, camp in the rugged wil which struck him during adulthood. In fact, he composed some of his most powerfu
of the Rocky Mountains or go on a canoeing adventure, we have the trip for you! after losing his hearing.</P>
<BR>We provide once-in-a-lifetime adventures for groups or individuals. Call today
information on our packages and sign up for an unforgettable experience!</P> <P> <H2>Bach: </H2>
Johann Sebastian Bach was born into a family of musicians in 1685 in Eisenach, G
<IMG SRC="skier.jpg" WIDTH="150" HEIGHT="85"> Bach's works include church organ and choral music, music for chamber orchestra
<BR><H3>Skiing</H3> 200 cantatas. Although he was more respected as an organist during his lifetime,
<P>Some of our most popular trips are alpine skiing excursions in the Rocky Moun compositions influenced many later composers including Beethoven and Mozar t <
⁄ To wrap text around ‹ To wrap text around ■ The Web browser wraps ⁄ To change the display ‹ Type the way you ■ The Web browser Note: If you specified the
every element on your Web the right side of each text around each element of all the elements that want to display the displays all the elements none value, the elements
page that uses a specific element, type left. that uses the tag. use a specific tag, click elements (block, inline, that use the tag with the will not appear on your
tag, click between the between the brackets { } list-item or none). display style you specified. Web page.
brackets { } for the tag. ■ To wrap text around for the tag.
the left side of each
¤ Type float: and then element, type right. ¤ Type display: and then
add a blank space. add a blank space.
228 229
CHANGE BULLET OR If you have specified an image for the bullets
in your unordered lists, you may also want to
Use the inside or outside value to specify a
position for the bullets or numbers in your lists.
NUMBER STYLE OF LISTS specify a bullet style that will appear if a user's
Web browser does not display images. Some
users have Web browsers that cannot display
The inside value positions bullets or numbers
within lists, wrapping the text for long list items
below the bullets or numbers. The outside
T
he list-style property allows you to Web browsers do not yet fully support the images, while others turn off the display of value positions bullets or numbers outside of
change the bullet style of all the unordered url value. images to browse the Web more quickly. lists, preventing text from wrapping below the
bullets or numbers. Some Web browsers do
lists (UL) or the number style of all the Example: not yet fully support the inside value.
ordered lists (OL) on your Web page. For To specify a new number style for ordered lists,
UL {list-style: url("goldring.gif") circle}
information on creating unordered and ordered use the decimal (1,2,3), lower-alpha (a,b,c), Example:
lists, see pages 40 and 38. upper-alpha (A,B,C), lower-roman (i,ii,iii) or OL {list-style: lower-roman inside}
upper-roman (I,II,III) value. The default number If you want to change the bullet or number
Use the circle ( ), disc ( ) or square ( ) style is decimal. style of only some items in your lists, apply
value to specify a new bullet style for unordered styles locally to the <LI> tags for the list
lists. The default bullet style is disc. If your Web page contains lists with more than items or create a class for the list items. For
26 items, you may want to avoid using the information on applying styles locally, see
If you want to use an image as a bullet, use the lower-alpha or upper-alpha number styles. page 200. To create a class, see page 202.
url value to specify the location and name of the The HTML standard does not define how Web Example:
image on your computer. Interesting bullet images browsers should display these styles once the <LI STYLE="list-style: circle">24-Hour Tech
are available at the www.grapholina.com/Graphics end of the alphabet is reached. Support</LI>
and www.theshockzone.com Web sites. Some
CHANGE BULLET OR NUMBER STYLE OF LISTS
<HTML> <HTML>
<HEAD> <HEAD>
<TITLE>Table of Contents</TITLE> <TITLE>Table of Contents</TITLE>
<STYLE> <STYLE>
UL { list-style: square } OL { list-style: lower-roman }
</STYLE> </STYLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H3>Table of Contents</H3> <H3>Table of Contents</H3>
<UL> <OL>
<LI>Introduction</LI> <LI>Introduction</LI>
<LI>Company History</LI> <LI>Company History</LI>
<LI>Products Offered</LI> <LI>Products Offered</LI>
<LI>Services Offered</LI> <LI>Services Offered</LI>
<LI>Future Goals</LI> <LI>Future Goals</LI>
<LI>Conclusion</LI> <LI>Conclusion</LI>
</UL> </OL>
<H3>Presenters</H3> <H3>Presenters</H3>
CHANGE BULLET STYLE ‹ Type the bullet style ■ The Web browser displays Note: To use an image for the CHANGE NUMBER STYLE ‹ Type the number ■ The Web browser displays
⁄ To change the bullet style you want to use (circle, all the unordered lists on bullets, type url("?") in step 3, ⁄ To change the number style you want to use all the ordered lists on your
of all the unordered lists on disc or square). your Web page with the replacing ? with the location style of all the ordered lists (decimal, lower-alpha, Web page with the number
your Web page, click between bullet style you specified. and name of the image on your on your Web page, click upper-alpha, lower- style you specified.
the brackets { } for the UL tag. computer. To specify the location between the brackets { } roman or upper-roman).
and name of an image, see the for the OL tag.
¤ Type list-style: and then top of page 45.
add a blank space. ¤ Type list-style: and then
add a blank space.
230 231
ALIGN ELEMENTS VERTICALLY ADD PAGE BREAKS

S
se the vertical-align property to text. The text-bottom value lets you align elements tyle sheets allow you to control where page (TABLE) to ensure that information will never follow
U specify a vertical alignment for all the inline

elements on your Web page that use a
specific tag. Inline elements, such as images,
with the bottom edge of the surrounding text.
Use the middle value to align elements with the
middle of the surrounding elements. For example,
breaks will occur when a user prints your
Web page.
Use the page-break-before property with the
your tables on a printed page.
To prevent a page break from occurring before or
after every element that uses a specific tag, use the
are elements that do not automatically appear
on a new line. using the middle value for images (IMG) that appear always value to have a page break occur before avoid value instead of the always value. This is
in a paragraph will align the middle of the images every element that uses a specific tag. For example, useful when you do not want a page break to occur
When vertically aligning elements with text, use with the middle of a line of text. add a page break before H1 headings (H1) to have immediately before or after certain elements on your
the baseline value to align the elements with every H1 heading begin on a new printed page. Web page. The avoid value is not yet supported
the baseline of text. The baseline of text is the Use the top value to align elements with the top of by most Web browsers.
bottom of letters such as "a" rather than letters the highest element on the current line. The bottom Use the page-break-after property with the
such as "g." Use the text-top value to align value lets you align elements with the bottom of the always value to have a page break occur after every Although the page-break-before and
elements with the top edge of the surrounding lowest element on the current line. element that uses a specific tag. For example, you page-break-after properties are part of the
may want a page break to occur after every table HTML standard, they are not yet supported by
some Web browsers.
ALIGN ELEMENTS VERTICALLY ADD PAGE BREAKS

<TITLE>Into the Wild</TITLE> <TITLE>Classical Music Composers</TITLE> <TITLE>Classical Music Composers</TITLE>
IMG { ver tical-align: baseline } H1 { page-break-before: always } TABLE { page-break-after: always }
<H1> <I>Into the Wild!</I></H1>
<P><IMG SRC="cougar.jpg" WIDTH="150" HEIGHT="85" ALIGN="left"> <P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent most of his life <P>Ludwig van Beethoven was born in Bonn, Germany in 1770. He spent most of his life
Whether you'd like to take a nature photography tour, camp in the rugged wilderness of t Vienna, where he earned a living giving concerts, teaching piano and selling his Vienna, where he earned a living giving concer ts, teaching piano and selling his
Rocky Mountains or go on a canoeing adventure, we have the trip for you! compositions. compositions.
<BR>We provide once-in-a-lifetime adventures for groups or individuals. Call today for <BR>One of the most fascinating aspects of Beethoven's life was his triumph over deafn <BR>One of the most fascinating aspects of Beethoven's life was his triumph over deafn
information on our packages and sign up for an unforgettable experience!</P> which struck him during adulthood. In fact, he composed some of his most powerful work which struck him during adulthood. In fact, he composed some of his most powerful work
<P><IMG SRC="skier.jpg" WIDTH="150" HEIGHT="85" ALIGN="left">
Some of our most popular trips are alpine skiing excursions in the Rocky Mountains. We <H1>Bach</H1> <TABLE BORDER="8">
fly you to the top of the slopes by helicopter and provide comfortable accommodations a <P>Johann Sebastian Bach was born into a family of musicians in 1685 in Eisenach, <TR>
end of a fun-filled day! Cross-country ski packages are also available!</P> Germany. Bach's works include church organ and choral music, music for chamber <TH>Composer</TH>
orchestras and over 200 cantatas. Although he was more respected as an organist durin <TH>Year of Bir th</TH>
</BODY> his lifetime, Bach's compositions influenced many later composers, including Beethoven </TR>
</HTML> and Mozart.</P> <TR>
<TD>Beethoven</TD>
⁄ To vertically align ¤ Type vertical-align: ? ■ The Web browser ADD PAGE BREAKS BEFORE Note: To prevent a page ADD PAGE BREAKS AFTER Note: To prevent a page
all the inline elements replacing ? with the displays all the elements ELEMENTS break from occurring before ELEMENTS break from occurring after
on your Web page that way you want to align that use the tag with the ⁄ To add a page break before every element that uses a ⁄ To add a page break after every element that uses a
use a specific tag, click the elements (baseline, vertical alignment you every element on your Web specific tag, type avoid every element on your Web specific tag, type avoid
between the brackets { } text-top, text-bottom, specified. page that uses a specific tag, instead of always in step 1. page that uses a specific tag, instead of always in step 1.
for the tag. middle, top or bottom). type page-break-before: always type page-break-after: always
between the brackets { } for between the brackets { } for
the tag. the tag.
232 233
POSITION ELEMENTS RELATIVELY
Relative positoning allows you to create
se the position property with the Specify the distance you want to move the interesting visual effects by overlapping
U relative value to move every element

that uses a specific tag from its original
location on your Web page. This is useful if
elements in pixels or as a percentage of the
parent elements’ height or width. You can also
specify the distance in millimeters, centimeters,
elements. For example, overlap text to
create a shadow effect.
TYPE THIS: RESULT:

you want to move elements, such as images, inches, points, picas, x-height or em. Use
<HTML>
without changing the position of the surrounding x-height to specify the distance based on the <HEAD>
XYZ Products
XYZ Products
elements. Positioning elements relatively may height of the lowercase letter "x" for the current <TITLE>XYZ Corporation</TITLE>
cause elements on your Web page to overlap. font (example: 2ex). Use em to specify the <STYLE>
distance based on the height of the current H1.ontop {position: relative; bottom: 57px; left: 5px; color: blue}
The top, bottom, right and left properties font (example: 2em). </STYLE>
allow you to move elements relative to their </HEAD>
original locations. For example, specify the Some Web browsers do not yet fully support <BODY>
<H1>XYZ Products</H1>
top value to move elements away from the top relative positioning. <H1 CLASS="ontop">XYZ Products</H1>
edge of their original locations. Using more than
one property allows you to move elements in
more than one direction at a time. This is useful
for moving elements on a diagonal.
POSITION ELEMENTS RELATIVELY
<HTML> <HTML> <HTML> C:\My Documents\Web Pages\index.html

IMG { position: relative; } IMG {position: relative; top : 70px } IMG {position: relative; top: 70px ; left: 220px }
<H1><I>Into the Wild!</I></H1> <H1><I>Into the Wild!</I></H1> <H1><I>Into the Wild!</I> </H1>
<P><B>Join Into the Wild for the adventure of a lifetime!</B> <P><B>Join Into the Wild for the adventure of a lifetime!</B> <P> <B>Join Into the Wild for the adventure of a lifetime!</B>
<BR>Whether you'd like to take a nature photography tour, camp in the rugged wilderne <BR>Whether you'd like to take a nature photography tour, camp in the rugged wilderne <BR>Whether you'd like to take a nature photography tour, camp in the rugged wilderne
the Rocky Mountains or go on a canoeing adventure, we have the trip for you!</P> the Rocky Mountains or go on a canoeing adventure, we have the trip for you!</P> the Rocky Mountains or go on a canoeing adventure, we have the trip for you!</P>
<P><IMG SRC="cougar.jpg" WIDTH="170" HEIGHT="105"> <P><IMG SRC="cougar.jpg" WIDTH="170" HEIGHT="105"> <P> <IMG SRC="cougar.jpg" WIDTH="170" HEIGHT="105">
⁄ To change the relative ¤ Type position: relative ‹ To move the elements › Type : ? replacing ? with ˇ To move the elements Note: Moving elements ■ The Web browser Note: If elements overlap, you
position of every element and then type a semi-colon (;). from their original locations, the distance you want to in more than one in more than one direction displays all the elements can change the way they overlap
that uses a specific type the edge you want to move the elements in pixels direction at a time, type allows you to move the that use the tag with the as shown on the top of page 237.
tag, click between the move the elements away (example: 70px). a semicolon (;) and then elements on a diagonal. positioning you specified.
brackets { } for the tag. from (top, bottom, right repeat steps 3 and 4.
or left). Note: You can also specify a distance
as a percentage of the parent elements’
height or width or in millimeters (mm),
centimeters (cm), inches (in),
234 points (pt), picas (pc), x-height (ex) 235
or em.
POSITION ELEMENTS ABSOLUTELY After you position elements on your Web page, Netscape Navigator's <LAYER> tag also allows
se the position property with the parent elements. Use two properties to position
U
the elements may overlap other elements. you to absolutely position elements. Use the
absolute value to specify an absolute the elements in relation to two edges of the Use the z-index property in the tag for each <LAYER> tag to divide the elements on your
position for every element on your Web parent elements, such as the top and left edges. element you positioned to control how the Web page into layers, with the elements
page that uses a specific tag. elements will overlap. You can specify a negative between each <LAYER> and </LAYER> tag
Specify the distance you want to position or positive value. The higher the z-index value making up one layer. To absolutely position
Absolutely positioning elements removes the elements away from a parent element edge you assign, the closer to the top an overlapping a layer, use the TOP and LEFT attributes to
elements from the natural flow of your Web page. in pixels or as a percentage of the parent element will appear. The z-index property can specify a distance in pixels from the top and
be used with elements that have been absolutely left edges of a Web browser window. The
Other elements on your page will shift to fill in elements' height or width. You can also specify or relatively positioned. For information on WIDTH and HEIGHT attributes allow you to
the space previously occupied by the elements the distance in millimeters, centimeters, inches, relative positioning, see page 234. specify the dimensions for a layer in pixels.
you positioned. This may cause elements to points, picas, x-height or em. Use x-height to If layers overlap, use the Z-INDEX attribute to
Example:
overlap. specify the distance based on the height of the specify the order you want the layers to overlap.
<IMG SRC="backdrop.gif" STYLE="z-index: -1">
lowercase letter "x" for the current font. Use em Example:
The top, bottom, left and right properties to change the distance based on the height of <LAYER TOP="40" LEFT="100" WIDTH="250" HEIGHT="100"
allow you to specify an absolute position for the current font. Z-INDEX="1">Latest Stories<IMG SRC="newspaper.gif">
elements in relation to their parent elements. </LAYER>
For example, use the left property to position Some Web browsers do not yet fully support
elements in relation to the left edge of their absolute positioning.
POSITION ELEMENTS ABSOLUTELY

IMG { position: absolute; } IMG {position: absolute; bottom : 185px } IMG {position: absolute; bottom: 185px ; left: 20px }
<H1><I><CENTER>Into the Wild!</CENTER> </I> </H1> <H1><I><CENTER>Into the Wild!</CENTER></I></H1> <H1><I><CENTER>Into the Wild!</CENTER></I></H1>
<IMG SRC="cougar.jpg" WIDTH="185" HEIGHT="130"> <IMG SRC="cougar.jpg" WIDTH="185" HEIGHT="130"> <IMG SRC="cougar.jpg" WIDTH="185" HEIGHT="130">
<P ALIGN="right"><B>Are you interested in venturing beyond the beaten path? <P ALIGN="right"><B>Are you interested in venturing beyond the beaten path? <P ALIGN="right"> <B>Are you interested in venturing beyond the beaten path?
<BR>Try an exciting trip with Into the Wild's adventure tours!</B> </P> <BR>Try an exciting trip with Into the Wild's adventure tours!</B></P> <BR>Try an exciting trip with Into the Wild's adventure tours!</B></P>
<P>Whether you'd like to take a nature photography tour, camp in the rugged wilderness <P>Whether you'd like to take a nature photography tour, camp in the rugged wilderness <P>Whether you'd like to take a nature photography tour, camp in the rugged wilderness
We provide once-in-a-lifetime adventures for groups or individuals. Call us today for We provide once-in-a-lifetime adventures for groups or individuals. Call us today for We provide once-in-a-lifetime adventures for groups or individuals. Call us today for
<IMG SRC="skier.jpg" WIDTH="100" HEIGHT="50"> <IMG SRC="skier.jpg" WIDTH="100" HEIGHT="50"> <IMG SRC="skier.jpg" WIDTH="100" HEIGHT="50">
<H3>Skiing</H3> <H3>Skiing</H3> <H3>Skiing</H3>
<P>Some of our most popular trips are alpine skiing excursions in the Rocky Mountains. <P>Some of our most popular trips are alpine skiing excursions in the Rocky Mountains. <P>Some of our most popular trips are alpine skiing excursions in the Rocky Mountains.
will fly you to the top of the slopes by helicopter and provide comfortable will fly you to the top of the slopes by helicopter and provide comfortable will fly you to the top of the slopes by helicopter and provide comfor table
accommodations at the end of a fun filled day! Cross country ski packages are also accommodations at the end of a fun filled day! Cross country ski packages are also accommodations at the end of a fun filled day! Cross country ski packages are also
⁄ To specify an absolute ¤ Type position: absolute ‹ Type the parent › Type : ? replacing ? with ˇ If you want to position the ■ The Web browser Note: If elements overlap,
position for every element and then type a semi-colon (;). element edge you want the distance in pixels you elements in relation to two displays all the elements you can change the way
that uses a specific tag, to use to position the want the elements to appear sides of their parent elements, that use the tag with the they overlap as shown
click between the elements (top, bottom, from the edge you specified type a semi-colon (;) and then positioning you specified. on the top of this page.
brackets { } for the tag. left or right). (example: 185px). repeat steps 3 and 4.
Note: You can specify a distance as
a percentage of the parent elements'
height or width or in millimeters (mm),
centimeters (cm), inches (in), points (pt),
picas (pc), x-height (ex) or em.
236 237
HTML PUBLISH WEB PAGES 16
SPECIFY KEYWORDS SPECIFY A WEB PAGE SUMMARY
T T
he <META> tag allows you to specify both general and specific keywords can help he <META> tag allows you to specify a of your Web page contains a banner
keywords to help search tools catalog increase the probability that the words users summary that you want search tools to or a list of links rather than a summary.
your Web page. enter in a search tool will match your keywords. display when they find your Web page.
For example, if your Web page contains A search tool is a Web site that helps users When specifying a summary for your Web
Search tools are Web sites that help users find information about corvettes, use the keywords quickly find information on the Web. Popular page, limit the summary to one or two
information of interest on the Web. Popular "car" and "corvette." You may also want to include search tools include Yahoo! (www.yahoo.com) sentences. Most search tools will not display
search tools include Yahoo! (www.yahoo.com) misspelled words that users may type, such as and Lycos (www.lycos.com). more than three lines for a summary. A
and Lycos (www.lycos.com). When users enter "corvete." concise, descriptive summary can help
words in a search tool that match your keywords, If you do not specify a summary for your Web convince users to visit your Web pages.
your Web page will be more likely to appear in Including many keywords will not necessarily page, search tools will use text from the top
the search results. increase the probability that your Web page will of your Web page for the summary. This may The summary you specify using the <META>
appear in the search results. It is more important be confusing for users, particularly if the top tag will not appear on your Web page.
The best keywords are simple, common words to carefully select the keywords that you predict
that accurately describe your Web page. Using users will enter.
SPECIFY KEYWORDS SPECIFY A WEB PAGE SUMMARY
<HTML> <HTML>
<HEAD> <HEAD>
<META NAME="keywords" CONTENT="car, corvette, corvete, mustang, speed"> <META NAME="description" CONTENT="Information and pictures of spor ts cars!">
<TITLE>My Spor ts Car Home Page</TITLE> <TITLE>My Spor ts Car Home Page</TITLE>
</HEAD> </HEAD>
<BODY> <BODY>
<H2><CENTER>My Spor ts Car Home Page</CENTER> </H2> <H2><CENTER>My Sports Car Home Page</CENTER></H2>
<P> <I><CENTER>VROOOOM!!!!</CENTER> </I> </P> <P> <I> <CENTER>VROOOOM!!!!</CENTER></I></P>
<CENTER><IMG SRC="car.jpg"></CENTER> <CENTER> <IMG SRC="car.jpg"> </CENTER>
<P>Welcome to my Web site, where you can find information about many popular sports <P>Welcome to my Web site, where you can find information about many popular spor ts
<BR>These cars are fast, sleek and a thrill to drive!</P> <BR>These cars are fast, sleek and a thrill to drive!</P>
</BODY> </BODY>
</HTML> </HTML>
⁄ Between the <HEAD> ¤ Type CONTENT="?"> ■ Users will not see the ⁄ Between the <HEAD> ¤ Type CONTENT="?"> ■ Users will not see the
and </HEAD> tags, type replacing ? with a list of keywords you specified and </HEAD> tags, type replacing ? with a summary summary you specified
<META NAME="keywords" keywords that describe when they view your <META NAME="description" of your Web page. when they view your
and then add a blank your Web page. Separate Web page. and then add a blank space. Web page.
space. each keyword with a
comma and a blank space.
238 239
SPECIFY AUTHOR AND
COPYRIGHT INFORMATION SPECIFY AN EXPIRY DATE
T T
he <META> tag lets you specify information The author and copyright information you specify he <META> tag allows you to specify when you want a Web browser to retrieve a new
about your Web page, including the name will not appear on your Web page. Only users who an expiry date for your Web page to help copy of your Web page from the Web server.
of the author and a copyright statement. view the HTML code for your Web page will see ensure that users will see the latest version
the information. For information on viewing the of the page. This is useful if your Web page The format for expiry dates is standardized to
When specifying the name of the author, you HTML code for a Web page, see page 9. contains information that is regularly updated, ensure that Web browsers will be able to
may also want to include the names of any such as news articles. recognize the date (example: Tues, 6 Jun 2001
people who helped create the Web page. 21:59:59 GMT). Some parts of the date, such
Some people use the <META> tag to provide
information about the program they used When a user displays a Web page, a copy of as the weekday or time, may be omitted.
When specifying copyright information, you the page is stored in the temporary memory,
to create a Web page. Type <META NAME=
should include the year of the copyright and the "generator" CONTENT="?"> replacing ? or cache, on their computer. The next time the Search tools may also use the expiry date you
name of the person or company that holds the with information about the program, such user displays the Web page, the user's Web specify. When search tools find your Web page,
copyright. Specifying copyright information lets as the name of the program. browser may redisplay the stored copy rather they create a record of the page in their index.
you indicate that you do not want people to Example: than retrieving a new copy from the Web server. After the expiry date passes, search tools may
copy the contents of your Web page without Providing an expiry date allows you to specify remove your Web page from their index.
<META NAME="generator" CONTENT="WordPad">
your permission.
SPECIFY AUTHOR SPECIFY COPYRIGHT INFORMATION SPECIFY AN EXPIRY DATE

<META NAME="author" CONTENT="Rosemary Baker"> <META NAME="author" CONTENT="Rosemary Baker"> <META HTTP-EQUIV="Expires" CONTENT="Tues, 6 Jun 2001 21:59:59 GMT">
</HEAD> <META NAME="copyright" CONTENT="2000 Grape Expectations"> </HEAD>
<BODY> </HEAD> <BODY>
<BODY>
<H4> <CENTER> <I>A guide to homemade wine-making for the wine connoisseur!</I> <H4><CENTER><I>A guide to homemade wine-making for the wine connoisseur!</I>
</CENTER> </H4> <H4> <CENTER> <I>A guide to homemade wine-making for the wine connoisseur!</I> </CENTER> </H4>
</CENTER> </H4>
<P> <IMG SRC="barrel.gif" HSPACE="10" VSPACE="10" ALIGN="left" WIDTH="80" <P><IMG SRC="barrel.gif" HSPACE="10" VSPACE="10" ALIGN="left" WIDTH="80" HE
HEIGHT="110">Welcome to our Web site about wine-making. Our names are Rosema <P> <IMG SRC="barrel.gif" HSPACE="10" VSPACE="10" ALIGN="left" WIDTH="80" "110">Welcome to our Web site about wine-making. Our names are Rosemary and Ala
and Alan Baker, and we have been making our own wine for 20 years. Currently we HEIGHT="110">Welcome to our Web site about wine-making. Our names are Rosema Baker, and we have been making our own wine for 20 years. Currently we have over 20
have over 200 bottles of homemade wine in our wine cellar. These pages contain and Alan Baker, and we have been making our own wine for 20 years. Currently we bottles of homemade wine in our wine cellar. These pages contain everything you need
everything you need to know to make your own red, white or blush wine, including the have over 200 bottles of homemade wine in our wine cellar. These pages contain know to make your own red, white or blush wine, including the equipment you need, w
equipment you need, what kind of grapes you should buy and tips and tricks to make everything you need to know to make your own red, white or blush wine, including the kind of grapes you should buy and tips and tricks to make your wine the best you've ev
your wine the best you've ever tasted! So jump right in and don't be afraid to have <I> equipment you need, what kind of grapes you should buy and tips and tricks to make tasted! So jump right in and don't be afraid to have <I>Grape Expectations!</I> </P>
Grape Expectations!</I> </P> your wine the best you've ever tasted! So jump right in and don't be afraid to have <I>
Grape Expectations!</I> </P> <P> <IMG SRC="grapes.gif"> <B><A HREF="equipment.html">Equipment</A> &
<P> <IMG SRC="grapes.gif"> <B> <A HREF="equipment.html">Equipment</A>             &n
             <P> <IMG SRC="grapes.gif"> <B> <A HREF="equipment.html">Equipment</A>
⁄ Between the <HEAD> ¤ Type CONTENT="?"> ⁄ Between the <HEAD> ¤ Type CONTENT="?"> ⁄ Between the <HEAD> and ¤ Type CONTENT="?"> ■ Users who revisit your Note: If a Web browser cannot
and </HEAD> tags, type replacing ? with the and </HEAD> tags, type replacing ? with the year </HEAD> tags, type <META replacing ? with an Web page after the expiry recognize the expiry date you
<META NAME="author" name of the person who <META NAME="copyright" of the copyright and the HTTP-EQUIV="Expires" and expiry date for your date has passed will see a specified, the browser will
and then add a blank created the Web page. and then add a blank name of the person or then add a blank space. Web page (example: new copy of the Web page. consider the page expired.
space. space. company who holds the Tues, 6 Jun 2001 Enter an expiry date of "0" in
copyright. 21:59:59 GMT). step 2 to have Web browsers
always retrieve the latest copy
of your Web page.
240 241
PREVENT ROBOTS FROM

INDEXING A WEB PAGE WEB PRESENCE PROVIDERS
any search tools use programs, called your Web page includes links to Web pages created eb presence providers are companies To find a Web presence provider that suits
M robots or spiders, to find new and updated

pages on the Web. The <META> tag allows
you to prevent most robots from indexing your Web
by friends or colleagues who do not want their
pages indexed.
If you later decide that you want robots to index
W that make Web pages available on
the Web. Web presence providers
store Web pages on computers called Web
your needs, try performing a search for "Web
hosting" or "Web services" in a search tool or
check your local yellow pages. You may also
page. This is useful when you have created a Web servers. Web servers monitor and control want to ask other Web page authors which
page for a specific audience, such as your family or either your Web page or any linked Web pages, access to Web pages. Web presence provider they recommend.
company, and do not want other people to access make sure that you remove the appropriate value(s)
the Web page. from your HTML document.
TYPES OF WEB PRESENCE PROVIDERS
Use the noindex value to prevent robots from If your Web page has already been indexed, you may
indexing a Web page and the nofollow value to want to remove the Web page from a search tool.
Most search tools include a Web page that allows Internet Service Providers Dedicated Web Presence Providers
prevent robots from indexing any Web pages linked
to the page. The nofollow value is useful when you to remove your Web pages from their index. Internet service providers are companies that offer Dedicated Web presence providers are
people access to the Internet. Most Internet service companies that specialize in publishing
providers offer at least 5 Megabytes (MB) of space Web pages for a fee. Dedicated Web
PREVENT ROBOTS FROM INDEXING A WEB PAGE on their Web servers where customers can publish presence providers are flexible and
their Web pages free of charge. Many Internet offer features that other Web presence
service providers also offer additional options for providers do not offer such as advanced
a fee. These options may include extra mailboxes support for multimedia. Popular dedicated
<HTML> for e-mail messages, improved technical support Web presence providers include Hostess
<HEAD>
<TITLE>Smith Family Home Page</TITLE> and CGI script hosting. Web Hosting (www.hostess.com),
<META NAME="robots" CONTENT="noindex, nofollow">
</HEAD>
pair Networks (www.pair.com) and
<BODY>
Commercial Online Services DreamHost (www.dreamhost.com).
<H1><CENTER>Welcome Smith Family Members and Friends!</CENTER> </H1>
<P>The Smith Family has grown over the years, and now we have created a Web site to Commercial online services such as America
in touch and update each other about family events.
<BR>It will be updated regularly, and anyone who would like to post some family-related Online will publish Web pages customers create
should contact the free of charge. Many commercial online services Your Own Web Server
<A HREF="mailto:[email protected]">Webmaster</A>.</P>
offer easy-to-use programs to help people create Purchasing your own Web server is the most
<H3>New Addition!</H3>
<P>There is a new addition to the Smith family! Mike and Janet Smith have given birth to
and publish Web pages. expensive way to publish Web pages and
baby boy named Justin. He is doing very well. Congratulations!</P>
requires you to set up a full-time connection
</BODY>
</HTML>
Free Web Presence Providers to the Internet using a connection such as
Many companies on the Web will publish your a DSL (Digital Subscriber Line) or a cable
Web pages for free. These companies offer a modem. Setting up and maintaining your
limited amount of storage space and may place own Web server is difficult but will give you
advertisements on your Web pages. Free Web the greatest amount of control over your
⁄ Between the <HEAD> ¤ Type CONTENT="noindex, ■ When users view your Web pages.
and </HEAD> tags, type to prevent robots from Web page, the information presence providers may also offer limited technical
<META NAME="robots" and indexing your Web page. you specified to prevent support and impose restrictions on the size and
then add a blank space. Then add a blank space. robots from indexing the content of your Web pages. Companies such as
page will not appear. Yahoo! GeoCities (geocities.yahoo.com), Tripod
‹ Type nofollow"> to
prevent robots from (www.tripod.lycos.com) and Xoom.com (xoom.com)
indexing any Web pages are examples of free Web presence providers.
linked to your Web page.
242 243
CHOOSE A WEB
PRESENCE PROVIDER
WEB PRESENCE PROVIDER CONSIDERATIONS WEB PRESENCE PROVIDER CONSIDERATIONS (CONTINUED)
Technical Support Storage Space Domain Name Registration Web Server Features
A Web presence provider should have a Most Web presence providers limit the Your Web page address, or domain name, is When choosing a Web presence provider,
technical support department to answer your amount of storage space you can use. usually the name of your Web presence provider consider the Web server features that the
questions. You should be able to contact the Choose a Web presence provider that allows followed by the path to your Web pages on provider offers. For example, if your Web
department by telephone or by e-mail. A good you to store at least 5 Megabytes (MB) of their Web server. For a fee, most Web presence pages include forms that require custom
technical support department will respond to information. If your Web pages contain providers will register a personalized domain CGI scripts, the Web server you use must
questions you send by e-mail within a day. many large multimedia files, such as sounds name for you. A personalized domain name is allow you to upload and use your own CGI
and videos, you may want to consider a easy to remember and will not change if you scripts. If your Web pages include advanced
Web presence provider that will allow you switch to another Web presence provider. Visit features such as streaming multimedia files,
to purchase additional storage space. the www.networksolutions.com Web site to the Web server must support these features
Traffic Limit determine if the domain name you want to for your Web pages to work properly.
When users view your Web pages, information Available Bandwidth use has already been registered.
transfers from the Web server to their Bandwidth is the amount of data that can
computers. The amount of information that Database Access
be transferred in a set amount of time.
transfers depends on the number of users who A Web presence provider's bandwidth is Secure Web Servers Consider choosing a Web presence provider
view your Web pages and the total file size of determined by the speed of its connections that lets you use a database on the Web
your pages. Most Web presence providers limit Many Web presence providers offer secure Web
to the Internet. A high bandwidth can help server. A database program gives users
the amount of information that can transfer in servers, which allow you to publish Web pages
decrease the amount of time users spend access to a large amount of information.
one day. If the limit is exceeded, you may have that request confidential information from users,
waiting to view your Web pages. Keep in Databases can be used to implement
to pay extra. You should choose a Web presence such as credit card information. Secure Web
mind that the maximum bandwidth of a applications that manipulate large amounts
provider that allows at least 50 Megabytes (MB) servers use software to encode confidential
Web presence provider is not as important of data, such as Web-based bulletin boards
of information to transfer in one day. information that transfers between users and
as the amount of bandwidth that is available. and online shopping systems.
the Web server.
You should ensure that a Web presence
provider has enough available bandwidth
Reliability to suit your Web site's needs. Shell Access
Shopping Software
Make sure the Web presence provider you Access Logs Shell access allows you to edit Web pages
choose is reliable. A Web presence provider If you plan to use your Web pages to sell directly on a Web server. This is faster than
A good Web presence provider will supply products on the Web, consider a Web editing the pages on your computer and
should be able to tell you how often their Web
you with statistics about your Web pages, presence provider that offers shopping then transferring the updated pages to the
servers shut down. You may also want to ask a
such as where your users are from. You may software. Shopping software helps you Web server. Shell access lets you edit your
Web presence provider for customer references
also be able to view any error messages create Web pages that accept orders, verify Web pages from any computer connected
that you can contact. Keep in mind that all Web
users have seen when viewing your Web credit card numbers, generate invoices and to the Internet, which is useful if you plan
presence providers occasionally shut down
pages, such as "Page Not Found." These organize product shipments. to update your Web pages from more than
their servers for maintenance and upgrades.
statistics can help you determine if you one location.
need to make changes to your Web pages.
244 245
TRANSFER WEB PAGES
TO A WEB SERVER You can obtain the latest version of
WS_FTP Pro at the www.ipswitch.com
FTP programs allow you to set up multiple
connections. This is useful if you want to use
ou must transfer your Web pages to a To set up a connection to a Web server, you Web site. Fetch is available at the one connection to transfer your Web pages
Y Web server to make the pages available

on the Web.
You need a File Transfer Protocol (FTP) program
must know the address of the server, your
user ID and your password. If you do not
know this information, contact your Web
www.dartmouth.edu/pages/sofdev/fetch.html
Web site.
You can create a new folder to store and

to a Web server and another connection to
download files from a different Web server.
Perform steps 1 to 9 below for each
connection you want to set up.
presence provider. organize your Web server connections. In the
to transfer your Web pages to a Web server. Popular
Configured Sites area of the Connection dialog You can delete a connection you no longer
FTP programs include WS_FTP Pro for Windows Many FTP programs allow you to save your box, click the folder you want to store the new need. Click the connection in the Configured
and Fetch for Macintosh. In the example below, password, which prevents you from having subfolder. If you want to create a main folder, Sites area of the Connection dialog box and
we use WS_FTP Pro version 6.5. to retype your password each time you click the Sites folder. Then click to create then click to delete the connection.
transfer Web pages to your Web server. When the folder. In the New Folder dialog box, Click Yes in the dialog box that appears
Before you can transfer Web pages to a Web you save your password, anyone who uses type the name of the new folder and then to confirm the deletion.
server, you must set up a connection to the Web your computer will be able to connect to your click Finish.
server. You only need to set up a connection to a Web server, so you should not save your
Web server once. After you set up a connection, password if other people will have access
you can connect to the Web server at any time. to your computer.
SET UP A CONNECTION CONNECT TO WEB SERVER
My Compu My Compu My Compu My Compu
My Docume My Docume My Docume My Docume
Internet Internet Internet Internet www.company.com

Explorer Explorer Explorer Explorer
tsmith
Network Network Network Network

Neighborho Neighborho Neighborho Neighborho
Recycle B Recycle B Recycle B Recycle B MySite
Setup MS Setup MS Setup MS Setup MS

Internet Internet Internet Internet
Access Access Access Access
⁄ Start the FTP program ‹ Type a name for ■ The name of the ■ The address of the ‡ Click this area and ° To save your password ⁄ Click the connection for the ¤ Click Connect to
you will use to transfer your the connection. connection appears Web server you specified type your password. A so you will not need to Web server you want to transfer connect to the Web
Web pages to a Web server. in this area. appears in this area. symbol ( x ) appears for retype the password again your Web pages to. server.
› Click this area and each character you type later, click this option
■ The Connection dialog type the address of the Á Click this area and to prevent others from ( changes to ). ■ If the connection you set up
box appears. Web server you want type your user ID. seeing your password. is not displayed, click the plus
to transfer your Web · Click Save to have sign ( ) beside the Ipswitch
¤ Click to display the pages to. the program store the folder ( changes to ).
New Site dialog box and set information you entered
up a new connection to the ˇ Click Finish to for the connection.
CONTINUED
Web server. continue.
246 247
TRANSFER WEB PAGES
TO A WEB SERVER (CONTINUED) You should check all references to files on your
Web pages before transferring the pages to a
Web server. For example, if an image on a Web
If you have accidentally transferred a file to
the Web server, you should delete the file
from the server. This helps save storage space
nce you have connected to a Web may automatically disconnect you. This helps page is stored in the same folder as the Web on the Web server. To delete a file from the
O server, you can transfer information

to the server.
You can transfer a single file, multiple files
ensure that the Web server's resources are
available for other people who need to access
the server.
page, make sure you specified just the name
of the image (example: banner.gif). If the image
is stored in a subfolder, make sure you specified
the location and name of the image (example:
Web server, select the file in the right pane
of the WS_FTP Pro window and then click the
Delete button. Click Yes in the dialog box that
appears to confirm the deletion.
images/banner.gif).
or an entire folder to the Web server at once. If you later make changes to the Web pages
Before you transfer files and folders to a Web stored on your computer, you must transfer
Before transferring your Web pages to a Web
server, you must locate the folder on the the updated pages to the Web server. The server, you should make sure the Web page
server you want to transfer your files and updated Web pages will replace the old Web file names all have the .html or .htm extension
folders to. This folder is often named "public." pages on the server. When you transfer updated and do not include spaces or special characters,
If you do not know the name of the folder, pages, a message may appear indicating that such as * or &. You should also check with your
contact your Web presence provider. the updated pages will replace the old pages. Web presence provider to ensure that you have
used the correct name for your home page.
If your connection to the Web server is idle
for an extended period of time, the server
TRANSFER WEB PAGES TO A WEB SERVER
WS_FTP Pro www.company.com WS_FTP Pro www.company.com WS_FTP Pro www.company.com

WS_FTP Pro www.company.com
My Compu My Comp My Comp My Comp
/public /public /public

My Docume My Docu My Docu My Docu
cooking_tips.~
public
Internet Intern Intern recipes.htm Intern
Explorer Explor Explor Explor
Web Pages
Network Netwo Netwo Netwo

Neighborho Neighbor Neighbor Neighbor
Recycle B Recycle Recycle Recycle
Setup MS Setup M Setup M Setup M

Internet Intern Intern Intern
Access Acces Acces Acces
■ The WS_FTP Pro ⁄ Locate the folder you ■ This area displays the Note: You can double-click ˇ Click the file or folder Á Click to transfer ■ The file or folder appears ° Click Close to end
window appears. want to transfer your folders and files stored to move up one level in the you want to transfer to the file or folder to the on the Web server. the connection to the
Web pages to. In many on your computer. folder structure. the Web server. Web server. Web server.
■ This area displays the cases, the folder is ‡ Repeat steps 3 to 6 for
folders and files stored named "public." ‹ Locate the folder that › Double-click the folder each file and folder you · Click Exit to exit
on the Web server. contains the Web page(s) to display the contents of want to transfer. the program.
¤ Double-click the folder you want to transfer to the folder.
to display the contents of the Web server.
the folder.
248 249
TEST YOUR WEB PAGES PUBLICIZE YOUR WEB PAGES

nce you have published your should also make sure that your Web nce you have published your Web
O Web pages, you should test the

pages to make sure that they
look and work the way you planned.
pages have a consistent design and
writing style and do not contain any
formatting or layout errors.
O pages, you should let people know
about the pages. There are several
ways to publicize your Web pages.
Verify that users will be able to easily
browse through your information. You PUBLICIZE YOUR WEB PAGES
E-mail Messages Newsgroups

TEST YOUR WEB PAGES
Most e-mail programs offer a feature, called Post an announcement about your Web pages
a signature, that allows you to add the same to discussion groups on the Internet called
Check Links View at Different Resolutions information to the end of every e-mail newsgroups. Make sure you choose newsgroups
Check the links on your Web pages to make sure The resolution of a monitor determines message you send. Include a link to your that discuss topics related to your Web pages.
that they will take users to the intended destinations. the amount of information that will appear Web pages in your signature to publicize Many people announce new and updated Web
Visit the linked Web pages regularly to make sure on a screen. View your Web pages using the pages in all your e-mail messages. pages in the comp.infosystems.www.announce
that they still exist and contain useful information. common resolutions, such as 640x480 and newsgroup.
Users will become frustrated if they select a link that 800x600, to determine if your information
Exchange Links
is no longer relevant or displays an error message. will fit properly on most screens. Mailing Lists
If another Web page discusses topics
Use a Validation Service similar to yours, ask the author to include Send an announcement about your Web
a link to your Web pages if you do the pages to carefully selected mailing lists on the
A validation service can check your Web pages for Internet. A mailing list is a discussion group that
HTML errors. Validation services are useful even if View in Different Web Browsers same. This allows people reading the other
Web page to easily visit your Web pages. communicates through e-mail. You should read
your Web pages appear to work properly, since invalid View your Web pages in different Web the messages in a mailing list before sending an
HTML code may cause future problems. Validation browsers. Each Web browser will display announcement to ensure that the members will
services are available at the validator.w3.org and your Web pages in a slightly different way. Join a Web Ring be interested in your Web pages. A directory of
www2.imagiware.com/RxHTML Web sites. Test your Web pages with the two most mailing lists is available at the www.liszt.com
A Web ring is a group of related Web sites
popular Web browsers--Microsoft Internet Web site.
Try Different Transfer Speeds that are all linked together. Each site in a
Explorer and Netscape Navigator.
Web ring publicizes the other sites in the
Determine how long your Web pages will take to Search Tools
ring. Use a search tool such as Yahoo!
appear at different transfer speeds. Many people use Submit your Web pages to search tools to
(www.yahoo.com) to find a Web ring
modems that transfer information at 56 Kbps, but help users find the pages. Popular search
View on Different Computers related to the topic of your Web pages.
slower modems are still common. Web pages with tools include AltaVista (www.altavista.com)
large file sizes may take a long time to transfer. Web pages can look different when and Yahoo! (www.yahoo.com). You may also
displayed on different types of computers, Web Page Advertisements want to submit your Web pages to specialized
Turn Off Images such as a PC or Macintosh. View your search tools that feature Web sites about a
Some users turn off the display of images to browse Web pages on different computers to Many companies set aside areas on their
specific topic, such as HumorSearch
the Web more quickly, while others use text-based ensure that the pages will appear the Web pages where you can advertise your
(www.humorsearch.com).
Web browsers that cannot display images. You way you planned and that multimedia Web pages. The LinkExchange helps you
should view your Web pages without images to you added to your Web pages will work advertise your Web pages free of charge. To submit your Web pages to many search
ensure that users who do not see images will find correctly. The LinkExchange is located at the tools at once, visit the www.submit-it.com
your pages useful. adnetwork.linkexchange.com Web site. or www.submiturl.com Web site.
250 251
TROUBLESHOOT YOUR WEB PAGES

COMMON PROBLEMS
I
f your Web pages do not appear the way the problem. Locating errors in a Web page can
you expect when you display the pages in be difficult, since Web browsers display pages
Missing Images The Web Browser Displays Your
a Web browser, there are several common containing incorrect HTML code as best as they HTML Code
HTML errors you can check for to troubleshoot can rather than generating error messages. If an image does not appear on your Web
page, check the file name of the image. If you did not save your Web page with
Make sure you spelled the name correctly, the .html or .htm extension, some Web
COMMON ERRORS browsers will display your HTML code.
using the correct uppercase and lowercase
letters. You should also verify that you are Check that you did not accidentally give
Typing Errors Incorrect Path using the proper extension in the file name your Web page the .txt extension. Some
and that the image is saved in a format that word processors may automatically add
Typing errors are the most common errors in HTML When adding some elements to your Web
Web browsers support, such as JPEG or GIF. the .txt extension to your Web page file.
code. Web browsers usually ignore HTML tags and page, such as a link or an image, you must
You should also make sure that you
attributes they do not recognize, so mistyped HTML specify the location and name of the file for
used the <HTML> tag on your Web
code is usually ignored. For example, if you type the element. If you specify the incorrect Sounds or Videos Do Not Play page. Without this tag, a Web browser
<A HERF="webpage.html"> for a link instead path, Web browsers will not be able to
A Web browser's ability to play sounds and may not recognize your document as
of <A HREF="webpage.html">, the link will not locate the information.
videos depends on the plug-ins that are a Web page.
appear on your Web page.
installed for the browser. A plug-in is software
that adds features to a Web browser. If you
Incorrect Extension are having difficulty playing a sound or video,
Missing Quotation Marks or Angle Brackets make sure that your Web browser has the
If you specify the incorrect extension when
correct plug-ins. You should also verify that
If you forget to type a closing quotation mark for adding an element such as an image or The Web Browser Displays a Blank
you successfully transferred the sound or
a value or a closing angle bracket for a tag, Web sound to your Web page, the element will Screen
video file to your Web server and that you
browsers will not know where the information not appear on the page. For example, if you
specified the correct path for the sound or If your Web browser displays a blank
for the value or tag ends. This may cause Web use the .gif extension for an image that is
video file in your HTML code. screen, you may have a missing or
browsers to omit a section of your Web page or saved using the .jpg extension, a Web
incorrectly typed end tag for a large
display the HTML code on your Web page. browser will not be able to locate and
element such as a table (</TABLE>)
display the image file.
The Web Browser Cannot Find Your or frameset (</FRAMESET>). You
Web Page should also check HTML tags that
If an error message appears stating that appear in the head section of your Web
Missing End Tags Unsupported HTML Code page. For example, if the <STYLE> tag
your Web page cannot be found, you may
While some end tags are optional in HTML, such Even if your HTML code does not contain have placed your Web page in the wrong is incomplete or misspelled, your Web
as the </P> tag, others are necessary to properly errors, your Web page may not appear directory on the Web server. Contact your page may appear blank in a Web
display elements. For example, if you leave off correctly in a Web browser if the browser Web presence provider to confirm where browser window.
the </FONT> tag, Web browsers will not know does not yet support the code you are you should store your Web pages. You
when to stop formatting text on your Web page using. For example, some features of style should also make sure that you have given
using the font settings you specified. sheets are not yet fully supported by Web your home page the correct name. Home
browsers. pages are usually named index.html.
252 253
HTML INTRODUCTION TO XML 17
INTRODUCTION TO XML CREATING XML DOCUMENTS
XML documents are text documents that Microsoft XML Notepad

Like HTML, Extensible Markup Language (XML) are often created using a text editor or
is a computer language that builds on previous word processor. In its simplest form,
languages, including SGML. XML provides a
an XML document consists of processing
more flexible method for creating Web documents
than HTML. instructions, markup tags and data.
There are programs available, called content
XML editors, that can help you create xmlns:HTML http://www.w3.org/Profiles/XHTML-tr...
WHAT IS SGML? XML documents. Microsoft XML Notepad HTML:STYLE banner {display: block; font-wei...
banner Welcome to my Web page
is an XML editor for Windows-based message This page was created using XML
Standard Generalized Markup Language (SGML) is of the document, making the document easier to computers that is available at the
a very powerful and complex language that allows work with and share. msdn.microsoft.com/xml/notepad Web site.
authors to create their own custom markup languages.
Using SGML, an author can specify the types of SGML is a complex system that has been in
information contained in a document and create rules development for over 20 years. Due to its complexity,
to ensure that the document maintains a rigid format. SGML is not widely used. Organizations that use
This ensures that any user or program accessing the SGML include governments and companies that EXTENSIBLE STYLESHEET LANGUAGE
document will understand the content and structure regularly process large amounts of text data.
One of the disadvantages of using XML documents Stylesheet Language (XSL) to format XML documents
on the Web is that XML itself does not provide for display in Web browsers and other processing
WHAT IS XML?
a method for telling Web browsers how to programs. XSL is not yet widely supported by Web
display information. The World Wide Web browsers. You can find more information about XSL
XML is a subset of SGML that was developed with of documents. XML uses a tag system similar to Consortium (W3C) recommends using Extensible at the www.w3.org/TR/xsl Web site.
a strong emphasis on creating documents for the the tags used in HTML, though XML allows authors
Web. XML is much easier to learn and use than to create and define rules for their own tags. For
SGML, yet still allows authors to access some of example, when creating a document that lists CASCADING STYLE SHEETS
the power of SGML. addresses, an XML author may want to create tags
such as <street>, <city>, <country> and
Like SGML, XML allows authors to create their <zip> to structure the XML document. Since XSL is not yet widely supported, Cascading an HTML document. Since many Web browsers
own markup languages that define the content Style Sheets (CSS) are commonly used to apply already support CSS, this method provides an
formatting to XML documents. Using CSS with an immediate way to specify the formatting and layout
XML document is similar to using style sheets with for an XML document.
XML AND HTML
HTML was originally created as a simple markup HTML can be regarded as a subset of XML and will DOCUMENT TYPE DEFINITION
language for specifying the structure and content of coexist with XML on the Web. HTML documents
information in Web documents. As the Web and Web will continue to be the primary method of creating
The Document Type Definition (DTD) for an XML other programs and users. For example, a company
browsers became more popular, HTML evolved into Web pages for years to come.
document is the set of specifications for the custom may want to share a DTD with its suppliers so that
more of a formatting markup language used to specify
markup language used in the document. A DTD the company and suppliers can easily exchange
the layout and appearance of Web documents.
identifies the type of information each tag in the information using the same markup language. There
XML allows Web authors to once again focus on document can enclose. are many DTDs available on the Internet. For example,
structure, leaving the formatting of documents to DTDs are available at the www.xml.org/xmlorg_registry
Once an XML author has created a DTD for a Web site.
other methods, such as style sheets.
document, the author can share the DTD with
254 255
BENEFITS OF USING XML

INTRODUCTION TO XML (CONTINUED)
Flexibility Standardization
PROCESSING XML DOCUMENTS Since XML allows authors to create their own tags to Many Web page authors dislike the lack of
suit their needs, XML provides more flexibility than standardization offered by HTML. Since individual
HTML. Authors do not need to rely on predefined Web browsers all differ in the HTML tags they
Documents you create using XML are of little use programs will be able to create and process XML tags to structure their documents. support and how they display supported tags, a
unless there is a program available that can process documents. These programs may allow authors Web page can look very different when viewed
the documents. Currently, most processing programs to create XML documents without having to learn in different Web browsers. XML resolves this
Versatility
are custom programs that XML authors create XML, similar to the way visual editors do not issue by giving authors control over the way their
specifically for their documents. Using a customized require authors to learn HTML. XML's emphasis on using tags to define the structure documents are presented rather than allowing
processing program ensures that the program will of a document allows Web authors to create versatile Web browsers to determine how documents
be able to recognize the tags an author created. documents that can be easily modified for different appear. The author of an XML document creates
audiences or processing programs. For example, editors custom tags and then defines rules for the tags
In the future, many more standard programs such and layout artists can both view the same document that processing programs must follow.
as word processors, spreadsheets and presentation in different ways by using different DTDs. Each DTD
will define rules for the same tags from the original
document, but will give the tags different meanings.
WEB BROWSERS AS PROCESSING PROGRAMS
WHY LEARN XML NOW?

Unfortunately, most Web browsers do not yet fully information as a formatted Web page. As a result,
understand XML and thus cannot process XML unless other methods are used, Web browsers that
XML is now the preferred method for creating Web likely change in the next few years. Learning XML
documents. This may change as new versions of support XML currently display the code for an XML
documents according to the W3C. Though XML is now will allow you to take advantage of the advanced
Web browsers are released. Even when more Web document rather than formatted elements. Since the
not yet fully supported by Web browsers, this will features offered by XML as they become supported.
browsers are able to process XML documents, XML specifications are not yet final, this may change
creating XML documents will likely continue to in the future.
be more difficult than creating HTML documents.
XML RESOURCES
XML does not contain formatting instructions that
a Web browser can use to determine how to display There are many resources you can consult to learn
more about XML, including XML: Your visual blueprint
for building expert Web pages (ISBN 0-7645-3477-7),
published by IDG Books Worldwide, Inc.
THE XML SPECIFICATION
Web Sites Newsgroups
The World Wide Web Consortium, referred to as the technologies all use a common set of rules when Everything XML The XML Cover Pages comp.text.xml
W3C, is made up of hundreds of organizations that accessing and creating content for the Web. The www.intraware.com/everything/xml/index.html www.oasis-open.org/cover/xml.html microsoft.public.xml
have an interest in the future of the World Wide Web. current XML specification is version 1.0 and is
The W3C sets the standards for various areas of the available at the www.w3.org/TR/1998/REC-xml- XML.com XML-L Mailing List
Web, such as HTML and XML. When the W3C issues a 19980210.html Web site. www.xml.com listserv.hea.ie/lists/xml-l.html
set of standards, they are referred to as specifications.
These specifications help ensure that different The World Wide Web Consortium
www.w3.org
256 257
CREATE AN XML DECLARATION
o create an XML document, use a text editor or The version declaration tells the processing program The version, encoding and standalone XML version 1.0 is currently the only version of
T word processor, such as Microsoft WordPad or

Corel WordPerfect. The first step for creating
an XML document is entering an XML declaration.
which version of XML was used to create the
document. The current version of XML is version 1.0.
The encoding declaration identifies the encoding
declarations are optional, though it is
considered proper form to at least include
the version declaration. If you do not
specify a version, encoding or standalone
XML. As with HTML, features will be added and
removed to create new versions of XML in the
future. As new versions are created, the version
declaration will become increasingly important,
declaration, your document will use the since processing programs will need to know
An XML declaration is a processing instruction that scheme for the XML document to the processing
following default values. which version of XML a document conforms to.
appears on the first line of an XML document. The program. The encoding scheme for a document
XML declaration provides information about the depends largely on the language used in the
document for the Web browser or other program document. For documents written in English, DECLARATION DEFAULT VALUE Currently, few Web browsers can process XML
documents, although this will change as new
that will process the document. Processing the encoding scheme UTF-8 is often used. version 1.0 versions of Web browsers are released. Microsoft's
instructions are enclosed in question marks and Internet Explorer version 5 or later is commonly
The standalone declaration tells the processing encoding UTF-8
in greater than and less than symbols, such used to view XML documents. You can obtain
as <?XML?>. program whether the document requires the use standalone yes the latest version of Internet Explorer for free
of another document. If the document does not at the www.microsoft.com/ie Web site.
The XML declaration is composed of several need to access information from another document,
declarations, including a version declaration, an specify a value of yes for the standalone declaration.
encoding declaration and a standalone declaration.
CREATE AN XML DECLARATION
<?xml?> <?xml version="1.0" ?> <?xml version="1.0" encoding="UTF-8" ?> <?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
⁄ Start your text editor ‹ Click between the ˇ Type version="". Á Click between the ° Type encoding="". · Click between the — Type standalone="". ± Click between the
or word processor. question marks. quotation marks. quotation marks. quotation marks.
■ In this example, we › Type xml to identify ‡ Type the number ‚ Type the encoding ¡ Type yes to specify
use Microsoft WordPad. your document as an for the XML version scheme for the XML that the document does
XML document. you are using. document. not require the use of
¤ Type <??>. another document.
258 259
CREATE ELEMENTS Displaying an XML document
in a Web browser is useful for
detecting any errors you may
IF YOU TYPE:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<content>
have made while creating the <banner>
T
he body of an XML document is composed then entering data between the tags. The elements document. If a Web browser Welcome to my Web page
<message>
of elements. An element consists of data you create should divide your document into detects an error, the browser This page is created using XML
surrounded by a start tag and an end tag. structural sections. For example, create elements will display an error message </message>
and provide information </content>
such as titles, subtitles and introductory text.
Unlike HTML, XML allows you to create your own about the location and type
tags for elements. This provides you with greater Save your XML document as a text document, of the error.
flexibility, but means that processing programs using the .xml extension. You can then view the THIS ERROR MESSAGE APPEARS:
must be able to interpret the tags. document in a Web browser. The browser will
display the contents of the XML document. To
The main element in an XML document is known have a Web browser display an XML document
as the root element. The start and end tags you as a Web page, you must use another method, Refresh
assign to the root element surround all the other such as cascading style sheets. To use style
elements in the XML document, similar to the sheets with XML, see page 262.
<HTML> and </HTML> tags in an HTML document.
</content>
__
Create other elements inside the root element by
assigning start and end tags to the element and
CREATE ELEMENTS
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<content> <content> <content>
<banner> <banner>
</content> Welcome to my Web page Welcome to my Web page
</banner> </banner>
</content> <message>
This page was created using XML
</message>
</content>
⁄ Type the start tag you ¤ Type a corresponding ‹ To create an element, ˇ Type a corresponding ‡ Repeat steps 3 to 6 ° Save the XML · Display the XML document Note: To display the contents
want to use for the root end tag for the root element. click between the start end tag for the element. for each element you document as a text in a Web browser as you of the XML document as a Web
element of the document. and end tags for the root want to create. document with the would display an HTML page, you must use another
element. Á Type the text for the .xml extension. document in a Web browser. method, such as cascading style
element between the ■ In this example,
› Type the start tag you start and end tags. we create a page title ■ The contents of the XML sheets. For more information,
want to use for the new and main text for the document appear. see page 262.
element. document.
260 261
USE CASCADING STYLE XHTML is an attempt to convert HTML into a format
that conforms to XML. This involves rewriting HTML,
SHEETS WITH XML using the stricter set of rules provided by XML.
The current version of XHTML is version 1.0. This
version combines the features of HTML version 4 with
I
f you want Web browsers to display your Before a Web browser can understand XHTML the rules of XML version 1.0. For example, XHTML
XML document as a formatted Web page, code, you must define an XHTML namespace. uses the same tags as HTML, but requires that the
you must use a method such as cascading A namespace tells Web browsers where they tags be lowercase and that every tag use a closing tag,
style sheets to help the browser interpret the can find information about the code in an XML including tags that do not have closing tags in HTML.
contents of the document. document. To define an XHTML namespace, XHTML is specifically designed to work with multiple
use the xmlns attribute to specify the location types of processing programs, making it useful
To use style sheets with an XML document, of the namespace. The W3C Web site provides for creating documents that will be viewed on
first create an xml-stylesheet processing a predefined XHTML namespace you can use. non-traditional devices, such as mobile phones,
instruction to identify the type of style sheet handheld computers and television set top boxes.
you are using to Web browsers. Then use Use the <HTML:style> tag to set up a style Using non-traditional devices to access the Web
XHTML to add style sheet information to the sheet using XHTML. You can then specify styles is becoming increasingly popular.
XML document. For more information on for the elements in your XML document as you For more information on XHTML, visit the
XHTML, see the top of page 263. would specify styles for elements in an HTML www.w3.org/TR/xhtml1 Web site.
document.
USE CASCADING STYLE SHEETS WITH XML
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet type="text/css"?> <?xml-stylesheet type="text/css"?> <?xml-stylesheet type="text/css"?>
<content xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional" > <content xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional" > <content xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
<HTML:style> <HTML:style>
<banner> banner { banner{ display: block; font-weight: bold }
Welcome to my Web page
</banner> <banner> message{display: block; font-size: xx-large; color: BLUE}
<message> Welcome to my Web page </HTML:style>
This page was created using XML </banner>
</message> <message> <banner>
</content> This page was created using XML Welcome to my Web page
</message> </banner>
</content> <message>
This page was created using XML
</message>
</content>
⁄ After the XML declaration, ¤ In the start tag for ‹ Type <HTML:style> › Type the tag for Á Enter properties for ° Repeat steps 4 to 7 ■ The Web browser
type <?xml-stylesheet type="text/ the root element, type to mark the beginning an element you want the tag. A semi-colon (;) for each tag you want displays the XML
css"?> to specify that you want xmlns:HTML="http:// of the style sheet. to define styles for. must separate each to define properties for. document as a Web
to use a style sheet. www.w3.org/Profiles/ property. To add properties, page, using the styles
XHTML-transitional" ˇ Type { to begin the see pages 206 to 237. · Type </HTML:style> you defined.
to define the XHTML style sheet properties to mark the end of the
namespace. for the tag. ‡ Type } to end the style sheet.
properties for the tag.
262 263
CREATE A SIMPLE DOCUMENT
TYPE DEFINITION The <!ELEMENT> tag specifies the type of Web browsers do not yet support DTDs. You
information that individual tags in your document can display an XML document that contains a
major advantage of using XML is that it allows is considered valid. Any content that does not
A
can contain. Each element can use the following DTD in a Web browser, but the browser will
you to create your own custom tags that conform to the DTD is considered invalid and two major types of information. not be able to detect any errors you may have
suit your specific needs. Create a Document may prevent the document from being processed made while creating the DTD. There are tools
ANY #PCDATA
Type Definition (DTD) to define rules for the tags by a Web browser or other processing program. available on the Internet that you can use to
Specifying the ANY type PCDATA stands for validate a DTD you created. For example, use
you create. for a tag allows the tag Parsed Character the cgi.w3.org/cgi-bin/xmlschema-check Web
Some XML documents use external DTDs rather
to enclose any type of Data. Specifying the site to validate online XML documents.
A DTD appears at the beginning of an XML than internal DTDs as shown below. An external information, including #PCDATA type for a
document, directly below the XML declaration. DTD is stored in a separate file rather than text and other tags. tag allows the tag to
In a simple XML document, the <!DOCTYPE> tag appearing at the beginning of an XML document. The ANY type is usually enclose text but not
contains the rules for every tag in the document. External DTDs are useful when you want to use only used for the root other tags.
Use the <!ELEMENT> tag to specify the type of the same set of rules for several XML documents. element.
information each tag can contain.
When an XML document's content conforms to
the specifications in its DTD, the XML document
CREATE A SIMPLE DOCUMENT TYPE DEFINITION
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE content [ <!DOCTYPE content [ <!DOCTYPE content [ <!DOCTYPE content [
<!ELEMENT content ANY> <!ELEMENT content ANY> <!ELEMENT content ANY>

<!ELEMENT banner (#PCDATA)> <!ELEMENT banner (#PCDATA)>
]> ]> <!ELEMENT message (#PCDATA)>
<content> <content> ]>
<banner> <banner> <content> ]>
Welcome to my Web page Welcome to my Web page <banner> <content>
</banner> </banner> Welcome to my Web page <banner>
</banner> Welcome to my Web page
<message> <message> </banner>
This page was created using XML This page was created using XML <message>
</message> </message> This page was created using XML <message>
</content> </content> </message> This page was created using XML
</content> </message>
</content>
⁄ After the XML declaration, ¤ Type [ to begin › Click between the Á Type ANY>. ‡ Type <!ELEMENT ° Type (#PCDATA)>. · Repeat steps 7 and 8 Note: For information on the
type <!DOCTYPE followed by defining rules for square brackets [ ]. followed by the name for every tag in your XML ANY and #PCDATA types,
the name of the root element. the tags in the XML of a tag in the document. document. see the top of this page.
document. ˇ Type <!ELEMENT
followed by the name
‹ On a new line, of the root element.
type ]>.
264 265
HTML REFERENCE 18
HTML TAG SUMMARY
TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES
MOST TAGS <BLOCKQUOTE> Creates a block quote 37
CLASS Divides tags into groups for applying styles 202 <BODY> Identifies the main content of a Web page 12
ID Identifies a specific tag 201 ALINK,LINK,VLINK Changes the color of links 85
STYLE Applies a style locally 200 BACKGROUND Adds a background image 46
TITLE Adds tool tips to elements 181 BGCOLOR Adds a background color 34
<!DOCTYPE> Identifies the HTML version used on a Web page 13 BGPROPERTIES Specifies that a background image will not move when a user scrolls 182
<A> Creates a link 74, 76 BOTTOMMARGIN Changes the bottom margin 35
ACCESSKEY Adds a keyboard shortcut to a link 86 LEFTMARGIN Changes the left margin 35
HREF Specifies the location of linked information 74, 76 MARGINHEIGHT Changes the top and bottom margins 35
NAME Names a Web page area 76 MARGINWIDTH Changes the left and right margins 35
TABINDEX Specifies the tab order for links 87 RIGHTMARGIN Changes the right margin 35
TARGET Specifies a window or frame for a link 84, 148 TEXT Changes the color of text 32
<APPLET> Adds a Java applet to a Web page 190 TOPMARGIN Changes the top margin 35
ARCHIVE Specifies the location of a Java archive file 191 <BR> Starts a new line 18
CODE Specifies the location of a Java applet 190 CLEAR Stops text from wrapping 48, 110
HEIGHT, WIDTH Specifies the height and width of a Java applet 190 <BUTTON> Creates a button 137, 164
<AREA> Specifies the information for one image map area 194 TYPE Specifies the type of button 137, 164
ALT Provides a text label for an image map area 195 <CAPTION> Adds a caption to a table 91
COORDS Specifies the coordinates for an image map area 194 ALIGN Changes the alignment of a caption 91
HREF Specifies the location of a Web page linked to an image map area 194 <CENTER> Centers elements on a Web page 27, 45
SHAPE Specifies the shape of an image map area 194 <CODE> Identifies text as computer code 36
TABINDEX Specifies the tab order for image map areas 143 <COL> Creates a non-structural column group in a table 92
<B> Bolds text 26 ALIGN Changes the horizontal alignment of data 98
<BASE> Sets the default window or frame for links 84, 148 BGCOLOR Adds a background color 96
TARGET Specifies the window or frame links will open in 84, 148 CHAR Specifies a character to align 99
<BASEFONT> Changes the appearance of all text 30 SPAN Specifies the number of columns in a column group 92
SIZE Changes the size of text 30 VALIGN Changes the vertical alignment of data 98
<BIG> Makes text larger than the surrounding text 31
266 267
HTML REFERENCE 18
HTML TAG SUMMARY
<COLGROUP> Creates a structural column group in a table 92 ENCTYPE Specifies the format for transferring form information 122, 134
ALIGN Changes the horizontal alignment of data 98 METHOD Specifies how form information is transferred over the Internet 122
BGCOLOR Adds a background color 96 TARGET Specifies where the confirmation message for a form will appear 123
CHAR Specifies a character to align 99 <FRAME> Specifies information for one frame 144
SPAN Specifies the number of columns in a column group 92 BORDERCOLOR Changes the color of the borders for a frame 153
VALIGN Changes the vertical alignment of data 98 FRAMEBORDER Hides the borders for a frame 153
<DD> Identifies a definition in a definition list 43 MARGINHEIGHT Changes the top and bottom margins for a frame 154
<DEL> Strikes out deleted text 27 MARGINWIDTH Changes the left and right margins for a frame 154
<DIV> Divides a Web page into areas for applying styles 204 NAME Names a frame 145
CLASS Identifies the style to use in a Web page area 205 NORESIZE Prevents users from resizing a frame 151
<DL> Creates a definition list 43 SCROLLING Hides or displays scroll bars for a frame 150
<DT> Identifies a term in a definition list 43 SRC Specifies the location of the Web page that will appear in a frame 145
<EM> Emphasizes text using italics 27 <FRAMESET> Creates a set of frames 144
<EMBED> Adds a sound or video to a Web page 114, 118 BORDER Changes the thickness of frame borders 152
ALIGN Wraps text around a video 119 BORDERCOLOR Changes the color of frame borders 152
AUTOSTART Plays a sound or video automatically 114, 118 COLS Creates columns of frames 144
HEIGHT, WIDTH Specifies a height and width for sound controls or a video 114, 118 FRAMEBORDER Hides frame borders 152
HIDDEN Hides the controls for a sound 115 FRAMESPACING Changes the thickness of frame borders 153
LOOP Plays a sound or video continuously 114, 118 ROWS Creates rows of frames 144
SRC Specifies the location of a sound or video 114, 118 <H1> to <H6> Creates a heading 20
<FIELDSET> Organizes form elements into groups 140 ALIGN Changes the alignment of a heading 20
<FONT> Changes the appearance of text 29, 30, 32 <HEAD> Identifies the head section of a Web page 12
COLOR Changes the color of text 32 <HR> Adds a horizontal rule to a Web page 52
FACE Changes the font of text 29 ALIGN Changes the alignment of a horizontal rule 53
SIZE Changes the size of text 30 NOSHADE Removes the 3-dimensional effect from a horizontal rule 53
<FORM> Creates a form 122 SIZE Changes the thickness of a horizontal rule 52
ACCEPT-CHARSET Specifies character sets a Web server must support 123 WIDTH Changes the width of a horizontal rule 52
ACTION Specifies where a Web browser will send user information 122 <HTML> Identifies a document as an HTML document 12
268 269
HTML REFERENCE 18
HTML TAG SUMMARY
<I> Italicizes text 26 NAME Identifies a form element in the form results 124, 128, 130, 134, 137,
138, 139
<IFRAME> Creates an inline frame 156
READONLY Prevents users from editing information in a form element 127
ALIGN Wraps text around an inline frame 157
SIZE Specifies the size of a form element 124, 134
HEIGHT, WIDTH Specifies a height and width for an inline frame 156
SRC Specifies the location of the image for a graphical submit button 138
MARGINHEIGHT Changes the top and bottom margins for an inline frame 157
TABINDEX Specifies the tab order for form elements 143
MARGINWIDTH Changes the left and right margins for an inline frame 157
TYPE Specifies the type of form element 124, 128, 130, 134, 136,
NAME Names an inline frame 156 138, 139
SCROLLING Hides or displays scrollbars for an inline frame 157 VALUE Identifies a form element 125, 128, 130, 136, 139
SRC Specifies the location of the Web page that will appear in an inline frame 156 <INS> Underlines inserted text 27
<IMG> Adds an image to a Web page 44 <KBD> Identifies text users should type 36
ALIGN Aligns an image with text or wraps text around an image 48, 50 <LABEL> Labels a form element 142
ALT Displays alternative text when an image does not appear 44 FOR Identifies the form element for a label 142
BORDER Adds a border to an image 47 <LAYER> Positions elements 237
DYNSRC Adds an internal AVI video to a Web page 119 HEIGHT, WIDTH Specifies a height and width for a layer 237
HEIGHT, WIDTH Specifies a height and width for an image 58, 59 LEFT Specifies a position for a layer from the left edge of a window 237
HSPACE, VSPACE Adds space around an image 51 TOP Specifies a position for a layer from the top edge of a window 237
ISMAP Creates a server-side image map 195 Z-INDEX Controls the order layers overlap 237
LOWSRC Specifies the location of a low-resolution version of an image 64 <LEGEND> Adds a title to a group of form elements 140
NAME Names an image for a JavaScript 170 ALIGN Aligns the title for a group of form elements 140
SRC Specifies the location of an image 44 <LI> Identifies an item in an ordered or unordered list 38, 40
TABINDEX Specifies the tab order for images 143 TYPE Specifies a bullet style for a list item 41
USEMAP Specifies the name of an image map 192 VALUE Specifies the number for a list item 39
<INPUT> Creates form elements 124, 128, 130, 134, 136, <LINK> Links an external style sheet to a Web page 199
138, 139
HREF Specifies the location of an external style sheet 199
ACCEPT Specifies the types of files users can send 135
REL Specifies the relationship of an external style sheet to the Web page 199
ACCESSKEY Adds a keyboard shortcut to a form element 131
TYPE Specifies the format of an external style sheet 199
CHECKED Selects a check box or radio button automatically 128, 130
<MAP> Creates an image map 192
DISABLED Prevents users from using a form element 127
NAME Names an image map 192
MAXLENGTH Specifies the maximum number of characters for a form element 124
270 271
HTML REFERENCE 18
HTML TAG SUMMARY
<MARQUEE> Creates a marquee 176 <OPTION> Creates a menu option on a form 132
BEHAVIOR Specifies how text will scroll 176 SELECTED Selects a menu option automatically 132
BGCOLOR Adds a background color to a marquee 177 VALUE Identifies a menu option in the form results 132
DIRECTION Specifies the direction text will scroll 176 <P> Starts a new paragraph 16
HEIGHT, WIDTH Specifies a height and width for a marquee 177 ALIGN Changes the alignment of a paragraph 16
HSPACE, VSPACE Adds space around a marquee 177 <PRE> Retains the spacing of text 22
LOOP Specifies the number of times text will scroll across the screen 176 <Q> Identifies a short quotation 37
SCROLLAMOUNT Specifies the amount of space text will move at a time 176 <SAMP> Identifies sample text 36
SCROLLDELAY Specifies the amount of time between each movement of text 176 <SCRIPT> Adds JavaScript to a Web page 158
TRUESPEED Overrides the minimum SCROLLDELAY value 177 DEFER Informs browsers that a script will not generate Web page content 159
<META> Provides information about a Web page 159, 186, 188, 238-242 LANGUAGE Specifies the scripting language for a script 159
CONTENT Specifies custom information about a Web page 159, 186, 188, 238-242 SRC Specifies the location of an external script 161
HTTP-EQUIV Provides instructions for a Web server 159, 186, 188, 241 TYPE Specifies the scripting language for a script 158
NAME Identifies the type of information 238-240, 242 <SELECT> Creates a menu on a form 132
URL Specifies the location of a Web page that will appear automatically 186 MULTIPLE Allows users to select more than one menu option 133
<NOBR> Keeps text on one line 17 NAME Identifies a menu in the form results 132
<NOEMBED> Displays alternative text when a browser does not support the SIZE Specifies the number of options visible in a menu 132
<EMBED> tag 115
TABINDEX Specifies the tab order of form elements 143
<NOFRAMES> Displays alternative text when frames do not appear 147
<SMALL> Makes text smaller than the surrounding text 31
<NOSCRIPT> Displays alternative text when a JavaScript does not run 160
<SPACER> Adds a block of space to a Web page 185
<OBJECT> Adds an object to a Web page 115, 119, 191
ALIGN Wraps text around a block of space 185
CLASSID Specifies the location of an object 191
HEIGHT, WIDTH Specifies a height and width for a block of space 185
DATA Specifies the location of an object 115, 119
TYPE Specifies the type of space 185
HEIGHT, WIDTH Specifies a height and width for an object 119, 191
<SPAN> Divides text into sections for applying styles 205
<OL> Creates an ordered list 38
CLASS Identifies a section of text for a style 205
START Specifies a starting number for an ordered list 39
<STRIKE> Places a line through text 26
TYPE Specifies a number style for an ordered list 38
<STRONG> Emphasizes text using bold formatting 27
<OPTGROUP> Divides a form menu into submenus 133
<STYLE> Creates an internal style sheet 196
LABEL Specifies a title for each submenu 133
<SUB> Subscripts text 28
272 273
HTML REFERENCE 18
HTML TAG SUMMARY
<SUP> Superscripts text 28 <TEXTAREA> Creates a large text area on a form 126
<TABLE> Creates a table 88 ACCESSKEY Adds a keyboard shortcut to a large text area 131
ALIGN Wraps text around a table 110 COLS Specifies a width for a large text area 126
BACKGROUND Adds a background image 97 DISABLED Prevents users from using a large text area 127
BGCOLOR Adds a background color 96 NAME Identifies a large text area in the form results 126
BORDER Adds a border 90 READONLY Prevents users from editing information in a large text area 127
BORDERCOLOR Specifies a color for a border 90 ROWS Specifies a height for a large text area 126
CELLPADDING Changes the amount of space around the contents of cells 104 TABINDEX Specifies the tab order of form elements 143
CELLSPACING Changes the amount of space between cells 104 WRAP Specifies how text will wrap in a large text area 126
FRAME Specifies which external borders to display 106 <TFOOT> Creates a footer row group in a table 94
HEIGHT, WIDTH Specifies a height and width for a table 100 ALIGN Changes the horizontal alignment of data 98
RULES Specifies which internal borders to display 106 BGCOLOR Adds a background color 96
<TBODY> Creates a body row group in a table 94 CHAR Specifies a character to align 99
ALIGN Changes the horizontal alignment of data 98 VALIGN Changes the vertical alignment of data 98
BGCOLOR Adds a background color 96 <THEAD> Creates a header row group in a table 94
CHAR Specifies a character to align 99 ALIGN Changes the horizontal alignment of data 98
VALIGN Changes the vertical alignment of data 98 BGCOLOR Adds a background color 96
<TD>, <TH> Creates a data cell or header cell in a table 88 CHAR Specifies a character to align 99
ALIGN Changes the horizontal alignment of data 98 VALIGN Changes the vertical alignment of data 98
BACKGROUND Adds a background image 97 <TITLE> Creates a title for a Web page 12
BGCOLOR Adds a background color 96 <TR> Creates a row in a table 88
CHAR Specifies a character to align 99 ALIGN Changes the horizontal alignment of data 98
COLSPAN Spans a cell across columns 102 BGCOLOR Adds a background color 96
HEIGHT, WIDTH Changes the height and width of a cell 101 CHAR Specifies a character to align 99
NOWRAP Keeps text in a cell on one line 108 VALIGN Changes the vertical alignment of data 98
ROWSPAN Spans a cell down rows 102 <TT> Displays text in a monospaced font 36
VALIGN Changes the vertical alignment of data 98 <U> Underlines text 26
<UL> Creates an unordered list 40
TYPE Specifies a bullet style for an unordered list 40
274 275
HTML REFERENCE 18
STYLE SHEET PROPERTY SUMMARY

PROPERTIES DESCRIPTION PAGE REFERENCES PROPERTIES DESCRIPTION PAGE REFERENCES
background Adds a background color or image to elements 220, 222 letter-spacing Adds space between letters 217
background-attachment Specifies if a background image will remain stationary 221 line-height Adds space between lines of text 216
background-image Adds a background image to elements 221 list-style Specifies a bullet or number style for lists 230
background-position Specifies a starting position for a background image 221 margin Changes all four margins for elements at once 225
background-repeat Specifies how a background image will repeat 221 margin-bottom Changes the bottom margin for elements 225
border Places a border around elements 226 margin-left Changes the left margin for elements 225
border-bottom Specifies a bottom border for elements 227 margin-right Changes the right margin for elements 225
border-color Specifies a color for borders 227 margin-top Changes the top margin for elements 225
border-left Specifies a left border for elements 227 padding Adds space around all four sides of elements 224
border-right Specifies a right border for elements 227 padding-bottom Adds space to the bottom of elements 224
border-style Specifies a style for borders 227 padding-left Adds space to the left side of elements 224
border-top Specifies a top border for elements 227 padding-right Adds space to the right side of elements 224
border-width Specifies a thickness for borders 227 padding-top Adds space to the top of elements 224
bottom Positions elements with respect to the bottom edge of elements 234, 236 page-break-after Adds a page break after elements 233
clear Stops text from wrapping around elements 228 page-break-before Adds a page break before elements 233
color Changes the color of text or other elements 215 position Specifies an absolute or relative position for elements 234, 236
display Changes the display of elements 229 right Positions elements with respect to the right edge of elements 234, 236
float Wraps text around elements 228 text-align Changes the alignment of text 214
font Changes multiple font settings at once 211 text-decoration Adds a line to text, makes text blink 208, 211
font-family Changes the font of text 210 text-indent Indents the first line of text 209
font-size Changes the font size of text 212 text-transform Changes the case of text 213
font-style Italicizes text 207 top Positions elements with respect to the top edge of elements 234, 236
font-variant Displays text in small caps 213 vertical-align Specifies a vertical alignment for inline elements 232
font-weight Bolds text 206 width Specifies a width for elements 223
height Specifies a height for elements 223 word-spacing Adds space between words 217
left Positions elements with respect to the left edge of elements 234, 236 z-index Controls how positioned elements overlap 237
276 277

HTML Your Visual

Uploaded by

Copyright:

Available Formats

HTML Your Visual

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Your Visual

Uploaded by

Copyright:

Available Formats

HTML GETTING STARTED 1

THE INTERNET AND

EMPHASIZE IMPORTANT INFORMATION COPYRIGHT CONSIDERATIONS USE WARNINGS

CONSIDER FILE SIZES AVOID "UNDER CONSTRUCTION" LABELS

PAGE LENGTH AVOID SPECIFIC WEB BROWSER INSTRUCTIONS

INTRODUCTION TO HTML VIEW HTML CODE FOR A WEB PAGE

H computer language used to create Web

SET UP A WEB PAGE

SET UP A WEB PAGE (CONTINUED)

<HTML> <HTML> <HTML> <HTML>

D allows you to see how the page will appear

DISPLAY A WEB PAGE IN A WEB BROWSER

C:\My Documents\Web Pages\index.html

START A NEW PARAGRAPH

W you type in your text editor or word

START A NEW PARAGRAPH

START A NEW LINE INSERT BLANK SPACES

START A NEW LINE INSERT BLANK SPACES

ADD A HEADING TYPE THIS:

H on your Web page. Users can glance through

C:\My Documents\Web Pages\headings.html C:\My Documents\Web Pages\headings.html

PREFORMAT TEXT ADD A COMMENT

PREFORMAT TEXT ADD A COMMENT

C:\My Documents\Web Pages\index.html C:\My Documents\Web Pages\index.html

INSERT SPECIAL CHARACTERS CHARACTER

EMPHASIZE TEXT italicizes text.

SUPERSCRIPT OR SUBSCRIPT TEXT CHANGE THE FONT

SUPERSCRIPT OR SUBSCRIPT TEXT CHANGE THE FONT

C:\My Documents\Web Pages\super-sub.html

CHANGE THE FONT SIZE

C:\My Documents\Web Pages\fontsize.html

CHANGE TEXT COLOR

CHANGE TEXT COLOR

C:\My Documents\Web Pages\index.html C:\My Documents\Web Pages\textcolor.html

<P>Our flower selection includes:

CHANGE BACKGROUND COLOR CHANGE THE MARGINS

CHANGE BACKGROUND COLOR CHANGE THE MARGINS

USE A MONOSPACED FONT CREATE A BLOCK QUOTE

U tag to display text on your Web page in a

USE A MONOSPACED FONT CREATE A BLOCK QUOTE

<HTML> <HTML> C:\My Documents\Web Pages\mathquiz.html

<H2>Beethoven</H2> <H3>MADISON WINS GOLD</H3>

A that are in a specific order, such as a set

TYPE THIS: RESULT:

CREATE AN ORDERED LIST

<HTML> C:\My Documents\Web Pages\contents.html <HTML> C:\My Documents\Web Pages\contents.html

A you want to display items that are

TYPE THIS: RESULT:

CREATE AN UNORDERED LIST

CREATE A NESTED LIST CREATE A DEFINITION LIST

CREATE A NESTED LIST CREATE A DEFINITION LIST

<HTML> <HTML> C:\My Documents\Web Pages\glossary.html

ADD AN IMAGE If an image you want to add to a Web page is

ADD AN IMAGE PROVIDE ALTERNATIVE TEXT

<HTML> <HTML> C:\My Documents\Web Pages\index.html

<IMG SRC="tiger.jpg"> <IMG SRC="tiger.jpg" ALT="Image of Tiger" >

ADD A BACKGROUND IMAGE ADD A BORDER

U <BODY> tag allows you to add a background

ADD A BACKGROUND IMAGE ADD A BORDER