Transcript Book cover slide

16
HTML Tables and Frames
YOU WILL LEARN TO…
Section 16.1
• Create a basic table using HTML
• Define borders
• Merge cells
• Align content in tables
Section 16.2
• Create a frames-based Web page using HTML
• Create a link bar page
• Create a content page
• Create a container page
• Control Web page layout with frames
• Create links between frames
16
HTML Tables and Frames
YOU WILL LEARN TO…
Section 16.3
• Identify inline CSS
• Identify internal style sheet code
• Create an external style sheet
• Use CSS for page layout
pp.
Section
16.1
Creating Tables in HTML
Focus on Reading
Main Ideas
Key Terms
HTML tables give Web
page designers a great
deal of control over page
layout and the formatting
of information. There are
many HTML tags and
attributes available for this
purpose.
cell spacing
cell padding
header row
header column
450-454
pp.
Section
16.1
450-454
Creating Tables in HTML
Defining a Basic Table
Three sets of HTML tags define a table:
• <TABLE></TABLE> - marks the beginning and end of the table
area.
• <TR></TR> - marks the beginning and end of a row.
• <TD></TD> - marks the beginning and end of a column.
pp.
Section
16.1
450-454
Creating Tables in HTML
Using Table Attributes
Controlling a table’s
attributes allows you to
modify the look of the
table on your site. Here
are some attributes you
can modify:
• Cell spacing
• Cell padding
• Header rows
• Header columns
• Alignment
cell spacing The space
between the outer border of a
table and the cell border.
(p. 451)
cell padding The space
between a table cell’s border
and its content. (p. 451)
header row Row in a table that
contains the titles for each
column. (p. 452)
header column Column in a
table that contains the titles for
each row. (p. 452)
pp.
Section
16.1
450-454
Creating Tables in HTML
Using Table Attributes
Using the align attribute in the <TABLE> tag centers the
entire table on the Web page.
pp.
Section
16.1
Creating Tables in HTML
• Activity 16A – Create a Table Using HTML (p. 453)
450-454
pp.
Section 16.1 Creating Tables in HTML
Section Assessment
Identify Which tag set
marks the beginning
and end of a table row?
A. <TABLE></TABLE>
B. <TR></TR>
C. <TD></TD>
D. <ROW></ROW>
B. <TR></TR>
450-454
pp.
Section
16.2
Creating Frames in HTML
Guide to Reading
Main Ideas
Key Terms
HTML frames give you the
ability to display more
than one Web page on
the screen at the same
time. You can customize
hyperlinks to support
frames.
frame
container page
left-hand navigation
content page
top navigation
456-461
pp.
Section
16.2
456-461
Creating Frames in HTML
Creating Frame Pages in HTML
A Web page with two
frames is made of three
documents:
• Link bar
• Content page
• Container page, which
holds the link bar and
content page.
frame A separate region on
a Web page that contains its
own Web document.
(p. 456)
container page Page that
defines the characteristics of
each page in a framesbased site. (p. 457)
pp.
Section
16.2
456-461
Creating Frames in HTML
Creating Frame Pages in HTML
Link bars can appear
anywhere on a page. Web
designers can use either
left-hand navigation or
top navigation.
The content page should
remain the site’s main
focus.
left-hand navigation A
frames-based Web site with
a link bar on the left side of
the screen. (p. 457)
top navigation A framesbased Web site with a link
bar at the top of the screen.
(p. 459)
content page The page that
contains the main
information on a framesbased site and fulfills the
site’s main purpose. (p. 458)
pp.
Section
16.2
456-461
Creating Frames in HTML
Creating Links Between Frames
To keep the link bar from changing, include the target
attribute in the link’s anchor tag. This attribute tells the
browser to load the target Web page into a specified frame
(the content frame) rather than into the current frame.
pp.
Section
16.2
456-461
Creating Frames in HTML
• Activity 16B – Create a Frames-Based Web Page (p. 459)
pp.
Section 16.2 Creating Frames in HTML
Section Assessment
Examine What page
contains the main
information on a
frames-based site?
A. container page
B. products page
C. contact page
D. content page
D. content page
456-461
pp.
Section
16.3
Cascading Style Sheets
Focus on Reading
Main Ideas
Key Terms
Cascading style sheets
provide Web designers
more control over the
appearance of elements
within a Web page. CSS
can also be used for page
layout.
selector
class selector
id selector
462-466
pp.
Section
16.3
462-466
Cascading Style Sheets
CSS and HTML
There are three different ways you can apply cascading
style sheets (CSS) to an HTML document:
• Inline
• Internal style sheets
• External style sheets
Inline CSS and internal style sheets should be used
sparingly because they do not separate content from
presentation information.
pp.
Section
16.3
462-466
Cascading Style Sheets
CSS and HTML
An external style sheet is
a simple HTML document
that only contains
selectors along with
properties and values.
selector Part of HTML code
that contains properties and
corresponding values within
curly braces that control the
appearance of HTML
elements. (p. 463)
pp.
Section
16.3
462-466
Cascading Style Sheets
CSS and HTML
A class selector can be
used multiple times in an
HTML document.
An id selector is used
only once in an HTML
document.
class selector A selector
that applies the same
attribute to any HTML
element that references it.
(p. 463)
id selector A selector that
identifies only one element
within an HTML document.
Always preceded by a #
sign. (p. 463)
pp.
Section
16.3
462-466
Cascading Style Sheets
Using CSS for Page Layout
You can use CSS to position elements on a Web page.
There are three types of positions that you can specify:
• Absolute positioning uses numeric values to place
elements precisely on a page.
• Static positioning places elements on a page normally,
just as if you had laid out the page without tables or tags.
• Relative positioning also places elements on a page
normally. However, you can adjust the position of an
element relative to how it would normally appear on a
page.
pp.
Section
16.3
462-466
Cascading Style Sheets
• Activity 16C – Create an External Style Sheet Using HTML
(p. 464)
• Activity 16D – Use CSS to Position Page Elements (p. 465)
pp.
Section 16.3 Cascading Style Sheets
Section Assessment
Name A(n) _____
selector applies the
same attributes to any
HTML element that
references it.
A. id
B. class
C. relative
D. static
B. class
462-466
16
HTML Tables and Frames
Chapter Review
True/False An inline
style sheet is the most
commonly used
cascading style sheet.
B. False. The most
commonly used
cascading style
sheet is the external
style sheet.
16
HTML Tables and Frames
Chapter Review
Define What is a
cascading style sheet?
A cascading style
sheet can be used to
control the
appearance and
layout of a page. It
can be applied as an
inline code, internal
style sheet, or
external style sheet.
16
HTML Tables and Frames
Resources
For more resources on this chapter, go to the Introduction
to Web Design Using Dreamweaver Web site at
WebDesignDW.glencoe.com.