Tài liệu Module 3: Basic HTML pdf

It explains how to create Web pages with images, image maps, and hyperlinks by using HTML and FrontPage 2000.. Create a Web page by using basic HTML tags and FrontPage 2000!. Add images

Contents

Overview 1

Web Site Design Considerations 3

to represent any real individual, company, product, or event, unless otherwise noted Complying with all applicable copyright laws is the responsibility of the user No part of this document may

be reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose, without the express written permission of Microsoft Corporation If, however, your only means of access is electronic, permission to print one copy is hereby granted

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

 2000 Microsoft Corporation All rights reserved

Microsoft, ActiveX, BackOffice, FrontPage, Internet Explorer, MS-DOS, Personal Web Server, Notepad, Visual Basic, 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

Instructor Notes

This module provides students with an overview of HTML and Microsoft FrontPage 2000 It explains how to create Web pages with images, image maps, and hyperlinks by using HTML and FrontPage 2000 It also explains how to

create tables by using HTML and FrontPage 2000

After completing this module, students will be able to:

! Identifying the considerations for designing the user interface for a Web site

! Create a Web page by using basic HTML tags and FrontPage 2000

! Add images to a Web page by using HTML and FrontPage 2000

! Identify the various imagemap tags

! Identify the issues related to image design

! Create tables by using HTML and FrontPage 2000

! Format table using html format tags

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

! Module 3, “Basic HTML”

! Lab 3, “Creating Web Pages Using HTML”

Preparation Tasks

To prepare for this module, you should:

! Read all of the materials for this module

! Complete the lab

Presentation:

165 Minutes

Lab:

30 Minutes

Module Strategy

Use the following strategy to present this module:

! Web Page Design Considerations This topic covers the guidelines for designing Web pages Explain each guideline and why it needs to be considered while designing a Web page

! Creating a Web Page This topic explains how to create a Web page First, introduce the basic HTML tags Then, explain the tag syntax Explain the content tags to the students Then explain the hyperlink tag and show students an example of a hyperlink by opening the htm file, Hyperlink.htm, from the Student CD-ROM Finally, demonstrate how to create a Web page using FrontPage

2000

! Adding Images to a Web Page Begin by explaining how to add an image to a Web page using HTML Then, introduce image maps and show students an example of an image map by opening the htm file, Imagemap.htm, from the Student CD-ROM Next, explain how to create image maps Explain the points to be kept in mind while adding an image to a Web page Finally, demonstrate how to add an image to a Web page using FrontPage 2000

! Creating Tables Begin by explaining the need for tables and then show students an example

of a table by opening the htm file, Airlinetable.htm, from the Student ROM folder Explain the table tags in HTML by examining the source code

CD-of the table Then, explain how to format tables with formatting tags Finally, demonstrate how to create a table using FrontPage 2000

# Overview

! Web Site Design Considerations

! Creating a Web Page

! Adding Images to a Web Page

If you create simple Web pages that contain static text and graphics, understanding HTML syntax is not essential FrontPage manages the HTML code behind the Web page you create You can create Web pages that take advantage of advanced features, such as Microsoft Visual Basic® Scripting Edition (VBScript) or Microsoft ActiveX® controls, by using a text editor and then entering HTML tags manually, or by using FrontPage 2000

After completing this module, you will be able to:

! Identify the considerations for designing the user interface for a Web site

! Create a Web page by using basic HTML tags and FrontPage 2000

! Add images to a Web page using HTML and FrontPage 2000

! Identify the various image map tags

! Identify the issues related to image design

! Create tables using HTML and FrontPage 2000

! Identify features for formatting tables

In this module, you will learn

to create Web pages by

using HTML and

FrontPage2000

All the sample applications for this module are stored under the

\Inetpub\WWWRoot\1912\Sampapps folder The files for the sample Web site

“Exotic Excursions” are stored under the \Inetpub\WWWRoot\1912\Sampsite folder

Note

Web Site Design Considerations

! Minimize download time

! Keep information accessible

! Provide alternative media

! Minimize the use of sound

HTML is not only a page description and formatting language; it is also used to display information and graphics and to allow for user interaction There are certain considerations that should be kept in mind when designing the user interface for a Web site

! Minimize download time Keep the design of your site simple Minimize the use of complex graphics that take a long time to download

! Keep information accessible The main information on a Web site should be within two hyperlinks of the home page Users often get confused and frustrated when they have to follow more than two hyperlinks to reach the information they want

! Provide alternative media Some browsers do not support all the functionality provided by a Web site, such as graphics, video, and sound files You should provide an alternative method for delivering similar information, such as a graphic instead of a video file, or text in place of a graphic You should also keep people with disabilities in mind when creating a Web site

You can find the complete Web Content Accessability Guidelines at http://www.w3.org/TR/WAI-WEBCONTENT

! Minimize the use of sound Transferring sound across the Internet requires high bandwidth This means that users with low-bandwidth connections will experience a very long download time for Web sites that include sound files

Slide Objective

To identify the issues

related to designing the user

interface for a Web site

Lead-in

When designing the user

interface for a Web site, you

should consider certain

issues

! Coordinate colors Use color to convey information or to draw attention to where it is actually needed If you use a background image, make sure that it does not

overpower the information on the Web site Some background images make text unreadable The standard Web interface displays hyperlinks to other pages in colors that stand out from the rest of the text Additionally, a link that has already been visited appears in a different color Not all browsers can display all colors correctly If you are developing a Web site for the general public, you should only use the 216 Web-safe colors

! Text considerations The text should be big enough to read Background colors or images should not make the text more difficult to read

! Consistency Consistency is paramount in creating a good Web site The structure and metaphors used in a Web site should remain consistent throughout

If you are designing a Web site for an intranet, you should focus on easy access and critical information, such as forms and corporate databases On the other hand, when designing an Internet site, you should focus on issues such as corporate branding and marketing messages In both cases, you should strive to create a Web site that provides easy navigation, making it simple for users to find what they are looking for

! Legal Issues

As a general rule, the contents of a Web site can be freely copied by users However, you can copyright information on your site This will notify users that they are not free to copy information on your site without your

permission

For more information about good and bad Web design, go to http://www.websitesthatsuck.com

# Creating a Web Page

! Basic HTML Tags

! HTML Tag Syntax

! Practice: Creating a Web Page Using Notepad

! Practice: Creating a Web Page Using FrontPage 2000

! Content Tags

! Practice: Creating Headings, Paragraphs, and Lists

! HTML Tag Attributes

! Hyperlink Tags

! Practice: Adding Hyperlinks

(View default.htm from Sampsite)

Web pages are created with HTML An HTML document is composed of two basic elements: tags and content The tags provide information that the browser needs to display the content

To create a Web page, you

require a markup language

Delivery Tip

Open the file default.htm

from the folder

\\Inetpub\wwwroot\1912\Sa

mpsite Tell students about

the main features of the

sample site (contains Web

pages, tables, hyperlinks,

and images) and that they

should be able to create a

similar Web page at the end

of the module

(View mysite.htm from Sampapps)

There are some basic HTML tags that are common to all Web pages These tags are the building blocks of an HTML document

Behind every HTML Web

page is a document that is

formatted with HTML tags

Delivery Tip

Open mysite.htm from

\Inetpub\WWWRoot\1912\S

ampapps\Ch03 to show

students how HTML tags

are used in a code

HTML Tag Syntax

! HTML Tags

like the beginning tag except that a forward slash (/) precedes the tag name

within the brackets You typically place the tag content between the beginning and ending tags

The following table shows commonly used HTML tags

Practice: Creating a Web Page Using Notepad

In this practice, you will design and create your own Web page using Notepad Then you will view the file in Internet Explorer 5.0 to see the results

! Create a Web page by using Notepad

1 Open Notepad and add the following HTML tags:

a Opening and closing HTML tags

b Opening and closing HEAD tags

c Opening and closing TITLE tags

d Opening and closing BODY tags Your code should resemble the following:

2 Between the <TITLE> </TITLE> tags, specify the title for the Web page,

such as My Web Page

Slide Objective

To introduce the practice

Lead-in

In this practice, you will

design and create a Web

page of your own

Delivery Tip

Have students work on their

own to create a home page

Discuss what headings and

text they would want to be

displayed, and what tags

they would use for doing so

3 Between the <BODY> </BODY> tags, specify the text to be displayed on

the Web page, such as This is my Web site

Your code should resemble the following:

! View the document in Internet Explorer 5

• Start Internet Explorer 5, and go to http://localhost/1912/practices/mod03/newsite.htm to view the file

Practice: Creating a Web Page Using FrontPage 2000

In this exercise, you will create a Web page using FrontPage 2000 You will then enter text and preview the Web page

! Invoke FrontPage 2000

• On the Start menu, point to Programs, and click Microsoft FrontPage

! Create a new Web page

1 When FrontPage opens, a new page opens by default Add the text This is

my Web Page to the page

2 Save the file as MyNewpage.htm under the

Inetpub\wwwroot\1912\practices\mod03 folder

a On the File menu, click Save As

b Browse to the Inetpub\wwwroot\1912\practices\mod03 folder

c Specify the name as MyNewpage.htm

d On the Save As dialog box, click OK

! View the Web page

• View the page in the Internet Explorer 5.0 by clicking the Preview in

Browser button on the toolbar

When viewed in a browser, Web sites don’t always appear as they are designed You need to continually preview your pages in a browser to ensure that they appear correctly

Before students start the

practice, demonstrate the

procedure Ask students to

follow you and create Web

pages of their own with the

specifications provided in

the content page

Note

! View the source code

1 Right-click an area in the browser window that does not contain an image

2 Click View Source

After creating the basic structure of an HTML document, you can add content

to the body of the document While there are many tags for altering the appearance of content, the basic elements are headings, paragraphs, and lists

Headings

Headings are basically used to mark the beginning of a new paragraph

Headings range in size from one to six, one being the largest A level one heading, for example, is marked by the <H1> and </H1> tags Headings are displayed in larger and bolder fonts than normal body text The syntax of the heading tag is:

<Hx>Text of heading</Hx>

where x is a number between one and six that specifies the size of the heading

The following is an example that uses the <Hx> </Hx> tag

tags to display headings,

paragraph breaks, and lists

Delivery Tip

There are three slides in the

presentation for this section

Use the first slide to give an

introduction to content tags

Use the second slide to

explain the <Hx> and </Hx>

tags Use the subsequent

slides to explain

paragraphs, lists, and

definition lists, respectively

show the solution code, and

explain the code to the

students Then display the

result in Internet Explorer

Content Tags (continued)

! Paragraph tags:

( View Paragraphs.htm from Sampapps)

We are learning about the paragraph tags in HTML

<P>This is a new paragraph.</P>

</BODY>

</HTML>

You can also control line length and line breaks by using the <BR> tag, which

indicates a line break

The <P>and <BR> tags do not require end tags to be displayed correctly

Using the paragraph tags,

you can indicate the location

of the beginning of a new

and explain the code to the

students Then display the

result in Internet Explorer

Note

It is important to note that a browser ignores white spaces Therefore, the following three code segments:

<P>Hello There</P>

<P>Hello There</P>

and

<P>Hello There<P>

will produce the same output

Content Tags (continued)

<OL>

<LI>This is a list item.</LI>

<LI>This is a second list item.</LI>

</OL>

<OL>

<LI>This is a list item.</LI>

<LI>This is a second list item.</LI>

</OL>

<UL>

<LI>This is a list item.</LI>

<LI>This is a second list item.</LI>

</UL>

<UL>

<LI>This is a list item.</LI>

<LI>This is a second list item.</LI>

<LI>This is a list item.</LI>

<LI>This is a second list item.</LI>

<LI>And this is a third list item.</LI>

Lists enable you to present

information in a Web page

in a more logical and

and explain the code to the

students Then display the

result in Internet Explorer

<LI>This is a list item.</LI>

<LI>This is a second list item.</LI>

<LI>And this is a third list item.</LI>

</UL>

</BODY>

</HTML>

You can use the TYPE attribute to control the bullet used in an unordered list

or the numbering system used in an ordered list The syntax for the TYPE

attribute in an unordered list is:

where x is one of the following

I, II, III, IV,

Not all browsers support the TYPE attribute

and explain the code to the

students Then display the

result in Internet Explorer

Note

<DT> Word 2 <DD> This is definition of word 2

papps\Ch03, and explain

the code to the students

Then display the result in

Internet Explorer

Practice: Creating Headings, Paragraphs, and Lists

In this exercise, you will create a heading, a paragraph, and an ordered list for a Web page in Notepad Save the file as list.htm, and view it in Internet Explorer 5.0

! Create a Web page by using Notepad

1 Open Notepad, and add an opening <HTML> tag

2 After the opening <HTML> tag, add a <HEAD> tag, then add a <TITLE>

tag under which you can specify any title for the page as This is a page

with lists and paragraphs

3 Close the <HEAD> and <TITLE> tags, and add a <BODY> tag Under the

<BODY> tag, add a level 1 heading My Web Site Create three list items:

This is the first link, This is the second link, and This is the third link

4 Close the <BODY> and the <HTML> tags

5 Save the file as list.htm under the folder

\InetPub\WWWRoot\1912\Practices\Mod03

Slide Objective

To introduce the practice

Lead-in

In this practice, you will

create a Web page that

contains a heading, a

paragraph, and a list by

using Notepad

Your complete code should look something like the following:

</BODY>

</HTML>

! View the document in Internet Explorer 5

• Start Internet Explorer 5, and open list.htm

Color You can use the COLOR attribute to set the color of the font used on a Web

page

<FONT COLOR=RED> YOUR TEXT</FONT>

You can also use hexadecimal color names Hexadecimal color names are six digit codes used to specify how much of the colors RED, BLUE, and GREEN are needed to create the desired color

The following table lists hexadecimal codes for some common colors

You can further enhance the

appearance of a Web page

by setting the attributes of

tags

Size You use the SIZE attribute, like the font color attribute, by inserting it intothe opening font tag

<FONT SIZE=5> YOUR TEXT</Font>

Hyperlink Tags

! Hyperlinks

location on the same page

( View Hyperlink.htm from Sampapps)

<A HREF="Destination_Address">text or graphic</A>

A hyperlink is a connection from a Web page to another page or a different location on the same page To add a hyperlink to a Web page, you need the URL of the Web site to which you want to link

The anchor <A> tag is used for setting a hyperlink in a Web page The syntax for a hyperlink is:

<A HREF="Destination_URL">text or graphic</A>

where Destination_URL is the URL of the Web site you want the hyperlink to connect to, and text or graphic is what the user will click to view the specified

Web site

You can create a hyperlink by using FrontPage 2000

! Create a hyperlink by using FrontPage 2000

1 On the Insert menu, click Hyperlink

2 The Create Hyperlink dialog box appears Specify the URL for the hyperlink, and then click OK

You can also open a hyperlink in a new browser window while browsing the Internet using Internet Explorer

! Open a hyperlink in a new browser window

1 Right-click the hyperlink

2 Click Open in New Window to open the hyperlink in a new browser

window

Slide Objective

To explain the hyperlink tag

Lead-in

A hyperlink can be added to

a Web page by using a

hyperlink tag

Delivery Tip

There are three slides in the

presentation for this section

After introducing hyperlink

tags, open the file

Hyperlink.htm from the

\Inetpub\wwwroot\1912\Sam

papps\Ch03 to see an

example of a hyperlink tag

Also use the first slide to

explain the types of

hyperlinks Use the

subsequent slides to explain

relative, absolute links, and

the bookmark tag

Delivery Tip

Demonstrate the procedure

for creating a hyperlink in a

Web page by using

FrontPage 2000

Types of Hyperlinks

The following table lists the types of hyperlinks you can create and gives examples of the HTML syntax

Hyperlink type Description Syntax

page

http://xxx/xxx/xxx/dir/file.htm

Non-HTML document

A hyperlink to another type

of document, such as a Microsoft Word document,

a Microsoft Excel workbook, or an image

file:\\path\dir\filename

defined within a Web page

Hyperlink Tags (continued)

! Relative links

Web page containing the link

! Absolute links

<A HREF="MyDocument.htm">Link text</A>

<A HREF=" /myfolder/myFile.htm">Link text</A>

<A HREF="/Directory/myFile.htm">Link text</A>

<A HREF="http://Server/Directory/File.htm">Link text</A>

<A HREF="http://Server/Directory/File.htm">Link text</A>

There are two types of hyperlinks that you can define in a Web page:

For example, a relative link to a document in the same folder as the current Web page would be MyDocument.htm

<A HREF="MyDocument.htm">Link text</A>

You can also specify a file in another folder on the same server by specifying the relative path from the current document to the linked document as shown in the following example:

<A HREF=" /myfolder/myFile.htm">Link text</A>

In addition, you can specify a file in another folder on the same server by specifying the path from the root directory of the current page to the linked document

<A HREF="/Directory/myFile.htm">Link text</A>

Absolute links

An absolute link is used to link documents that are not part of the same site An absolute link provides a complete address for a hyperlink For example, an absolute link to a document MyDocument.htm is:

"C:\My Web Documents\MyDocument.htm"

Slide Objective

To explain relative and

absolute links

Lead-in

There are two types of

hyperlinks that you can

define in a Web page

You can use an absolute link to define a link to a Web page on another Internet server

<A HREF="http://Server/Directory/File.htm">Link text</A>

Hyperlinks Tags (continued)

To define a bookmark, you use the <A> tag and set the NAME attribute

The following example defines a bookmark named bookmark1:

<A Name="bookmark1">

To define a hyperlink to a bookmark, use the <A> tag and specify the page to link followed by a pound sign (#) and the bookmark name

The following example creates a hyperlink to the bookmark named bookmark1

in the page MyDoc.htm

<A HREF="MyDoc.htm#bookmark1">Link text</A>

location in a Web page that

can be a target for a

hyperlink

Practice: Adding Hyperlinks

In this exercise, you will add a hyperlink to a Web page using HTML

! Create a structure for the Web page using Notepad

1 Open Notepad and add the HTML, HEAD, and BODY tags Title the page

Home Page Your code should look like the following:

<HTML>

<HEAD>

<TITLE>Home Page</TITLE>

</HEAD <BODY>

</BODY>

</HTML>

! Add hyperlinks

1 Within the <BODY> </BODY> tags, insert the following:

<A HREF = "mysite.htm"> This is the first link </A>

2 Add another hyperlink to the Microsoft home page You could also add a paragraph tag to ensure that the link appears on a new line Insert the following line of code:

<P> <A HREF = "http://www.microsoft.com"> Microsoft web site </A></P>

Slide Objective

To introduce the practice

Lead-in

In this practice, you will add

a hyperlink to a Web page

by using HTML

Your complete code should look like the following:

<HTML>

<HEAD>

<TITLE>Home Page</TITLE>

</HEAD <BODY>

<A HREF = "mysite.htm"> This is the first link </A>

<P> <A HREF = "http://www.microsoft.com"> Microsoft web site </A></P>

</BODY>

</HTML>

! View the file

• Save the file as LinksPage.htm under

\Inetpub\WWWRoot\1912\Practices\Mod03, and open it in Internet Explorer 5