Introdution to Computer Programming

Homework 3

In this exercise you will learn how the style properties of web pages can be altered with what are known as "Cascading Style Sheets" (CSS).

Preparation

Imagine that you have been hired to do some design work on web page for a new bakery. The owner of the bakery has already created a rough outline of what the web page should look like, but you are going to make style adjustments to the page by editing the CSS file that is used by the page.

To get started, download to your computer the page BourbackiBakery.html, and download all the images that appear in that page. To download a copy of an image from just about any web page you can right-click on the image and select "Save Image as..." or something similar. For this particular web page you can also visit the "images" subfolder of the server and download each image individually. No matter how you download the images, you should create a subfolder of your htdocs folder which is named images and put the images there. They need to be in a subfolder of that name because that is where the page gets them. (You can see this if you look at the source code of the page and look at the ing tags.)

The net result should be that when you open the local copy of the page (the one on your hard drive, not the one from the server) it should look exactly like the one from the web server.

Assigntment

To complete tthis assignment you will edit the file Bourbaki.css (using Notepad or TextEdit) and make changes to the style sheet for the web page. For each change listed there is a hint in [square brackets] for which CSS property you will need to add or change. The end result of your changes should be:
  1. Make the font larger for the main title, "Bourbaki's Bakery," which uses an H1 tag. It should be at least 72pt high. [font-size]
  2. Make the font used for the main title a sans-serif font. [font-family]
  3. The font used in the text of the page should be the browser's default font, which is not a sans-serif font. (This means you cannot change all the fonts on the page to sans-serif.)
  4. Make the space below the main title, between the title and the main image, only 3pt. [margin and padding and their variations]
  5. The "super-title" above the main title, which reads "Welcome to" and uses an H4 tag, should use a font size of 24pt. [font-size]
  6. The super-title above the main title should use a sans-serif font. [font-family]
  7. The space between the top of the super-title and the top of the page should be no more than the size of the type for the super-title. [margin and padding and their variations]
  8. The space between the bottom of the super-title and the top of the main title should be no more than half the height of the super-title. [margin and padding and their variations]
  9. Each of the four main blocks on the page are div's of class "halfblock". The titles of each of these should be in a sans-serif font. [font-family]
  10. Underline the titles of just the lower two halfblocks, the ones for the specialities and for brunch. [text-decoration]
  11. The borders around each 'halfblock' should have a width of 4px. [border-width]
  12. The borders around each 'halfblock' should be grey, not black. [border-color]
  13. The borders around each 'half block' should have rounded corners, with a radius of 25px; [border-radius]
  14. In the listing of opening hours, there should be extra white space between the weekday hours and the "Saturday/Sunday". Make this at least 6pt; [margin-bottom]

Submission

The file you will submit for this assignment is the style file, not the HTML file. You have to be careful, because while you've been working on the assignment the file has been named Bourbaki.css, but to submit the file you need to change the name to use your name and the assignment number. Or you can make a copy of the file using the new name. The name of the file for this assignment should be your first name, followed by your last initial, followed by the two digits "03". The file extension should be ".css". So, for example, a student by the name of Sophie Germain would make a copy of the file called "SophieG03.css" and upload that to the website.

To submit your assignment you should print a copy of the "output" (what it looks like in a browser), and a copy of the style file. Staple the two together, with the output page on top, and put your name on the top of the first page.

You should also upload the personally named copy of your style file to http://www.EricMyers.com/student/dla/upload_hw.php