4
Create a Web Page with HTML
Chapter Contents
pg. 83-121
Lesson 4.1 Get Started with HTML (pg. 85)
Lesson 4.2 Format Text (pg. 91)
Lesson 4.3 Insert Images and Backgrounds (pg. 100)
Lesson 4.4 Text and Graphic Alignment (pg. 104)
Lesson 4.5 Bulleted and Numbered Lists (pg. 109)
Lesson 4.6 Link to Other Pages and Web Sites (pg. 113)
Chapter Assessment
Copyright © The McGraw-Hill Companies, Inc. All rights reserved.
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
You Will Learn To
 Read basic HTML code
 Create a simple Web page using HTML code
 Add background color and graphics to a Web page
 Change font sizes, colors, and styles on a Web page
 Add paragraphs and line breaks
 Add images to a Web page
 Align text, graphics, and clip art on a Web page
 Create a bulleted or numbered list on a Web page
 Add external and internal hyperlinks to a Web page
 Insert a link to an e-mail address
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
4.1 Get Started with HTML
Hypertext Markup
Language (HTML)
A set of codes used to
create documents for
the Web.
tag
A piece of HTML code
that tells a Web
browser how to display
a particular section of
text, a graphic, or other
Web page element.
pg. 85-90
Understanding HTML Tags
You can create and publish your own Web page using
Hypertext Markup Language (HTML) and common
text formatting tags such as:
 <B>bold</B>
 <I>italics</I>
You can also use an attribute like BGCOLOR= to
change your Web page’s background color or add
other details.
attribute
A specific instruction
that tells the browser
how to display the text
or graphics enclosed by
the HTML tags.
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
4.1 Get Started with HTML
Web pages can also be
created in Microsoft
Word, Excel, and
PowerPoint
applications.
pg. 85-90
Creating an HTML Document
Attention to detail is very important when using HTML
code in a word processing program. If a single
character is missing or wrong, a tag will not work.
Web Editors
Some of the more advanced software programs that
enter HTML codes for you as you design a Web page
are:
 Macromedia Dreamweaver®
 Microsoft FrontPage®
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
4.1 Get Started with HTML
pg. 85-90
What does an HTML tag do? Write how opening and
closing tags appear in enclosed brackets.
digicom.glencoe.com
Lesson 4.1, Rubric
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
4.2 Format Text
font
A combination of
specific visual
characteristics of text,
including size, typeface
style, bold, and italics.
pg. 91-98
Applying Font Changes
Fonts affect a Web page’s appearance, helping to:
 Improve the way a page looks
 Emphasize text
 Catch the attention of people viewing your page
Microsoft Word, Excel,
and PowerPoint
documents can easily
be saved as HTML for
use as Web pages.
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
4.2 Format Text
horizontal rule
A line that runs across
the width of a page.
pg. 91-98
Creating Paragraphs and New Lines
You can control the layout of text on a Web page by
using some of the following tags:
 The paragraph tag, <P>, adds two blank lines
between paragraphs
 The break tag, <BR>, inserts a single space after a
line of text
 The horizontal rule tag, <HR>, creates a line that
runs across the width of a page
Viewing Source Code
To look at any Web site’s HTML code, in the browser
application click the View menu and click Source.
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
4.2 Format Text
pg. 91-98
 If your Web page has small, dark text against a dark
background, are people likely to read the text?
 Why or why not?
 Describe what you can do as a Web designer to
make the text on your Web page appealing.
 Is text easier to read when it is broken into
paragraphs? Explain your answers.
digicom.glencoe.com
Lesson 4.2, Rubric
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
4.3 Insert Images and Backgrounds
clip art
Electronic illustrations
that can be inserted
into a document.
pg. 100-103
Adding Images to Web Pages
Some graphics that can help your Web page’s design
are:
 Clip art
 Digital pictures
 Backgrounds
Clip Art
Clip art can usually be identified by the file extensions:
 .png
The background and
clip art files you are
viewing on the
Microsoft Web site can
also be added to Word,
Excel, Access, and
PowerPoint documents.
 .gif
 .jpg
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
4.3 Insert Images and Backgrounds
pg. 100-103
Animated Clip Art
Including some animated clip art on your Web pages
can make them come alive.
Digital Pictures
Personalize your Web page by downloading your digital
camera’s pictures to your computer.
Backgrounds
When using clip art as your Web page’s background
image, make sure the text is still easy to read by:
 Changing the color
 Adjusting the text’s formatting
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
4.3 Insert Images and Backgrounds
pg. 100-103
 What kinds of clip art could you add to the Web site
you have been working on?
 What kinds of digital photos could you take to add to
the site?
 Describe the photos.
digicom.glencoe.com
Lesson 4.3, Rubric
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
4.4 Text and Graphic Alignment
pg. 104-107
Page Layout
Improve your Web page’s design by:
 Paying attention to the position of text or graphics
 Centering big headlines in the middle of the page
 Setting a photograph off to the side of a page
 Aligning captions underneath photographs
The Importance of Closing Tags
Always use a closing tag when using HTML to align
images and text.
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
4.4 Text and Graphic Alignment
pg. 104-107
 What kind of text would you center on a Web page?
 How could you use left align and right align?
 Give an example of each.
digicom.glencoe.com
Lesson 4.4, Rubric
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
4.5 Bulleted and Numbered Lists
pg. 109-112
Organizing Information
HTML allows you to create lists on your Web pages to:
 Organize information about related items
Ordered and unordered
lists on Web pages are
similar to lists you can
create in Microsoft
Word and PowerPoint.
 Draw attention to the information in a visual way
 Make items more distinct from one another and
easier to remember
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
4.5 Bulleted and Numbered Lists
ordered list
A list that has numbers
before each item, and
the items are usually in
priority order.
pg. 109-112
The following tags are used for lists:
 <UL> tag to start an unordered list
 <OL> tag to start an ordered list
 <LI> tag for an individual item within a list
unordered list
A list that has bullet
points before each item
and is used when the
items can be in any
order.
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
4.5 Bulleted and Numbered Lists
pg. 109-112
 When might you want to include an unordered list or
ordered list in your Web page?
 What type of information would you put in each list?
digicom.glencoe.com
Lesson 4.5, Rubric
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
4.6 Link to Other Pages and Web Sites
Hyperlinks can be
created in Microsoft
Word, Excel, Access,
and PowerPoint
documents by simply
entering the URL.
pg. 113-115
Planning a Web Site
When building a Web site, make sure you:
 Create a storyboard or diagram to help lay out
pages and organize information
 Include links to make it easy for users to navigate
from one page to another within the site
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
4.6 Link to Other Pages and Web Sites
pg. 113-115
Creating Hyperlinks
You need an anchor tag and hypertext reference,
<A HREF>, to link text or graphics to the URL
(uniform resource locator) of another Web page.
Using these hyperlinks:
 Gives a Web site the ability to connect to any other
public Web site on the Internet
 Connects millions of pages all across the World
Wide Web
 Allows people to easily surf from one page to
another
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
4.6 Link to Other Pages and Web Sites
pg. 113-115
 What is the advantage of linking pages together on
the Internet?
 Explain how this makes moving around within a
site easier.
 How does this make navigating the World Wide
Web easier?
digicom.glencoe.com
Lesson 4.6, Rubric
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
DIGITAL CAREER PERSPECTIVE
pg. 116
Sharing Information About New Products
Name:
Levonda Stewart
Job Title:
Workshop Coordinator
Career Cluster:
Manufacturing
Levonda Stewart is a workshop and regional trade show
coordinator for employees of a manufacturing firm.
She works with different people from all over the United
States and collects and organizes information about
new product lines.
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
DIGITAL CAREER PERSPECTIVE
pg. 116
Sharing Information About New Products
In her job, Levonda uses the Internet and the Microsoft Office
Suite software to:
 Schedule hotels and check the status of product shipments
 Update the company’s Web site with information about
trade shows and workshops
 Register participants online
 Oversee the creation of brochures in PageMaker® for new
products and workshops
 Create a PowerPoint presentation about a new product to
share with sales reps and customers
Levonda says, “I really enjoy working with a project when it
begins as an idea and then develops into a successful
workshop or trade show.”
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
DIGITAL CAREER PERSPECTIVE
pg. 116
Question 1
How are communication and computer and technology
skills linked in Levonda’s job?
Possible answers include:
 She uses both written and verbal communication in
arranging locations for workshops and trade shows
 She updates the company’s Web site and synthesizes
information about new products and workshops to share
with customers and sales representatives
 She works with people from all over the world both
through the Internet and in person at events like the
trade shows
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
CHAPTER ASSESSMENT
Question 1
Name at least two Web editor software programs.
(Lesson 4.1)
Answers may include two of the following popular Web
editors, among others:
 Macromedia Dreamweaver®
 Microsoft FrontPage®
 Adobe GoLive
 NetObjects Fusion
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
CHAPTER ASSESSMENT
Question 2
If you use an image as a background in a Web page, what
should you be sure to check? (Lesson 4.3)
Answer:
Be sure the text is still easy to read. You may need to
change the color or formatting of the text to increase its
contrast with the background.
Glencoe Digital Communication Tools
4
Create a Web Page with HTML
CHAPTER ASSESSMENT
Question 3
Why is Web design a career field with great potential?
Answers may include:
 As increasing numbers of people use the Web
to find information and buy products, the number
of businesses that want a presence on the Web
also increases.
 Each year, millions of new Web sites are added to the
Web. All this makes Web design a field that is growing
fast and that promises great opportunities for those with
the necessary skills.
Glencoe Digital Communication Tools
1
Impact of Digital Communication Tools
Unit Resources
For more resources on this unit, go to the Online Learning
Center at http://www.digicom.glencoe.com.
Glencoe Digital Communication Tools