HTML PROJECT 4 Creating Tables in a Web Siteelprofesor.synthasite.com/resources/Project4.pdf ·...

HTML PROJECT 4

Creating Tables in a Web Site

1. Open Notepad. 2. If necessary, click Format>Word Wrap. 3. Save the files in the Project04/ProjectFiles folder with the file name bellvideohome.htm 4. Type the following starting on the top line. <html> <head> <title>Bell Video -- Great Service, Great Selection (Your First and Last Name)</title> </head> <body> </body> </html> TO CREATE A BORDERLESS TABLE 5. To create a borderless table, type the following table tag with the attributes between the <body></body>

tag.:

<table border=“0” cols=“2”>

6. Press Enter.

7. Type <tr>

8. Press Enter

9. To insert an image in the table, type the following:

<td> <img src="bellvideologo.gif" width="430" height="74" alt-“BellVideo Logo”></td>

10. Display in Internet Explorer. Compare to Figure 1.

Figure 1

11. Press Enter. Type the following:

<td><img src=”csexcellence.gif” width=”108” height=”94” alt=”Excellence Award”></td> 12. Display in Internet Explorer. Compare to Figure 2 below.

Figure 2

13. Press Enter. To close the row, type </tr> 14. To close the table, type </table>. CREATING A VERTICAL MENU BAR WITH TEXT LINKS 15. Press Enter 2 times. 16. Type the following:

<br><table border="0" cellspacing="15" cols="2"> <tr> <td valign="top" width="20%" bgcolor="lightsteelblue"> <a href="newreleases.htm">New Releases</a> <p><a href="actor.htm">Browse by Actor</a></p> <p><a href="type.htm">Browse by Type</a></p> </td>

17. The previous step created a two-column, borderless table that is center-aligned and has cellspacing of 15

pixels between columns. The first data cell is also 20% of the table’s width and use a light steel blue background color.

ADDING TEXT TO A TABLE CELL 18. Press Enter 2 times 19. Type the following:

<td valign=“top” width=“80%”><B>Bell Video is the leading video rental store in the greater Tukwila area. In addition to our low prices, we have been selected for the second year in a row to receive the prestigious Tukwila “Excellence in Customer Service” award. <p>The Bell Video Web site is a new venture that will help provide better, more efficient customer service. You can peruse our movie database by new releases, actor, or type. In the future, you will be able to reserve videos online with your credit card or Bell Video rental card.</p> <p>Bell Video welcomes you to browse through our Web pages and see what is happening at our store. Be sure to keep watching this site for new, exciting options!</p>

<p><font size=“-1”>Please send any comments to <a href=mailto:[email protected]>[email protected]</a>.</font></p></b> </td> </tr> </table>

20. Press Enter 21. Resave the file.

Part 2 Creating a Secondary Web Page

1. Make sure Notepad is active.

2. Click Immediately to the left of the < in the <html> tag on line 1. Drag through the first </table> tag as shown below in figure

Figure 3

3. Click CTRL+C to copy the selected lines to the Clipboard.

4. Click File>>New on the Menu bar.

5. Press CTRL+V to paste the contents from the Clipboard into a new file.

6. Save the file as newreleases.htm to the Course Technology\Project 4\Projectfiles folder.

CHANGING THE TITLE 7. Highlight the words, -- Great Service, Great Selection, between the <title> and </title> tags.

8. Type New Releases as the text. (Do not make changes to your first and last name.)

9. Click immediately to the right of the </table> tag on line 15. Press the Enter key 3 times.

10. Type </BODY> and then press the ENTER key.

11. Type </HTML> as the end tag

12. Highlight <td><img src="csexcellence.gif" width="108" height="94" alt="Excellence Award"></td>, which contains the code to insert csexcellence.gif. Press the DELETE key twice.

13. Press the Enter key

14. Resave

CREATING A HORIZONTAL MENU BAR WITH TEXT LINKS

15. Type the following: <br><table border="0" cols="7" width="60%"> <tr align="center"> <td width="20%"><a href="bellvideohome.htm">Home</a></td> <td width="1%">|</td> <td width="25%"><a href="newreleases.htm">New Releases</a></td><td width="1%">|</td> <td width="15%"><a href="actor.htm">Actor</a></td> <td width="1%">|</td> <td width="25%"><a href="type.htm">Type</a></td> </tr> </table>

16. Press the Enter key twice

CREATING A TABLE WITH BORDERS AND INSERTING TEXT INTO CELLS 17. Type the following:

<br><table cols="4" border="5" width="80%">

<tr bgcolor="lightsteelblue">

<th><font color="#993366" size="+1">Title</font></th>

<th><font color="#993366" size="+1">Type</font></th>

<th><font color="#993366" size="+1">Actor</font></th>

<th><font color="#993366" size="+1">Rating</font></th>

</tr>

<tr>

<td>The Lord of the Rings:

<br>The Fellowship of the Ring</td>

<td>Fantasy</td>

<td>Ian McKellen

<br>Elijah wood</td>

<td>PG-13</td>

</tr>

<tr>

<td>The Matrix Revolutions</td>

<td>Action</td>

<td>Keanu Reeves

<br>Laurence Fishburne</td>

<td>R</td>

</tr> 18. Press the Enter key twice.

<tr>

<td>Mona Lisa Smile</td>

<td>Drama</td>

<td>Julia Roberts</td>

<td>PG-13</td>

</tr>

<tr>

<td>Something's Gotta Give</td>

<td>Comedy</td>

<td>Jack Nicholson

<br>Diane Keaton</td>

<td>PG-13</td>

</tr>

<tr>

<td>Runaway Jury</td>

<td>Drama</td>

<td>Gene Hackman

<br>John Cusack</td>

<td>PG-13</TD>

</tr>

</table>

19. Resave the Web page

20. Display in Internet Explorer

21. Compare your browser to the picture in figure 4 below

Figure 4

To Test Links in a Web Page

22. Click the Home link in the horizontal menu bar on the New Releases Web page.

23. Click the New Releases link in the vertical menu bar on the home page to return to the new Releases Web page.

24. Click the Type link in the horizontal menu bar on the New Releases Web page.

25. Click the Actor link in the horizontal menu on the Type Web page

ADDING CELLSPACING AND CELLPADDING TO A TABLE 26. Make Notepad Active. Open the file actor.htm.

27. Click immediately to the right of the 5 in border=“5” in the third table as shown in Figure 5.

28. Press the spacebar. Type cellspacing= “2” cellpadding=”5”

Instruction 27 and 28

Figure 5

TO ADD A TABLE CAPTION

29. Highlight the text<!—Insert caption here-->

30. Type the following: <caption align="bottom">< em>Listing of movies by actor</em></caption>

Figure 6

TO SPAN THE MAIN HEADING ACROSS ALL COLUMNS

31. Make sure Notepad is still active. 32. Open type.htm

33. Highlight the <!—Insert Movies Type colspan here--> text on line 29. Type <tr> and then press the ENTER key.

34. Type <th colspan=”3” bgcolor=”lightsteelblue”> Press Enter. 35. Type <font color=”#993366” face=”Chaucer” size=”+2”>Movies by Type</font> Press Enter 36. Type </th> Press the Enter key 37. Type </tr> 38. Highlight <!—Insert Action rowspan here --> 39. Type the following:

<tr bgcolor=“#ffffff”> <th rowspan=“5” width=“20%” bgcolor=“#336699”> <font color=“#ffffff” size=+1>Action</font> </th> <th colspan=“2” bgcolor=“thistle”> <font color=“#336699” size=“+1”>Title – Actor(s)</font> </th> </tr>

40. Highlight  43. Type the following:

<th colspan=“2” bgcolor=“thistle”> <font color=“#336699” size=“+1”>Title – Actor(s) </font> </th> </tr>

44. Resave the Web page. Display in your browser.

Figure 7

—A— ADDING CELLSPACING AND

CELLPADDING TO A TABLE, 6 ADDING TEXT TO A TABLE CELL, 2 —C— CREATING A VERTICAL MENU BAR WITH

TEXT LINKS, 2

—P— Part 2, 3 —T— TO ADD A TABLE CAPTION, 7 TO CREATE A BORDERLESS TABLE, 1

Project 04 Apply Your Knowledge

Background color is cyan

Background color is yellow

Figure 1 1. Start Notepad. 2. Open the file, apply4-1.htm from the Project04\AYK Folder. 3. Examine the HTML file and its appearance as a Web page in the browser. 4. Correct the HTML errors, making the Web page look similar to the Web page in

Figure 1. 5. Add any HTML code necessary for additional features shown in the Web page in

Figure 1. 6. Resave 7. View the Web page in your browser.

Project 04 Lab 1

Creating a Table with Multiple Images

Figure 1

1. Start a new HTML file with [your name] lab4-1solution.htm between the

<TITLE></TITLE> tags. 2. Insert the text shown in the top line of the Web page. 3. Add a centered borderless table with two-columns and two rows and cell padding of 25

and cell spacing of 25. 4. Insert the image, csexcellence.gif, in the first column of the first row. 5. Add the second image, csexcellence_v1.gif, to that same row in the second column. 6. Start a new row and add the images, csexcellence_v2.gif and csexcellence_v3.gif. 7. Save the HTML file in the Project04\IntheLab folder using the file name lab4-

1solution.htm.

Project 04 Lab 2

Creating Two Borderless Tables

Figure 1

Part I 1. Start a new HTML file with the title [your name] lab4-2a in the main heading section. 2. Create a 50% wide, one-row, two-column borderless table with the image,

computer.gif, in the left-hand data cell and the image, webgouplogo.gif, in the right-hand data cell.

3. Create a second one-row, two-column borderless table. Make the first column 20% wide with a background color of yellow and then add two links to the column: Pricing (lab4-2bsolution.htm) and Samples (H:\HTML\Course Technology\Project04\ProjectFiles\bellvideohome.htm). Make the second column 70% wide and include the text and an email link as shown in Figure 1.

4. Save the file using the file name, lab4-2asolution.htm, in the Project04\IntheLab folder.

Figure 2

Part II 1. Start a new HTML file with the title [your name] lab4-2bsolution.htm in the main

heading section. 2. Create a five-row, two-column table with a 5 pixel border, cell padding of 15, and cell

spacing of 5. Use yellow for the background color of the top row and the color #E0E0E0 for all other rows.

3. Span the first heading across both columns, as shown if Figure 2. 4. Enter the table headings, Service and Hourly Rate, and additional information in the

appropriate table cells, as shown in Figure 2. 5. Save the HTML file in the Project04\IntheLab folder using the filename lab4-

2bsolution.htm. 6. Open the file, lab4-2asolution.htm, in your browser and test the Pricing link to verify

it links to the lab4-2bsolution.htm.

Project 4 LAB 3

Creating Linked Schedules

Background: You want to create two Web pages similar to the ones shown in Figures 1 and 2, which list your school and work schedule. The Web pages will use tables with headings that span several rows and columns to organize the information and will include links from one page to the other. 1. Start two new HTML files with the titles [your name] lab 4-3a and [your name] lab4-

3b, respectively, in the main heading section. 2. In lab4-3a file (School Schedule), create a borderless table with a menu bar as shown

in figure 1. In lab 4-3b file (Work), create 2 tables. The first table should include the menu as shown in figure 2. The second table should be a borderless table with a width of 90% with the work schedule as shown in figure 2.

3. Include table headings and data cells as shown in both figures, with valid information in the data cells.

4. Add background colors for cells, as you see fit. 5. Save the HTML files in the Project04\IntheLab folder using the file names lab4-

3asolution.htm and lab4-3bsolution.htm, respectively. 6. Open the file, lab4-3asolution.htm, in your browser and test the Work link to verify it

links to the lab4-3bsolution.htm Web page. Test the school link to verify it links to the lab4-3asolution.htm Web page.

Figure 1

Figure 2

HTML PROJECT 4 Creating Tables in a Web Siteelprofesor.synthasite.com/resources/Project4.pdf ·...

Documents

Transcript of HTML PROJECT 4 Creating Tables in a Web Siteelprofesor.synthasite.com/resources/Project4.pdf ·...