HTML Tables and Frames. Section 16.1. Create a basic tabl

1
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

2
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

3
pp. 450-454
Creating Tables in HTML
16.1
Focus on Reading
Main Ideas 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.
Key Terms cell spacing cell padding header
row header column
4
pp. 450-454
Creating Tables in HTML
16.1
Defining a Basic Table

• Three sets of HTML tags define a table
• ltTABLEgtlt/TABLEgt - marks the beginning and end of
  the table area.
• ltTRgtlt/TRgt - marks the beginning and end of a
  row.
• ltTDgtlt/TDgt - marks the beginning and end of a
  column.

5
pp. 450-454
Creating Tables in HTML
16.1
Using Table Attributes

• Controlling a tables 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
cells 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)
6
pp. 450-454
Creating Tables in HTML
16.1
Using Table Attributes
Using the align attribute in the ltTABLEgt tag
centers the entire table on the Web page.
7
pp. 450-454
Creating Tables in HTML
16.1

• Activity 16A Create a Table Using HTML (p. 453)

8
pp. 450-454
Creating Tables in HTML
16.1
Section Assessment
Identify Which tag set marks the beginning and
end of a table row? A. ltTABLEgtlt/TABLEgt B.
ltTRgtlt/TRgt C. ltTDgtlt/TDgt D. ltROWgtlt/ROWgt
B. ltTRgtlt/TRgt
9
pp. 456-461
Creating Frames in HTML
16.2
Guide to Reading
Main Ideas 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.
Key Terms frame container page left-hand
navigation content page top navigation
10
pp. 456-461
Creating Frames in HTML
16.2
Creating Frame Pages in HTML
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 frames-based
site. (p. 457)

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

11
pp. 456-461
Creating Frames in HTML
16.2
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 sites 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 frames-based 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 frames-based site and
fulfills the sites main purpose. (p. 458)
12
pp. 456-461
Creating Frames in HTML
16.2
Creating Links Between Frames
To keep the link bar from changing, include the
target attribute in the links 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.
13
pp. 456-461
Creating Frames in HTML
16.2

• Activity 16B Create a Frames-Based Web Page
  (p. 459)

14
pp. 456-461
Creating Frames in HTML
16.2
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
15
pp. 462-466
Cascading Style Sheets
16.3
Focus on Reading
Key Terms selector class selector id selector
Main Ideas 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.
16
pp. 462-466
Cascading Style Sheets
16.3
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.

17
pp. 462-466
Cascading Style Sheets
16.3
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)
18
pp. 462-466
Cascading Style Sheets
16.3
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)
19
pp. 462-466
Cascading Style Sheets
16.3
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.

20
pp. 462-466
Cascading Style Sheets
16.3

• Activity 16C Create an External Style Sheet
  Using HTML (p. 464)
• Activity 16D Use CSS to Position Page Elements
  (p. 465)

21
pp. 462-466
Cascading Style Sheets
16.3
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
22
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.
23
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.
24
Resources
For more resources on this chapter, go to the
Introduction to Web Design Using Dreamweaver Web
site at WebDesignDW.glencoe.com.