MAT 125: Web Design 1: Fundamentals : EXERCISES

Exercise 7: Tables & IFrames

This exercise covers the use of tables and iframes. Tables were initially developed to hold data, moved on to hold complete webpages and have now gone back to being used for data again. Iframes have a multitude of interesting uses, including being used for online ad placement - or for holding Google maps and YouTube videos.


Read Lecture sent by email (also posted in Canvas)
Read in Text Book: Chapter 8: Tables

By Due Date:

Create a minimum four HTML pages using Brackets. Save into your folder - Ex7.

Folder Name: Ex7

Opening Page Name: index.html

Have All Pages Link Together

Post your questions online or email them to me


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