1 / 26

HTML5 & CSS 7 th Edition

HTML5 & CSS 7 th 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

ginger-franco
Download Presentation

HTML5 & CSS 7 th Edition

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 & CSS7th Edition Creating Tables in a Web Site Using an External Style Sheet

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

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

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

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

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

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

  8. Entering Initial HTML Tags to Define the Web Page Structure Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

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

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

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

  12. Inserting, Centering, and Styling an Image with a Box-Shadow Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

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

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

  15. Creating an External Style Sheet Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

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

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

  18. Creating a Table with Borders and Inserting Text Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

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

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

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

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

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

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

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

  26. HTML7th Edition Chapter 4 Complete

More Related