Download presentation
Presentation is loading. Please wait.
1
Creating Tables in a Web Site
Project 4 Creating Tables in a Web Site
2
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
3
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
4
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
5
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
6
Entering the HTML Tags to Define the Web Page Structure
7
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
8
Creating a Borderless Table to Position Images
9
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
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
11
Creating a Vertical Menu Bar with Text Links
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
13
Adding Text to a Table Cell
14
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
15
Viewing and Printing a Web Page
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
17
Copying and Pasting HTML Code to a New File
18
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
19
Changing the Title
20
Deleting an Image Highlight line 13, which contains the code to insert the image, csexcellence.gif Press the DELETE key twice
21
Deleting an Image
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 159 Press the ENTER key twice
23
Creating a Horizontal Menu Bar with Text Links
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
25
Creating a Table with Borders and Inserting Text
26
Creating Additional Cells and Inserting Text
If necessary, click line 53 Enter the HTML code as shown in Table 4-8 on page HTM 164
27
Creating Additional Cells and Inserting Text
28
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
29
Viewing and Printing the Web Page Using the Browser
30
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
31
Opening an HTML File
32
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
33
Adding Cellspacing and Cellpadding to a Table
34
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
35
Adding a Table Caption
36
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
37
Saving and Printing the HTML File and Viewing and Printing the Web Page
38
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.
39
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
40
Spanning the Main Heading across All Columns
41
Creating Headings that Span Rows and Columns
Highlight <!--Insert Action rowspan here --> text on line 34 Enter the HTML code as shown in Table 4-9 on page HTM 179
42
Creating Headings that Span Rows and Columns
43
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
44
Creating the Second Heading that Spans Rows
45
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
46
Creating the Second Heading that Spans Columns
47
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
48
Saving and Printing the HTML File and Viewing and Printing the Web Page
49
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
50
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
51
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
52
Project 4 Complete
Similar presentations
