Module 4: Advanced HTML

Contents
Overview 1
Creating Frames Using HTML 2
Lab 4.1: Creating Frames Using HTML 11
Creating Frames Using FrontPage 2000 20
Creating Forms Using HTML 24
Practice: Creating a Simple Form 35
Formatting Forms 44
Creating Forms Using FrontPage 2000 46
Lab 4.2: Creating a Form Using FrontPage
2000 49
Introduction to Style Sheets 51
Using Style Sheets 53
Practice: Creating Style Sheets Using HTML 64
Publishing a Web Page 66
Demonstration: Publishing a Web Site 75
Lab 4.3: Publishing a Web Site 77
Review 79

Module 4: Advanced
HTML

Information in this document is subject to change without notice. The names of companies,
products, people, characters, and/or data mentioned herein are fictitious and are in no way intended
to represent any real individual, company, product, or event, unless otherwise noted. Complying

with all applicable copyright laws is the responsibility of the user. No part of this document may
be reproduced or transmitted in any form or by any means, electronic or mechanical, for any
purpose, without the express written permission of Microsoft Corporation. If, however, your only
means of access is electronic, permission to print one copy is hereby granted.

Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual
property rights covering subject matter in this document. Except as expressly provided in any
written license agreement from Microsoft, the furnishing of this document does not give you any
license to these patents, trademarks, copyrights, or other intellectual property.

 2000 Microsoft Corporation. All rights reserved.

Microsoft, ActiveX, BackOffice, FrontPage 2000, Internet Explorer 5, MS-DOS, Windows, and
Windows NT are either registered trademarks or trademarks of Microsoft Corporation in the
U.S.A. and/or other countries.

The names of companies, products, people, characters, and/or data mentioned herein are fictitious
and are in no way intended to represent any real individual, company, product, or event, unless
otherwise noted.

Other product and company names mentioned herein may be the trademarks of their respective
owners.

Program Manager: Steve Merrill
Development Lead: Basabjit Chakrabarty (NIIT)
Instructional Designers: Sangeeta Nair, Vijayalakshmi Narayanaswamy (NIIT); Veena Nambier,
Yatinder Walia (NIIT)
Technical Contributors: Scott Swigart (3 Leaf Solutions); Gary Gumbiner (Great Barrier
Technologies, Inc.)
Graphic Artist: Scott Serna (Creative Assets)

Editing Manager: Jennifer Linn
Editor: Reid Bannecker
Production Manager: Miracle Davis
Production Coordinator: Linda Lu Cannon (The Write Stuff)
Build Coordinator: Eric Wagoner
Testing Lead: Eric Meyers
Testing: Bryan Urakawa, Chris and Edward
Lead Product Manager, Internet Services: Hilary Vandal
Manufacturing Manager: Rick Terek
Operations Coordinator: John Williams
Manufacturing Support: Laura King; Kathy Hershey
Lead Product Manager, Release Management: Bo Galford
Group Manager, Courseware Infrastructure: David Bramble
General Manager: Robert Stewart

Module 4: Advanced HTML iii


Instructor Notes
This module teaches students the advanced concepts of HTML. It explains how
to create forms and frames using HTML and Microsoft
®
FrontPage
®
2000. It
introduces students to style sheets and describes how to use them. Finally, the
module explains how to publish a Web site using FrontPage 2000.
After completing this module, students will be able to:
!
Create frames using HTML and FrontPage 2000.

!
Create forms using HTML and FrontPage 2000.
!
Create style sheets using HTML.
!
Publish a Web Page using FrontPage 2000.

Materials and Preparation
This section provides you with the required materials and preparation tasks that
are needed to teach this module.
Required Materials
To teach this module, you need the following materials:
!
Microsoft PowerPoint
®
file 1912A_04.ppt
!
Module 4, “Advanced HTML”
!
Lab 4.1, “Creating Frames Using HTML”
!
Lab 4.2, “Creating a Form Using FrontPage 2000”
!
Lab 4.3, “Publishing a Web Site”

Preparation Tasks
To prepare for this module, you should:
!
Read all of the materials for this module.
!

Complete the demonstrations, practices, and labs in this module.

Presentation:
170 Minutes

Lab: 75 Minutes

Module Strategy
Use the following strategy to present this module:
!
Creating Frames Using HTML
Introduce frames. Then explain the guidelines and drawbacks of using
frames. Explain the various frame tags such as, the FRAMESET, FRAME,
and NOFRAMES tags. Then, explain how to create frames using HTML.
Finally, have the students will do a lab on creating frames using HTML
!
Creating Frames Using FrontPage 2000
Demonstrate how to create frames with FrontPage 2000. Have the students
do a practice on creating frames with FrontPage 2000.
!
Creating Forms Using HTML
Introduce forms and explain the uses of a form. Explain the FORM tag and
the various form controls such as, text boxes, push buttons, check boxes,
radio buttons, drop-down menus, and hidden controls. Finally, explain how
to create a form, using HTML.
!
Formatting Forms
First, explain how to design forms using properties such as; tab order,
labels, and access keys.
!

Creating Forms Using FrontPage 2000
Demonstrate how to create a form with FrontPage 2000. Have the students
do a lab on creating an information request form with FrontPage 2000.
!
Introduction to Style Sheets
This topic provides an overview to style sheets. Explain the uses of style
sheets.
!
Using Style Sheets
Explain how to define inline styles, and how to set the font and color
properties in the style definition. Then, explain how to embed style sheets in
an HTML document. Also, explain how to link style sheets to a HTML
document. Finally, explain how to create new style classes.
!
Publishing a Web Page
First, list the pre-requisites for publishing a Web page. Then, explain the
production process. Also, demonstrate how to publish a Web site using
FrontPage 2000. Then, have the students complete a Web site publishing
lab.


Module 4: Advanced HTML 1


#
##
#

Overview
# Overview

!
Creating Frames Using HTML
!
Creating Frames Using FrontPage 2000
!
Creating Forms Using HTML
!
Formatting Forms
!
Creating a Form Using FrontPage 2000
!
Introduction to Style Sheets
!
Using Style Sheets
!
Publishing a Web Page
!
Review


If you want to present information on your Web page in a more flexible and
useful manner, you can use frames. To add user interaction to your Web page,
you can use forms. You can also define the appearance of your Web page using
style sheets.
In this module, you will learn how to use frames, forms, and style sheets to
enhance the appearance of your Web pages. After you have created your Web
site, you need to publish it so that users can access your site. You will learn
how to publish a Web site at the end of this module.
After completing this module, you will be able to:
!

Create frames using HTML and Microsoft
®
FrontPage
®
2000.
!
Create forms using HTML and FrontPage 2000.
!
Create style sheets using HTML.
!
Publish a Web page using FrontPage 2000.


The sample application files for this module are located in the
\Inetpub\wwwroot\1912\Sampapps\Ch04 folder. The files for the sample site
“Exotic Excursions” are located in the \Inetpub\wwwroot\1912\Sampsite folder.

Slide Objective
To provide an overview of
the module topics and
objectives.
Lead-in
In this module, you will learn
how to create Web pages
that use frames, forms, and
style sheets.
Note
2 Module 4: Advanced HTML

#
##
#

Creating Frames Using HTML
!
What Are Frames?
!
Using Frames: Guidelines and Drawbacks
!
The <FRAMESET> Tag
!
The <FRAME> Tag
!
The <NOFRAMES> Tag
!
Lab 4.1: Creating Frames Using HTML


Frames give you a quick and easy mechanism to organize the content on your
page. You can create frames in a Web page using HTML tags. The key tags
used in defining frames are:
!
<FRAMESET>
!
<FRAME>
!
<NOFRAMES>

In the next few topics, you will look at what frames are, and how to use the

preceding HTML tags to create frames. You will also look at the guidelines for
using frames on your Web page.
Slide Objective
To provide an overview of
the topics covered in this
section.
Lead-in
Frames give you a quick
and easy mechanism to
organize the content on your
page. In this section, you
will look at what frames are,
and how to create frames
using HTML.
Module 4: Advanced HTML 3


What Are Frames?
!
Frame divides a Web page into multiple, scrollable
regions
!
Features:
$
A frame can be assigned an individual URL
$
A frame can be assigned a name to be referred by other
URLs
$
A frame can be resized dynamically

(View Default.htm from Sampsite)


A frame divides a Web page into multiple, scrollable regions. With frames,
certain content, such as a header, a footer, or navigation bar, can remain
constant, while the main content of the page changes.
Each region or frame has certain features:

!
It can be given an individual URL. Therefore, each region or frame can load
information independent of the other frames on the page.
!
It can be given a name. This allows each region or frame to be targeted by
other URLs.
!
It can resize dynamically if the user changes the size of the browser
window.

Slide Objective
To explain the need for
frames, and describe their
features.
Lead-in
A frame divides a Web page
into parts.
Delivery Tip
As an example, show a
page that uses frames. In
Internet Explorer, open
Default.htm in the

\Inetpub\wwwroot\1912\Sam
psite folder.
Click the links in the frame
on the left to show how the
right frame gets updated
with the relevant page.
4 Module 4: Advanced HTML


Using Frames: Guidelines and Drawbacks
!
Guidelines
$
Use frames to display information that requires one area of
the page to remain static, while the other area changes
$
Use borderless frames wherever possible
$
Provide white spaces in the pages that display the frames
(View Default.htm from Sampsite)
!
Drawbacks
$
Frames divide the browser window into smaller sections
$
Some browsers do not support borderless frames
$
Some browsers do not support frames

Guidelines for using frames
Here are some general guidelines for using frames:
!
Use frames to display information that requires one area of the page to
remain static, while the other area changes. Frames are best used when one
frame contains items to choose from and another frame displays the results
of the choice.
!
Use borderless frames wherever possible. This is because some browsers do
not support frames. As a result, the borders are replaced with either white
spaces or they overlap.
!
Provide plenty of white spaces in the pages that display the frames. Frames
can display a lot of information. Make sure to insert spaces between
sentences, images, and other elements to ensure that the frames do not
appear cluttered with information. This makes the information in both
frames more readable.

Slide Objective
To discuss the guidelines
and drawbacks of using
frames.
Lead-in
Let’s look at some key
guidelines for using frame.
Delivery Tip
Explain the guidelines by
using an example Web
page. From Internet
Explorer, open Default.htm

in the
\Inetpub\wwwroot\1912\Sam
psite folder.
Module 4: Advanced HTML 5


For example, the following illustration shows a page with frames that uses all of
the preceding guidelines:

Drawbacks of using frames
Frames are an important feature of Web page design. However, they have some
drawbacks:
!
Frames divide the Web browser window into smaller sections. With certain
areas of the page reserved, there is less space available for the actual
content.
!
A page with frames cannot be properly bookmarked. This is because
contents of the individual frames in a page may not get saved exactly in the
state as that when the user bookmarked the page.
!
Some browsers do not support borderless frames. They draw a border
around each frame, which spoils the intended appearance of the page.
!
Some browsers do not support frames.

To overcome the preceding drawbacks, most Web sites use tables instead
of frames.

Note
6 Module 4: Advanced HTML


The <FRAMESET> Tag
!
The frameset is the main container of a frame
!
Attributes of a frameset
$
ROWS – defines horizontal frames
ROWS="row_height_value_list"
$
COLS – defines vertical frames
COLS="column_width_list“
(View Frameset.htm from Sampapps)
<FRAMESET ROWS="100, *">
<FRAME SRC="Frame1.htm">
<FRAME SRC="Frame2.htm">
</FRAMESET>
<FRAMESET ROWS="100, *">
<FRAME SRC="Frame1.htm">
<FRAME SRC="Frame2.htm">
</FRAMESET>


The basic tags that you use to create a page with frames are the <FRAMESET>
and </FRAMESET> tags. You cannot use the <BODY> and </BODY> tags to
create a page with frames. The reason is that a page with frames is a container
into which other Web pages are loaded.

The frameset itself is defined in one HTML file, with an additional file for the
contents of each frame. For example, a frameset that defines a header,
navigation bar, and main content, would require a total of four files.
The <FRAMESET> and </FRAMESET> tags define the location and size of a
frame on an HTML page.
Attributes of the <FRAMESET> tag
The <FRAMESET> tag has two attributes:
!
ROWS
The ROWS attribute defines horizontal frames. It is followed by a comma-
delimited list of the size for each frame on the page. You can specify actual
pixel sizes, percentages, or relative sizes. Pixel sizes are useful for static
frames, such as headers and navigation bars, and do not adjust in response to
different browser sizes. The other methods are more flexible.
In the following example code, the first frame is 120 pixels, the third frame
is 20% of the total height, and the second frame is given the remainder of
the available space:
<FRAMESET ROWS="120, *, 20%">

The following example code creates two frames that split the full size of the
browser window. The top frame is always twice as large as the bottom
frame.
<FRAMESET ROWS="2*, *">

Slide Objective
To explain how to use the
<FRAMESET> tag.
Lead-in
The frameset is the main
container of a frame.

Delivery Tip
Explain the usage of ROWS
attribute by providing
various examples.
Module 4: Advanced HTML 7


!
COLS
The COLS attribute defines the frames page as having vertical frames. This
attribute is specified in the same way as the ROWS attribute.

As you saw earlier, a frame document does not contain the <BODY> tag. The
<FRAMESET> tag is ignored if the <BODY> tag appears before the
<FRAMESET> tag. Within the <FRAMESET> </FRAMESET>tags, you can
have other nested <FRAMESET>, <FRAME>, and <NOFRAMES> tags. The
following example uses the <FRAMESET> and <FRAME> tags.
<HTML>
<HEAD>
<TITLE>USING FRAMES</TITLE>
</HEAD>
<FRAMESET ROWS="50,*">
<FRAME SRC="frame_1.htm">
<FRAME SRC="frame_2.htm">
</FRAMESET>
</HTML>


You cannot specify the COLS and the ROWS attributes together in a
<FRAMESET> tag. This is because at any point of time, you can only specify

either the horizontal or the vertical space that the frame will take.

Delivery Tip
From Notepad, open
Frameset.htm in the
\Inetpub\wwwroot\1912\Sam
papps\Ch04 folder, and
explain the source code to
the students. Then show the
results of the source code in
Internet Explorer.
Note
8 Module 4: Advanced HTML


The <FRAME> Tag
!
Defines a frame in a frameset
!
In <FRAMESET> tag, specify:
$
Source HTML file
$
Appearance of the frame
!
Use the <BASE> tag with the TARGET attribute to
specify the target frame for hyperlinks
(View TOC.htm from Sampsite)
<FRAMESET ROWS="100, *">
<FRAME SRC="FrameDoc1.htm" SCROLLING="no" NORESIZE>

<FRAME SRC="FrameDoc2.htm" SCROLLING="yes" NORESIZE>
</FRAMESET>
<FRAMESET ROWS="100, *">
<FRAME SRC="FrameDoc1.htm" SCROLLING="no" NORESIZE>
<FRAME SRC="FrameDoc2.htm" SCROLLING="yes" NORESIZE>
</FRAMESET>


The <FRAME> and </FRAME> tags define a single frame in a frames page.
The frame tag defines the source HTML file for the frame, as well as the look
of the frame itself.
The following table describes the attributes of the <FRAME> tag.
Attribute Description Example

SRC Displays the source file for
the frame. Omitting this
parameter creates a blank
frame.
<FRAME
SRC="frame1.htm">
NAME Provides a target name for
the frame.
<FRAME NAME="top">
MARGINWIDTH Controls the margin width
for the frame in pixels.
<FRAME
MARGINWIDTH="20">
MARGINHEIGHT Controls the margin height
for the frame in pixels.
<FRAME

MARGINHEIGHT="10">
FRAMEBORDER Provides the option to
display or not to display a
border for a frame.
<FRAME
FRAMEBORDER="Yes">
SCROLLING Creates a scrolling frame.
Values are Yes, No, or Auto.
<FRAME
SCROLLING="Yes">
NORESIZE Prevents the user from
resizing the frame.
<FRAME NORESIZE>

Slide Objective
To explain how to use the
<FRAME> tag.
Lead-in
You use the <FRAME> tag
to define a single frame in a
frames page.
Delivery Tip
Explain the commonly used
attributes of the <FRAME>
tag, by providing various
examples.
Module 4: Advanced HTML 9


For each frame on the page, add a <FRAME> tag. Set the SRC attribute of the

<FRAME> tag to the name of the HTML document that will appear in the
frame. Set other attributes for the frame, such as borders, scrolling, spacing, and
resizing options. For example, in the following code the first frame does not
allow scrolling while the second frame allows scrolling:
<FRAMESET ROWS="100, *">
<FRAME SRC="FrameDoc1.htm" SCROLLING="no" NORESIZE>
<FRAME SRC="FrameDoc2.htm" SCROLLING="yes" NORESIZE>
</FRAMESET>


In this example, the files FrameDoc1.htm and FrameDoc2.htm need to be
in the same folder as the frameset page.

Creating links that load in a different frame
When you create a hyperlink, you can specify the target frame where the linked
page should be loaded using the TARGET attribute of the <A> tag. For
example, the following code defines hyperlinks and on clicking each of these
links, the corresponding page is loaded in the frame with the name main:

<HEAD>
<TITLE>Table of Contents</TITLE>
</HEAD>

<BODY>
<P><A HREF="Destinations.htm" TARGET="main">Destinations</A>
<P><A HREF="SpecialPackages.htm" TARGET="main">Special
Packages</A>
<P><A HREF="Infodesk.htm" TARGET="main">Information Desk</A>
</BODY>

If all the hyperlinks in a page is to be loaded in the same target frame, then you
can use the <BASE> tag with the TARGET attribute to specify the target
frame for all hyperlinks, as shown in the following example code:
<HEAD>
<TITLE>Table of Contents</TITLE>
<BASE TARGET="main">
</HEAD>

<BODY>
<P><A HREF="Destinations.htm">Destinations</A>
<P><A HREF="SpecialPackages.htm">Special Packages</A>
<P><A HREF="Infodesk.htm">Information Desk</A>
</BODY>

Note
10 Module 4: Advanced HTML


The <NOFRAMES> Tag
!
If a browser does not support frames, use
<NOFRAMES> tag to supply alternate HTML
<FRAMESET>
...
<NOFRAMES>
<P>You need Internet Explorer version 3.0 or
later to view frames!</P>
</NOFRAMES>
</FRAMESET>
<FRAMESET>

...
<NOFRAMES>
<P>You need Internet Explorer version 3.0 or
later to view frames!</P>
</NOFRAMES>
</FRAMESET>


Not all browsers support frames. As a consideration to the users with such
browsers, you can supply alternate HTML by placing it in the <NOFRAMES>
and </NOFRAMES> tags in the HTML file that defines the frameset. These
tags can appear after the <FRAMESET> tags.
The following code demonstrates the use of the <NOFRAMES> tag:
<FRAMESET COLS="139,*">
<FRAME NAME="contents" SRC="TOC.htm" SCROLLING="auto">
<FRAME NAME="main" SRC="Splash.htm" SCROLLING="auto">
<NOFRAMES>
<P>You need Internet Explorer version 3.0
or later to view frames!</P>
</NOFRAMES>
</FRAMESET>

Browsers that do not support frames ignore the <FRAMESET>, <FRAME>,
and <NOFRAMES> tags. However, the browser recognizes the <P> tag, and
therefore the content of the <P> tag is displayed.
Slide Objective
To explain how to use the
<NOFRAMES> tag.
Lead-in
Not all browsers support

frames. To provide an
alternate solution, you use
the <NOFRAMES> tag.
Module 4: Advanced HTML 11


Lab 4.1: Creating Frames Using HTML



Objectives
After completing this lab, you will be able to create a page with frames using
HTML.
Prerequisites
Before working on this lab, you must have created a basic Web page using
HTML.
Scenario
The Web development team at Clark Escrow Inc. is designing a Web page for
their company. The Web page for Clark Escrow Inc. contains two vertical
frames. The first frame contains the table of contents and the second frame is
the home page for the company.
The table of contents lists the categories of products (home appliances and
electronic goods) sold by the company. Each category listing is a hyperlink that
links to another page containing more information on that category.
Starter and solution files
There are no starter files associated with this lab. The solution files for this lab
are in the folder <install folder>\Labs\Lab04.1\Solution.
Estimated time to complete this lab: 30 minutes
Slide Objective
To introduce the lab.

Lead-in
In this lab, you will create a
Web page with frames using
HTML.
Explain the lab objectives.
To create a Web page with
frames, using HTML..
12 Module 4: Advanced HTML


Exercise 1
Creating a Frameset Page
In this exercise, you will create a Web page for Clark Escrow Inc. The Web
page contains two frames. The contents frame contains the table of contents and
the main frame is the home page for the company.
!
Create a frameset page
1. Create a basic HTML document in Notepad. Specify the title of the page as
Clark Escrow Inc.
2. Define a frameset consisting of two vertical frames, one for table of contents
and another for the home page contents.
<FRAMESET COLS="300,*">
<FRAME NAME="contents" SRC="Tableofcontents.htm">
<FRAME NAME="main" SRC="Main.htm">
</FRAMESET>

3. Add a <NOFRAMES> tag to specify a message for browsers that do not
support frames.
<NOFRAMES>
<BODY>

<P>This page uses frames, but your browser doesn't
support them.</P>
</BODY>
</NOFRAMES>

Module 4: Advanced HTML 13


4. Save the document as Frameset.htm in the folder
\Inetpub\wwwroot\1912\Mywebpages.
To see an example of what your code should look like, see Appendix A or
the Student CD-ROM.
<HTML>
<HEAD>
<TITLE>Clark Escrow Inc.</TITLE>
</HEAD>
<FRAMESET COLS="300,*">
<FRAME NAME="contents" SRC="Tableofcontents.htm">
<FRAME NAME="main" SRC="Main.htm">
<NOFRAMES>
<BODY>
<P>This page uses frames, but your browser doesn't
support them.</P>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>


14 Module 4: Advanced HTML

Exercise 2
Creating a Home Page
In this exercise, you will create the main frame for the frameset page created in
Exercise 1. The main frame is the home page for Clark Escrow Inc.
!
Create the main frame
1. Create a basic HTML document in Notepad. Specify the title of the page as
Home Page of Clark Escrow Inc.
2. Specify the contents of the home page in the HTML document. To do so,
add the following sentence as the contents of home page: “Welcome to the
home page of Clark Escrow, Inc.”
3. Save the document as Main.htm in the folder
\Inetpub\wwwroot\1912\Mywebpages.
To see an example of what your code should look like, see Appendix A or
the Student CD-ROM.
<HTML>
<HEAD>
<TITLE>Home Page of Clark Escrow Inc.</TITLE>
</HEAD>
<BODY BGCOLOR="Beige">
<BR><BR><BR><BR><BR>
<H1 ALIGN="center">
Welcome to the home page of Clark Escrow, Inc.
</H1>
</BODY>
</HTML>

Module 4: Advanced HTML 15


Exercise 3
Creating a Page with Links
In this exercise, you will create the table of contents page for the frameset page
created in Exercise 1. This page consists of two links for the product categories:
Home Appliances and Electronic Goods.
!
Create the table of contents page
1. Create a basic HTML document. Specify the title of the page as Table of
Contents.
2. Create two links in the page for the product categories: Home Appliances
and Electronic Goods.
<BODY BGCOLOR="Beige">
<P><B>Click the link for information on</B></P>
<BR><BR>
<P>
<A HREF="Homeappliances.htm" TARGET="main">
Home Appliances
</A>
</P>
<BR>
<P>
<A HREF="Egoods.htm" TARGET="main">Electronic Goods</A>
</P>
</BODY>

16 Module 4: Advanced HTML

3. Save the document as Tableofcontents.htm in the folder
\Inetpub\wwwroot\1912\Mywebpages.
To see an example of what your code should look like, see Appendix A or
the Student CD-ROM.
<HTML>
<HEAD>
<TITLE>Table of Contents</TITLE>
</HEAD>
<BODY BGCOLOR="Beige">
<P><B>Click the link for information on</B></P>
<BR><BR>
<P>
<A HREF="Homeappliances.htm" TARGET="main">
Home Appliances
</A>
</P>
<BR>
<P>
<A HREF="Egoods.htm" TARGET="main">
Electronic Goods
</A>
</P>
</BODY>
</HTML>

Module 4: Advanced HTML 17

Exercise 4
Creating the Product Category Pages
In this exercise, you will create the product category pages for the links listed in
the table of contents page created in Exercise 3. The product category pages
consist of the list of products under each of the categories listed in the table of
contents page.
!
Create the Home Appliances contents page
1. Create a basic HTML document in Notepad. Specify the title of the page as
Home Appliances.
2. Add a list to the page, to display the names of the home appliances that are
available for order. The list should consist of the following items:
Microwave, Oven, Food processor, and Refrigerator
<BODY BGCOLOR="Beige">
<H1 ALIGN="center">Home Appliances</H1>
<P><B>You can order from:</B> </P>
<UL>
<LI>Microwave
<LI>Food processor
<LI>Oven
<LI>Refrigerator
</UL>
</BODY>

3. Add a hyperlink that lets you return to the home page from the Home
Appliances contents page.
<P><A HREF="Main.htm">Home Page</A></P>

18 Module 4: Advanced HTML

4. Save the document as Homeappliances.htm in the folder
\Inetpub\wwwroot\1912\Mywebpages.
To see an example of what your code should look like, see Appendix A or
the Student CD-ROM.
<HTML>
<HEAD>
<TITLE>Home Appliances</TITLE>
</HEAD>
<BODY BGCOLOR="Beige">
<H1 ALIGN="center">Home Appliances</H1>
<P><B>You can order from:</B> </P>
<UL>
<LI>Microwave
<LI>Food processor
<LI>Oven
<LI>Refrigerator
</UL>
<P><A HREF="Main.htm">Home Page</A></P>
</BODY>
</HTML>


Module 4: Advanced HTML 19


!
Create the Electronic Goods contents page
1. Create a page that displays a list of electronic goods that are available for
order. The list should consist of the following items: Television, VCR, CD

player, and DVD player.
To see an example of what your code should look like, see Appendix A or
the Student CD-ROM.
<HTML>
<HEAD>
<TITLE>Electronic Goods</TITLE>
</HEAD>
<BODY BGCOLOR="Beige">
<H1 ALIGN="center">Electronic Goods</H1>
<P><B>You can order from:</B></P>
<UL>
<LI>Television
<LI>VCR
<LI>CD player
<LI>DVD player
</UL>
<P><A HREF="Main.htm">Home Page</A></P>
</BODY>
</HTML>

2. Save the document as Egoods.htm in the folder
\Inetpub\wwwroot\1912\Mywebpages.

!
View the frameset page
1. Open Frameset.htm in Internet Explorer.
2. Test the table of contents and other links that you encounter for
functionality.

20 Module 4: Advanced HTML


#
##
#

Creating Frames Using FrontPage 2000
!
Demonstration: Creating Frames Using FrontPage 2000
!
Practice: Creating Frames Using FrontPage 2000


Apart from Notepad, you can also use FrontPage 2000 to create Web pages
with frames. In this section, you will look at how to create frames using
FrontPage 2000.
Slide Objective
To provide an overview of
the topics covered in this
section.
Lead-in
Apart from Notepad, you
can also use FrontPage
2000 to create Web pages
with frames.
Module 4: Advanced HTML 21


Demonstration: Creating Frames Using FrontPage 2000

FrontPage 2000 provides an easy way of creating frames in your Web page. In
this demonstration, you will see how to create frames using FrontPage 2000.
!
Create a Web page with frames using FrontPage 2000
1. Open FrontPage 2000.
2. On the File menu, point to New, and then click Page. The New dialog box
appears.
3. On the Frames Pages tab, select the type of frame, such as the Contents
frames, and then click OK. A Web page with frames appears.
4. To create a new Web page, click New Page in the left frame. A new page is
created that will occupy the frame.
5. You can also display an existing HTML page in a frame. Click Set Initial
Page in the right frame, browse to an existing HTML page Hello.htm in the
folder \Inetpub\wwwroot\1912\DemoCode\Mod04, and then click OK.
6. Save the Web page in the folder
\Inetpub\wwwroot\1912\DemoCode\Mod04. You will be prompted to save
the individual frames and the frameset as separate pages.
7. On the File menu, click Preview in Browser to view the Web page in the
browser.

Slide Objective
To demonstrate how to
create frames using
FrontPage 2000.
Lead-in
In this demonstration, you
will see how to create
frames using FrontPage

2000.
Delivery Tip
Discuss the various types of
frames possible, and give
examples on when you
would use each type of
frame.