Due before midnight, Thursday 15 Mar 2007
In this assignment you will be creating 2 CSS style sheets and pages to demonstrate them. You should validate both the HTML or XHTML and the CSS pages.
Remember, I've put template HTML and XHTML files on the web.
Feel free to use them as starting points.
As requested in class, here is a page that has color names with samples and hex values: http://www.w3schools.com/html/html_colornames.asp
Make a folder called hw05. Inside it create 2 subfolders, pages, and css.
If you decide to add in images and thumbnails, also create images, and thumbs and use them as we did in the previous assignment.
I want you to come up with 2 color schemes and create CSS files that demonstrate them. One of them has a pre-set theme, and you are to come up with your own for the other.
Oberlin Colors: I believe the official colors for Oberlin are "Crimson" and "Gold". You are welcome to interpret these to your liking as I've seen so many different colors used in Oberlin advertising. I've also seen a reference that the original colors were "Cardinal Red" and "Mikado Yellow" if that helps.
Incorporate both of these into a single style. Complement these colors with neutralish colors like white, off-white (maybe with a hint of one of the main colors), and maybe some black
Here are some ideas for your free form choice of style:
You can also find ideas at some of the following sites:
However, I don't just want you to just come up with a random color scheme. You should organize around a "theme" of some sort such as those above. I want you to include a description of that theme in a comment at the start of your CSS files along with at least your name.
Recall that to create a comment in CSS you enclose it in markers:
/*
This is an example of a CSS comment.
*/
You will need to do at least the following for each style sheet (and demonstrate them in the HTML page):
You might want to use the special background-color transparent to un-color a background.
Recall that we discussed that CSS rules are composed of three components:
And look like this:
p {
color: #0000FF;
background-color: #FFFF00;
}
And a class can be done like this:
p.reverse {
color: #FFFF00;
background-color: #0000FF;
}
You only need to use the properties color and background-color.
For a small amount of extra credit, create rules for nested structures. You do this by listing two selectors next to each other (without a comma).
.reverse em {
/* your style here */
}
Which is a CSS rule that applies to <em> tags inside anything that is in the reverse class.
em em {
/* your style here */
}
Applies to nested emphasis tags, and so forth.
You can also try out some other types of selectors such as children, sibling, etc. See pages 640-641 in "Head First HTML".
You need to create 2 pages, one for each color scheme. Put the HTML file in your pages folder. and the accompanying CSS file in the css folder.
For sanity's sake, let's use this naming convention. Both files have the same prefix and differ in suffix. So you should have:
You can put anything you would like onto these web pages. However, you'll make it easier to grade if you include descriptive text explaining each part. (E.g., this is emphasis text and this has strong emphasis).
You can also generate random text to help fill out your page using the Lorem Ipsum generator.
Now you need to create an index.html file in your hw05 directory. Include in it links to to the 2 pages you created. You can style this with CSS if you want.
If you followed the Honor Code in this assignment, insert a paragraph attesting to the fact within this file as well.
I affirm that I have adhered to the Honor Code in this assignment.
Update your index.html file in your csci100 directory with a link to this assignment.
Be sure all (X)HTML files are validated as either 4.01 Strict or XHTML 1.0, and all CSS files are valid CSS.
Upload, set permissions, and so forth. You now just need to electronically handin all your files.
If you are using Terminal you can just do this as one command:
ssh username@cs.oberlin.edu handin -c cs100 -a 5 www/csci100/hw05
Wow! Web pages in Wonderful color!
