Week 1
July 9, 2008 – 8:32 amSession 1: Learn about and utilize basic HTML tags, including 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 a typeface other than the default.
2. Include some 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 background images in some of the cells.
6. Use background colors to enhance your design.
7. Upload to the OLS or comparable hosting.
8. Place internet shortcut to your project on the dropoff drive under “John Keston:IM2420:<your name>:Calendar URL”.
This assignment is due Week 3, Session 1. Here are some tag definitions and example tags to work from. Remember to use the resources linked below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Basic Tags and Attributes</title> Body Tag and Attributes: <body bgcolor="#ffffff" background="image.jpg" link="#ff0000" vlink="#cc6633" alink="#cccccc">All page content goes here</body> HTML Comment: <!-- Type your comments here --> Headings, etc: <h1>Heading</h1> <h2>Subheading</h2> <h3>Subheading</h3> <h4>Subheading</h4> <h5>Subheading</h5> <h6>Subheading</h6> <center>Centered Information</center> <p>Paragraph</p> <b>Bold</b> <i>Italic</i> <u>Underline</u> (Can be mistaken for a link) <br />Line break <!-- Typefaces are usually managed with styles --> <font face="Arial, Helvetica, sans-serif" color="red" size="1"> Font Attributes</font> Ordered Lists: <ol type="1, A, a, I, i"> <li>list items</li> <li>list items</li> </ol> Unordered Lists: <ul type="circle, square, disc"> <li>list items</li> <li>list items</li> </ul> Image Tag and Paths: <img src="images/mugshot1.jpg" width="150" height="75" border="0" alt="Click Here to Contact Us" lowsrc="lowimage.gif" /> Relative Link: <a href="contact/contact_list.html">click here to view contacts</a> Internal Link or Anchor: <a name="linkname">Top of Page</a> <!-- Page Content ---> <a href="#linkname">Click here to go to the top</a> Absolute or Hard Link: <a href="http://www.startribune.com/news">click here</a> Table Tags and Attributes: <table width="600" height="300" border="0" bgcolor="#FFFFFF" cellspacing="1" cellpadding="1"> <tr> <td align="left, right, center" valign="top, middle, bottom" bgcolor="" colspan="" rowspan="">info</td> <td align="left, right, center" valign="top, middle, bottom" bgcolor="" colspan="" rowspan="">info</td> </tr> </table>
Required Reading:
Reading from Textbook: Introduction and Chapter 1 (pages 13-42), Skim chapters 2,3,4 (pages 43-79)
Online reading: XHTML Tutorial
Resources:
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"> </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 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.
Download: IM2420 Problem Set 1
1. All IM2420 problems are due by the beginning of class on the next day that the class meets.
2. Answers must be available via links on the OLS or comparable hosting and copied to the drop off drive.
3. Solutions to each problem set will be given during demonstrations on the day that they are due.
4. Grades will be collected during the solution demonstrations by an assigned classmate.