advanced html.pdf

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, Front000, 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.


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\Sampsite folder. Click the links in the frame on the left to show how the right frame gets updated with the relevant page.


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\Sampsite folder.


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


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 framesCOLS="column_width_list�

(View Frameset.htm from Sampapps)

<FRAMESET ROWS="100, *">

<FRAME SRC="Frame1.htm">


</FRAMESET>




</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.


! 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\Sampapps\Ch04 folder, and explain the source code to the students. Then show the results of the source code in Internet Explorer.

Note


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)


<FRAME SRC="FrameDoc1.htm" SCROLLING="no" NORESIZE>

<FRAME SRC="FrameDoc2.htm" SCROLLING="yes" NORESIZE>

</FRAMESET>


<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.


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


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.


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..


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>


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>


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>


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>


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>


<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>


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>


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>


<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>


! 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>


<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.


#### 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.


Lead-in Apart from Notepad, you can also use FrontPage 2000 to create Web pages with frames.


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.


Practice: Creating Frames Using FrontPage 2000

In this exercise, you will create a Web page that contains frames for a banner and content, using FrontPage 2000. In the contents page, add links to the following Web sites: Microsoft, Yahoo, and MSNBC.

! Create a Web page with frames 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 Banner and Contents, and then click OK.

A Web page with frames appears.

! Add components to the page 1. Click New Page for the banner area. 2. Enter Links! as a level 1 heading in this page. 3. Select New Page for the navigation area on the left side. 4. Enter Microsoft, Yahoo, and MSNBC on separate lines. 5. Change these to hyperlinks that link to http://www.microsoft.com,

http://www.yahoo.com, and http://www.msnbc.com respectively. To do so, choose the text to use for the link, and then from the Insert menu, click Hyperlink, and type the corresponding URL. Click OK.

! Save the frames • Save the banner frame as Links.htm, the navigation frame as

Navigation.htm, the frameset as Frameset.htm in the folder \Inetpub\wwwroot\1912\Practices\Mod04. Note that the frameset and each frame�s contents get saved as separate pages.

Slide Objective To introduce the practice.

Lead-in In this practice, you will create frames by using FrontPage 2000.


! Preview the Web page 1. On the File menu, click Preview in Browser to view the Web page in the

browser window. 2. Click the links in the navigation bar, and note that the contents appear in the

main frame.


#### Creating Forms Using HTML ! What Are Forms?

! The <FORM> Tag

! Overview of Form Controls

! Using Text Controls

! Using Push Buttons

! Practice: Creating a Simple Form

! Using Radio Buttons and Check boxes

! Using Drop-Down Menus

! Using Hidden Controls

In addition to frames, you can create forms for your Web site. Forms are used to provide user interaction in Web pages. HTML provides various controls such as fields, drop-down menus, and radio buttons to build highly interactive forms.

In this section, you will be introduced to forms and you will learn about the various HTML tags, attributes, and controls related to forms.

To see an animation on forms, run the How Forms Work media element on the Student CD-ROM.


Lead-in In this section, you will look at forms, and see the various HTML tags, attributes, and controls related to forms.

Delivery Tip Play the animation 1912A_04A005.avi on the Student CD-ROM after describing the contents of the section.


What Are Forms? ! Forms:

$ Accept user information

$ Provide options to users for retrieving information based on their needs

$ Allow users to submit comments or feedback

(View Infodesk.htm from Sampsite)

A form allows users to send information to the server. Typical uses for a form include:

! Asking users to provide information during an online purchase, such as name, address, and credit card information.

! Allowing users to select options to retrieve specific information to be displayed on a subsequent page. For example, allowing users to select the city that they want to see the weather for.

! Allowing users to submit comments or provide other feedback.

Following is an illustration of a sample form:

Slide Objective To explain what forms are.

Lead-in Forms provide user interaction in Web pages.

Delivery Tip As an example, show a page that contains a form. In Internet Explorer, open Infodesk.htm in the \Inetpub\wwwroot\1912\Sampsite folder.


The <FORM> Tag

! Use the <FORM> and </FORM> tags to create a form

! A form cannot be nested within another form

<FORM ACTION="/scripts/formProcessor.asp" METHOD=POST>

<!�- Form Contents: fields, buttons, etc. -->

Name: <INPUT TYPE=TEXT NAME="txtName" VALUE="My Name">

�

<INPUT TYPE=SUBMIT VALUE="Submit">

</FORM>

<FORM ACTION="/scripts/formProcessor.asp" METHOD=POST>

<!�- Form Contents: fields, buttons, etc. -->

Name: <INPUT TYPE=TEXT NAME="txtName" VALUE="My Name">

�

<INPUT TYPE=SUBMIT VALUE="Submit">

</FORM>

You use the <FORM> and </FORM> tags to create a form. You can place other HTML elements within the FORM tags to specify the exact contents of the form.

The following code defines a form that contains several fields, a Submit button, and a Reset button. When the user submits the form, the contents are sent to formProcessor.asp, which will actually process the form.

<FORM ACTION="/scripts/formProcessor.asp" METHOD=POST> Email name: <INPUT TYPE=TEXT NAME="txtName" VALUE="My Name"> Check all that apply: <INPUT TYPE=CHECKBOX NAME="chkBusinessUse">Business use <INPUT TYPE=CHECKBOX NAME="chkHomeUse">Home use <INPUT TYPE=SUBMIT VALUE="Submit"> <INPUT TYPE=RESET VALUE="Reset"> </FORM>

Forms cannot be nested within other forms.

Slide Objective To explain the <FORM> tag.

Lead-in You use the <FORM> tag to define a form.

Note


The <FORM> Tag (continued)

! Attributes of the <FORM> tag:

$ ACTION

$ METHOD

$ TARGET

<FORM ACTION="formProcessor.asp" METHOD="POST"><FORM ACTION="formProcessor.asp" METHOD="POST">

<FORM TARGET="Frame1"><FORM TARGET="Frame1">

You can determine the behavior of a form by setting attributes for the form. The <FORM> tag supports the following attributes:

! ACTION The ACTION attribute specifies the form handler used to process the form. You set the ACTION attribute to a URL that specifies the name of the server extension that receives the form data when the user submits the form. For example, in the following code, the details of a form are submitted to a file, formprocessor.asp, which processes the data: <FORM ACTION="/scripts/formProcessor.asp" METHOD="POST">

Slide Objective To explain the attributes supported by the <FORM> tag.

Lead-in The <FORM> tag supports the following attributes�


! METHOD The METHOD attribute indicates the type of form-handling protocol that is used to process the program or script specified in the ACTION attribute. There are two possible values for the METHOD attribute:

• GET When you use the GET method, the form data is appended to the end of the URL. The values of the controls in a form are concatenated to the URL, which is then passed to the form handler. The GET method can only send 1024 bytes of data. <FORM ACTION="/scripts/formProcessor.asp" METHOD="GET"> E-mail: <INPUT TYPE="TEXT" NAME="txtName" VALUE="MyName"> Check all that apply: <INPUT TYPE="CHECKBOX" NAME="chkBusinessUse">Business use <INPUT TYPE="CHECKBOX" NAME="chkHomeUse">Home use <INPUT TYPE="SUBMIT" VALUE="Submit"> <INPUT TYPE="RESET" VALUE="Reset"> </FORM> For example, if you submit the form above using the GET method, the server would receive a request such as: http://myserver/scripts/formProcessor.asp?txtName=�Fred�&chkHomeUse=ON Although the difference is often insignificant, the GET method is faster than the POST method. Also, the GET method requires only one trip to the server, whereas the POST method requires two trips to the server. The disadvantage of using the GET method is that the information is sent as part of the URL, and is therefore �clear text.� As a consequence, the form data is not secure and cannot be encrypted.

• POST If you need to send more than 1024 bytes of data to a server, set the value of METHOD to POST. When you use the POST method, the form data is sent in the body of the HTTP request. There is no limit to the number of parameters or the length of the values that you can send when using the POST method. The POST method requires two trips to the server, therefore is not as fast as the GET method. Again, this difference is not often noticeable. However, since POST sends the data in the body of a message, it can be encrypted.

! TARGET You can use the TARGET attribute if you want the results of the form to appear in a different frame. For example, if you are using frames on a page containing a form, set the TARGET attribute to specify which frame should contain the results. <FORM TARGET="Frame1">


Overview of Form Controls ! Use the <INPUT> tag to define controls! Syntax:

! Form Controls$ Text box$ Password$ Text area$ Push button

<INPUT TYPE=type_of_control NAME=name_of_control VALUE=value> <INPUT TYPE=type_of_control NAME=name_of_control VALUE=value>

$ Radio button

$ Drop-down menu

$ Check box

$ Hidden control

(View Form_fields.htm from Sampapps)

Most HTML controls are defined using the <INPUT> tag. The syntax for the <INPUT> tag is as follows:

<INPUT TYPE="type_of_control" NAME="name_of_control" VALUE="value"> Let�s look at some examples to understand the usage of <INPUT> tag:

<INPUT TYPE="TEXT" NAME="txtUserName"> <INPUT TYPE="PASSWORD" NAME="txtPassword"> In the preceding examples, the:

! TYPE attribute specifies the type of control such as text box, button, and so on.

! NAME attribute specifies a name to the control that uniquely identifies it within an HTML page.

! VALUE attribute is the value assigned to the control when the user interacts with it.

Slide Objective To explain the usage of <INPUT> tag and introduce the types of form controls.

Lead-in You use the <INPUT> tag to define HTML controls.


Consider the following code that creates a form with two text boxes, a Submit button, and a Reset button.

<HTML> <HEAD> <TITLE>USING FORMS</TITLE> </HEAD> <BODY> <FORM ACTION="formhandler.asp" METHOD="POST"> <P>Name:<INPUT TYPE="TEXT" NAME="txtname"></P> <P>Address:<INPUT TYPE="TEXT" NAME="txtadd" ></P> <P><INPUT TYPE="SUBMIT" VALUE="Submit" NAME="buttonsub"> <INPUT TYPE="RESET" VALUE="Reset" NAME="buttonres"></P> </FORM> </BODY> </HTML>

Form controls A form can contain the following type of controls:

! Text box ! Password ! Text area ! Push button ! Radio button ! Drop-down menu ! Check box ! Hidden

You will learn about each of these in detail, in the next few topics.

Delivery Tip From Notepad, open Form_fields.htm in the \Inetpub\wwwroot\1912\Sampapps\Ch04 folder, and briefly explain the code to the students. Then show the results to the students in the browser.


Using Text Controls

! Single-line text box

! Password

! Scrolling text box

<INPUT TYPE="TEXT" NAME="txtUserName">

<INPUT TYPE="PASSWORD" NAME="txtPassword">

<TEXTAREA ROWS="2" NAME="txtComments">

</TEXTAREA>

<INPUT TYPE="TEXT" NAME="txtUserName">

<INPUT TYPE="PASSWORD" NAME="txtPassword">

<TEXTAREA ROWS="2" NAME="txtComments">

</TEXTAREA>

There are three types of text boxes as listed in the following table.

Text box type Syntax Single-line <INPUT TYPE="TEXT">

Password <INPUT TYPE="PASSWORD">

Scrolling <TEXTAREA> </TEXTAREA>

The following example code defines a single-line text box, a password, and a scrolling text box:

<P>Name:<INPUT TYPE="TEXT" NAME="txtUserName"></P> <P>Password: <INPUT TYPE="PASSWORD" NAME="txtPassword" SIZE="20"> </P> <P>Comments: <TEXTAREA ROWS="2" NAME="txtComments"> </TEXTAREA> </P> In the above example, SIZE specifies the length of the text box. ROWS specifies the number of rows the text area will span.

Slide Objective To explain the various text controls supported by HTML.

Lead-in There are 3 types of text controls in HTML.


On opening the preceding form in Internet Explorer, the results would look like the following illustration.


Using Push Buttons

! Submit

! Reset

! Normal

<INPUT TYPE="SUBMIT" NAME="btnsubmit" VALUE="Submit">

<INPUT TYPE="RESET" VALUE="Reset">

<INPUT TYPE="BUTTON" NAME="btnclickme" VALUE="click me">

<INPUT TYPE="SUBMIT" NAME="btnsubmit" VALUE="Submit">

<INPUT TYPE="RESET" VALUE="Reset">


There are three types of push buttons: Normal, Reset, and Submit. To use HTML tags to add these buttons, you use the <INPUT> tag and set the TYPE attribute to the type of button you are creating. The VALUE attribute is set to the text that should appears as the caption of the button.

The following table lists the syntax for each type of button.

Button type Syntax Submit <INPUT TYPE="SUBMIT" NAME="button_name"

VALUE="value">

Reset <INPUT TYPE="RESET" VALUE="value">

Normal <INPUT TYPE="BUTTON" NAME=button_name VALUE="value">

A Submit button will cause the contents of the form to be sent to the server. The following example code defines a Submit button:

<INPUT TYPE="SUBMIT" NAME="btnsubmit" VALUE="Submit"> A Reset button will clear the contents of the fields on the form. The following example code defines a Reset button:

<INPUT TYPE="RESET" VALUE="Reset"> You can also define a Normal button. This button does nothing unless you specifically write client-side script for the button, to handle some processing. You will learn more about client-side scripting in Module 6, �Client-Side Scripting.� The following example code defines a Normal button named btnclickme:


Slide Objective To explain the types of buttons controls.

Lead-in There are three types of button controls in HTML.


Following is an illustration of a form that uses push buttons.


Practice: Creating a Simple Form

In this exercise, you will create a feedback form for Northwind Traders using HTML. This feedback form must contain a title; fields for specifying name, address, e-mail, and suggestions; and a Submit button. The field for suggestions should allow for scrolling.

! Create a feedback form 1. In Notepad, create a basic HTML document and specify the title for the

page as Northwind Traders. <HTML> <HEAD> <TITLE>Northwind Traders</TITLE> </HEAD> <BODY> </BODY> </HTML>

2. Specify the heading of the form as NORTHWIND TRADERS FEEDBACK FORM. After the <BODY> tag, add the following: <H1>NORTHWIND TRADERS FEEDBACK FORM</H1>


Lead-in In this practice, you will create a simple feedback form by using HTML.


3. Define a form in the body of your HTML document. Add the following controls to your form: fields - Name, Address, E-mail, and Suggestions, and a Submit button.

After the <H1> tag, define a <FORM> tag, and define the <INPUT> tags for the four text boxes and a submit button, inside the <FORM> tags. <BODY> <H1>NORTHWIND TRADERS FEEDBACK FORM</H1> <FORM METHOD=POST action=""> <P>Name: <INPUT TYPE="text" Name="txtName" ></P> <P> Address: <INPUT TYPE="text" NAME="txtAddress" ></P> <P>E-mail: <INPUT TYPE="text" NAME="txtEmail" ></P> <P>Suggestion: <TEXTAREA ROWS="2" NAME="txtSugg"> </TEXTAREA> </P> <P><INPUT TYPE=SUBMIT VALUE="Submit" NAME="btnSubmit"></P> </FORM> </BODY>

4. Save the document as Feedbackform.htm in the folder

\Inetpub\wwwroot\1912\Practices\Mod04.

! View the document in Internet Explorer 5 • Open Feedbackform.htm in Internet Explorer.


Using Radio Buttons and Check Boxes

! To add a radio button

$ Use <INPUT> tag and set TYPE to RADIO

! To add a group of radio buttons

$ Assign the same NAME attribute to all radio buttons in a group

<B>Are you aware of the COM Technology?</B>

<P><INPUT TYPE="RADIO" CHECKED NAME="optaskqn" VALUE="yes">yes</P>

<P><INPUT TYPE="RADIO" NAME="optaskqn" VALUE="no">no</P>

<P><INPUT TYPE="RADIO" NAME="optaskqn" VALUE="maybe">maybe</P>

<B>Are you aware of the COM Technology?</B>

<P><INPUT TYPE="RADIO" CHECKED NAME="optaskqn" VALUE="yes">yes</P>

<P><INPUT TYPE="RADIO" NAME="optaskqn" VALUE="no">no</P>

<P><INPUT TYPE="RADIO" NAME="optaskqn" VALUE="maybe">maybe</P>

(View Form_radio.htm from Sampapps)

Radio buttons Radio buttons are typically used in a form, when the user has to choose only one option from a set of options.

To add a radio button control to a form, use the <INPUT> tag and set the TYPE attribute to RADIO. Use a separate <INPUT> tag for each radio button that you create.

To create a group of radio buttons, assign the same NAME attribute to all the radio buttons in the group. To specify which radio button option is selected by default when a user views the Web page, add the CHECKED attribute to the <INPUT> tag.

Slide Objective To explain how to create a radio button in HTML.

Lead-in As before, you use the <INPUT> tag to create a radio button.


The following example code displays a radio button group that provides three options: Yes, No, and Maybe. The Yes option is selected by default:

<BODY> <P><B>Are you aware of the COM Technology?</B></P> <FORM ACTION="formhandler" METHOD=POST> <P><INPUT TYPE="RADIO" CHECKED NAME="optaskquestion" VALUE="yes"><B>Yes</B></P> <P><INPUT TYPE="RADIO" NAME="optaskquestion" VALUE="no"><B>No</B></P> <P><INPUT TYPE="RADIO" NAME="optaskquestion" VALUE="maybe"><B>Maybe</B></P> </FORM> </BODY> On opening the preceding form in Internet Explorer, the results would look like the following illustration.

Delivery Tip From Notepad, open Form_radio.htm in the \Inetpub\wwwroot\1912\Sampapps\Ch04 folder, and explain the source code to the students. Then show the results to the students in the browser.


Using Radio Buttons and Check Boxes (continued)

! To add a check box

$ Use <INPUT> tag and set TYPE to CHECKBOX

! To make the check box appear selected

$ Add CHECKED attribute to the <INPUT> tag

<INPUT TYPE="CHECKBOX" NAME="chkbizuse" VALUE="biz" >Business use<INPUT TYPE="CHECKBOX" NAME="chkpersonaluse" VALUE="personal">

<INPUT TYPE="CHECKBOX" NAME="chkbizuse" VALUE="biz" >Business use<INPUT TYPE="CHECKBOX" NAME="chkpersonaluse" VALUE="personal">

(View Form_chkbox.htm from Sampapps)

Check boxes Check boxes are typically used when the user can choose more than one option from a given set of options.

To add a check box control to a form, use the <INPUT> tag and set the TYPE attribute to CHECKBOX. To make the check box appear as selected when the user views the page, add the CHECKED attribute to the <INPUT> tag.

To add descriptive text to the check box, include the text after the <INPUT> tag. The following example code displays two check boxes; the first box is checked by default:

<BODY> <FORM ACTION="formhandler" METHOD=POST> <H1 ALIGN=CENTER>Using Check boxes</H1> <P>You usually use your laptop for: </P> <P><INPUT TYPE="CHECKBOX" NAME="chkbusinessuse" VALUE="business" CHECKED>Business use</P> <P><INPUT TYPE="CHECKBOX" NAME="chkpersonaluse" VALUE="personal">Personal use</P> </FORM> </BODY>

Slide Objective To explain how to create a check box using HTML.

Lead-in As before, you use the <INPUT> tag to create a check box.

Delivery Tip From Notepad, open Form_chkbox.htm in the \Inetpub\wwwroot\1912\Sampapps\Ch04 folder, and explain the source code to the students. Then show the results to the students in the browser.


On opening the preceding form in Internet Explorer, the check boxes would appear as shown in the following illustration.


Using Drop-Down Menus

! Use the <SELECT> tag to add a drop-down menu control

$ MULTIPLE attribute allows multiple selections in a drop-down menu

! Use the <OPTION> tag to add items to the drop-down menu

$ SELECTED attribute to show a default selection in a drop-down menu

<SELECT MULTIPLE NAME="lstorderingpreference"><SELECT MULTIPLE NAME="lstorderingpreference">

<OPTION SELECTED VALUE="1">MAIL<OPTION SELECTED VALUE="1">MAIL

(View Form_menu.htm from Sampapps)

To create a drop-down menu in your form, use the <SELECT> tag. For example, you use the <SELECT> tag to create drop-down menu for listing various clothes sizes as the options:

<SELECT NAME="lstsize"> To add items to the drop-down menu, you use the <OPTION> tag. Continuing with the previous example, you can add the sizes: Small, Medium, and Large, as options to the drop-down menu using the <OPTION> tag:

<SELECT NAME="lstsize"> <OPTION VALUE="1">Small <OPTION VALUE="2">Medium <OPTION VALUE="3">Large </SELECT> To make one of the items appear as selected by default when a user views the drop-down menu in the Web page, you can add the SELECTED attribute to the <OPTION> tag of the default item.

Slide Objective To explain how to create a drop-down menu in HTML.

Lead-in You use the <SELECT> tag to create a drop-down menu.


The following example code displays a drop-down menu control that contains a list of ordering preferences. The Mail option is selected by default.

<BODY> <H1 ALIGN="center">Using Drop-Down Menu</H1> <FORM ACTION="formhandler" METHOD=POST> <B>How would you prefer to send your messages?</B> <SELECT NAME="lstorderingpreference"> <OPTION SELECTED VALUE="1">MAIL <OPTION VALUE="2">FAX <OPTION VALUE="3">ONLINE </SELECT> </FORM> </BODY> On opening the preceding form in Internet Explorer, the results would look like the following illustration.

If you want the user to be able to select more than one item from the drop-down menu, add the MULTIPLE attribute to the <SELECT> tag as shown in the following example code:

<SELECT MULTIPLE NAME="lstorderingpreference">

Use drop-down menus instead of radio buttons or check boxes to gain space in your Web pages.

Delivery Tip From Notepad, open Form_Menu.htm in the \Inetpub\wwwroot\1912\Sampapps\Ch04 folder, and explain the source code to the students. Then show the results to the students in the browser.

Tip


Using Hidden Controls

! To add a hidden control:

$ Use <INPUT> tag, set TYPE to HIDDEN

! To set a value to the control:

$ Add text to the VALUE attribute

<INPUT TYPE=HIDDEN NAME="hdnname" VALUE="Some info"><INPUT TYPE=HIDDEN NAME="hdnname" VALUE="Some info">

Sometimes you may need to use hidden controls in your form, to store some internal information, which is not to be displayed to the user.

To add a hidden control to a form, you use the <INPUT> tag and set the TYPE attribute to HIDDEN. Set the VALUE attribute to the text that you want to be sent with the hidden control.

The following example code creates a hidden control named hdnName. When the user submits the form, the text for the VALUE attribute is sent to the server.

<INPUT TYPE=HIDDEN NAME="hdnname" VALUE="information you don't want the user to see"> Hidden controls are often used in conjunction with Microsoft ActiveX® controls, or to store state information on the client. You will learn about ActiveX controls in Module 7, �Adding Active Components.�

To see a comprehensive list of HTML tags, visit the following site http://www.unipress.com/tutorial/html1.html.

Slide Objective To explain hidden controls in a form.

Lead-in Sometimes you may need to use hidden controls in your form.

Note


Formatting Forms ! Setting the tab order � set the TABINDEX attribute

! Adding labels � set ID attribute, add <LABEL> tag, and set the FOR attribute to the ID of the control

! Adding Access Keys � set ACCESSKEY attribute

<INPUT TYPE="TEXT" NAME="txtname" TABINDEX="1">

<INPUT TYPE="TEXT" NAME="txtaddress" TABINDEX="2">

<INPUT TYPE="TEXT" NAME="txtname" TABINDEX="1">

<INPUT TYPE="TEXT" NAME="txtaddress" TABINDEX="2">

<INPUT TYPE="RADIO" NAME="optGreen" VALUE="1" ID="optColor1">

<LABEL FOR="optColor1"> Green </LABEL>

<INPUT TYPE="RADIO" NAME="optGreen" VALUE="1" ID="optColor1">

<LABEL FOR="optColor1"> Green </LABEL>

<INPUT TYPE="RADIO" NAME="optblue" VALUE="2" ID="optcolor2">

<LABEL FOR="optcolor2" ACCESSKEY="g"><U>g</U>reen</LABEL>

<INPUT TYPE="RADIO" NAME="optblue" VALUE="2" ID="optcolor2">

<LABEL FOR="optcolor2" ACCESSKEY="g"><U>g</U>reen</LABEL>

Forms can be formatted to improve user interaction. To format a form, you can add HTML tags or change attributes of the existing tags.

Setting the tab order To set the tab order for the controls on a form, set the TABINDEX attribute for each control as shown in the following example code.

<INPUT TYPE="TEXT" NAME="txtname" TABINDEX="1"> <INPUT TYPE="TEXT" NAME="txtaddress" TABINDEX="2">

Setting the TABINDEX attribute to 0 will cause an element to be skipped.

Adding labels If you add a label to a control, the user can select the control by clicking either the label or the control. To add a label, first set the ID attribute of the control. You can use the value of the ID attribute to refer to a control from another control. Next, add the <LABEL> tag and set the FOR attribute of this tag to the ID of the control you want to label.

The following example code creates a label for the radio button optColor1:

<INPUT TYPE="RADIO" NAME="optGreen" VALUE="1" ID="optColor1"> <LABEL FOR="optColor1">Green</LABEL>

Slide Objective To introduce the topics in this section.

Lead-in There are various ways to format a form.

Note


Adding access keys To create an access key for a control, set the ACCESSKEY attribute in the <LABEL> tag for the control.

The following example code defines a label and an access key for the Green option. The code underlines the letter G to provide a visual to the user:

<INPUT TYPE="RADIO" NAME="optblue" VALUE="2" ID="optcolor2"> <LABEL FOR="optcolor2" ACCESSKEY="g"><U>g</U>reen</LABEL>


#### Creating Forms Using FrontPage 2000

! Demonstration: Creating Forms Using FrontPage 2000

! Lab 4.2: Creating a Form Using FrontPage 2000

Apart from Notepad, you can also use FrontPage 2000 to create forms. FrontPage 2000 provides an easy way of creating forms in your Web page. In this section, you will look at how to create forms using FrontPage 2000.


Lead-in Apart from Notepad, you can also use FrontPage 2000 to create forms.


Demonstration: Creating a Form Using FrontPage 2000

In this demonstration, you will see how to create a form using FrontPage 2000.

! Create a form using a standard template 1. Open FrontPage 2000. 2. On the File menu, point to New, and then click Page. The New dialog box

appears. 3. Select the form template you wish to create, such as Feedback Form, and

then click OK. FrontPage will create a new Web page that contains default text and a form.

Use borderless tables to assign the labels and fields in your form.

You can also create a form by using the Form Page Wizard, which will display a series of dialog boxes that ask you questions about the type of form you want to create.

! Create a form using the Form Page Wizard 1. On the New dialog box, select the Form Page Wizard option, and then

click OK. The Form Page Wizard appears. 2. In the wizard, select the options that are to be supported by your form.

Slide Objective To demonstrate how to create a form using FrontPage 2000.

Lead-in In this demonstration, you will see how to create a form using FrontPage 2000.

Delivery Tip Demonstrate the procedure for inserting a form in a Web page using FrontPage 2000.

Tip


! Insert a form on a page 1. On the New dialog box, select Normal Page, and then click OK. 2. On the Insert menu, point to Form, and then click Form. 3. FrontPage inserts a form on the page, which contains a Submit button and a

Reset button. 4. To create a name field:

a. Press Enter to insert a new line above the Submit button. b. Press the up-arrow key, and type Name: . c. On the Insert menu, point to Form, and click One-Line Text Box.

5. To create an address field: a. Press Enter to insert a new line below the Name field. b. Type Address:. c. On the Insert menu, point to Form, and click One-Line Text Box.

6. This creates a form that has two labels and two text boxes. To preview the form, click the Preview tab.

After you create the form in FrontPage 2000, you can set the properties of the form to determine what happens when the user submits the form.

! Set the properties of the form 1. Right-click within the boundaries of the form, and then click Form

Properties. The Form Properties dialog box appears.

2. You can set the properties of the form according to your requirements.

Delivery Tip Demonstrate the procedure to set properties for the form.


Lab 4.2: Creating a Form Using FrontPage 2000

Objectives After completing this lab, you will be able to create a form using Microsoft FrontPage 2000.

Prerequisites Before working on this lab, you must have created a basic Web page using FrontPage 2000.

Scenario The Web development team in a travel agency is designing an information request form for their company Web site. The form should be able to accept customer details such as name and e-mail, and provide options to select preferred destinations, and air class.

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.2\Solution.



Lead-in In this lab, you will create a form using FrontPage.

Explain the lab objectives. To create a form using FrontPage 2000.


Exercise 1 Creating a Form

In this exercise, you will create an information request form that contains the controls for specifying:

! Name ! E-mail ! Destinations of interest (Caribbean, Tahiti, Hawaii) ! Air class (Business, First Class, Coach, and Cheapest available)

! Create a form in a Web page 1. Create a new Web page in FrontPage 2000. Specify �Information Request

Form� as the title of the page and as a level 1 heading on the page. 2. Insert a form in the page. 3. Add text boxes for specifying name and e-mail, checkboxes for destinations

of interest, and a drop-down menu for air classes. 4. Save the document as Inforeqform.htm in the folder

\Inetpub\wwwroot\1912\Mywebpages. 5. Preview the form in the browser.

Your form should resemble the following illustration:


Introduction to Style Sheets

! Style sheets define the look and feel of Web pages! Define the font, color, text, margins, and borders for the

Web page! Advantages of using a style sheet:$ Additional formatting options $ Better control $ Easier customization $ Supports a larger audience $ Improves the performance of your site

Style sheets define the look and feel for the pages that make up your Web site. With style sheets, you can control the font, color, text, margins, and border properties of an element in your Web page. For example, you can have a style sheet that defines the font-family as Arial and font-size as 10 for all the paragraphs in your Web page.

Defining a style sheet includes setting certain properties, such as:

! Font Setting font properties is the most common use of style sheets. This involves setting the following: font-family, font-weight, font-style, and font-size.

! Color Color properties are used to set the background color or image of an element. This involves setting the following: color, background-color, background-image, background-position, and background-repeat.

! Text Text properties are used to set additional spacing between words or letters, alignment of text, casing of text, and vertical positioning of text within an element. This involves setting the following: word spacing, letter spacing, text-decoration, text-alignment, and text-indentation.

! Margins Margin properties set the margin of an element. This involves setting the following: margin-left, margin-right, margin-bottom, and margin-top.

Slide Objective To introduce style sheets.

Lead-in You use style sheets to enhance the appearance of an HTML document.


! Borders Border properties are used to set the borders of an element. The border width, color, and style of an element can be set with the following properties: border-top-width, border-right-width, border-left-width, border-color, and border-style.

Style sheets are also known as Cascading Style Sheets (CSS).

Advantages of style sheets The advantages of style sheets include:

! Additional formatting options Through the use of style sheets, more styles are made available without the need to use additional HTML tags.

! Better control Rather than editing many instances of a tag to change a format, you can make the change to a style in one place and then have this change reflected everywhere the style is used.

! Consistency You can design your Web site based on a style sheet. By making the style sheet available to other Web users, you can maintain a consistent look and feel across your Web site.

! Supports a larger audience Using style sheets, you can customize the appearance for different browsers or users. For example, the same content can be rendered in a way that better supports users with disabilities. Or, by simply applying a different style sheet, you can optimize a page for printing.

! Improves the performance of your site Because the style information is stored separately, rather than in each page, the size of each Web page is reduced, speeding the delivery of content. Also, the browser will often cache the style sheet, so it only has to be downloaded once.

Note


#### Using Style Sheets

! Using Inline Styles

! Setting Style Properties

! Embedding Style Sheets

! Linking Style Sheets

! Creating New Style Classes

! Practice: Creating Style Sheets Using HTML

Styles sheets can be implemented in an HTML document in three ways:

! Inline Style definitions are created for single tags or blocks of tags in an HTML document.

! Embedded Style definitions are stored in the HTML document itself. A style definition applies to all instances of that style within the HTML page.

! Linked Style definitions are stored in a document that is separate from the HTML pages to which it applies. A single style sheet can be linked to many HTML pages. This is the most frequent and powerful way to implement style sheets.

You can also create new style classes in your document. In this section, you will look at the various methods of implementing style sheets.


Lead-in Style sheets can be implemented in an HTML document by using various methods.


Using Inline Styles

! You can add inline styles to HTML tags by using the STYLE attribute

! You can also apply a style to a block of tags by using the <SPAN> tag

<P STYLE="margin-left: 1.0in; color: teal">

This text appears indented and in the color teal.

</P>

<P STYLE="margin-left: 1.0in; color: teal">

This text appears indented and in the color teal.

</P>

<SPAN STYLE="font-size: 14pt; color: teal"> <SPAN STYLE="font-size: 14pt; color: teal">

(View Inline_samp.htm from Sampapps)

You can add inline styles to HTML tags using the STYLE parameter. For example, you can set the style property of the <P> tag as follows:

<P STYLE="margin-left: 1.0in; color: teal"> This text appears indented and in the color teal. </P> You can also apply a style to a block of tags by using the <SPAN> tag. Any tags that appear between the <SPAN> and </SPAN> tags will contain the formatting you specify. The following example code applies a teal, 14-point font to the list that follows the lead-in:

<P>This is my list</P> <UL> <SPAN STYLE="font-size: 14pt; color: teal"> <LI>List item A <LI>List item B <LI>List item C </SPAN> </UL>

Slide Objective To explain how to use inline styles.

Lead-in You can use inline styles in your HTML documents, to apply a style to a particular portion of the document.

Delivery Tip From Notepad, open Inline_samp.htm in the \Inetpub\wwwroot\1912\Sampapps\Ch04 folder, and explain the code to the students. Then show the results of the code in Internet Explorer.


The style specification affects all the items within the <SPAN> tags.

Opening the preceding document in Internet Explorer would resemble the following illustration.


Setting Style Properties ! To set the font properties in the style definition use:

$ Font-family

$ Font-weight

! Use �font� to specify multiple font properties together

! To set the color of the text use the �color� property

<P STYLE="font-family: Arial; font-weight: bold; font-size: 14pt"> <P STYLE="font-family: Arial; font-weight: bold; font-size: 14pt">

<P STYLE="font-family: Arial; color: teal"> <P STYLE="font-family: Arial; color: teal">

(View Style_fonts.htm from Sampapps)

<P STYLE="font: bold 14pt"> <P STYLE="font: bold 14pt">

$ Font-style

$ Font-size

Setting font properties As part of your style definition, you can set the following font properties of a text:

! Font-family such as Arial. ! Font-weight such as bold. ! Font-style such as italic. ! Font-size such as 10 point.

The following example code shows how to define the font properties in a style definition:

<P STYLE="font-family: Arial; font-weight: bold; font-style="italic"; font-size: 14pt"> Hello! World! </P> To set multiple font properties together, you can use the font property as shown in the following example code:

<P STYLE="font: bold 14pt"> Hello! World! </P>

Slide Objective To explain how to set different font properties and color as part of the style definition.

Lead-in As part of your style definition, you can define the font and color properties.


Setting the color You can set the color of a text through a style definition as shown in the following example code:

<P STYLE="color: red"> Hello! World! </P> Delivery Tip

From Notepad, open Style_fonts.htm in the \Inetpub\wwwroot\1912\Sampapps\Ch04 folder, and explain the source code to the students. Then show the results to the students in the browser.


Embedding Style Sheets

! Use the <STYLE> block to embed style sheets

<HEAD>

<STYLE TYPE="text/css">

H1 {font: 17pt "Arial"; font-weight: bold; color: teal}

H2 {font: 13pt "Arial"; font-weight: bold; color: purple}

P {font: 10pt "Arial"; color: red}

</STYLE>

</HEAD>

<HEAD>

<STYLE TYPE="text/css">

H1 {font: 17pt "Arial"; font-weight: bold; color: teal}

H2 {font: 13pt "Arial"; font-weight: bold; color: purple}

P {font: 10pt "Arial"; color: red}

</STYLE>

</HEAD>

(View Style_embed.htm from Sampapps)

Inline styles are applicable only to the tag it is attached to. To apply styles to the entire document, use an embedded style sheet in your HTML document. You can embed a style sheet in an HTML document by using the <STYLE> and </STYLE> tags.

Any number of styles can be defined within the <STYLE> tags by using the same format as used in the .css file. Consider the following example in which the <H1> heading will be of font Arial, font weight bold, and color teal.

<HTML> <HEAD> <STYLE TYPE="text/css"> H1 {font: 17pt "Arial"; font-weight: bold; color: teal} H2 {font: 13pt "Arial"; font-weight: bold; color: purple} P {font: 10pt "Arial"; color: red} </STYLE> </HEAD> <BODY> <H1>USING STYLE SHEETS</H1> <H2>This is heading 2</H2> <P>This is a paragraph</P> /BODY> </HTML> In the above style sheet, all H1 headings will be bold, Arial, and teal. All H2 headings will be bold, Arial, and purple. All paragraph text will be Arial and white.

Slide Objective To explain how to embed a style sheet using a <STYLE> block.

Lead-in Apart from using inline styles, you can also embed a style sheet in your HTML document.

Delivery Tip From Notepad, open Style_embed.htm in the \Inetpub\wwwroot\1912\Sampapps\Ch04 folder, and explain the code to the students. Then show the results of the code in Internet Explorer.

When using embedded styles, you need to prevent your style definitions from being displayed as regular text in browsers that do not support style sheets. Most browsers that do not support style sheets ignore the <STYLE> and </STYLE> tags, but interpret the style definitions between the tags as regular text. To avoid this problem, embed your <STYLE> block within a comment, as shown in the following example: <STYLE TYPE="text/css">  </STYLE>

Note


Linking Style Sheets ! Create a file that contains the style definitions

! Save the file to the server with the extension .css! Link to the .css file from any HTML document by placing

the <LINK> tag in the <HEAD> section of the HTML document

! In case multiple styles are defined for a tag, the style which is in effect is the style that is defined last in the order of occurrence

H1 {font: 17pt "Arial"; font-weight: bold; color: teal} H1 {font: 17pt "Arial"; font-weight: bold; color: teal}

<HEAD>

<LINK REL="stylesheet" TYPE="text/css" HREF=�Mystyles.css">

</HEAD>

<HEAD>

<LINK REL="stylesheet" TYPE="text/css" HREF=�Mystyles.css">

</HEAD>

Linked style sheets are the most powerful implementation of style sheets. You can create a single style-sheet document and link to this document from any number of pages on your Web site. To change a style, simply make the change in the style-sheet document, and the change will be reflected in all Web pages that are linked to that style sheet.

! Create a linked style sheet 1. Create a file that contains the style definitions using Notepad or FrontPage.

A style definition consists of the name of a tag followed by the properties and the values you want to set for the tag. For example, the following example defines the styles H1, H2, and P: H1 {font: 17pt "Arial"; font-weight: bold; color: teal} H2 {font: 13pt "Arial"; font-weight: bold; color: purple} P {font: 10pt "Arial"; color: Red}

2. Save the file to the server with the extension .css. For example, save the file with the name Mystyle.css. Cascading Style Sheets (CSS) is a technology that enables you to control the layout of your Web pages. With CSS, you can easily maintain many Web pages at once, by controlling their properties, such as color, fonts, text size, and alignment of margins, padding, and borders. Also, with CSS you can update the appearance and formatting of a number of pages by changing just one document. A CSS document is saved with the extension .css.

Slide Objective To explain how to link to a style sheet.

Lead-in Linked style sheets are the most powerful implementation of style sheets.

Delivery Tip Explain the steps to create a style sheet.


3. Link to the .css file from any HTML document by adding a <LINK> tag in the <HEAD> section of the document as shown in the following example: <HEAD> <LINK REL="stylesheet" TYPE="text/css" HREF="Mystyle.css"> </HEAD> The <LINK> tag has three attributes, REL, TYPE, and HREF. The REL attribute specifies the relationship between the HTML document and the linked document. The TYPE attribute specifies the file type that can be text or css. The HREF attribute specifies URL of the link.

The following illustration shows the effect of attaching the style sheet Mystyle.css to a sample HTML document:

Cascading order An HTML document can contain more than one style sheet implementation. In general, the style sheet of the author overrides the default values of the browser. If you use all the three methods: linking, embedding, and inline styles, the last style the browser encounters for the element takes precedence. It actually works in the order that the browser encounters the <STYLE> tag. Therefore, if you had a linked style sheet after an embedded style block, the linked style sheet would take precedence. The term �cascading� derives from the fact that multiple style sheets can be applied to the same Web page.


Creating New Style Classes

! Create a new style class by preceding the style name with a dot

<STYLE>

.red {font-size:18pt; color:red}

.green {font-size:15pt; color:green}

</STYLE>

<STYLE>

.red {font-size:18pt; color:red}

.green {font-size:15pt; color:green}

</STYLE>

You may wish to create new style classes so that you can apply these style classes to different elements in your document. You can create a new style class by preceding the style name with a period (.). The following example uses the <STYLE> tag to define the . red and . green styles:

<STYLE> .red {font-size:18pt; color:red} .green {font-size:15pt; color:green} </STYLE>

Slide Objective To explain how to create a new style class.


This gives you a simple mechanism for applying the same look and feel to completely different elements. The following example shows how to use the previous style classes:

<HTML> <HEAD> <STYLE> .red {font-size:18pt; color:red} .green {font-size:15pt; color:green} </STYLE> </HEAD> <BODY> <P CLASS="red">List 1</P> <Ul CLASS="red"> <LI>Item 1.1 <LI>Item 1.2 </UL> <P CLASS="green">List 2</P> <Ul CLASS="green"> <LI>Item 2.1 <LI> Item 2.2 </UL> </BODY> </HTML> Opening the preceding document in Internet Explorer would resemble the following illustration.

Delivery Tip From Notepad, open Style_Class.htm in the \Inetpub\wwwroot\1912\Sampapps\Ch04 folder, and explain the code to the students. Then show the results of the code in Internet Explorer.


Practice: Creating Style Sheets Using HTML

In this exercise, you will create an embedded style sheet in a basic Web page, using HTML. In the style block, define style definitions for headings: H1, H2, and paragraph, P.

! Create a basic Web page with an embedded style sheet 1. Create a new file in Notepad and define an empty HTML document in it.

<HTML> </HTML>

2. Define a style block within the HTML document. Add a <HEAD> tag, and define a <STYLE> block within the <HEAD> tags. <HTML> <HEAD> <STYLE TYPE="text/css"> </STYLE> </HEAD> </HTML>


Lead-in In this practice, you will create an embedded style sheet in a basic Web page.


3. Within the style block, add the code for defining the style definitions for headings: H1, H2, and paragraph, P. <STYLE TYPE="text/css"> H1 {font: 17pt "Comic Sans MS"; font-weight: bold; color: teal; align:"center"} H2 {font: 13pt "Arial"; font-weight: bold; color: purple} P {font: 10pt "Comic Sans MS"; color: red; font-style:italic} </STYLE>

4. To see the effect of the style sheet, add some sample text as part of the body of the HTML document. <HTML> <HEAD> <STYLE TYPE="text/css"> H1 {font: 17pt "Comic Sans MS"; font-weight: bold; color: teal; align:"center"} H2 {font: 13pt "Arial"; font-weight: bold; color: purple} P {font: 10pt "Comic Sans MS"; color: red; font-style:italic} </STYLE> </HEAD> <BODY> <H1>THIS PAGE USES STYLE SHEETS</H1> <P>This is a paragraph</P> </BODY> </HTML>

5. Save your document as Styles.htm in the folder \Inetpub\wwwroot\1912\Practices\Mod04.

! View the document in Internet Explorer 5 • Open Styles.htm in Internet Explorer.


#### Publishing a Web Page

! Overview of Publishing

! Preparing to Publish

! Production Processes

! Publishing a Web Site Using FrontPage 2000

! Demonstration: Publishing a Web Site

! Lab 4.3: Publishing a Web Site

After creating a Web site, you need to publish it in order for it to be accessible to end-users. Once the development is completed, the site needs to be copied from the development machine to a location that is accessible on an intranet or the Internet. This process is called publishing.

Slide Objective To introduce the topics in this section.

Lead-in Publishing is placing a Web site on a Web server.


Overview of Publishing

! Ensure that site is ready for publishing by:

$ Verifying all hyperlinks

$ Testing the site for functionality

$ Verifying for legal compliance

$ Checking for compatibility with various browsers

! Use FrontPage 2000 to publish the site using HTTP or FTP, or publish the site to a file system location

Before you publish your Web site, you should ensure that the site is ready by:

! Verifying that all hyperlinks are functioning. ! Verifying that the pages in the site look the way they should. ! Testing the site to make sure that it works. ! Ensuring that your site conforms to design guidelines. ! Ensuring that your site is legally compliant. ! Checking browser-compatibility issues.

A good way to ensure your Web site is ready for publishing is by previewing it in a Web browser, and then navigating through the site. FrontPage 2000 has a number of features that can identify broken links and slow pages.

FrontPage 2000 provides a variety of ways to publish a Web site. These include:

! Publishing a Web site using HTTP. ! Publishing a Web site using FTP. ! Publishing to a file system location.

Slide Objective To provide an overview on how to publish a Web site.

Lead-in Before you publish your Web site, you should ensure that the site is ready by�


Preparing to Publish

! FrontPage 2000 provides tools to:

$ Verify hyperlinks

$ Recalculate hyperlinks

$ Perform site-wide spell-check

$ Perform site-wide search and replace

To ensure that you have an error-free Web site, you can perform a set of tasks before publishing your Web site. These tasks include the following:

! Verifying hyperlinks ! Recalculating hyperlinks ! Site-wide spell-check ! Site-wide search and replace

Verifying hyperlinks One of the biggest tasks in maintaining large Web sites is to ensure that all hyperlinks point to the correct files, both on your Web site and on the Internet. FrontPage 2000 provides tools for verifying both types of hyperlinks.

! Verify that all hyperlinks are valid 1. In FrontPage 2000, create a new Web page with a hyperlink. 2. On the Reporting toolbar, click the Verify Hyperlinks icon.

If the Reporting toolbar is not visible, display the toolbar by clicking View, then pointing to Toolbars, and then clicking Reporting.

Slide Objective To list the tasks to be performed before publishing a Web site.

Lead-in Before you publish a Web site, there are a few tasks that should be performed.

Delivery Tip Demonstrate the steps to verify hyperlinks.

Tip


The Verify Hyperlinks dialog box appears.

3. Click Start.

FrontPage checks all internal and external hyperlinks in the current Web site and reports on their status. This process can take a long time. Therefore, if you have a site with many external hyperlinks, be prepared to wait while FrontPage checks the validity of each hyperlink.

! Take action to repair broken hyperlinks ! Right-click the broken hyperlink, and then click one of the following

options on the shortcut menu that appears:

• Verify This option lets you check the integrity of the hyperlink.

• Edit Hyperlink Displays the Edit Hyperlink dialog box in which you can edit the URL of the hyperlink.

• Edit Page Displays the page on which this hyperlink appears.

• Add Task Displays the New Task dialog box so that you can add the task of fixing the hyperlink to your current Task list.

Recalculating hyperlinks To update the display of the current FrontPage Web site in FrontPage Explorer, you can recalculate the hyperlinks. In a multi-author environment, this option enables you to view recent changes made to the Web site by other authors. Recalculate Hyperlinks option updates dynamic components, such as navigation bars, and table of contents, and also may fix broken links.

For example, if you delete a page from your site, use the Recalculate Hyperlinks option to remove all references to that page.


! Recalculate the hyperlinks in your Web site 1. Establish a connection to your intranet or the Internet. 2. On the Tools menu, click Recalculate Hyperlinks.

A message box appears, notifying you that recalculating hyperlinks for a large FrontPage Web site may take several minutes because it takes place on the Web server. The larger the Web site, the longer it will take.

Delivery Tip Demonstrate the steps to recalculate hyperlinks.


Performing site-wide spell-checks In the FrontPage window, you can use the Spelling option to check the spelling in all the pages in your Web site.

! Check spelling 1. On the Tools menu, click Spelling.

The Spelling dialog box appears.

FrontPage 2000 will check your Web site for spelling errors.

Site-wide search and replace FrontPage provides a Replace option to search and replace text in all the pages of your Web site. This is useful when you want to globally change some text.

! Search for and replace a word 1. On the Edit menu, click Replace. 2. In the Find what box, type the text you want to search for. 3. In the Replace with box, type the required text. 4. Select the search options according to your requirement, and then click Find

Next. 5. Click Replace to replace the selected text.

Delivery Tip Demonstrate the steps to check spellings.

Delivery Tip Demonstrate the steps to search for and replace a word.


Production Process

! Site development process involves the:

$ Staging Server � hosts the web site in development

$ Test Server � hosts the web site published for testing

$ Production Server � hosts the web site published for public access

If Web site content changes, then you should not directly make modifications to the files in the Production server.

Creating a Web site can be a complex task. Until your images, hyperlinks, and other elements are in place, you probably do not want users to view your site. The solution is to set up an environment where you can develop the site. Once your site is developed, it is usually published to another site for testing. When the testing is completed, the site is finally published to the production server, where it is accessible by the target audience. Therefore, the complete development process often involves three distinct servers:

! Staging server ! Test server ! Production server

Staging server The staging server is the Web server that contains the work in progress. The development team can create and test Web pages on the staging server without others being able to view their work.

The staging server should have a version control system in place to keep Web authors from overwriting pages that other developers are working on.

Test server Often, a site will require certain components to be installed and certain options to be configured. They only way to adequately ensure that all the required components, pages, and images are published with the site, is to publish the site to a test server. The test server also gives people who are performing quality assurance on the site to work independent of, and concurrently with, the developers.

Slide Objective To explain the production process.

Lead-in The site development process involves three servers.


Production server The production server is a server that hosts the site you intend users to see when they type in the URL for your Web site.

The general rule for the production server is that no one should make any modifications to the content in it. Any change in content should take place on the staging server, be verified on the test server, and then be copied to the production server.

Generally only one person or a group has access permissions to the production server. This person is usually the system administrator or a member of the administrative group. It is very important that only a few people have access to the production server. If too many people have access to your production server, you risk unintended or undesirable changes to the content of the site.


Publishing a Web Site Using FrontPage 2000

! Before publishing, find out if target server supports FrontPage Server Extensions (FPSE)

$ If FPSE is supported publish using HTTP, otherwise publish the site using FTP

! You can also publish a site to a file system location

Staging Server Production Server

IIS (FPSE)

Publish using H TTP

Before publishing your site, you need to know whether or not FrontPage server extensions (FPSE) are on the target Web server. FrontPage server extensions are a set of programs that support administering, authoring, and browsing a FrontPage extended Web site. For example, FPSE allows folders to be created on a Web server. If you rename a file through the FPSE, the FPSE will update all the pages that link to that file ensuring that the links are not broken.

If FrontPage server extensions are installed, you can publish using HTTP. If FrontPage server extensions are not installed, you need to publish through FTP. You can also publish your Web site to a file system location. Publishing to a file system location rather than copying ensures that all the files are saved in the correct structure.

Slide Objective To describe the ways of publishing a Web site.

Lead-in You can publish a Web site by using HTTP and FTP. You can also publish a Web site to a file system location.


Demonstration: Publishing a Web Site

! Create a simple Web site 1. Open FrontPage 2000. 2. On the File menu, point to New, and then click Web. 3. The New dialog appears, with the One Page Web option selected by default.

To specify the location for the new Web folder, type http://localhost/1912/Democode/Mod04/Sampweb in the Specify the location of the new Web drop-down list box, and then click OK to create a one page Web.

4. Add some text to the page, for example, type Microsoft in the page. 5. Select the text Microsoft that you typed, and then right-click the selected

word. 6. Click Hyperlink. 7. The Create Hyperlink dialog box appears. Type www.microsoft.com, and

click OK. 8. Save the site page as Default.htm.

Slide Objective To demonstrate the steps to publish a Web site.

Lead-in In this demonstration, you will publish a Web site.

Delivery Tip Have students work on their own to create the Web site. Show students a sample site by opening the file My_web_site.htm from the \Inetpub\wwwroot\1912\Democode\Mod04 folder.


! Publish a Web site 1. On the File menu, click Publish Web. The Publish Web dialog box

appears.

2. In the Specify the location to publish your Web to box, type the location of the Web server, where your Web site is to be published � for example, http://localhost/1912/Democode/Mod04/SampPubsite � and then click Publish. The Microsoft FrontPage dialog box appears with the message that the site has been successfully published.

3. In the Microsoft FrontPage dialog box, click the hyperlink Click here to view your published Web site.


Lab 4.3: Publishing a Web Site

Objectives After completing this lab, you will be able to publish a Web site to a file system location using Microsoft FrontPage 2000.

Prerequisites Before working on this lab, you must have created a basic Web page.

Scenario You are creating a Web site for your company to be launched on the company�s intranet. The tool that you have used in creating the Web site is FrontPage 2000. You want to publish the Web site to a folder on your local file system to view the site in Internet Explorer, and ensure that all the necessary files are saved and in the correct structure.

Starter and solution files There are no starter and solution files associated with this lab.



Lead-in In this lab, you will publish a Web site using FrontPage 2000.

Explain the lab objectives. To publish a Web site by using FrontPage 2000.


Exercise 1 Publishing a Web Site to a File System Location

In this exercise, you will create a simple Web site and publish it to a file system location using FrontPage 2000.

! Create a new Web Site 1. Open Microsoft FrontPage 2000. 2. From the File menu, point to New, and then click Web. The New dialog

box appears. 3. To specify the location for the new Web folder, type

http://localhost/1912/Mywebpages/Lab043web in the Specify the location of the new Web drop-down list box, and then click OK to create a one-page Web.

4. In the page, type the following text This is a sample site. 5. Save the Web page as Default.htm.

! Publish the Web site to a file system location 1. From the File menu, click Publish Web. The Publish Web dialog box

appears. 2. Click Options, and then click the Publish all pages, overwriting any

already on the destination radio button. 3. Specify the folder in which you want to publish the Web site by typing in

localhost/1912/Mywebpages/Lab043pubsite after the http:// in the Specify your location to publish your Web to field, and then click Publish. The Microsoft FrontPage dialog box appears.

4. Click the link Click here to view your published Web site. 5. The Web site opens in Internet Explorer.


Review

! 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

1. You want to send a small amount of information to a server using a form. The information is sensitive and needs to be sent in an encrypted format. How would you send the data? The data should be sent using the GET method.

2. You want to have a banner at the top of a page, and a navigation bar on the left side. You want these to remain static while the main content of the page changes. What would you use? Frames should be used to statically divide the page.

3. Which HTML tag would you use to create a radio button? The <INPUT> tag is used to create a radio button.

4. Which Web server hosts the final version of your Web site that is available for public access? The Production server hosts the final version of a Web site for public access.

Slide Objective To reinforce module objectives by reviewing key points.

Lead-in The review questions cover some of the key concepts taught in the module.


5. What is a test server? A test server is used to test that the required components, pages, and images are published with the site.

6. You are trying to publish your Web site, but you get the following error message: FrontPage Server Extensions do not appear to be installed on the Web server. What technology will you use to publish your Web site? The Web site will be published using FTP.

advanced html.pdf

Documents