This page contains the materials needed for Internet Technologies
- COIN 65 taught by Sandi Watkins.
View the forum for updates and announcements. View my blog for the same!
View the forum for updates and announcements. View my blog for the same!
Homework 3A (5 points)
Due Date: Wednesday January 31, 2007 by 10:00 PM (week 4)
This homework will give you practice in creating an external stylesheet, DIVs, IDs, Classes and Pseudo classes.
Guidelines
- Use (and know) the XHTML Basic Template found on the COIN 65 Resources page. Be sure to use the XHTML 1.0 Strict Doctype.
- Validate your work using an HTML validator (see Resources page)
- Put any images into a folder called images.
- Write your own code. This pertains to this assignment and any other you receive in this class. Do NOT use our (or anyone else's) code. If you do, you will fail the assignment. If you have any questions about this, see the Foothill Honor Code and/or contact me.
- Be sure to test your work. We will be testing and grading your work in Firefox, Netscape 7.X and/or Safari. We strongly suggest you upgrade to the most recent browser(s).
- Do NOT name any file you upload this quarter index.html. We need to be able to look in your directory and see the files and dates/times the files are uploaded.
Specifics
- Open the document HW_3_data. View the source and
copy and paste into a new document named homework_3a.html located in a
folder named week_3
This document contains all of the markup and specifies styles associated with a tag. You just need to create the stylesheet so it displays properly. - Create a new linked external style sheet and style the tags as specified below.. Name this file homework_3a.css.
- Upload your week_3 folder to the server and test it.
- Follow the guidelines below to style your document.
- Upload your week_3 folder to your CTIS web space and then test and validate your files.
- Create a link on your home page to this assignment.
| Tag | Style |
|---|---|
| body | Set a background color, you decide. Set a color, this is up to you. Set the left and right margin to at least 25 pixels. |
| header DIV | Create a DIV named "header" which contains the header information. This is indicated in the source with comments. |
| header DIV | Content in the header should be centered. Set a border bottom of your choosing You can use a margin/padding and line height if you want |
| Header links | Define all 4 pseudo classes for links within the "header" DIV. The links in the header should look different than the links in the "content" div below. Use a text-decoration of none for normal links and on rollover show the underline in a different color. |
| content DIV | Create a DIV named "content which contains the main text on the page. This is indicated in the source with comments. |
| h3 "content" headings | Set a color- I used #900, you decide italic |
| p tags in the "content" DIV | Set a left and right margin left of 25 pixels. These paragraphs should be indented in from the H3 headings. |
| Create a P child selector for p tags which follow H3 tags. | Make the first line of paragraphs following an H3 heading bold, italic and small caps. Define a different color for the first line than for the rest of the P. |
| Content Links | Create all 4 pseudo classes for the links inside the content DIV. They should be styled differently than the links in the header. |
| Create a generic class named quote. | Set a left margin to indent the quote. You may also want/need to set the padding. Set a different color for the text and make it italic. Set a wide border on the left side. |
| content EM | Make it bold and a different color. |
| bigLetter class | Define a "bigLetter" class to make the first letter in the last paragraph appear as
a drop cap in a different color. Using line-height might be useful for line spacing (if required?) |
| footer DIV | Create a DIV named "footer". This is indicated
in the source with comments. Text is centered. The color is up to you. Set a top border... you may want to set the margin top and or padding top to help with the spacing. |
Example
Here is an example of what your completed file might look like:
