MAT 125: Web Design 1: Fundamentals : EXERCISES

Exercise 7: Tables & IFrames

In this exercise we will build tables to organize data. A place for everything and everything in its place! We will also use an IFrame that can hold a multitude of information in one small spot.


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 with several returns or br tags used, an image in a third. 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.


Exercise Seven 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

Evaluation

This exercise is worth 30 points.

Coding (6)
Functionality (6)
Meeting project requirements (6)
Your effort (6)
Creativity (6)


Due Date

Text Reference

Online Demos