We finished chapter 2 on HTML. See the links page for further resources on HTML. Next week we will meet in the classroom, and talk about Cascading Style Sheets, Evaluation of web-pages, and, maybe, start on JavaScript programming.
If you need a refresher on absolute and relative URLs, check out the web-diner tutorial.
1. [More HTML, 40pt] In the lab we modifed the file poets.htm and ended up with an improved version, newpoets.htm (if you want to redownload these files, remember to right-click them and use "Save Target As"; don't use the IE Save As function, since it will mess with the html code). In this exercise, you will extend this page as follows:
At the top of the page you should have a table
of contents which consists of four pictures of the poets next to each other;
clicking on the picture of a poet should take you to the section belonging
to that poet. Use a table to layout the pictures next to each other. Also,
below each of the pictures you want a caption with the name of the poet.
The layout should look something like:
Hint: use a separate table for each picture/caption and then combine them into another table with one row and four columns (maybe use additional columns to keep the pictures apart. Play around with the tables to get a pleasing layout. Start with the one-row/four-column table to lay out the pictures and then add the captions.
Turn the pictures of the poets in the four sections (not the pictures in the table of contents) into thumbnails; that is, clicking on the picture should take you to a new web-page which displays the picture at full size, and has some explanatory text about the picture. (This means four additional pages. They can be short.)
To each section add a short biography of the poet (you can take this from any source you like, but add a link to your source at the end of your page).
Fix the layout of each section; that is, find a way to present the biographical information, the picture, the title of the poem, and the excerpt from the poem in an attractive way. Use tables to do so.
Note: As usual, part of the credit will be for presenting the page in an attractive, readable way, and writing correct html (in particular, your tags have to match, and have to be all lower-case).
2. [homework.html, 5pt] Remember to place your homework in the hw3 folder, and add a link to it on your homework.html page.