Use of CSS for website development

Client: Orinoco Chocolate

Site content in content.txt

Adding more content to the framework

The next several steps require you to add content and HTML to the site, but no changes to the CSS are made until the next exercise. Thus you are only editing your HTML file for the next set of steps.

Adding more content

Add the content area content from the text file (content.txt). Place the paragraphs in paragraph tags and insert the image. The cocoa image is in images directory (Cocoa.jpg). The image tag should be placed in the first paragraph before the sentence 'Cocao trees will grow...' and should have the class 'illus' and a title 'Cocoa pods in various stages of ripening' along with appropriate width and height settings. Save your HTML and view the result.

The resulting page should be very similar to the following image:

Add the sidebar information for Chocolate-of-the-Day. Insert a paragraph with the corresponding text and insert the image after the paragraph. The chocolate image is in images directory (Cocoa.jpg). The image tag should have the title 'Chocolate of the Day' along with the appropriate width and height elements.

The resulting page should be very similar to the following image:

Add the sidebar archive calendar. The title post archive use a heading 3. For the calendar itself use a table with cellspacing of two (2). Use the caption tag for the title December 2007 inside the table. For the days of the week, use table heading rather than table data. For each of the days as well as the day of the week cells use the appropriate class - sun, mon, tue, wed, thu, fri or sat. Thus every cell related to Thursday in the calendar will have the class thu associated with it. By setting the classes in this way, you will be able to set styles to influence columns. As with the rest of your HTML work you should be indenting correctly to help with your coding as well as future maintenance.

The resulting page should be very similar to the following image:

Add the sidebar search form. For this form the id is 'search', method post and the action 'somescript.scpt'. The textbox needs the class 'text' with no default value.

The resulting page should be very similar to the following image:

Add the masthead navigation as an ordered list with links to all but the current page. The overall list needs the id 'navlinks' with the first line item having the class 'first' and the last line item having the class 'last'.

1. about us
2. about cocoa
3. production
4. drinking & eating
5. products
6. contact us

December 17, 2007

Also add the date as a paragraph with the id of 'today'.

The resulting page should be very similar to the following image:

Now you have the content all on the page. We can begin styling it to make it look as the final version.  Please demonstrate your page to this point to your instructor to receive credit for this portion of the assignment.

The next step: Styling the page (CSS_Exercise_4.html)