LEARNING OUTCOMES

1. List the basic steps involved in Web site

development.

10-1
 WWW

The World Wide Web:

it is a way of organizing information so
that any computer around the world
hat operates according to the rules can
access it.
The rules that specify how to
access and transfer files over the Web
are called HTTP, for hypertext transfer
protocol 10-2
 WWW

most important feature,

though, is its use of hypertext

An HTTP server is a computer that is

responsible for accepting HTTP requests
from clients, known as Web browsers, and
serving them Web pages, which are usually
HTML documents (which we describe
below). 10-3
 WWW

Figure T9.1 displays the relationship

between HTTP (or Web) server, Web
browser, and Web page.

10-4
 TECHNOLOGY PLUG-IN T10

CREATING WEB PAGES

USING HTML

Copyright 2015 McGraw-Hill Education. All rights reserved. No reproduction or distribution without the prior written consent of McGraw-Hill Education.
 LEARNING OUTCOMES

1. Describe the different kinds of Web sites

that you can build using Microsoft
FrontPage
2. Explain the different Microsoft FrontPage
views
3. Describe how to build a Web site using
Microsoft FrontPage
4. Describe how to build a Web page using
Microsoft FrontPage
10-6
 LEARNING OUTCOMES

5. Describe the method used to insert a graphic

into a Web page using Microsoft FrontPage
6. Describe the different types of hyperlinks you
can create using Microsoft FrontPage
7. Describe how to create a list and table in a
Web page using Microsoft FrontPage
8. Define the benefits of using Themes when
developing a Web page using Microsoft
FrontPage
10-7
 INTRODUCTION

Microsoft FrontPage is Web

authoring software
Web authoring software helps you
design and develop Web sites and
pages that you publish on the Web

10-8
 INTRODUCTION

Using FrontPage, you can create Web

pages, complete with formatted text and
graphics, tables, buttons, animations, and
sound.
You can add frames, borders, and
hyperlinks to connect the pages into a
Web site, or connect the pages to other
Web sites
10-9
 INTRODUCTION

Hypertext markup language (HTML) is the

language you use to create a Web page
HTML allows you to specify the content of
your Web site and format the content such
as adding bold, underline, and numbered
lists
FrontPage generates the HTML tags in
the background
10-10
INTRODUCTION

10-11
 WEB SITES, WEB PAGES, & HTML

A Web site is a specific location on the

Web where you visit, gather information,
and perhaps even order products
A Web page is a specific portion of a Web
site that deals with a certain topic
HTML is the language you use to create a
Web site
10-12
WEB SITES, WEB PAGES, & HTML

10-13
 FrontPage Builds Web Sites Big and
Small
You can use FrontPage to build many
different kinds of Web sites:
Personal Web site
Small business Web site
Corporate Web site
Corporate intranet

10-14
 NAVIGATION IN FRONTPAGE

With FrontPage, you can quickly create

Web pages with all the familiarity and
ease of use found in other Microsoft Office
applications
FrontPage's menu structure, toolbar
icons, dialog boxes, and working
conventions strongly resemble these other
applications
10-15
 Understanding the Interface

The Menu Bar

By default, FrontPage displays personalized
menus

10-16
 Understanding the Interface

The Standard Toolbar

To display or hide a particular toolbar:
Choose Toolbars from the View menu, and select
or deselect the appropriate toolbar.
Or right mouse click a toolbar, and choose the
toolbar you want from the shortcut menu

10-17
 FrontPage Views

Like other software, FrontPage has a

main menu and toolbars along the top of
the screen for giving commands
Each view presents a different type of
information about the Web site you are
working on and enables you to work with
the site in a different way

10-18
 Design Page View

To switch to this view from any other view,

click on the Design button at the bottom-
left corner of the working area
Design Page view is where you actually
build your Web pages

10-19
 Split Page View
The Split Page view shows you both the
code and the design views of the page on
one screen

10-20
 Code Page View

The Code Page view enables you to view

and even modify the defining code for a
Web page
To switch to this view from another view,
click on the Code button at the bottom-left
corner of the working area

10-21
 Preview Page View

The Preview Page view does a pretty

good job of showing you how your page
will look in a browser
NOTE: The view you get is not exact, and
certain features do not work in the Preview
Page view

10-22
 BUILDING A WEB SITE

Starting FrontPage
Starting FrontPage requires the same steps
as starting most other Windows applications
To start FrontPage, click on the Start button,
select Programs, then choose Microsoft
Office, then Microsoft FrontPage
There are three ways that you can create a
Web site using FrontPage:
1. With templates
2. With a wizard
3. Using an empty Web site
10-23
 Creating a Web Site with Templates

A template is a ready-made Web site

where all that is required of you is entering
text where the placeholder text is and, if
you wish, inserting new graphics where
the placeholder graphics are
The idea is for you to customize these
ready-made pages with your own text and
designs
10-24
Creating a Web Site with Templates

10-25
 Creating a Web Site with a Wizard

FrontPage offers several types of wizards:

Corporate Presence Web Wizard
Discussion Web Wizard
Import Web Wizard
Database Interface Wizard

10-26
Creating a Web Site with a Wizard

10-27
 Creating an Empty Web Site

If you know your way around FrontPage

and you want to start from scratch, you
can start with a single blank Web site

10-28
Creating an Empty Web Site

10-29
 BUILDING A WEB PAGE

Creating a Web Page from a Template

To create a new Web page from a template:
1. Choose File, then New
2. In the New Page section of the Task Pane, select
More page templates
3. Select a page, such as Photo Gallery
4. Click OK

10-30
Creating a Web Page from a Template

10-31
 Creating a Blank Web Page

To add a Web page to your Web site that

you created from the previous section,
you will want to create a new blank page
from scratch
1. Choose File, then New
2. In the New Page section of the Task Pane,
select Blank page
3. The filename is called new_page_1.htm
4. Press Enter to create the new page
10-32
Creating a Blank Web Page

10-33
 Entering Text on a Web Page

Entering text on a Web page is very much

like entering text in a word processing
document
You can also copy or cut text from a text
file, a Microsoft Word file, an e-mail
message, or another Web page, and then
paste it into the page you're working on

10-34
 Formatting Text

Controlling fonts on Web pages presents

unique difficulties
There's no way of knowing what fonts or font
technologies a given Web visitor will have
available
It's unlikely that all the same fonts will be
available to any two Web visitors
Even fonts that appear identical down to their
names might have subtle differences
10-35
Formatting Text

10-36
 Paragraphs

In HTML, paragraph breaks don't mean

quite the same thing that they do on the
printed page.
A paragraph in FrontPage is simply all the
text that comes before a paragraph break

10-37
 Paragraphs

Inserting a Paragraph Break

In Page view, inserting a paragraph break is
as simple as pressing the Enter key

Breaking a Line
Line breaks, represented as <br> in HTML,
can be used to format text when you want to
end one line and continue it on the following
line
10-38
Paragraphs

10-39
 Paragraphs

Aligning Paragraphs
There are different ways that you can align
text

10-40
 Paragraphs
Formatting Paragraphs
The arrangement and layout of paragraphs,
or any blocks of text, are key elements of
page layout and visual communication

10-41
 WORKING WITH GRAPHICS
Using Ruled Lines
Horizontal rules are pretty much what they
sound like - horizontal lines that separate one
part of a Web page from another

10-42
 Putting Your Own Images on a Web
Page
Gif and jpeg graphics are the best choice for a
Web page because all browsers can display
them easily
1. In Page view, click just below the text at the bottom
of the Web page
2. Choose Insert from the main menu, then Picture,
and then From File
3. In the Picture dialog box, open the drop-down menu
on the Views button and choose Preview
4. Select the file you just downloaded, photo.gif
5. Click the Insert button
10-43
 Changing Size, Alignment, & Spacing

FrontPage offers four different ways to

open the Picture Properties dialog box;
1. Choose Format, then Properties, or
2. Double-click the graphic; or
3. Right mouse click and choose Picture
Properties, or
4. Press Alt+Enter

10-44
Changing Size, Alignment, & Spacing

10-45
 Changing Size, Alignment, & Spacing

Picture Properties
Wrapping Style
Layout Alignment
Horizontal and Vertical Spacing
Border Thickness
Size

10-46
 Changing Size, Alignment, & Spacing

Left, right, and top

Texttop top of tallest character in a line
Middle middle of surrounding text
Absmiddle aligns with largest item on
line
Baseline Aligns bottom of image with
bottom of line
Bottom another name for baseline
Absbottom aligns with bottom of line 10-47
 INCLUDING HYPERLINKS

Hyperlinks probably constitute the biggest

difference between the Web and other
media
A link can point to any address on the
Internet
Click a link to download a file, hear a sound,
or play a video
Click certain links and your e-mail software
opens so you can send an e-mail message
10-48
INCLUDING HYPERLINKS

10-49
INCLUDING HYPERLINKS

10-50
 PRESENTING INFORMATION IN LISTS
AND TABLES
Two ways that allow organization of
information are using lists and tables
Tables are very useful for presentation of
tabular information as well as a boon to
creative HTML designers who use the
table tags to present their regular Web
pages

10-51
 Working with Lists

When you need to present information in a

structured way, lists are extremely useful
Lists help you communicate information in a concise
and linear way
You can use unnumbered (i.e. bulleted) lists or
numbered lists
Unnumbered lists are better when there is no
particular order to the list
Numbered lists help you represent the order of the
information, such as performing a sequence of steps
10-52
Working with Lists

10-53
 Working with Tables

The basic premise of tables is that they

arrange information into rows and
columns
The intersection of each row and column
is referred to as a cell, much like the cells
in a spreadsheet

10-54
Working with Tables

10-55
 Working with Rows and Columns

If you do not get the table exactly the right

size, you can add rows and columns to
the table
You can change the size of a row or
column
You can select multiple adjacent columns
or rows to make all the selected columns
or rows the same size
10-56
 Working with Cells

You can modify a table structure by

working directly with the cells
Unlike a spreadsheet, tables do not have
to be even sets of rows and columns
You can remove cells, merge multiple
cells into a single cell, and even stretch a
cell across multiple columns and rows
10-57
Working with Cells

10-58
 FORMATTING PAGES

Formatting includes specifying the page

background, applying themes
(coordinated sets of colors and bullets),
setting margins, and managing pages with
the workgroup tools

10-59
 Setting Page Properties

You can set many properties for your Web

pages using the Page Properties dialog
box
General Properties - From the General
tab, you can change the title of the page
Formatting From the Formatting tab, you
can change different formatting properties
Background Picture Background Colors
Text Colors
Hyperlink Colors
10-60
Setting Page Properties

10-61
 Themes

A theme is a collection of properties you

can apply to selected pages or to your
whole Web site
The properties include a coordinated
palette of colors, button styles, bullet
styles, page background properties
(graphic, color, rollover effect), and text
styles
10-62
Themes

10-63
 Set Theme Options

Vivid Colors
Active Graphics
Background Picture

10-64
 Set Theme Options

Vivid Colors
Active Graphics
Background Picture

10-65
 PURPOSE OF HTML IS TO:
1.IDENTIFY MAJOR STRUCTOR
COMPONENTS IN HTML DOC.

2. TAG REFERENCE OTHER

ELEMENTS ( INCLUDE POINTERS,
LINKS, VIDEO FILE, ANIMATIONS,
APPLETS, IMAGES,ETC). TAGS
AND ATTRIBUTES WORK
TOGETHER TO CREATE WEB PAGE
FOR BROWSER TO DISPLAY.
10-66
 TAGS?HTML STRUCTURE
(<>) ELEMENTS CONTAINING ANGLE
BRACKETS (TELLS BROWSERS THAT
THE TEXT BETWEEN THEM ARE HTML
COMMAND). TAGS ALSO STARTS WITH A
FORWARD SLASH (/) KNOW AS A
CLOSING TAG.

OPENING TAG GOES BEFORE THE INFO,

AND CLOSING TAG GOES AFTER.

10-67
HTML ATTRITUBE
ATTRIBUTE PROVIDE ADDITIONAL INFO
ABOUT AN ELEMENT. EXAMPLE: ABOUT
THE ELEMENT COLOR, FILE TO ACCESS,
ETC.
THERE ARE TWO TYPES OF TAGS:

(1) THOSE THAT BELONG IN THE HEAD

OF AN HTML DOCUMENT,
SUPPLYING GENERAL INFORMATION
ABOUT THE FILE
10-68
 HTML ATTRITUBE
(2) THOSE THAT BELONG IN
THE BODY, TAGGING THE CONTENT
THAT IS SHOWN IN THE BROWSER
WINDOW. THE MOST
USEFUL BREAKDOWN IS TO THINK OF
THE TAGS AS FALLING INTO TWO MAIN
GROUPS (REFER TO
FIGURE T9.13 ):

10-69
 PARTS OF TAG
STRUCTURE LABEL THE PARTS OF A
DOCUMENT: HEADINGS, PARAGRAPHS,
LISTS,
TABLES, IMAGES, AND SO ON.

STYLE TAGS, WHICH TELL THE

BROWSER EXACTLY HOW TO PRESENT
THE LABELED TEXT.

10-70
HTML ATTRITUBE
STRUCTURAL TAGS
FILE <HTML> <HEAD> <BODY> <META> <TITLE>
SECTION LEVEL <DIV> <DIR> <DL> <MENU> <OL> <UL>
PARAGRAPH LEVEL <BLOCKQUOTE> <P> <DD> <DT> <U>
PHRASE LEVEL <ABBR> <ACRONYM> <CITE> <CODE> <DEL> <DFN> <EM> <INS>
<KBD> <PRE> <Q> <SAMP>
<SPAN> <STRONG> <VAR>
HEADINGS <HL> <H2> <H3> <H4> <H5> <H6>
RULES <HR>
FORM ELEMENTS <FORM> <BUTTON> <FIELDSET> <INPUT> <LABEL> <LEGEND>
<OPTGROUP> <OPTION>
<SELECT> <TEXTAREA>
TABLE ELEMENTS <TABLE> <CAPTION> <COL> <COLGROUP> <TBODY> <TD>
<TFOOT> <TH> <THEAD> <TR>
FRAMESET ELEMENTS <FRAMESET> <FRAME> <IFRAME> <NOFRAMES>
INTERACTIVE ELEMENTS <A> <AREA> <MAP> <SCRIPT> <NOSCRIPT> <PARAM>
ADDITIONAL CODE AND MEDIA <APPLET> <EMBED> <IMG> <UNK> <OBJECT>
STYLE TAGS
LINE <BR> <NOBR> <WBR>
FONT <FONTFACE=>>
FONT SIZE <BIG> <SMALL> <FONT SIZE=>
FONT COLOR <BODY ALINK=> <BODY LINK=> <BODY TEXT=> <BODY VLINK=>
<FONT COLOR=>
FONT STYLE <B> <I> <S> <STRIKE> <SUB> <SUP> <TT> <U>
PLACEMENT <CENTER> <IMG ALIGN=>
GENERAL STYLE INFORMATION <STYLE>.
10-71
 WC3-STRUCTURAL TAGS
FOR THE MOST PART, OFFICIAL HTML,
DEFINED BY THE WORLD WIDE WEB
CONSORTIUM. ( MONITORS AND GUIDE
THE DEVELOPMENT OF THE WEB.)
STICKS TIGHTLY TO STRUCTURAL.
TAGS.

SEE P L U G - I N S U M M A R Y. PLUG IN T9
SEE MAKING BUSINESS DECISSION PLUG IN T9

SEE UNDERSTANDING TAG COMPONENTS

PLUG IN T10 (ON BLACKBOARD IN COURSE
DOCUMENT) 10-72
 STRUCTURAL TAGS

THE <HTML> TAGS

THE <HTML > TAGS IDENTIFY THE DOCUMENT
AS AN HTML DOCUMENT. TO USE THE
<HTML > TAGS, ENTER THEM IN YOUR
DOCUMENT LIKE THIS:
<HTML>
</HTML>

10-73
 WC3-STRUCTURAL TAGS

SEE UNDERSTANDING TAG COMPONENTS

PLUG IN T10 (ON BLACKBOARD IN COURSE
DOCUMENT).

TO USE THE <HEAD> TAGS, ENTER THEM

BETWEEN THE <HTML> TAGS, FOR
EXAMPLE:
<HTML>
<HEAD>
</HEAD>
</HTML>

10-74
 WC3-STRUCTURAL TAGS
THE <HEAD> TAGS CONTAIN INFORMATION ABOUT THE
DOCUMENT, INCLUDING ITS TITLE,
SCRIPTS USED, STYLE DEFINITIONS, AND DOCUMENT
DESCRIPTIONS.

ADDITIONALLY, THE <HEAD>

TAGS CAN CONTAIN OTHER TAGS THAT HAVE
INFORMATION FOR SEARCH ENGINES AND INDEXING
PROGRAMS. TO USE THE <HEAD> TAGS, ENTER THEM
BETWEEN THE <HTML> TAGS, FOR EXAMPLE:
<HTML>
<HEAD>
</HEAD>
</HTML>

10-75
 WC3-STRUCTURAL TAGS
NOTE: DONT CONFUSE DOCUMENT HEAD TAG, WHICH
IS A STRUCTURE TAG, WITH HEADING
FORMATTING TAGS SUCH AS <H1> THAT CREATE
HEADING TEXT IN A DOCUMENT BODY

TITLE HEADER TAG

TO USE THE <TITLE> TAGS, ENTER THEM BETWEEN THE
OPENING
AND CLOSING <HEAD> TAGS, SUCH AS:
<HTML>
<HEAD>
<TITLE>
AN HTML TUTORIAL
</TITLE>
</HEAD>
</HTML>

10-76
 WC3-STRUCTURAL TAGS
THE TITLE TAG TEXT IS ALSO USED TO
DESCRIBE A PAGE IN A FAVORITES OR
BOOKMARKS
LIST.

HERE ARE SOME EXAMPLES OF GOOD TITLES:

SAMPLE HTML CODE.
RIDE A BICYCLE IN COLORADO.
WEB SURFING FOR PROFIT.

10-77
 APPLYING STYLE TAGS AND
ATTRIBUTES
2. INSERT THE <UL> TAGS AROUND THE LIST TEXT:
<UL>
LIONS
TIGERS
BEARS
OH, MY!
</UL>
3. TYPE THE <LI> TAG FOR EACH LIST ITEM:
<UL>
<LI> LIONS
<LI> TIGERS
<LI> BEARS
<LI> OH, MY!
</UL>

10-78
 APPLYING STYLE TAGS AND
ATTRIBUTES
THE RESULTING LIST, VIEWED IN A BROWSER, LOOKS
LIKE THAT SHOWN IN FIGURE T10.12 .
TO CHANGE YOUR LIST FROM UNORDERED (BULLETED)
TO ORDERED (NUMBERED), CHANGE
THE <UL> TO <OL> (AND </UL> TO </OL>

TO USE ANY OF THESE ATTRIBUTES, INCLUDE THEM IN

THE BEGINNING <OL> OR <UL> TAG
OR IN THE <LI> TAG, SUCH AS:
<OL TYPE "A">
<LI> OUTLINES USE SEQUENTIAL LISTS WITH LETTERS.
<LI> AND NUMBERING SCHEMES FOR DOCUMENTATION.
</OL>

10-79
 APPLYING BOLD, ITALIC, AND
OTHER EMPHASES
YOU USE THESE CHARACTER-LEVEL FORMATTING
TAGS ONLY WITHIN PARAGRAPH-LEVEL TAGS, THAT IS,
YOU CANNOT PUT A <P> TAG WITHIN A
CHARACTER-LEVEL TAG SUCH AS <B> . YOU HAVE TO
CLOSE THE CHARACTER-LEVEL FORMATTING
BEFORE YOU CLOSE THE PARAGRAPH-LEVEL
FORMATTING, FOR EXAMPLE:
CORRECT:
<P> <B> THIS IS THE END OF A PARAGRAPH THAT ALSO
USES BOLDFACE. </B> </P>
</P> THIS IS THE BEGINNING OF THE FOLLOWING
PARAGRAPH.
INCORRECT:
THIS TEXT <B> IS BOLDFACE. </P>
</P> AS IS THIS </B > </P>

10-80
APPLYING BOLD, ITALIC, AND
OTHER EMPHASES

10-81
 HYPERLINK
HYPERLINKING TO A WEB PAGE
NO MATTER WHAT TYPE OF HYPERLINK YOU WANT TO
CREATE, THE BASIC SYNTAX IS THE SAME. IT
STARTS WITH THE <A> TAG, AND THEN USES AN HREF
ARGUMENT THAT PROVIDES THE URL
OR THE PATH TO THE DESTINATION. FOR EXAMPLE, A
HYPERLINK TAG MIGHT LOOK LIKE THIS:
<A HREF "HTTP://WWW.DU.EDU"> UNIVERSITY OF
DENVER </A>
HYPERLINKS, WHEN VIEWED IN A BROWSER, ARE
UNDERLINED BY DEFAULT. YOU CAN SPECIFY
ALTERNATE FORMATTING OF HYPERLINKS BY
CHANGING THE <LINK> COLOR IN THE <BODY> TAG
EXPLAINED IN THE PREVIOUS SECTION. FIGURE T10.27
DISPLAYS SEVERAL EXAMPLES OF HYPERLINKS.

10-82
BASIC HTML LINKS

10-83
 BASIC HTML LINKS
HTML PRIMER - HTTP://WWW.HTMLPRIMER.COM/
BASIC HTML: INTRODUCTION -
HTTP://WWW.HTMLGOODIES.COM/PRIMERS/HTML/ARTIC
LE.PHP/3478141
BASIC HTML: TAGS -
HTTP://WWW.HTMLGOODIES.COM/PRIMERS/HTML/ARTIC
LE.PHP/3478151
HTML TUTORIAL -
HTTP://WWW.W3SCHOOLS.COM/HTML/DEFAULT.ASP

10-84