Transcript Book cover slide

Section 4.1
• Format HTML tags
• Identify HTML guidelines
Section 4.2
• Organize Web site files and folder
• Use a text editor
• Use HTML tags and attributes
• Create lists using HTML
• View an HTML document
Section 4.3
• Insert images using HTML
• Insert links using HTML
• Debug and test a Web page
Section 4.4
• Re-create an existing HTML document in FrontPage
• Test a Web page in FrontPage
pp.
4.1
HTML Coding
Guide to Reading
Main Ideas
Key Terms
An HTML document is
composed of instructions,
or tags. These tags tell
Web browsers how to
display the content
contained in a Web page.
The World Wide Web
Consortium establishes
guidelines and standards
for using HTML.
Hypertext Markup
Language (HTML)
HTML tag
starting tag
ending tag
nested tag
empty tag
source code
92-94
pp.
4.1
92-94
HTML Coding
HTML Tags
You create Web page
documents by inserting
HTML tags into a text
document.
Hypertext Markup
Language (HTML) The
code used to create Web
pages. (p. 92)
HTML tag Text contained
between two angle brackets
(< >) that tells the Web
browser how to display a
page’s content. (p. 92)
pp.
4.1
92-94
HTML Coding
HTML Tags
HTML tags often come in
starting and ending tag
sets.
Nesting tags refers to
placing the tags in
particular order.
Empty tags do not
require an ending tag.
starting tag The first of a pair
of HTML tags; also known as an
opening tag. (p. 92)
ending tag The last of a pair of
HTML tags; also known as a
closing tag. (p. 92)
nested tag An HTML tag that is
enclosed within another set of
tags. (p. 93)
empty tag An HTML tag that
requires only an opening tag;
also known as an orphan tag.
(p. 93)
pp.
4.1
92-94
HTML Coding
HTML Guidelines
Understanding and using the basic guidelines for HTML
code will help you see the relationship between the code
you write and what you see in the Web browser. For
example, extra spaces between elements in an HTML
document will not necessarily display in a Web browser.
pp.
4.1
92-94
HTML Coding
HTML Guidelines
Viewing source code will
allow you to see the text
and the HTML commands
used to create the Web
site.
source code The text and
HTML commands used to
create the Web page.
(p. 94)
pp.
4.2
Using a Text Editor
Guide to Reading
Main Ideas
Key Terms
You can use a text editor
to create text documents
that can be displayed in a
Web browser. These
documents must contain
HTML commands. Always
organize your folders and
files carefully when
creating a Web site.
file name extension
attribute
ordered list
unordered list
96-102
pp.
4.2
96-102
Using a Text Editor
Organizing Files and Folders
Every Web site is composed of folders and files.
Whether you use a text editor or a Web site development
application, you must keep your files organized.
pp.
4.2
96-102
Using a Text Editor
Using Notepad
Notepad can be used as a
text editor for creating
Web sites.
When you save a file for
the first time in Notepad,
use the Save As function
to name the file and
choose the file name
extension.
file name extension The
three or four characters after
a period in a file name that
tell the computer system
what type of file it is reading.
(p. 97)
pp.
4.2
96-102
Using a Text Editor
Adding Attributes using HTML
Some HTML tags can
contain attributes to
specify the tags
characteristics. Some
attributes include:
• Font color
• Background color
• Heading
• Alignment
attribute An HTML
instruction that is included in
an HTML tag to specify a
characteristic of a Web page
element. (p. 98)
pp.
4.2
96-102
Using a Text Editor
Creating Lists Using HTML
Creating lists can make
text easier to read and
add visual interest to a
page.
ordered list A type of list
that contains items, usually
numbered, that must appear
in a particular sequence. (p.
100)
There are two types of
lists: ordered lists and
unordered lists.
unordered list A list that
contains items that can
appear in any order. (p. 100)
pp.
4.2
96-102
Using a Text Editor
Viewing an HTML Page
With text editors you cannot see how your page will appear in a
Web browser while you are creating it. You must save the HTML
document and then view it in a browser.
pp.
4.2
96-102
Using a Text Editor
• Activity 4A – Creating Folders to Organize a Site (p. 96)
• Activity 4B – Creating and Saving an HTML Document
(p. 98)
• Activity 4C – Adding Color and Formatting Text Using HTML
(p. 100)
• Activity 4D – Creating an Unordered List Using HTML
(p. 101)
• Activity 4E – Viewing HTML in a Browser (p. 102)
pp.
4.3
Enhancing and Testing Your Page
Guide to Reading
Main Ideas
Key Terms
Use image tags to insert
graphics using HTML. You
can create links by using
an anchor tag to specify
the clickable area. A link
can be absolute or
relative. Web pages must
be tested.
text link
graphic link
anchor tag
absolute link
relative link
debugging
testing
103-108
pp.
4.3
103-108
Enhancing and Testing Your Page
Adding Images Using HTML
You can insert images into pages using the <img> tag and
assign the five common attributes:
• Source (src)
• Alternative text (alt)
• Align (align)
• Width (width)
• Height (height)
pp.
4.3
103-108
Enhancing and Testing Your Page
Inserting Links Using HMTL
There are several different
types of links using HTML.
• Anchor tag
• Text link
• Graphic link
anchor tag An HTML tag
used to create hyperlinks.
The tag identifies what is
clicked on and where it links
to. (p. 104)
text link A type of link in
which users click text to
activate the link. (p. 105)
graphic link A type of link in
which users click on an
image to activate the link.
(p. 105)
pp.
4.3
103-108
Enhancing and Testing Your Page
Inserting Links Using HMTL
Text and graphic links are
either absolute or
relative.
absolute link A type of link
that contains the complete
URL or path of the file being
linked to. (p. 105)
relative link A type of link
that is used when linking to
a local file, such as one
within the same Web site.
(p. 105)
pp.
4.3
103-108
Enhancing and Testing Your Page
Testing a Web Page
You should debug and
test your Web site often
to make sure that the
page displays properly
and all links are
connected correctly.
debugging The process of
locating and correcting
errors in a Web site’s HTML
code. (p. 107)
testing The process of
repeatedly checking the
Web page and site to make
certain that elements display
as designed. (p. 107)
pp.
4.3
103-108
Enhancing and Testing Your Page
HTML and the W3C
The World Wide Web Consortium (W3C) releases
specifications, called recommendations, on HTML.
You can read the complete specifications on the W3C
Web site.
The specifications developed by this governing body help
ensure that Web designers create pages that follow
specific standards and can be displayed by any browser
that also follows these specifications.
pp.
4.3
103-108
Enhancing and Testing Your Page
• Activity 4F – Inserting and Image Using HTML (p. 104)
• Activity 4G – Inserting Absolute Links using HTML (p. 106)
• Activity 4H – Testing an HTML Document (p. 107)
pp.
4.4
FrontPage versus Notepad
Guide to Reading
Main Ideas
Key Terms
A Web site development
application allows you to
create Web sites by
clicking buttons instead of
typing HTML commands
into a text document.
border
embedded file
110-114
pp.
4.4
110-114
FrontPage versus Notepad
Adding Color and Formatting Text in
FrontPage
The major advantage of using FrontPage is that you can
see how your final page will appear.
FrontPage allows you to quickly change attributes, such
as color, and see how they look.
pp.
4.4
110-114
FrontPage versus Notepad
Adding Graphics and Links
When using FrontPage,
adding a border can add
visual interest to your
page.
border A visual break on the
page that is used to add
interest and to separate
elements. (p. 113)
When you save a page,
you will be asked where to
save embedded files.
embedded file File that you
add to the FrontPage
document from other
applications. (p. 113)
pp.
4.4
110-114
FrontPage versus Notepad
Testing a Web Page
Always spell check and proofread your Web page.
Also view your Web page in more than one browser to
make sure each line works properly.
pp.
4.4
FrontPage versus Notepad
• Activity 4I – Creating and Formatting a page in FrontPage
(p. 110)
• Activity 4J – Adding Headings and Unordered Lists in
FrontPage (p. 112)
• Activity 4K – Inserting a Graphic and Links in FrontPage
(p. 63)
• Activity 4L – Testing a Web Page in FrontPage (p. 114)
110-114
Chapter 4
Resources
For more resources on this chapter, go to the Introduction
to Web Design Web site at webdesign.glencoe.com.