MAT 125: Web Design 1: Fundamentals : EXERCISES

Exercise 6:
TABLES & IFrames


In this exercise we will build tables to organize data. A place for everything and everything in its place!

HTML Elements

  • <table> </table>
    • border="pixels"
    • width="pixels"
    • cellpadding="pixels"
    • cellspacing="pixels"
    • bgcolor="#xxxxxx"
  • <caption> </caption>
  • <tr> </tr>
  • <th> </th>
  • <td> </td>
    • rowspan="# of rows"
    • colspan="# of columns"
    • align="x"
      • left, right, center
    • valign="x"
      • top, middle, bottom
  • <iframe> </iframe>
    • align="x"
      • left, right
    • width
    • height
    • name
    • frameborder
    • src

CSS: Border Styles

  • <style> </style>
    • type="text/css"
  • table {property: value;}
    • border-style: n;
      • dotted, dashed, double, groove, ridge, solid, none
    • border-color: x;
      • hex code or color name
    • border-width: x;
      • pixels or thin, medium, thick

Exercise Requirements

  • This is a multiple page exercise!
  • Create at least 6 tables exploring how all the different tags and attributes can be used. MORE is better. Use different variables and sizes. Mix up the amount of content in the table cells so the alignments will be visable - which means I want to be able to see that you used left, right, center, top and bottom, without looking at the code.
  • Create one page with an iframe. Use thumbnail and larger images or text links to HTML pages or a mix as links to appear in the iframe. You can also have your other exercise pages appear in the window.
  • Use CSS classes to try all the different border styles.
  • For content, you can write about what each tag does or make up your own creative content.
  • Link all pages - name the opening page of the exercise index.html

NOTE: be sure to add varying amounts of information in the cells so valign will work. One word in one cell, a long sentence in another, an image in a third. Plus there must be an original src file in your iframe - no blank iframes AND there must be additional links that can be clicked to appear in it.

Images

  • optional - but nice
  • the background attribute can be used in the table, tr and td tags. background="image.jpg"
  • Use CSS to add background-images to your tables or cells.

Design Process and Final Presentation

  • Create a folder titled "Ex6"
  • Create as many HTML documents as you need. Name your first page index.html. Link all pages.
  • Add text, images, links and tags as needed.
  • Save all HTML docs and images in your project folder.
  • Review your work in a browser before uploading to the server
  • Upload your Ex6 folder with your HTML documents to the school server and view them in a browser.

Evaluation

This exercise is worth 30 points.

  • Coding (6)
  • Functionality (6)
  • Meeting project requirements (6)
  • Your effort (6)
  • Creativity (6)
  • Points will be deducted for late work
EXERCISE 6 GRADING RUBRIC
Item/Points 1 - 2 3 - 4 5 - 6
Coding Some Most All correct
Function Some Most All
Requirements Some Most All
Effort Minimal Basic Requirements Above & Beyond
Creativity Minimal Some Above & Beyond

Due Date

Text Reference

  • Chapter 8
  • Review Lecture in Course Content on Blackboard

Online Demos

  • Demos for Exercise 6
  • Exercise 6 TAGs and Attributes defined

<< .. Go to .. Home .. Class Demos .. Previous Exercise < .. > Next Exercise .. >>