CogSci 3 Assignment 3a-- XHTML Tables
Due Saturday, October 24th, 2009 11:59pm

Note: if you can locate a copy of

The Web Wizard's Guide to XHTML, Cheryl M. Hughes you should read chapters 4 and 5. We are going to try to give a synopsis in lecture.

Goals

  1. Work with XHTML tables
  2. Learn how to create table rows and columns
  3. Learn how to include images and pictures in Web pages
  4. Work with Hyperlinks -- create links with the <a> element

The content of this work is creative while the structure of the page should follow the directions in this assignment.

Note: if you wish to use a home PC or Macintosh, you should use Netscape, or Firefox to view your work, as we will use one of these to grade. (They all render pages with the same engine.) If you elect to use Internet Explorer instead of these recommended browsers, you do so at your own risk since it has a tendency to display HTML differently.

The <table> Element

You may wish to review the lecture notes on the parts of an XHTML table.

  • Tables in XHTML resemble a grid, much like those in Excel.
  • The main part of the table is made up of rows and columns.
  • The <table> element is used to define a table.
  • The <tr> element is used to define the rows of a table
  • The <td> element is used to define the columns in a given row. 
      <table>
      
          <tr>
         
              <td> row 1, col 1 </td>
              <td> row 1, col 2 </td>
            
          </tr>


      </table>

Getting Started ...

  1. We're assuming that you will use NotePad++ to do your editting again. You can either start up NotePad++ now and start entering your XHTML from scratch, or you may wish to use this boilerplate as a starting point. To use the file, either
  2. Recall that anything in between <!-- and -->are considered to be comments in XHTML and are not interpreted by the browser.
  3. Insert the following comments:

    <!-- Working with tables in XHTL -->
    <!-- My name is: Stu Dent
    my COGS3 account number is: cg3xzz -->
  4. Create an appropriate title for this assignment

In the <body> of your XHTML document, define a table with 3 rows and 2 columns.

  • you will need the <table border="1"> ..... </table> element (notice, the border="1" attribute in the open table tag? -- having a border (here with a width of 1 pixel) will enable you to distinguish your columns and rows much easier.
  • within the table element, you will need to have one <tr> ... </tr> pair for each row.
  • within each <tr> (table row) pair, you will need to have 2 sets of <td> ... </td> elements to represent each column.
  • the <td> ... </td> elements define the content for each column (table cell) from left to right across the row.
Hint: type in the tags for the <table> and </table>. And then the XHTML comment and the code that creates the first row. Then save it and view in a browser like we describe below. Once that works (a table with 1 row and 2 columns), just copy and paste the comment and row definition twice and change the numbers from 1s to 2s and 3s.
  • Once you have typed in the code for your table, you should save your work, and then open it in a browser.
  • The name of the completed project needs to be: table-cg3xzz.html. (If you are working on campus, you can save directly into the hw3 folder using the "Class Resources".)
  • Start up a browser (presumably: Firefox)
  • Then use File->Open File and navigate to your page to view it
  • It should look pretty much like the figure below. If not, you have bug in your XHTML and you need to figure out what it is before preceding.

Put in a <h1> heading above the table

See the previous XHTML assignment for a description of the basic formatting elements.

The heading should say: "First Table: 3 rows with 2 columns"


Formatting your schedule.

Follow the example above and create a table that represents your current schedule.

  • the <h1> heading should say: "My Summer 2009 Schedule"
  • There should be at least 4 rows
  • There should be 6 columns (one for Time and 5 for the days of the week)
  • Make sure that your table has a border that is at least 1 pixel wide
  • Your document should look something like this: (see image below)

Add a Hypertext Link to your COGS3 class on your schedule.

The anchor element <a> .... </a> element in XHTML is used to create hyperlinks. The <a> .... </a> element consists of 3 parts:
  1. The <a> .... </a> tags
  2. A required href attribute which has a value of a URL. The URL can be either absolute or relative. Relative to what? To the folder that contains the document with the link. That is, if index.html contains a hyperlink:
    <a href="vacation.html">My Vacation</a>
    Then vacation.html needs to be in the same folder as index.html.
  3. And a clickable part which can consist of text or images.
For this part of the assignment, you will need to add an absolute link to the COGS3 webpage to your COGS3 class in your schedule above.
The link should be inside your <td> tags associated with your COGS3 class.

Insert your mask-cg3fyy.jpg image from the Photoshop assignment

The image element is an empty element. <img />. It is considered to be a linking element, much like the anchor element (<a> ... </a>) that was used in the previous portion of this assignment. Unlike the anchor element, the image element does not require the user to click the image in order for the image to be seen.

Your flower should not be moved from hw2 directory -- your image link should point to it in hw2.

Note: Firefox does not display the alt attribute when you hover the mouse over itfrown, while IE does. Firefox will display the contents of a title attribute when you mouseover (as will IE). So if you want the mouseover behavior, feel free to add a title="..." attribute to your <img> element. It can even have the same text as the alt= attribute. You must have an alt attribute though.

Add another <h1> heading

The heading should say: My Flower from HW 2

The completed assignment image:

 

The "Turn in" folder: hw3 & save your file as: table-cg3xzz.html

Once you are satisfied with your work, and you are working in one of the ACS labs, you are done (since you have been saving your work in your hw3 folder in your "Class Resources").

If you are working at home, you will need to use Filezilla or Fugu again to create the hw3 folder and then upload your work. Be sure you come into an ACS lab and log into Windows and verify your work by using Firefox to open your files.

Extra Credit!

There are 2 possible extra extra credit parts. If you are going to attempt either, create a copy of your table-cg3xzz.html page and call it table-cg3xzz-EC.html. This is what you will do the extra in (and turn in, of course).
  1. If you were to copy your assignment page into your public_html directory and then try to view it on the internet at: http://icogsci1.ucsd.edu/~cg3xzz/table-cg3xzz.html the image would not appear. If you know why,
  2. Keeping the files on your website organized is important. One way to do that might be to have all of your images in an images folder.
Turn in the extra credit page to your hw3 folder.

How We Will Grade

You will be graded on having your table page, with the correct XHTML.
Original ©opyright 2008 October 21, 2009 Mary ET Boyle
Modified: November 2007 mrw