Assignment 2

This week we learn about CSS box properties.

Tip:

Keep in mind that padding adds to the total width of your element. For example, if you had specified that the element should be 100 pixels wide, and you had a left and right padding of 10 pixels, then you would end up with 120 pixels in total.

100px (content) + 10px (left padding) + 10px (right padding) = 120px (total width of element)

Margin, however, expands the box model but does not directly affect the element itself. This tip is especially handy when lining up columns in a layout!

Preparation:

Text: Chapter 10 - Getting Intimate with Elements: The Box Model

CD:: View lesson 2 (optional). Omit the section on CSS shorthand until lesson 3.

XHTML Template: Remember that you should start all your web pages with a standard format. Below is code that you should copy and use as your template.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Place a title here</title>
    <link type="text/css" rel="stylesheet" href="yourcssfile.css" />

  </head>

  <body >
    
content, content, content ...

    <p>
        <a href="http://validator.w3.org/check?uri=referer"><img
            src="http://www.w3.org/Icons/valid-xhtml10"
            alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
    </p>

  </body>

</html>

For Credit:

Use box properties and other CSS properties to style an HTML document -- 40 pts.

Develop an HTML page named a2.html and use a "link" element to link it to a stylesheet named a2.css. This will be a standalone page that you will not need to incorporate into your website project unless you want to. In addition to any other rules and properties that you want to include in your stylesheet, you must do the following:
1. (5 pts) Use the line-height property in a CSS rule.
2. (20 pts) Develop a "box model" rule for some large block element in your web page (but not the body element). Give this element an id. Use all of the following properties in a single rule:
  - padding
  - margin
  - border-style
  - border-color
  - border-width
  - a side-specific padding property, such as padding-left
  - a side-specific margin property, such as margin-left
  Each property that you use must have some visible effect on your page.
  Note that when I say (for example) to use the border-style property, that means you must use that exact property (not border or border-top) to produce the desired effect.
3. (15 pts) Demonstrate the background-image, background-position, and background-repeat properties in a single CSS rule. Note that your background-image must be stored on your student server account and that the url you provide must use a relative path (not a complete URL).
  
  Again, don't use the shorthand "background" for now. Use the exact properties I have listed.
Each of your webpages must include a W3C validation icon for XHTML 1.0 Strict at the bottom. You should use the W3C validator to check your XHTML code and your CSS code. Links to these validators are on the Links page. Note that points will be deducted from your score for each error in your XHTML or CSS code.

Upload your webpage and css file to the server. Upload them directly into your public_html folder, not into a subfolder.
Take quiz 1 on lessons 1 and 2 - 30 pts.

Quizzes are open books and open notes but you must not talk to anyone or use your computer for anything except to take the quiz itself. There is no time limit. You will only get one attempt. If you load the quiz more than once you will receive a 0.

Note: you will be required to enter your CATE username and password. This will be the username and password that you chose at the beginning of the course when you checked-in, NOT your username and password for the student server. If you can't remember your username and/or password, go to the CATE password reminder page to have them emailed to you.

quiz 1
Participate in the lesson 2 discussion - 5 pts.

Post a message on the "Lesson 2 discussion" topic of our message board. Make sure you find the topic with this title that was authored by me. This could involve asking a question, answering another student's question, giving an example of something that you struggled with and then overcame (or didn't!), giving an example of something you found particularly cool, or any other constructive way you can think of to participate. In the "Name" field the first word MUST be your student server username; after that you can type your real name to make it more personal. Contributions of just a few words will not receive credit.

Do not post any new topics on the message board. New topics that are created by students will be deleted.

Your Website Project:

Rather than having you wreck your website project each week trying to incorporate everything you learn, you will demonstrate your mastery of concepts each week on a page that is not a part of the website you are developing. Your website project will be due the last week of class.

I am not giving you specific instructions as to how to develop your site, and I know that many of you will want to continue development of the sites you started in the A class. You have complete control over what CSS you use in your web sites, and you don't need to use everything we learn in this class. All pages must validate, however, and you should try and get your site looking as good as you can get it. Also, please check out the good web design and further website project requirements page.

Designing Web Pages 2

Assignment 2

Tip:

Preparation:

For Credit:

Your Website Project:

Stay in touch!