HTML Concepts and Techniques Fourth Edition Project 4

Project Objectives • Define table elements • Describe the steps used to plan, design,

Project Objectives • • Create a borderless table to organize text Create a horizontal

Project Objectives • Add background color to rows and cells • Alter the spacing

Starting Notepad • Click the Start button on the taskbar • Point to All

Entering the HTML Tags to Define the Web Page Structure Project 4: Creating Tables

Creating a Borderless Table to Position Images • If necessary, click line 10 •

Creating a Borderless Table to Position Images Project 4: Creating Tables in a Web

Inserting Images in a Table • If necessary, click line 11, type <tr> as

Inserting Images in a Table Project 4: Creating Tables in a Web Site 10

Creating a Vertical Menu Bar with Text Links • If necessary, click line 17

Creating a Vertical Menu Bar with Text Links Project 4: Creating Tables in a

Adding Text to a Table Cell • If necessary, click line 27 • Enter

Adding Text to a Table Cell Project 4: Creating Tables in a Web Site

Saving and Printing the HTML File • With a USB drive plugged into your

Viewing and Printing a Web Page Project 4: Creating Tables in a Web Site

Copying and Pasting HTML Code to a New File • Click the Notepad button

Copying and Pasting HTML Code to a New File Project 4: Creating Tables in

Changing the Web Page Title • Highlight the words, — Great Service, Great Selection,

Changing the Web Page Title Project 4: Creating Tables in a Web Site 20

Deleting an Image • Highlight line 13, which contains the code to insert the

Deleting an Image Project 4: Creating Tables in a Web Site 22

Creating a Horizontal Menu Bar with Text Links • If necessary, click line 16

Creating a Horizontal Menu Bar with Text Links Project 4: Creating Tables in a

Creating a Table with Borders and Inserting Text • If necessary, click line 28

Creating a Table with Borders and Inserting Text Project 4: Creating Tables in a

Creating Additional Cells and Inserting Text • If necessary, click line 52 • Enter

Creating Additional Cells and Inserting Text Project 4: Creating Tables in a Web Site

Saving and Printing an HTML File • With a USB drive plugged into the

Viewing and Printing the Web Page Using the Browser Project 4: Creating Tables in

Testing Links in a Web Page • Click the Home link in the horizontal

Testing Links in a Web Page Project 4: Creating Tables in a Web Site

Opening an HTML File • Click the Notepad button on the taskbar • With

Opening an HTML File Project 4: Creating Tables in a Web Site 34

Adding Cellspacing and Cellpadding to a Table • Click immediately to the right of

Adding Cellspacing and Cellpadding to a Table Project 4: Creating Tables in a Web

Adding a Table Caption • Highlight the text <!--Insert caption here --> on line

Adding a Table Caption Project 4: Creating Tables in a Web Site 38

Saving and Printing the HTML File and Viewing and Printing the Web Page •

Saving and Printing the HTML File and Viewing and Printing the Web Page Project

Creating the First Heading That Spans Columns • Click line 31 and type <tr

Creating the First Heading That Spans Columns Project 4: Creating Tables in a Web

Creating the Second Heading That Spans Columns • Highlight the <!--Insert first Title -

Creating the Second Heading That Spans Columns Project 4: Creating Tables in a Web

Creating the Headings That Span Rows • Highlight the <!--Insert Drama rowspan here -->

Creating the Headings That Span Rows • Highlight the <!--Insert Comedy rowspan here -->

Creating the Headings That Span Rows Project 4: Creating Tables in a Web Site

Spanning the Main Heading across All Columns • Highlight the <!—Insert Movies by Type

Spanning the Main Heading across All Columns Project 4: Creating Tables in a Web

Quitting Notepad and a Browser • Click the Close button on the browser title

Project Summary • Define table elements • Describe the steps used to plan, design,

Project Summary • • Create a borderless table to organize text Create a horizontal

Project Summary • Add background color to rows and cells • Alter the spacing

HTML Concepts and Techniques Fourth Edition Project 4 Complete Creating Tables in a Web

Slides: 57

Download presentation

HTML Concepts and Techniques Fourth 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 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 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 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 Project 4: Creating Tables in a Web Site 5

Entering the HTML Tags to Define the Web Page Structure 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 Project 4: Creating Tables in a Web Site 7

Creating a Borderless Table to Position Images 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=“ 596” height=“ 93” alt=“Bell Video Logo” /></td> and then press the ENTER key • Type <td><img src="csexcellence. gif" width="144” height=” 54” 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 Project 4: Creating Tables in a Web Site 9

Inserting Images in a Table Project 4: Creating Tables in a Web Site 10

Creating a Vertical Menu Bar with Text Links • If necessary, click line 17 • Enter the HTML code shown below • Press the ENTER key twice Project 4: Creating Tables in a Web Site 11

Creating a Vertical Menu Bar with Text Links Project 4: Creating Tables in a Web Site 12

Adding Text to a Table Cell • If necessary, click line 27 • Enter the HTML code as shown in Table 4 -5 on page HTM 151 and then press the ENTER key Project 4: Creating Tables in a Web Site 13

Adding Text to a Table Cell Project 4: Creating Tables in a Web Site 14

Saving and Printing the HTML File • With a USB drive plugged into your computer, click File on the menu bar and then click Save As. Type bellvideohome. htm in the File name text box • If necessary, click USB (G: ) in the Save in list. Click the Project 04 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 Project 4: Creating Tables in a Web Site 15

Viewing and Printing a Web Page Project 4: Creating Tables in a Web Site 16

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 Project 4: Creating Tables in a Web Site 17

Copying and Pasting HTML Code to a New File Project 4: Creating Tables in a Web Site 18

Changing the Web Page 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 Project 4: Creating Tables in a Web Site 19

Changing the Web Page Title Project 4: Creating Tables in a Web Site 20

Deleting an Image • Highlight line 13, which contains the code to insert the image, csexcellence. gif • Press the DELETE key twice Project 4: Creating Tables in a Web Site 21

Deleting an Image Project 4: Creating Tables in a Web Site 22

Creating a Horizontal Menu Bar with Text Links • If necessary, click line 16 • Enter the HTML code as shown in Table 4 -6 on page HTM 158 • Press the ENTER key twice Project 4: Creating Tables in a Web Site 23

Creating a Horizontal Menu Bar with Text Links Project 4: Creating Tables in a Web Site 24

Creating a Table with Borders and Inserting Text • If necessary, click line 28 • Enter the HTML code as shown in Table 4 -7 on page HTM 162 • Press the ENTER key twice Project 4: Creating Tables in a Web Site 25

Creating a Table with Borders and Inserting Text Project 4: Creating Tables in a Web Site 26

Creating Additional Cells and Inserting Text • If necessary, click line 52 • Enter the HTML code as shown in Table 4 -8 on page HTM 163 Project 4: Creating Tables in a Web Site 27

Creating Additional Cells and Inserting Text Project 4: Creating Tables in a Web Site 28

Saving and Printing an HTML File • With a USB drive plugged into the computer, click File on the menu bar and then click Save As. Type newreleases. htm in the File name text box • If necessary, click USB (G: ) in the Save in list. Click the Project 04 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 Project 4: Creating Tables in a Web Site 29

Viewing and Printing the Web Page Using the Browser Project 4: Creating Tables in a Web Site 30

Testing Links in a Web Page • Click the Home link in the horizontal menu bar on the New Releases Web page • Click the New Releases link in the vertical menu bar on the home page to return to the New Releases Web page • Click the Type link in the horizontal menu bar on the New Releases Web page • Click the Actor link in the horizontal menu bar on the Type Web page Project 4: Creating Tables in a Web Site 31

Testing Links in a Web Page Project 4: Creating Tables in a Web Site 32

Opening an HTML File • Click the Notepad button on the taskbar • With the USB drive plugged into your computer, 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 USB (G: ). Click the Project 04 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 Project 4: Creating Tables in a Web Site 33

Opening an HTML File Project 4: Creating Tables in a Web Site 34

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 Project 4: Creating Tables in a Web Site 35

Adding Cellspacing and Cellpadding to a Table Project 4: Creating Tables in a Web Site 36

Adding a Table Caption • Highlight the text  on line 69 • Type <caption align=“bottom”><em>Listing of movies by actor</em></caption> as the tag Project 4: Creating Tables in a Web Site 37

Adding a Table Caption Project 4: Creating Tables in a Web Site 38

Saving and Printing the HTML File and Viewing and Printing the Web Page • With the USB drive plugged into your computer, 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 Project 4: Creating Tables in a Web Site 39

Saving and Printing the HTML File and Viewing and Printing the Web Page Project 4: Creating Tables in a Web Site 40

Opening an HTML File • Click the Notepad button on the taskbar • With the USB drive plugged into your computer, 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 USB (G: ). Click the Project 04 folder and then click the Project. Files 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 Project 4: Creating Tables in a Web Site 41

Creating the First Heading That Spans Columns • Click line 31 and type <tr bgcolor="#ffffff"> • • Highlight  text on line 33, then press the DELETE key • Enter the code as shown in Table 4 -9 on page HTM 175 Project 4: Creating Tables in a Web Site 42

Creating the First Heading That Spans Columns Project 4: Creating Tables in a Web Site 43

Creating the Second Heading That Spans Columns • Highlight the  text on line 51 • Type <th colspan="2" bgcolor="gainsboro"> and then press the ENTER key • Type <font color="blue" 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 Project 4: Creating Tables in a Web Site 44

Creating the Second Heading That Spans Columns Project 4: Creating Tables in a Web Site 45

Creating the Headings That Span Rows • Highlight the  text on line 32 and then press the DELETE key • Type <th rowspan="3" width="20%" bgcolor="black"> and then press the ENTER key • Type <font color="#ffffff" size="+1">Drama</font> and then press the ENTER key • Type </th> as the tag Project 4: Creating Tables in a Web Site 46

Creating the Headings That Span Rows • Highlight the  text on line 36 and then press the DELETE key • Type <th rowspan="3" width="20%" bgcolor="black"> 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 Project 4: Creating Tables in a Web Site 47

Creating the Headings That Span Rows Project 4: Creating Tables in a Web Site 48

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="blue"> and then press the ENTER key • Type <font colorwhite“ 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 Project 4: Creating Tables in a Web Site 49

Spanning the Main Heading across All Columns Project 4: Creating Tables in a Web Site 50

Saving and Printing the HTML File and Viewing and Printing the Web Page • With the HTML Data Files in the USB drive, 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 Project 4: Creating Tables in a Web Site 51

Saving and Printing the HTML File and Viewing and Printing the Web Page Project 4: Creating Tables in a Web Site 52

Quitting Notepad and a Browser • Click the Close button on the browser title bar • Click the Close button on the Notepad window title bar Project 4: Creating Tables in a Web Site 53

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 Project 4: Creating Tables in a Web Site 54

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 Project 4: Creating Tables in a Web Site 55

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 Project 4: Creating Tables in a Web Site 56

HTML Concepts and Techniques Fourth Edition Project 4 Complete Creating Tables in a Web Site