MONT 113G Homework 5

MONT 113G Homework 5
HTML Tables

Due Friday, February 24, at the beginning of class.

Goals

Write some more HTML
learn about the <TABLE> tag
To draw the calendar page for February, 2012

Editing a plain text html file

To edit your file, you will need a plain text editor. You will find directions for using a plain text editor here.

Background

Tables occur naturally in many contexts, but in HTML we use them for formatting purposes in places where they seem less intuitive.

To build a table, you use three different kinds of tags:

a <TABLE> tag and its matching </TABLE> tag
a <TR> tag (TR stands for table row) and a matching </TR> tag.
a <TD> tag (TD stands for table data) and a matching </TD> tag.

The whole table is enclosed by the <TABLE> tag and its matching </TABLE> tag. Each row is begun with a <TR> tag and ends with a matching </TR> tag, and each separate item is begun with a <TD> tag and ends with a matching </TD>.

Heres an example:

<TABLE>
  <TR>
    <TD> 1,1 </TD>
    <TD> 1,2 </TD>
    <TD> 1,3 </TD>
  </TR>
  <TR>
    <TD> 2,1 </TD>
    <TD> 2,2 </TD>
    <TD> 2,3 </TD>
  </TR>
  <TR>
    <TD> 3,1 </TD>
    <TD> 3,2 </TD>
    <TD> 3,3 </TD>
  </TR>
</TABLE>

Which produces

1,1	1,2	1,3
2,1	2,2	2,3
3,1	3,2	3,3

Tables can be used:

For aligning pieces of text on the page
For example, one way of placing a caption next to a picture is to put the caption and the picture in adjacent cells of a table.
For isolating text from surrounding influences
For example, one way of neatly centering a list is to put the whole list as an item in a table, like this:
```
  <CENTER>
    <TABLE>
      <TR>
	<TD>
	  <OL>
	    <LI> first
	    <LI> second
	    <LI> third
	  </OL>
	</TD>
      </TR>
    </TABLE>
  </CENTER>
```
which produces:
first
second
third
For controlling the placement of items on a page.

You can place a border around a table with a BORDER = command in the <TABLE> tag, like this:

<TABLE BORDER = "2">
  <TR>
    <TD> 1,1 </TD>
    <TD> 1,2 </TD>
    <TD> 1,3 </TD>
  </TR>
  <TR>
    <TD> 2,1 </TD>
    <TD> 2,2 </TD>
    <TD> 2,3 </TD>
  </TR>
  <TR>
    <TD> 3,1 </TD>
    <TD> 3,2 </TD>
    <TD> 3,3 </TD>
  </TR>
</TABLE>

Which produces

1,1	1,2	1,3
2,1	2,2	2,3
3,1	3,2	3,3

You can also add WIDTH = and HEIGHT = commands to <TABLE> and <TD> tags.

The data inside a <TD> tag can be anything, in particular tables can be nested inside other tables.

Procedure

For this assignment you will use HTML to draw a calendar page for the month of February.

You must write in HTML; don't use a web-page editor. Indent your code so that it's not too hard to read and grade.

Centered at the top of the page will be the words "February 2012" in large print.
The days of the month will appear as five rows of seven boxes per row. Each should be at least 1 inch by 1 inch, so there's room to write on a printout.
A heading above each column of boxes will indicate the day of the week,
For each day, a large number telling the day of the month will appear in the upper right-hand corner of the appropriate box.
For Sundays and President's Day (February 20) the date will be printed in red; all other days should be in black.
At the bottom of the box for President's Day, the words "President's Day" should appear. (You can use a nested table to position it.)
Indicate the phases of the moon on the proper dates. For February the full moon was on February 7, the last quarter was on February 14, the new moon will be on February 21 and the first quarter will be on February 29. Use the images below to indicate the phases (Note: they are being displayed here in a small size using the WIDTH attribute in the IMG tag to set the width of the image to 20)

full moon

firstquarter moon

lastquarter moon

new moon

A quick glance at almost any calendar will give you a clear idea of what each of these will look like.

What to turn in:

A cover sheet.
A printout of your calendar page.
A printout of the HTML that generates the calendar page.
Email a copy of the html file to me at croyden@mathcs.holycross.edu