16 HTML Tables and Frames Section 16.1 Create a basic table using HTML Define borders Merge cells...
-
Upload
laurel-mcgee -
Category
Documents
-
view
223 -
download
1
Transcript of 16 HTML Tables and Frames Section 16.1 Create a basic table using HTML Define borders Merge cells...
16 HTML Tables and Frames
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
YOU WILL LEARN TO…
16 HTML Tables and Frames
Section 16.3• Identify inline CSS• Identify internal style sheet code• Create an external style sheet• Use CSS for page layout
YOU WILL LEARN TO…
Section 16.1 Creating Tables in HTMLFocus 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
pp. 450-454
Sectionpp. 450-454
Creating Tables in HTML
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.
Defining a Basic Table
16.1
Section 16.1 Creating Tables in HTMLUsing 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 spacingCell spacing• Cell paddingCell padding• Header rowsHeader rows• Header columnsHeader 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. 450-454
Sectionpp. 450-454
Creating Tables in HTML
Using the align attribute in the <TABLE> tag centers the entire table on the Web page.
Using Table Attributes
16.1
Sectionpp. 450-454
Creating Tables in HTML
• Activity 16A – Create a Table Using HTML (p. 453)
16.1
Section Creating Tables in HTMLpp. 450-454
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>
Section Assessment
16.1
Section 16.2 Creating Frames in HTMLGuide 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
pp. 456-461
Section 16.2 Creating Frames in HTMLCreating 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)
pp. 456-461
A Web page with two framesframes is made of three documents: • Link bar • Content page• Container pageContainer page, which
holds the link bar and content page.
Section 16.2 Creating Frames in HTMLCreating Frame Pages in HTML
Link bars can appear anywhere on a page. Web designers can use either left-hand navigationleft-hand navigation or top navigationtop navigation.
The content pagecontent 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 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 site’s main purpose. (p. 458)
pp. 456-461
Sectionpp. 456-461
Creating Frames in HTML
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.
Creating Links Between Frames
16.2
Sectionpp. 456-461
Creating Frames in HTML
• Activity 16B – Create a Frames-Based Web Page (p. 459)
16.2
Section Creating Frames in HTMLpp. 456-461
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
Section Assessment
16.2
Section 16.3 Cascading Style Sheets
Focus on Reading
Key Terms
selector
class selector
id selector
pp. 462-466
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.
Section
CSS and HTML
16.3 Cascading Style Sheetspp. 462-466
There are three different ways you can apply cascading style sheets (CSS) to an HTML document:
• InlineInline• Internal style sheetsInternal style sheets• External style sheetsExternal style sheets
Inline CSS and internal style sheets should be used sparingly because they do not separate content from presentation information.
Section 16.3 Cascading Style SheetsCSS and HTML
pp. 462-466
An external style sheet is a simple HTML document that only contains selectorsselectors 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)
Section 16.3 Cascading Style SheetsCSS and HTML
pp. 462-466
A class selectorclass selector can be used multiple times in an HTML document.
An id selectorid 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)
Section 16.3 Cascading Style Sheetspp. 462-466
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.
Using CSS for Page Layout
Section
• Activity 16C – Create an External Style Sheet Using HTML (p. 464)
• Activity 16D – Use CSS to Position Page Elements (p. 465)
16.3 Cascading Style Sheetspp. 462-466
Section Cascading Style Sheetspp. 462-466
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
Section Assessment
16.3
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.