Transcript Project 4
HTML Comprehensive Concepts and Techniques Third Edition Project 4 Creating Tables in a Web Site Project Objectives • Define table elements • Describe the steps used to plan, design, and code a table • Create a borderless table to organize images • Create a vertical menu bar with text links HTML Project 4: Creating Tables in a Web Site 2 Project Objectives • Create a borderless table to organize text • Create a horizontal menu bar with text links • Create a table with borders • Change the horizontal alignment of text HTML Project 4: Creating Tables in a Web Site 3 Project Objectives • Add background color to rows and cells • Alter the spacing between and within cells using the cellspacing and cellpadding attributes • Insert a caption below a table • Use the rowspan and colspan attributes HTML Project 4: Creating Tables in a Web Site 4 Starting Notepad • Click the Start button on the taskbar • Point to All Programs on the Start menu, point to Accessories on the All Programs submenu, and then click Notepad on the Accessories submenu • If the Notepad window is not maximized, click the Maximize button on the Notepad title bar to maximize it • Click Format on the menu bar and, if necessary, click Word Wrap to turn Word Wrap on HTML Project 4: Creating Tables in a Web Site 5 Entering the HTML Tags to Define the Web Page Structure HTML Project 4: Creating Tables in a Web Site 6 Creating a Borderless Table to Position Images • If necessary, click line 10 • Type <table border="0" cols="2“ width="90%"> and then press the ENTER key HTML Project 4: Creating Tables in a Web Site 7 Creating a Borderless Table to Position Images HTML Project 4: Creating Tables in a Web Site 8 Inserting Images in a Table • If necessary, click line 11, type <tr> as the tag, and then press the ENTER key • Type <td><img src=“bellvideologo.gif” width=“430” height=“74” alt=“Bell Video Logo” /></td> and then press the ENTER key • Type <td><img src="csexcellence.gif" width="108” height=”94” alt=”Excellence Award” /></td> and then press the ENTER key • Type </tr> and then press the ENTER key • Type </table> and then press the ENTER key HTML Project 4: Creating Tables in a Web Site 9 Creating a Vertical Menu Bar with Text Links • If necessary, click line 17 • Enter the HTML code shown below • Press the ENTER key twice HTML Project 4: Creating Tables in a Web Site 10 Creating a Vertical Menu Bar with Text Links HTML Project 4: Creating Tables in a Web Site 11 Adding Text to a Table Cell • If necessary, click line 27 • Enter the HTML code as shown in Table 45 on page HTM 151 and then press the ENTER key HTML Project 4: Creating Tables in a Web Site 12 Adding Text to a Table Cell HTML Project 4: Creating Tables in a Web Site 13 Saving and Printing the HTML File • With a floppy disk in drive A, click File on the menu bar and then click Save As. Type bellvideohome.htm in the File name text box • If necessary, click 31⁄2 Floppy (A:) in the Save in list. Click the Project04 folder and then click the Project Files folder in the list of available folders. Click the Save button in the Save As dialog box • Click File on the menu bar and then click Print on the File menu HTML Project 4: Creating Tables in a Web Site 14 Viewing and Printing a Web Page HTML Project 4: Creating Tables in a Web Site 15 Copying and Pasting HTML Code to a New File • Click the Notepad button on the taskbar • Click immediately to the left of the < in the <!DOCTYPE html tag on line 1. Drag through the first </table> tag on line 15 to highlight lines 1 through 15 • Press CTRL+C to copy the selected lines to the Clipboard • Click File on the menu bar and then click New • Press CTRL+V to paste the contents from the Clipboard into a new file HTML Project 4: Creating Tables in a Web Site 16 Copying and Pasting HTML Code to a New File HTML Project 4: Creating Tables in a Web Site 17 Changing the Title • Highlight the words, — Great Service, Great Selection, between the <title> and </ title > tags on line 7. Type - New Releases as the text • Click immediately to the right of the </table> tag on line 15. Press the ENTER key three times • Type </body> and then press the ENTER key • Type </html> as the end tag HTML Project 4: Creating Tables in a Web Site 18 Changing the Title HTML Project 4: Creating Tables in a Web Site 19 Deleting an Image • Highlight line 13, which contains the code to insert the image, csexcellence.gif • Press the DELETE key twice HTML Project 4: Creating Tables in a Web Site 20 Deleting an Image HTML Project 4: Creating Tables in a Web Site 21 Creating a Horizontal Menu Bar with Text Links • If necessary, click line 16 • Enter the HTML code as shown in Table 46 on page HTM 159 • Press the ENTER key twice HTML Project 4: Creating Tables in a Web Site 22 Creating a Horizontal Menu Bar with Text Links HTML Project 4: Creating Tables in a Web Site 23 Creating a Table with Borders and Inserting Text • If necessary, click line 28 • Enter the HTML code as shown in Table 47 on page HTM 162 • Press the ENTER key twice HTML Project 4: Creating Tables in a Web Site 24 Creating a Table with Borders and Inserting Text HTML Project 4: Creating Tables in a Web Site 25 Creating Additional Cells and Inserting Text • If necessary, click line 53 • Enter the HTML code as shown in Table 48 on page HTM 164 HTML Project 4: Creating Tables in a Web Site 26 Creating Additional Cells and Inserting Text HTML Project 4: Creating Tables in a Web Site 27 Saving and Printing an HTML File • With a floppy disk in drive A, click File on the menu bar and then click Save As. Type newreleases.htm in the File name text box • If necessary, click 3½ Floppy (A:) in the Save in list. Click the Project04 folder and then click the ProjectFiles folder in the list of available folders. Click the Save button in the Save As dialog box • Click File on the menu bar and then click Print on the file menu HTML Project 4: Creating Tables in a Web Site 28 Viewing and Printing the Web Page Using the Browser HTML Project 4: Creating Tables in a Web Site 29 Opening an HTML File • Click the Notepad button on the taskbar • With the HTML Data Disk in drive A, click File on the menu bar and then click Open on the File menu • If necessary, click the Look in box arrow and then click 31⁄2 Floppy (A:). Click the Project04 folder and then click the Project Files folder in the list of available folders • If necessary, click the Files of type box arrow and then click All Files • Click actor.htm in the list of files and then click the Open button in the Open dialog box HTML Project 4: Creating Tables in a Web Site 30 Opening an HTML File HTML Project 4: Creating Tables in a Web Site 31 Adding Cellspacing and Cellpadding to a Table • Click immediately to the right of the 5 in border=“5” in line 28 and then press the SPACEBAR • Type cellpadding=“2” cellpadding=“5” as the attributes HTML Project 4: Creating Tables in a Web Site 32 Adding Cellspacing and Cellpadding to a Table HTML Project 4: Creating Tables in a Web Site 33 Adding a Table Caption • Highlight the text <!--Insert caption here -> on line 69 • Type <caption align=“bottom”><em>Listing of movies by actor</em></caption> as the tag HTML Project 4: Creating Tables in a Web Site 34 Adding a Table Caption HTML Project 4: Creating Tables in a Web Site 35 Saving and Printing the HTML File and Viewing and Printing the Web Page • With the floppy disk in drive A, click File on the menu bar and then click Save • Click File on the menu bar and then click Print • Click the Internet Explorer button on the taskbar • Click the Refresh button on the Standard Buttons toolbar • Click the Print button on the Standard Buttons toolbar HTML Project 4: Creating Tables in a Web Site 36 Saving and Printing the HTML File and Viewing and Printing the Web Page HTML Project 4: Creating Tables in a Web Site 37 Opening an HTML File • Click the Notepad button on the taskbar • With the HTML Data Disk in drive A, click File on the menu bar and then click Open on the File menu • If necessary, click the Look in box arrow and then click 3½ Floppy (A:). Click the Project04 folder and then click the ProjectFiles folder in the list of available folders • If necessary, click the Files of type box arrow, click All Files, and then double-click type.htm in the list of files. HTML Project 4: Creating Tables in a Web Site 38 Spanning the Main Heading across All Columns • Highlight the <!—Insert Movies by Type colspan here --> text on line 29. Type <tr> and then press the ENTER key • Type <th colspan="3" bgcolor="lightsteelblue"> and then press the ENTER key • Type <font color="#993366“ face="chaucer“ size="+2">Movies by Type</font> and then press the ENTER key • Type </th> and then press the ENTER key • Type </tr> as the end table row tag HTML Project 4: Creating Tables in a Web Site 39 Spanning the Main Heading across All Columns HTML Project 4: Creating Tables in a Web Site 40 Creating Headings that Span Rows and Columns • Highlight <!--Insert Action rowspan here -> text on line 34 • Enter the HTML code as shown in Table 49 on page HTM 179 HTML Project 4: Creating Tables in a Web Site 41 Creating Headings that Span Rows and Columns HTML Project 4: Creating Tables in a Web Site 42 Creating the Second Heading that Spans Rows • Highlight the <!--Insert Comedy rowspan here -> text on line 66 and then press the DELETE key • Type <tr> and then press the ENTER key • Type <th rowspan="4" bgcolor="#336699"> and then press the ENTER key • Type <font color="#ffffff“ size="+1">Comedy</font> and then press the ENTER key • Type </th> as the tag HTML Project 4: Creating Tables in a Web Site 43 Creating the Second Heading that Spans Rows HTML Project 4: Creating Tables in a Web Site 44 Creating the Second Heading that Spans Columns • Highlight the <!--Insert Title - Actor(s) colspan here --> text on line 70 • Type <th colspan="2" bgcolor="thistle"> and then press the ENTER key • Type <font color="#336699" size="+1">Title - Actor(s)</font> and then press the ENTER key • Type </th> and then press the ENTER key • Type </tr> and then press the ENTER key HTML Project 4: Creating Tables in a Web Site 45 Creating the Second Heading that Spans Columns HTML Project 4: Creating Tables in a Web Site 46 Saving and Printing the HTML File and Viewing and Printing the Web Page • With the HTML Data Disk in drive A, click File on the menu bar and then click Save • Click File on the menu bar and then click Print • Click the Internet Explorer button on the taskbar • Click the Refresh button on the Standard Buttons toolbar • Click the Print button on the Standard Buttons toolbar HTML Project 4: Creating Tables in a Web Site 47 Saving and Printing the HTML File and Viewing and Printing the Web Page HTML Project 4: Creating Tables in a Web Site 48 Project Summary • Define table elements • Describe the steps used to plan, design, and code a table • Create a borderless table to organize images • Create a vertical menu bar with text links HTML Project 4: Creating Tables in a Web Site 49 Project Summary • Create a borderless table to organize text • Create a horizontal menu bar with text links • Create a table with borders • Change the horizontal alignment of text HTML Project 4: Creating Tables in a Web Site 50 Project Summary • Add background color to rows and cells • Alter the spacing between and within cells using the cellspacing and cellpadding attributes • Insert a caption below a table • Use the rowspan and colspan attributes HTML Project 4: Creating Tables in a Web Site 51 HTML Comprehensive Concepts and Techniques Third Edition Project 4 Complete