Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7th 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

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

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

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

Obtain all Materials Ensure you have all files for use in Ch. 4 Dining.gif Dining.html Golf.gif Home.gif Oceansidelogo.jpeg Tennis.gif Tennis.html Open Notepad++ (ensure Word-wrap is enabled) Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Entering Initial HTML Tags to Define the Web Page Structure Enter the HTML code shown in Table 4-3 pg. HTML 169. Save file as Oceanside.html Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Using the Box-Shadow Property Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Using the Box-Shadow Property Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Inserting, Centering, and Styling an Image with a Box-Shadow Use Table 4-5 to enter in Box-Shadow code Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Example of Positive Box-Shadow <div style="text-align: center"> <img src="oceansidelogo.jpg" width="866" height="259" alt="Oceanside logo" style="box-shadow: 10px 10px 12px #888888" /> </div> Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Creating a Horizontal Menu Bar with Image Links- Table 4.6 Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Creating an External Style Sheet Create a new file in Notepad++ to create the style sheet. Use Table 4-8, pg. HTML 182 to create the code for the style sheet When you save the style sheet after entering the styles, the file name extension should be: stylesch4.css Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Creating an External Style Sheet Five main elements in a web page that are defined in an external style sheet: body paragraphs links images tables Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Validating an External Style Sheet Visit www.validator.w3.org to validate your .css file Select “Validate by File Upload” tab and select file Correct any errors found Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Linking to an External Style Sheet Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Table Properties Tags used to create tables Further describes how the table will be positioned and where the caption will be placed Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Creating a Table with Borders and Inserting Text Use Table 4-9 to create the “golf.html” page If using the same html coding and horizontal information as the oceanside.html page, simply copy and paste the code into a new file and save as “golf.html” Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Adding Border Spacing, Padding, and Row Color to a Table Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Creating a Table with Borders and Text Open tennis.html file and add a new table style on line 30: <table style="border-spacing: 5px; padding: 5px"> Add a table row stripe on line 37 and 39: <tr class="stripe"> Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Adding a Table Caption Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Creating the Headings that Span Rows Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Adding the Bolder Class to Data Cells Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

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

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

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

HTML 7th Edition Chapter 4 Complete