Module 4: Advanced HTML

Creating Forms Using FrontPage 2000 Demonstrate how to create a form with FrontPage 2000.. Creating links that load in a different frame When you create a hyperlink, you can specify the

Trang 1

Contents

Overview 1

Lab 4.1: Creating Frames Using HTML 11

Creating Frames Using FrontPage 2000 20

Creating Forms Using FrontPage 2000 46

Lab 4.2: Creating a Form Using FrontPage

2000 49

Practice: Creating Style Sheets Using HTML 64

Demonstration: Publishing a Web Site 75

Review 79

Module 4: Advanced HTML

Trang 2

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

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

Trang 3

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

Trang 4

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

Trang 5

# Overview

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

In this module, you will learn

how to create Web pages

that use frames, forms, and

style sheets

Note

Trang 6

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

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

Trang 7

What Are Frames?

regions

URLs

(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

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

Trang 8

Using Frames: Guidelines and Drawbacks

the page to remain static, while the other area changes

(View Default.htm from Sampsite)

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

psite folder

Trang 9

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

Trang 10

The <FRAMESET> Tag

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:

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

Trang 11

! 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

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

papps\Ch04 folder, and

explain the source code to

the students Then show the

results of the source code in

Internet Explorer

Note

Trang 12

The <FRAME> Tag

specify the target frame for hyperlinks

(View TOC.htm from Sampsite)

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

the frame Omitting this parameter creates a blank frame

NAME Provides a target name for

the frame

MARGINWIDTH Controls the margin width

for the frame in pixels

MARGINHEIGHT Controls the margin height

for the frame in pixels

FRAMEBORDER Provides the option to

display or not to display a border for a frame

SCROLLING Creates a scrolling frame

Values are Yes, No, or Auto

NORESIZE Prevents the user from

resizing the frame

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

Trang 13

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>

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:

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

<P><A HREF="SpecialPackages.htm">Special Packages</A>

<P><A HREF="Infodesk.htm">Information Desk</A>

</BODY>

Note

Trang 14

The <NOFRAMES> Tag

<NOFRAMES> tag to supply alternate HTML

The following code demonstrates the use of the <NOFRAMES> tag:

<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

alternate solution, you use

the <NOFRAMES> tag

Trang 15

Lab 4.1: Creating Frames Using HTML

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

Trang 16

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

Trang 17

4 Save the document as Frameset.htm in the folder

<FRAME NAME="contents" SRC="Tableofcontents.htm">

<FRAME NAME="main" SRC="Main.htm">

Trang 18

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

Trang 19

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

Trang 20

3 Save the document as Tableofcontents.htm in the folder

</P>

</BODY>

</HTML>

Trang 21

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

<LI>Refrigerator </UL>

Trang 22

4 Save the document as Homeappliances.htm in the folder

<LI>Refrigerator </UL>

<P><A HREF="Main.htm">Home Page</A></P>

</BODY>

</HTML>

Trang 23

! 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

<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

Trang 24

# 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

Apart from Notepad, you

can also use FrontPage

2000 to create Web pages

with frames

Trang 25

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

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

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

Trang 26

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

In this practice, you will

create frames by using

FrontPage 2000

Trang 27

! 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

Trang 28

# Creating Forms Using HTML

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

In this section, you will look

at forms, and see the

Student CD-ROM after

describing the contents of

the section

Trang 29

What Are Forms?

on their needs

(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

psite folder

Trang 30

The <FORM> Tag

<!–- Form Contents: fields, buttons, etc >

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

…

</FORM>

<!–- Form Contents: fields, buttons, etc >

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

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

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

Trang 31

The <FORM> Tag (continued)

You can determine the behavior of a form by setting attributes for the form The

<FORM> tag supports the following attributes:

Slide Objective

To explain the attributes

supported by the <FORM>

tag

Lead-in

The <FORM> tag supports

the following attributes…

Trang 32

! 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

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

Trang 33

Overview of Form Controls

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

In the preceding examples, the:

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

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

Trang 34

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

<P>Address:<INPUT TYPE="TEXT" NAME="txtadd" ></P>

Delivery Tip

From Notepad, open

Form_fields.htm in the

papps\Ch04 folder, and

briefly explain the code to

the students Then show the

results to the students in the

browser

Trang 35

Using Text Controls

</TEXTAREA>

</TEXTAREA>

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

In the above example, SIZE specifies the length of the text box ROWS

specifies the number of rows the text area will span

Trang 36

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

Trang 37

Using Push Buttons

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:

A Reset button will clear the contents of the fields on the form The following example code defines a Reset button:

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

Trang 38

Following is an illustration of a form that uses push buttons

Trang 39

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

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>

Slide Objective

To introduce the practice

Lead-in

In this practice, you will

create a simple feedback

form by using HTML

Trang 40

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>

<P> Address: <INPUT TYPE="text" NAME="txtAddress" ></P> <P>E-mail: <INPUT TYPE="text" NAME="txtEmail" ></P> <P>Suggestion:

! View the document in Internet Explorer 5

• Open Feedbackform.htm in Internet Explorer

Tiêu đề	Module 4: Advanced HTML
Tác giả	Sangeeta Nair, Vijayalakshmi Narayanaswamy, Scott Swigart, Gary Gumbiner, Scott Serna
Người hướng dẫn	Steve Merrill
Trường học	NIIT
Chuyên ngành	Computer Science
Thể loại	Giáo trình
Năm xuất bản	2000
Thành phố	Hà Nội

Định dạng
Số trang	84
Dung lượng	1,12 MB