HTML Basics

1
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

2
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

3
pp. 98-101
HTML Coding
4.1
Focus on Reading
Main Ideas 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.
Key Terms Hypertext Markup Language (HTML) HTML
tag starting tag ending tag nested tag empty
tag source code
4
pp. 98-101
HTML Coding
4.1
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 (lt gt) that
tells the Web browser how to display a pages
content. (p. 98)
5
pp. 98-101
HTML Coding
4.1
HTML Tags
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)
HTML tags often come in starting tag and ending
tag sets.
6
pp. 98-101
HTML Coding
4.1
HTML Tags
nested tag An HTML tag that is enclosed within
another set of tags. (p. 99) empty tag An HTML
tag that requires only an opening tag also known
as an orphan tag. (p. 99)
Nested tags refers to the order in which HTML
tags appear. Empty tags do not require an ending
tag.
7
pp. 98-101
HTML Coding
4.1
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.
8
pp. 98-101
HTML Coding
4.1
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.
9
pp. 98-101
HTML Coding
4.1
HTML Guidelines and Standards
source code The text and HTML commands used to
create the Web page. (p. 101)
You can see the HTML commands used to create any
Web page by viewing its source code.
10
pp. 98-101
HTML Coding
4.1
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
11
pp. 102-108
Using a Text Editor
4.2
Focus on Reading
Main Ideas 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.
Key Terms file name extension attribute ordered
list unordered list
12
pp. 102-108
Using a Text Editor
4.2
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.
13
pp. 102-108
Using a Text Editor
4.2
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)
14
pp. 102-108
Using a Text Editor
4.2
Adding Attributes using HTML

• Some HTML tags can contain attributes to specify
  a 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. 104)
15
pp. 102-108
Using a Text Editor
4.2
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)
16
pp. 102-108
Using a Text Editor
4.2
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.
17
pp. 102-108
Using a Text Editor
4.2

• 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)

18
pp. 102-108
Using a Text Editor
4.2
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
19
pp. 109-114
Enhancing and Testing Your HTML Page
4.3
Focus on Reading
Main Ideas 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.
Key Terms anchor tag text link graphic
link relative link absolute link debugging testing
20
pp. 109-114
Enhancing and Testing Your HTML Page
4.3
Adding Images Using HTML

• You can insert images into pages using the ltIMGgt
  tag and assign these common attributes
• Source (src)
• Alternative text (alt)
• Align (align)
• Border (border)
• Width (width)
• Height (height)
• ltIMGgt srcimages/book.gif altBooks
  aligncenter border0 width40 height30gt

21
pp. 109-114
Enhancing and Testing Your HTML Page
4.3
Inserting Links Using HMTL

• There are different types of HTML links.
• Anchor tag (ltAgtlt/Agt)
• 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)
22
pp. 109-114
Enhancing and Testing Your HTML Page
4.3
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)
23
pp. 109-114
Enhancing and Testing Your HTML Page
4.3
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 sites 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)
24
pp. 109-114
Enhancing and Testing Your HTML Page
4.3

• 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)

25
pp. 109-114
Enhancing and Testing Your HTML Page
4.3
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.
26
pp. 116-122
Dreamweaver Versus Notepad
4.4
Focus on Reading
Main Ideas A Web site development application
allows you to create Web sites by clicking
buttons instead of typing HTML commands into a
text document.
Key Terms color palette border
27
pp. 116-122
Dreamweaver Versus Notepad
4.4
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.
28
pp. 116-122
Dreamweaver Versus Notepad
4.4
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)
29
pp. 116-122
Dreamweaver Versus Notepad
4.4
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)
30
pp. 116-122
Dreamweaver Versus Notepad
4.4
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.
31
pp. 116-122
Dreamweaver Versus Notepad
4.4

• 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)

32
pp. 116-122
Dreamweaver Versus Notepad
4.4
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. Dreamweavers major advantage is that you
can see how your page will turn out while you are
working on it.
33
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
34
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.
35
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.