December 15

posted Dec 15, 2011, 9:10 AM by Peter Knowles   [ updated Dec 15, 2011, 1:38 PM ]
Happy New Year!... (Almost)

Today we're going to get ready for the coming year by working as a team to build a calendar for 2012. 

Each of you will be responsible for making a web page for a different month, using HTML table to show the month in a traditional calendar format, and using CSS to style various aspects of the table. 

A few important details:
  1. Make sure you know what month you are doing, what the first and last dates of your month are, and how many dates are in the month preceding yours. (You can look it up anywhere you want)
  2. Make sure you name your CSS class elements the correct names. You are encouraged to choose differences in many of the style elements available to you (text, background and border colors; font-family, size, decoration and style; pseudo-class elements, etc.) BUT you MUST name the elements as shown below.
So, let's get started.

You need to create an HTML table with 7 columns and at least 5 rows (depending on how the dates in your month play out you may need more).

STEP 1: CREATE YOUR TABLE
Here's some code to get you started:

<table class="clmonth" summary="Calendar for month name 2012">
  <caption>Month name 2012</caption>
  <tr>
    <th scope="col">Monday</th>
    <th scope="col">Tuesday</th>
    <th scope="col">Wednesday</th>
    <th scope="col">Thursday</th>
    <th scope="col">Friday</th>
    <th scope="col">Saturday</th>
    <th scope="col">Sunday</th>
  </tr>
  <tr>
    <td class="previous">31</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

Notice that the code above contains a number of CSS element names:
"clmonth" names the table
"col" names the column titles
"previous" names a table cell containing a day from the previous month
When you create the CSS for the page, you MUST NOT change the names of these elements, but you will add styles and other features to them, such as:

.clmonth {
border: 3 px solid #ffffff;
border-collapse: collapse;
width: 780px;
}

or 

.clmonth td.active {
background-color: #B1CBE1
color: #2B5070;
border: 2px solid #4682B4;
}

But DON'T change their names (Did I already mention that?)

STEP 2: ADD TO / MODIFY YOUR TABLE AND CONTENTS TO FIT YOUR MONTH

The table you created with the code above only makes enough days for the first 6 dates of the month. You need to create more table rows to accommodate all the days in your month, plus enough dates from the previous and the next month to fill out the seven day weeks. Now is when you'll need a calendar for your month (and you'll need to know how many days are in the month before yours). 

Create enough new table rows to make your entire table big enough for all the dates you'll need. Copy the code for your second row in your original table (below) and paste it multiple times to give you the number of rows you need. Make sure you keep it all within the <table> tag.

 <tr>
    <td class="previous">31</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>

STEP 3: CHANGE THE DATES

3A) You now probably have 4 or 5 identical rows in your calendar, which doesn't make a lot of sense. You need to change the numbers inside the <td> tags to run sequentially through your month. MAKE SURE you get the right starting date --- or you'll have to do it all over again. (So if the 1st of your month is on a Thursday, make sure you start with the code <td>1</td> in the right location. Check your code in a browser before you get too far. If it looks right, continue on through the code until you reach the last date of your month.

3B) Once you have all of your dates entered correctly, you need to finish off the rows by starting over at 1 at the bottom of your code until you run out of <td> tags. These numbers (after your month runs out) represent the next month. Then return to the top of your table code and go to the <td> tag BEFORE your month's number 1. Count backward from the last day of the previous month, and work backward up your code, until you reach the end. These numbers (appearing before your month begins) represent the previous month. 

3C) You'll notice in the code above that the table row begins with this code:
<td class="previous">31</td>
The reason this particular cell has a class ("previous") is so you can style dates outside your month differently than dates within your month. You need to make sure that all the <td> tags for dates before your month begins have this class included.

Similarly, you need to add the HTML code class="next" for all the <td> tags that are part of the next month. When you're done, they'll look just like the <td class="previous"> you just created, except they'll say "next" instead of previous, and they'll be numbered up from 1. 

STEP 4: CHANGE YOUR SUMMARY AND CAPTION
At the top of your HTML code is a table summary and table caption. Rename these to reflect your month. 

<table class="clmonth" summary="Calendar for month name 2012">
  <caption>Month name 2012</caption>

Take a look at your calendar. 
It may not look like much yet, but just wait until tomorrow when we apply the CSS styles to it. 

For now, just admire your work. 
Rest on your laurels. 
Brag to your friends and classmates about your awesome coding skills. 

Oh yeah; and don't forget to share your work with Mr Knowles before you go. 

ċ
calendarnocss.html
(1k)
Peter Knowles,
Dec 15, 2011, 1:33 PM
Comments