Chapter 4

advertisement
HTML5 & CSS
th
7
Edition
Creating Tables in a
Web Site Using an
External Style
Sheet
Chapter Objectives
• Define table elements
• Describe the steps used to plan, design, and code
a table
• Create a borderless table for a horizontal
navigation bar with text links
• Create an external style sheet to define styles
across a Web site
• Utilize classes to give you more control over styles
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
2
Chapter Objectives
• Link an external style sheet to Web pages where
you want its styles applied
• Create a table with borders and insert text
• Use the box-shadow property to alter the
appearance of an image
• Alter the spacing between and within cells using
the border spacing and padding properties
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
3
Chapter Objectives
• Utilize inline styles to alter the style of individual
elements on a Web page
• Add background color to rows and cells
• Insert a caption below a table
• Create headings that span rows using the rowspan
attribute
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
4
Plan Ahead
• Complete Web page planning
• Analyze the content and organization of the Web
page
• Choose the content and organization for the Web
page
• Identify how to format various elements of the Web
page
• Determine where to save the Web page
• Create the Web page and links
• Test all Web pages within the Web site
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
5
Starting Notepad++
• Click the Start button on the Windows taskbar to display the Start
menu
• Click All Programs at the bottom of the left pane on the Start menu
to display the All Programs list
• Click Notepad++ in the All Programs list to expand the folder
• Click Notepad++ in the expanded list to start the Notepad++
program
• If the Notepad++ window is not maximized, click the Maximize
button on the Notepad++ title bar to maximize it
• Click View on the menu bar and verify that the Word wrap
command has a check mark next to it. If it does not, click Word
wrap
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
6
Entering Initial HTML Tags to Define the
Web Page Structure
• Enter the HTML code shown in Table 4-3. Press ENTER at the end
of each line. If you make an error as you are typing, use the
BACKSPACE key to delete all the characters back to and including
the incorrect characters, then continue typing
• Position the insertion point on the blank line between the <body>
and </body> tags (line 12) and press the ENTER key to position the
insertion point on line 13
• Compare what you typed to Figure 4–12. If you notice errors, use
your mouse pointer or ARROW keys to move the insertion point to
the right of each error and use the BACKSPACE key to correct the
error
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
7
Entering Initial HTML Tags to Define the Web
Page Structure
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
8
Saving an HTML File
• Click File on the menu bar, click Save, and then type the
desired file name in the File name text box (do not press
enter)
• Navigate to storage device and folder where you save
your Data Files and then click the Save button in the Save
As dialog box to save the file
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
9
Using the Box-Shadow Property
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
10
Using the Box-Shadow Property
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
11
Inserting, Centering, and Styling an
Image with a Box-Shadow
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
12
Creating a Horizontal Menu Bar
with Image Links
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
13
Creating an External Style Sheet
• Create a new file in Notepad++ to create the style
sheet.
• When you save the style sheet after entering the
styles, the file name extension should be .css
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
14
Creating an External Style Sheet
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
15
Linking to an External Style Sheet
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
16
Copying and Pasting HTML Code to a New File
•
•
•
•
•
Open the file containing the HTML code you wish to copy
Select the HTML code to copy
Press CTRL+C to copy the selected code to the Clipboard
Open the file to which you want to paste the copied HTML code
Position the mouse pointer at the position you wish to paste the
HTML code
• Press CTRL+V to paste the contents from the Clipboard into a new
file
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
17
Creating a Table with Borders
and Inserting Text
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
18
Adding Border Spacing, Padding, and Row
Color to a Table
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
19
Adding a Table Caption
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
20
Creating the Headings that Span Rows
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
21
Adding the Bolder Class to Data Cells
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
22
Chapter Summary
• Define table elements
• Describe the steps used to plan, design, and code
a table
• Create a borderless table for a horizontal
navigation bar with text links
• Create an external style sheet to define styles
across a Web site
• Utilize classes to give you more control over styles
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
23
Chapter Summary
• Link an external style sheet to Web pages where
you want its styles applied
• Create a table with borders and insert text
• Use the box-shadow property to alter the
appearance of an image
• Alter the spacing between and within cells using
the border spacing and padding properties
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
24
Chapter Summary
• Utilize inline styles to alter the style of individual
elements on a Web page
• Add background color to rows and cells
• Insert a caption below a table
• Create headings that span rows using the rowspan
attribute
Chapter 4: Creating Tables in a Web Site Using an External Style Sheet
25
HTML
7th Edition
Chapter 4
Complete
Download