Transcript Book cover slide - McGraw

4
HTML Basics
YOU WILL LEARN TO…
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
4
HTML Basics
YOU WILL LEARN TO…
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
Dreamweaver
• Test a Web page in Dreamweaver
pp.
Section 4.1
HTML Coding
Focus on 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
98-101
pp.
Section 4.1
98-101
HTML Coding
HTML Tags
Knowing Hypertext
Markup Language
(HTML) will help you
understand how Web site
development applications
like Dreamweaver work.
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. 98)
HTML tag Text contained
between two angle brackets
(< >) that tells the Web
browser how to display a
page’s content. (p. 98)
pp.
Section 4.1
98-101
HTML Coding
HTML Tags
HTML tags often come in
starting tag and ending
tag sets.
starting tag The first of a
pair of HTML tags; also
known as an opening tag.
(p. 98)
ending tag The last of a
pair of HTML tags; also
known as a closing tag.
(p. 98)
pp.
Section 4.1
98-101
HTML Coding
HTML Tags
Nested tags refers to the
order in which HTML tags
appear.
nested tag An HTML tag
that is enclosed within
another set of tags. (p. 99)
Empty tags do not
require an ending tag.
empty tag An HTML tag
that requires only an
opening tag; also known as
an orphan tag. (p. 99)
pp.
Section 4.1
98-101
HTML Coding
HTML Guidelines and Standards
The World Wide Web Consortium (W3C) develops
specifications for the use of HTML and other programming
languages that are used on the Internet.
These specifications help to ensure that all Web pages
can be displayed by any browser that follows W3C
specifications.
pp.
Section 4.1
98-101
HTML Coding
HTML Guidelines and Standards
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.
Section 4.1
98-101
HTML Coding
HTML Guidelines and Standards
You can see the HTML
commands used to create
any Web page by viewing
its source code.
source code The text and
HTML commands used to
create the Web page.
(p. 101)
pp.
Section 4.1
HTML Coding
Section Assessment
Evaluate An HTML
tag that is enclosed
within another set of
tags is called what
type of tag?
A. a starting tag
B. an empty tag
C. an ending tag
D. a nested tag
D. a nested tag
98-101
pp.
Section 4.2
Using a Text Editor
Focus on 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
102-108
pp.
Section 4.2
102-108
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.
Section 4.2
102-108
Using a Text Editor
Using Notepad
Notepad can be used as a
text editor for creating
Web sites.
When you save an HTML
document in Notepad, use
the Save As function to
name the file and choose
the .html 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. 103)
pp.
Section 4.2
102-108
Using a Text Editor
Adding Attributes using HTML
Some HTML tags can
contain attributes to
specify a tag’s
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. 104)
pp.
Section 4.2
102-108
Using a Text Editor
Creating Lists Using HTML
Lists help make text
easier to read and add
visual interest to a page.
There are two types of
lists: ordered lists and
unordered lists.
ordered list A type of list
that contains items, usually
numbered, that must appear
in a particular sequence.
(p. 106)
unordered list A list that
contains items that can
appear in any order; also
known as a bulleted list).
(p. 106)
pp.
Section 4.2
102-108
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.
Section 4.2
102-108
Using a Text Editor
• Activity 4A – Create Folders to Organize a Site (p. 102)
• Activity 4B – Create and Saving an HTML Document
(p. 104)
• Activity 4C – Add Color and Format Text Using HTML
(p. 106)
• Activity 4D – Create an Unordered List Using HTML (p. 107)
• Activity 4E – View HTML in a Browser (p. 108)
pp.
Section 4.2
Using a Text Editor
Section Assessment
Analyze Which file
name extension
should you choose
when you save an
HTML file in Notepad?
A. .html
B. .doc
C. .xls
D. .mlth
A. .html
102-108
pp.
Section 4.3
Enhancing and Testing Your HTML Page
Focus on 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.
anchor tag
text link
graphic link
relative link
absolute link
debugging
testing
109-114
pp.
Section 4.3
109-114
Enhancing and Testing Your HTML Page
Adding Images Using HTML
You can insert images into pages using the <IMG> tag and
assign these common attributes:
• Source (src)
• Alternative text (alt)
• Align (align)
• Border (border)
• Width (width)
• Height (height)
<IMG> src=“images/book.gif” alt=“Books”
align=“center” border=“0” width=“40” height=“30”>
pp.
Section 4.3
109-114
Enhancing and Testing Your HTML Page
Inserting Links Using HMTL
There are different types
of HTML links.
• Anchor tag (<A></A>)
• 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. 110)
text link A type of link in
which users click text to
activate the link. (p. 111)
graphic link A type of link in
which users click an image
to activate the link. (p. 111)
pp.
Section 4.3
109-114
Enhancing and Testing Your HTML Page
Inserting Links Using HMTL
Text and graphic links are
either relative or
absolute.
The anchor tag set uses
the href (short for
Hypertext Reference)
attribute to tell the Web
browser where it needs to
link to.
relative link A type of link
that is used when linking to
a local file, such as one
within the same Web site.
(p. 111)
absolute link A type of link
that contains the complete
URL or path of the file being
linked to. (p. 112)
pp.
Section 4.3
109-114
Enhancing and Testing Your HTML Page
Testing a Web Page
Debugging and testing
your Web site will help
you to make sure that the
pages display properly
and all links are
connected correctly.
debugging The process of
locating and correcting any
obvious errors in a Web
site’s HTML code. (p. 113)
testing The process of
repeatedly checking the
Web page and site to make
certain that elements display
as designed. (p. 113)
pp.
Section 4.3
Enhancing and Testing Your HTML Page
• Activity 4F – Insert and Image Using HTML (p. 110)
• Activity 4G – Insert Absolute Links Using HTML (p. 112)
• Activity 4H – Test an HTML Document (p. 113)
109-114
pp.
Section 4.3
109-114
Enhancing and Testing Your HTML Page
Section Assessment
True/False Text and
graphic links are either
relative or absolute.
True. Text and graphics
are either relative or
absolute. A relative link
is used when linking to
a local file. An absolute
link contains the
complete URL or path
of the of the file being
linked to.
pp.
Section 4.4
Dreamweaver Versus Notepad
Focus on 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.
color palette
border
116-122
pp.
Section 4.4
116-122
Dreamweaver Versus Notepad
Adding Color and Formatting Text in Dreamweaver
The major advantage of using Dreamweaver is that you
can see approximately how your final page will appear
while you are working on it.
This allows you to make adjustments, such as changing
the font size or background color, as you go.
pp.
Section 4.4
116-122
Dreamweaver Versus Notepad
Adding Color and Formatting Text in Dreamweaver
In Dreamweaver, there
are two ways to select
background colors:
• Enter hexadecimal
numbers into the
Background color box in the
Page Properties dialog box.
• Choose a color from the
Dreamweaver color palette.
color palette A menu of
colors available in the
Dreamweaver program.
(p. 116)
pp.
Section 4.4
116-122
Dreamweaver Versus Notepad
Adding Graphics and Links
Adding a border can add
visual interest to your
page.
border A visual break on the
page that is used to add
visual interest and to
separate elements. (p. 120)
pp.
Section 4.4
116-122
Dreamweaver 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.
Section 4.4
Dreamweaver Versus Notepad
• Activity 4I – Create and Format a page in Dreamweaver
(p. 117)
• Activity 4J – Add Headings and Unordered Lists in
Dreamweaver (p. 118)
• Activity 4K – Insert a Graphic and Links in Dreamweaver
(p. 120)
• Activity 4L – Test a Web Page in Dreamweaver (p. 122)
116-122
pp.
Section 4.4
116-122
Dreamweaver Versus Notepad
Section Assessment
True/False One
major advantage of
Dreamweaver is that it
allows you to create
Web sites by keying
HTML commands
instead of clicking
buttons.
False. Dreamweaver’s
major advantage is
that you can see how
your page will turn
out while you are
working on it.
4
HTML Basics
Chapter Review
Identify The attributes
src, alt, align,
border, width,
and height are all
commonly used with
which type of tag?
A. Ordered list
B. Image
C. Nested
D. Anchor
B. Image
4
HTML Basics
Chapter Review
Analyze Why should
you always test and
debug your Web pages
before publishing
them?
Debugging and
testing a Web site
ensures that all of
the pages display
properly and that all
links work correctly.
4
HTML Basics
Chapter Resources
For more resources on this chapter, go to the Introduction
to Web Design Using Dreamweaver Web site at
WebDesignDW.glencoe.com.