Tables

CGS 2820C Web Development	#4 Grading Criteria for: Tables - Using Notepad, create a Table Portfolio Web page.
Description: Tables - Create a new portfolio page with a table on it. The portfolio page could contain photos, drawings, thumbnails of projects... Use table cells to display the portfolio items. Add a navigation link on your index.htm page to the new portfolio.htm page. As you start out your first few simple projects, the navigation on your index.htm file will look something like this: Home \| Portfolio \| Resume Using the same navigation and link back from portfolio.htm to your index.htm (home) page. This is a Web Development class. By now you must have a Web site. If you do not have a Web site yet, see: 0ClassFolders/2820Web/1-FreeWebSpaceFTP.pdf I will not grade this assignment if it is not on the Web. If you delay in putting your project on the Web, I will take of 3 points for each day late. Click here to see the code for a sample Table.
Topic	Directions	Points
<table> Start a table For reference, see P 186-191 in Expression Web Book. But only use Notepad, NOT Expression Web or Dreamweaver. We will edit this later in Expression Web or Dreamweaver and link it to a Cascading Style sheet in Chapter 7 and make it beautiful in Chapter 9	Use to <table> tag to create a table with 2 to 4 columns and at least 5 rows. Use the colspan attribute (shown below) in row 1 to merge the cells in the first row for your heading or table title. Insert portfolio pictures or other items in the cells of the remaining rows. Only use one table. Do not use multiple tables, use colspan and rowspan instead if needed (See below)	10
table width attribute table border-color attribute table border-style attribute table background-color	Set at least 4 table attributes. See sample table style attribute code below: <table style="width: 80%; border-color: blue; border-style: solid; background-color:#FFFF99">	20
<tr> Define Table Rows	Use <tr> tags to define at least 5 rows. Use different attributes for your top title row to make it look distinctive. See table sample below.	10
<td> Define Columns for "Table Data"	Use <td> tags to define at least 3 columns. See table sample below.	10
colspan Span or merge columns	Use the colspan attribute to span all the columns of the top table row so that you can use this row for your heading / title. For Example: <td colspan="2" style="text-align:center">	10
images folder	Copy, move, or save your portfolio images to the images folder.	10
<img src"=...> Adds an image to a Web page	Use the <img> tag (with the alt attribute) to add portfolio images to all the cells in the rows under the heading / title For example: <img src="images/ocean.jpg" alt="My Ocean View" />	20
Local hyperlinks to each page. Home \| Portfolio \| Resume	Insert a link to from index.htm to portfolio.htm. Insert a link to from portfolio.htm to index.htm. These are Web pages in the same folder, on the same site. For example: <a href="index.htm">Home</a> \|	10
By now you must have a Web site. FTP your files to your Web site. I will not grade this assignment if it is not on the Web.	See: 0ClassFolders/2820Web/1-FreeWebSpaceFTP.pdf
A Simple Sample Table Notice the indentation pattern of the <tr> and <td> tags. Because this table has 2 columns, notice how every <tr> has either two <td>s or a <td colspan="2"> Notice how the tags are "Nested." The <div> tags are nested within the <body> tags The <table> tags are nested within the <div> tags The <tr> tags are inside the <table> tags The <td> tags are nested within the <tr> tags (See colors at right to see the pattern of how tags are opened and closed.) You can copy and paste the code to the right directly into Notepad. Save it as TableDemo.htm. Double-click on TableDemo.htm to open it in your browser to see how it works. I will not grade TableDemo.htm. It is just for practice.	<body> <div style="text-align: center"> <table style="width: 80%; border-color: blue; border-style: solid; background-color:#FFFF99"> <tr style="background-color: #333333; color: white; font-weight: bold"> <td colspan="2"> <h1>My Portfolio Page</h1> </td> </tr> <tr> <td style="width:50%"> <img src="images/ocean.jpg" alt="Ocean View" /> </td> <td style="width:50%"> <img src="images/sky.jpg" alt="Sky View" /> </td> </tr> <tr> <td> <img src="images/garden.jpg" alt="Garden View" /> </td> <td> <img src="images/street.jpg" alt="Street View" /> </td> </tr> </table> </div> </body>
1. FTP your files to your Web site. 2. Copy and paste your URL into the Message portion of the [Assignment Dropbox] for this assignment.	Make your table portfolio.htm page look attractive, then FTP it to your Web site as well as the pictures which will be stored in the images folder on your Web site. You will add a Cascading Style Sheet and/or a Dynamic Web Template connection to portfolio.htm in a later project.
Home		Top