Contents
Overview 1
Web Site Design Considerations 3
Creating a Web Page 5
Adding Images to a Web Page 29
Creating Tables 41
Formatting Tables 47
Nesting Tables 54
Lab 3: Creating Web Pages Using HTML 55
Review 60

Module 3: Basic HTML

Information in this document is subject to change without notice. The names of companies,
products, people, characters, and/or data mentioned herein are fictitious and are in no way intended
to represent any real individual, company, product, or event, unless otherwise noted. Complying
with all applicable copyright laws is the responsibility of the user. No part of this document may
be reproduced or transmitted in any form or by any means, electronic or mechanical, for any
purpose, without the express written permission of Microsoft Corporation. If, however, your only
means of access is electronic, permission to print one copy is hereby granted.

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

 2000 Microsoft Corporation. All rights reserved.

Microsoft, ActiveX, BackOffice, FrontPage, 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

Module 3: Basic HTML iii


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
iv Module 3: Basic HTML



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 CD-
ROM folder. Explain the table tags in HTML by examining the source code
of the table. Then, explain how to format tables with formatting tags.
Finally, demonstrate how to create a table using FrontPage 2000.



Module 3: Basic HTML 1


#
##
#

Overview
!
Web Site Design Considerations
!
Creating a Web Page
!
Adding Images to a Web Page
!
Creating Tables
!
Formatting Tables
!
Lab: Creating Web Pages Using HTML
!
Review


While browsing the Web, you must have come across sites that contain
interactive content. You can create a highly interactive Web site for your users
but, before you do so, you must begin by learning how to create basic Web
pages. Hypertext Markup Language (HTML) is the language used to create
Web pages. HTML uses tags to tell the Web browser how to present
information on a Web page. For example, there are HTML tags for headings,

graphics, paragraphs, and hyperlinks. Apart from HTML, there are other tools
that allow you to create Web pages. Microsoft
®
FrontPage
®
2000 is one such
tool. When you use FrontPage to create Web pages, it automatically inserts the
appropriate HTML tags into the document you have created. However, you can
also create HTML files with any text editor, such as Notepad, or edit the HTML
tags directly in the HTML window in FrontPage.
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.
Slide Objective
To provide an overview of
the module topics and
objectives.
Lead-in
In this module, you will learn
to create Web pages by
using HTML and
FrontPage2000.
2 Module 3: Basic HTML




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
Module 3: Basic HTML 3


Web Site Design Considerations

!
Minimize download time
!
Keep information accessible
!
Provide alternative media
!
Minimize the use of sound
!
Coordinate colors
!
Text considerations
!
Consistency
!
Legal issues


Have you ever been frustrated while browsing some Web pages because they
take a long time to download or their content is poorly organized? These are
only some of the issues that you should keep in mind when you design Web
pages.
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

!
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.
4 Module 3: Basic HTML



!
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


Module 3: Basic HTML 5


#
##
#

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.
Slide Objective
To present an overview of
the topics covered in this
section.
Lead-in
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.
6 Module 3: Basic HTML


Basic HTML Tags
!

HTML Tag
$
<HTML> </HTML>
$
Contains a head and a body section
!
HEAD Tag
$
<HEAD> </HEAD>
$
Requires the <Title> </Title> tag
!
BODY Tag
$
<BODY> </BODY>
$
Holds the entire content of the Web page
(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.
!
<HTML> </HTML>
The <HTML> </HTML> tags indicates that the document is an HTML
document. All HTML documents are enclosed within the <HTML> and
</HTML> tags and contain a head and a body section.
!
<HEAD> </HEAD>
The <HEAD> </HEAD> tags defines the head section. This section

contains the <TITLE> </TITLE> tags. The <TITLE> </TITLE> tags
specify the title to be displayed in the title bar of the browser when a user
views the Web page. The head section can also contain metadata about a
document. Metadata can include keywords pertaining to the document. For
example, metadata about a document might be the author of that document.
Information in the head section is not displayed to the user.
!
<BODY> </BODY>
All the content of a Web page is held between the <BODY> </BODY>tags.

Slide Objective
To introduce the basic
HTML tags.
Lead-in
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.
Module 3: Basic HTML 7


HTML Tag Syntax
!
HTML Tags
$

Begin with a (<); end with a (>)
$
Most tags are paired into beginning and ending tags; for
example, <H1>…</H1>
<HTML>
<HEAD><TITLE>My site </TITLE></HEAD>
<BODY>
<H1>WELCOME TO MY SITE</H1>
</BODY>
</HTML>
<HTML>
<HEAD><TITLE>My site </TITLE></HEAD>
<BODY>
<H1>WELCOME TO MY SITE</H1>
</BODY>
</HTML>


HTML tags begin with a left angle bracket (<) followed by the name of the tag
and end with a right angle bracket (>). Most tags are paired into a beginning tag
and an ending tag, such as <HTML> and </HTML>. The ending tag looks just
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.
Feature Example tag

Heading <H1>. </H1>
Line break <BR>
List item <LI>. </LI>

Emphasized text <EM>. </EM>
Image <IMG>
Preformatted text <PRE>. </PRE>
Bold text <B> </B>
Paragraph <P>


The line break, image, and horizontal rule do not have an end tag. The
paragraph tag can have an end tag, but it is often omitted.


Slide Objective
To identify the HTML tag
syntax.
Lead-in
Each HTML tag follows a
syntax.
Note
8 Module 3: Basic HTML


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:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

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.
Module 3: Basic HTML 9




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:
<HTML>
<HEAD>
<TITLE> My Web Page </TITLE>
</HEAD>
<BODY>
This is my Web site.
</BODY>
</HTML>

4. Save your document as newsite.htm under the folder
\InetPub\WWWRoot\1912\Practices\Mod03.

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

10 Module 3: Basic HTML


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.


Slide Objective
To introduce the practice.
Lead-in
In this practice, you will use
FrontPage 2000 to create a

Web page.
Delivery Tip
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
Module 3: Basic HTML 11


!
View the source code
1. Right-click an area in the browser window that does not contain an image.
2. Click View Source.

12 Module 3: Basic HTML


Content Tags
!
Headings
$
Have levels from one to six, one being the largest
$
(View Headings.htm from Sampapps)
…
<BODY>

We are learning the Heading tags in HTML.
<H1>HEADING 1</H1>
<H2>HEADING 2</H2>
<H3>HEADING 3</H3>
<H4>HEADING 4</H4>
<H5>HEADING 5</H5>
<H6>HEADING 6</H6>
</BODY>
…
…
<BODY>
We are learning the Heading tags in HTML.
<H1>HEADING 1</H1>
<H2>HEADING 2</H2>
<H3>HEADING 3</H3>
<H4>HEADING 4</H4>
<H5>HEADING 5</H5>
<H6>HEADING 6</H6>
</BODY>
…


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.
<HTML>
<HEAD>
<TITLE>USING HEADINGS</TITLE>
</HEAD>
<BODY>
We are learning the Heading tags in HTML.
<H1>HEADING 1</H1>
<H2>HEADING 2</H2>
<H3>HEADING 3</H3>
<H4>HEADING 4</H4>
<H5>HEADING 5</H5>
<H6>HEADING 6</H6>
</BODY>
</HTML>

Slide Objective
To identify the various
content tags.
Lead-in
HTML provides different
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.
Delivery Tip
Open the file Headings.htm
from
\Inetpub\wwwroot\1912\Sam
papps\Ch03 in Notepad to
show the solution code, and
explain the code to the
students. Then display the
result in Internet Explorer.
Module 3: Basic HTML 13


Content Tags (continued)
!
Paragraph tags:
$
Indicate where a new paragraph begins
( View Paragraphs.htm from Sampapps)
<HTML>
<HEAD>
<TITLE>USING PARAGRAPHS</TITLE>
</HEAD>
<BODY>

We are learning about the paragraph tags in
HTML.
<P>This is a new paragraph.</P>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>USING PARAGRAPHS</TITLE>
</HEAD>
<BODY>
We are learning about the paragraph tags in
HTML.
<P>This is a new paragraph.</P>
</BODY>
</HTML>


In an HTML file, you use the paragraph tags to instruct the browser that the
following block of text should be displayed as a paragraph to the user.
Paragraphs
A paragraph tag indicates where a new paragraph begins. You begin a
paragraph with the opening paragraph tag <P> and close the paragraph with the
closing paragraph tag </P>. Word wrapping is determined by the size of the
browser window. Here is a sample HTML code that uses the paragraph tag:
<HTML>
<HEAD>
<TITLE>USING PARAGRAPHS</TITLE>
</HEAD>
<BODY>
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
in browsers.

Slide Objective
To explain the use of
paragraph tags.
Lead-in
Using the paragraph tags,
you can indicate the location
of the beginning of a new
paragraph.
Delivery Tip
Open the file
Paragraphs.htm from
\Inetpub\wwwroot\1912\Sam
papps\Ch03 in Notepad,
and explain the code to the
students. Then display the
result in Internet Explorer.
Note
14 Module 3: Basic HTML



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.
Module 3: Basic HTML 15


Content Tags (continued)
$
Ordered list
(View OrdList.htm from Sampapps)
$
Unordered list
(View UnOrdList.htm from Sampapps)
$
Definition list
(View DefList.htm from Sampapps)
<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>
</UL>
<DL>
<DT> Word 1
<DD> This is definition of word 1.
<DT> Word 2
<DD> This is definition of word 2.
</DL>
<DL>
<DT> Word 1
<DD> This is definition of word 1.
<DT> Word 2
<DD> This is definition of word 2.
</DL>


While browsing the Web, you must have come across pages that contain an
ordered or an unordered list of items. You can achieve the same effect in your
Web pages by creating lists.
Lists
HTML supports several elements for creating different types of lists. There are
three kinds of list tags in HTML:
!

Ordered lists
!
Unordered lists
!
Definition lists

Ordered lists
You use the <OL> </OL> tags to define an ordered list. The items in an ordered
list are numbered. The following is an example of an ordered list:
<HTML>
<HEAD>
<TITLE>USING ORDERED LISTS</TITLE>
</HEAD>
<BODY>
We are learning Ordered Lists in HTML
<OL>
<LI>This is a list item.</LI>
<LI>This is a second list item.</LI>
<LI>And this is a third list item.</LI>
</OL>
</BODY>
</HTML>

Slide Objective
To explain the use of lists.
Lead-in
Lists enable you to present
information in a Web page
in a more logical and
structured manner.

Delivery Tip
Open the file OrdList.htm
from
\Inetpub\wwwroot\1912\Sam
papps\Ch03 in Notepad,
and explain the code to the
students. Then display the
result in Internet Explorer.
16 Module 3: Basic HTML


Unordered lists
You use the <UL> </UL> tags to define an unordered list. The items in an
unordered list are bulleted. The following is an example of an unordered list:
<HTML>
<HEAD>
<TITLE>USING UNORDERED LISTS</TITLE>
</HEAD>
<BODY>
We are learning Unordered Lists in HTML
<UL>
<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:
<UL TYPE=shape>
where shape could be one of the following:
!
Disc
!
Square
!
Circle

The syntax for the TYPE attribute in an ordered list is:
<OL TYPE=x>
where x is one of the following.
TYPE Description Example

1 Arabic numbers (default) 1, 2, 3, 4, ...
A Alphanumeric, lowercase a, b, c, d, ...
A Alphanumeric, uppercase A, B, C, D, ...
I Roman numbers,
lowercase
i, ii, iii, iv, ...
I Roman numbers,
uppercase
I, II, III, IV, ...


Not all browsers support the TYPE attribute.

Delivery Tip
Open the file

UnOrdList.htm from
\Inetpub\wwwroot\1912\Sam
papps\Ch03 in Notepad,
and explain the code to the
students. Then display the
result in Internet Explorer.
Note
Module 3: Basic HTML 17



Definition lists
A definition list is similar to a definition in a dictionary. You can use HTML
tags to create definition lists. In a definition list, each list item has two parts, a
<DT> element and a <DD> element. The <DT> element represents the term
you are defining, and the <DD> tag represents its definition. The <DT> tag
specifies the word and the <DD> tag specifies the definition of the word.
Consider the following example of a definition list:
<HTML>
<HEAD>
<TITLE>USING DEFINITION LISTS</TITLE>
</HEAD>
<BODY>
We are learning Definition Lists in HTML
<DL>
<DT> Word 1
<DD> This is definition of word 1.
<DT> Word 2
<DD> This is definition of word 2.
</DL>

</Body>
</HTML>

Delivery Tip
Open the file DefList.htm
from
\Inetpub\wwwroot\1912\Sam
papps\Ch03, and explain
the code to the students.
Then display the result in
Internet Explorer.
18 Module 3: Basic HTML


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.
Module 3: Basic HTML 19


Your complete code should look something like the following:
<HTML>
<HEAD>
<TITLE>This is a page with lists and paragraphs.
</TITLE>
</HEAD>
<BODY>
<H1>My Web Site</H1>
<OL>
<LI>This is the first link
<LI>This is the second link
<LI>This is the third link
</OL>
</BODY>
</HTML>


!
View the document in Internet Explorer 5
• Start Internet Explorer 5, and open list.htm.

20 Module 3: Basic HTML


HTML Tag Attributes
!
FONT tag attributes
$
Color
$
Size
<font color="Yellow" face="Arial">Hey I'm Yellow
Text!</font><br>
<font color="Yellow" face="Arial">Hey I'm Yellow
Text!</font><br>
<font size=+2 color="white">Change My size
</font><br>
<font size=+2 color="white">Change My size
</font><br>


The size and color of text in an HTML document can be controlled by using the
FONT tag. You set the color of the text for the entire page in the body tag, but
you can enclose individual words, sentences, or even sections of your page in
between FONT tags to make them different.
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.
Hexadecimal Code Color

#000000 Black
#FFFFFF White
#FF0000 Red
#00FF00 Green
#0000FF Blue
#00FFFF Cyan
#A020F0 Purple
#FFA500 Yellow
#FFFF00 Orange
#A52A2A Brown

Slide Objective
To explain HTML tag
attributes.
Lead-in
You can further enhance the
appearance of a Web page
by setting the attributes of
tags.
Module 3: Basic HTML 21



Size
You use the SIZE attribute, like the font color attribute, by inserting it into

the
opening font tag.
<FONT SIZE=5> YOUR TEXT</Font>