CSCI 446 Unit #1

Specific Requirements

This assignment is worth 55 points. HTML must include:

(1) Correct html structure with doctype and language specified
(1) A title
(1) At least one header
(1) At least one paragraph
(1) A list (ordered or unordered)
(4) Table with a table header and at least 3 rows of data
(1) Table has hyperlinks to an external site
(1) Table includes hyperlinks that are an image
(2) Include an alt tag for every image. Place the images in a subdirectory named images.
(1) At least one text format (e.g., strong)
(1) At least one special entity (e.g., ampersand, cent, etc.)
(4) A navigation bar with at least 3 links (just use "#" to stay on same page)
(2) Tooltips for the navigation bar
(4) A div with an image + text
(2) At least one more div that can be styled differently

The CSS:

(1) Should be in a separate file
(2) Should have at least a few comments
(5) Nav bar should be horizontal and make use of color (background and text), margins and/or padding, and some type of text alignment. One element should be floated right.
(3) Tooltips should be styled
(4) Table should have some type of border, the header row should have a different style, rows should have some type of style applied.
(2) Div with image and text should be floated (right or left)
(4) Explore at least 4 font options.
(2) Apply some type of style to "differently styled div"

Ease of grading criteria.

(1) Name your file XZpets.html, where XZ are your initials. For example, my file is named CRpets.html.
(2) Create a zip file with your html, css and image files. To easily see the alt tag, do not include one image (e.g., see "picture of Bengal cat" in figure 1).
(2) Include an html comment which documents briefly how you have met the criteria. See example below.

HTML comment example

The grader must be able to easily determine whether you've met all requirements by running your html file in a browser and reviewing the HTML comment (i.e., the grader should not have to read your entire file to search for a criteria). The comment should list all criteria and point values with a brief description of how you met each one.


<!--
 (1) HTML with doctype
 (1) Title: My Favorite Pets
 (1) Header: Cats, ...
 (1) Paragraph: Cats exist...
 (1) List: image credits
 (4) Table: cat breeds
 (1) Hyperlink: breed names
 (1) Image hyperlink: cat pictures
 (2) alt tags: alt="picture of Bengal cat"
 (1) Text format: italic (em)
 (1) Special entity: copyright
 (4) Nav bar: Cats/Dogs/Home
 (2) Tooltips: display when hover
 (4) Div with image + text: Cat cartoon + Paula Poundstone
 (2) Styled div: footer
 
 CSS requirements: 
 (1) CSS file: CRpets.css
 (2) Comments for nav bar, tooltips, etc.
 (5) Nav bar style. Home is on the right. I have background
 colors for the entire nav bar and the list items. 
 The active element is a different color. Text is 
 centered horizontally. 
 
 (3) Tooltips style. Mine have white background, green text, 
 rounded edges. 
 
 (4) Table style. The border is small (1em) and solid black, 
 collapsed so no double border. The header has a
 contrasting gray background. Table data are centered
 horizontally and placed at the bottom vertically.
 
 (2) Div with image/text. Floated right. 
 
 Font options (at least 4) 
 1) Footer uses sans-serif generic font family
 2) Footer uses bold font-weight. 
 3) Text with image uses color blue
 4) Text with image uses small-caps. It is also displayed
 as a block. 
 5) Credits are displayed with font-size small. 
 
 (2) Differently styled div. My footer has a BlueViolet 
 background and a height of 3em.
 
 -->