CogSci 3 Assignment 1 -- XHTML - Part 2
Due Saturday, October 10th, 2009
(11:59pm!)
If you have access to
The Web Wizard's Guide to XHTML, Cheryl M. Hughes
you should read Chapter 3.
We will cover the material in lecture.
You should definitely review the lecture notes on XHTML, especially
the one on CSS.
Goals
- Introduce style sheets with XHTML document
- Create a simple style sheet
- Understand the syntax of selectors and properties
- Link the style sheet to into the XHTML document
Again, as in Part 1, this assignment will be graded by viewing
your final web pages and by viewing the XHTML and CSS "source" for them.
The content of this work is creative while the structure of the page should follow the directions in this assignment.
Note: if you wish to use a home PC or Macintosh, you should use
Firefox, or Mozilla to view your work, as we will use these to grade. (They all render pages with the same engine.) If you elect to use Internet
Explorer instead of these recommended browsers, you do so at your own risk since it has a tendency to display HTML differently)
The <link ... /> Element
- Linked Style Sheets are stored in
a separate XHTML document.
- The <link /> element is used to define the location of the style sheet document and that it contains CSS styles.
- The URL for the style sheet maybe either relative
or absolute.
- It must be contained within the <head> ... </head> element of your document.
|
<link rel="stylesheet" href="1-cg3xzz.css" type="text/css" /> |
- note that the <link /> element is an "empty" element.
|
-
|
There are many types of CSS properties:
- Font Properties -- You can define the type of font family, or size, or weight.
- Text Properties -- This works a lot like the paragraph style that you used in the word assignment -- you define the layout properties (vertical spacing and alignment.)
- Color -- One define the color of your background or text or links visited.
- Table properties -- One can define margins, padding, height, width, and color options when creating tables.
Create a style sheet for your first XHTML assignment.
- Start NotePad++ and open a new file.
- Anything in between /* and */ are considered to be comments
and are not interpreted by the browser.
- Insert the following comments:
|
 |
This is my first style sheet
My name is: _____________
my COGS3 account number is: ________ |
Make all of your list items (<li> ... </li>) in your ordered and unordered lists blue.
| CSS rules have two parts: a selector and a set of property declarations that define the style that will apply to the selector. |
If we want to make all of the list items (in an ordered or unordered list) blue, then we use li as the selector and we use the color: blue; as the property and the value.
Notice that the property and the value are surrounded by braces: { and }.
If there is more than one property, they must be separated by a semi-colon. For example:
|
 |
Make the definitions <dd> element in the Definition Lists courier, smaller, and red. |
Follow the example above and use these properties and values to change the appearance of the definition associated with definition lists in your XHTML document from part 1 of this assignment.
- dd is the selector
- font-size is the property and 10pt is the value
- color is a property and red is the value
- font-family is the property and courier is the value
|
Save your CSS file in your hw1 directory as: 1-cg3xzz.css
Add the <link ... /> element to your XHTML part 1 file: cg3xzz-favorites.html
- Open your cg3fzz-favorites.html file with NotePad++
- Insert the following line into the head section of your XHTML document.
SaveAs cg3fzz-css.html
Open cg3fzz-css.html in Firefox
Your cg3xzz-css.html file should look like this after you have added the CSS link:
The "Turn in" folder: hw1
Once you are satisfied with your pages, and you are working in one of the ACS labs, you are done (since you have been saving your work in your hw1 folder in your "Class Resources").
If you want to check your work, close all the programs. Then start Firefox again, and use File->Open Page to navigate to the hw1 folder in your "cg3f home directory" in the "Class Resources". Then open cg3f__-css.html. (If you just double click on cg3fzz-css.html it may open in Internet Explorer instead of Firefox, but that's probably fine for just verifying your work.)
If you are working at home, you will need to use Fugu or Filezilla again to upload your files. Something like:
- ftp icogsci1.ucsd.edu ; login and create hw1
to make the hw1 folder.
since these are text files, transfer in ascii, not binary,
mode put cg3f__-favorites.html and cg3f__-css.html as well as your 1-cg3fzz.css file.
- quit
Be sure you come into an ACS lab and log into Windows and verify your work by using Firefox to open your files.
How We Will Grade
You will be graded on having your cg3fzz-css.html
page, with the correct XHTML and CSS style sheet.
- We are going to grade using browser equivalent to the Firefox browser that is available in ACS labs. If you used Internet Explorer to preview your work, consider double checking your work with a recommended browser. i.e. (Firefox or Mozilla).
- Your page should look as much like the sample as possible.
- Be very careful about vertical spacing. We're very picky. Incorrect vertical spacing may mean you have used the wrong tags!
- We will look at your XHTML code
- To make sure that you haven't cheated and used a web-editing tool/product like DreamWeaver.
- And to make sure that your XHTML is readable and reasonable (and doesn't "work by accident").
- We will look at your CSS code and make sure that you understand the basics presented in this assignment.
- We will also check to make sure that you linked your css file appropriately into your html file.
Original ©opyright 2006 October 15, 2006 Mary ET Boyle
Modified October 2007, mrw
