12
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

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

Embed Size (px)

Citation preview

Page 1: 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

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

Page 2: 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

16.1 Creating Tables in HTMLGuide to 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. 420-424

Page 3: 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

pp. 420-424Creating 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 table row.

• <td></td> - marks the beginning and end of a table column.

Defining a Basic Table

16.1

Page 4: 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

16.1 Creating Tables in HTMLUsing Table Attributes

Controlling a table’s attributes allow 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. 421)

cell padding The space between a table cell’s border and its content. (p. 421)

header row Row in a table that contains the titles for each column. (p. 422)

header column Column in a table that contains the titles for each row. (p. 422)

pp. 420-424

Page 5: 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

pp. 420-424Creating Tables in HTML

Using the align attribute in the <table> tag centers the entire table on the Web page.

Using Table Attributes

16.1

Page 6: 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

pp. 420-424Creating Tables in HTML

• Activity 16A – Creating a Table Using HTML (p. 423)

16.1

Page 7: 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

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. 426-431

Page 8: 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

16.2 Creating Frames in HTMLCreating Frame Pages in HTML

A Web page with two framesframes is made of three separate HTML documents. The first two, the link bar and the content page, define the frames separately.

The third is the container container pagepage, which holds the other two documents.

frame A separate region on a Web page that contains its own Web document. (p. 426)

container page Page that defines the characteristics of each page in a frames-based site. (p. 427)

pp. 426-431

Page 9: 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

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. 427)

top navigation A frames-based Web site with a link bar at the top of the screen. (p. 429)

content page The page that contains the main information on a frames-based site and fulfills the site’s main purpose. (p. 428)

pp. 426-431

Page 10: 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

pp. 426-431Creating 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

Page 11: 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

pp. 426-431Creating Frames in HTML

• Activity 16B – Creating a Frames-Based Web Page (p. 429)

16.2

Page 12: 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

Chapter 16

For more resources on this chapter, go to the Introduction to Web Design Web site at webdesign.glencoe.com.

Resources