Session 1: Learn about and utilize basic CSS and HTML tags, including divs and tables, in a web calendar of the current year. Our assignment for the week is to create a 12 month calendar for the current year. Each month must contain all the accurate days for the month arranged in a table structure of columns and rows. The requirements for this exercise are as follows:

1. Use CSS to apply a typeface other than the default (Times Roman).
2. Include content besides day numbers (i.e. holidays, etc.).
3. Create borders WITHOUT using the table border attribute.
4. Create navigation to get to every month from any month.
5. Use CSS background images in some of the cells.
6. Use background colors to enhance your design.
7. Upload to your student webspace or comparable hosting.
8. Create a link to your calendar on your project portal page.

This assignment is due Week 3, Session 1.

Resources:
W3 Schools
HTML Cheat Sheet (an excellent html resource)
www.webmonkey.com (a comprehensive web development resource)

Session 2: Today we will be looking more carefully at tables to organize information in a grid, like a calendar. We will also cover some techniques on how to trick tables into being more flexible like using bgcolor and cellspacing to create a border, or using “colspan” within your table data cells to merge cells without days in the beginning and end of months (i.e. <td colpsan="4">&nbsp;</td>). Try adding images and/or text for holidays or birthdays. Also, use “width” and “height” attributes to line up the calendar days. Here’s an example month:

<table width="100%" height="100%">
<tr>
<th width="14%">Sunday</th>
<th width="14%">Monday</th>
<th width="14%">Tuesday</th>
<th width="14%">Wednesday</th>
<th width="14%">Thursday</th>
<th width="14%">Friday</th>
<th width="14%">Saturday</th>
</tr>
<tr bgcolor="#999999" height="20%">
<td colspan="2"> </td>
<td valign="top">1</td>
<td valign="top">2</td>
<td valign="top">3</td>
<td valign="top">4</td>
<td valign="top">5</td>
</tr>
<tr bgcolor="#999999" valign="top" height="20%">
<td>5</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td>
</tr>
<tr bgcolor="#999999" valign="top" height="20%"><td>13</td><td>14</td><td>15</td>
<td>16</td><td>17</td><td>18</td><td>19</td>
</tr>
<tr bgcolor="#999999" valign="top" height="20%">
<td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td>
</tr>
<tr bgcolor="#999999" valign="top" height="20%">
<td>27</td><td>28</td><td>29</td><td>30</td><td>31</td><td colspan="2"> </td>
</tr>
</table>

Note: The use of HTML escape sequences such as &nbsp; allows you to place special characters into your HTML documents. Less than (“<") and greater than (">“) symbols would not be available without using an escape sequence. View the link below for a complete list of HTML escape sequences.

HTML Escape Sequences

This weeks reading:
Speaking in Styles – Chapters 2, 3, and 4 (Pages 17 – 88)