CSC 370: Week of 1/18/10

CSC 370: The Week beginning Jan. 18

Homework:
Create a webpage or webpages on any (non-offensive) topic. Include the following HTML tags: comment, document type, html, head, body, title, meta information, header (e.g. h1, h2, etc.), paragraph, section (div), break, hyperlink, image, bold, italics, emphasis, and style.

Use CSS to control the following: background (color or image) and the font (e.g. size, color, font family, etc.). Also have at least one of the following: margin, border, or padding.

Run the pages through an HTML validator as well as a CSS validator and a minimal number of warnings. Write a comment on any warnings that you have left in your document.

Due: Jan. 25
Tuesday:

Syllabus
Resources

We created a simple page using the Microsoft Visual Studio environment. We validated it using http://validator.w3.org/ and found we needed a meta tag to specify the character encoding; we chose iso-8859-1. We also added meta tags that might help search engines to discover the contents of the page. We distinguished between tags with have an open and close version and "singletons" which do not. We added a tag to create a header, one from the set <h1>, <h2>, ... <h6> as well as a paragraph tag <p>. Next we began to style the paragraph. First we used the Property Explorer window in Visual Studio which provided what is called "inline" style, then we placed the CSS style code between <style> tags in the <head> part of the page. One of the attributes we styled was the font family where we pointed out that it is preferred to include a generic font (http://www.w3.org/Style/Examples/007/fonts). We used http://jigsaw.w3.org/css-validator/ to validate the CSS to look for both errors and warnings (under More Options, Warnings, All).
Thursday: Make a variation on the page shown below.

It uses transparent gifs (e.g. abraham.gif, alan_turing.gif, AndrewJackson2.gif, brucelee.gif, curie.gif, darwin.gif, EINST05.gif, frida_kahlo.gif, Gandhi.gif, GraceHopper.gif, groucho.gif, hepburn.gif, jackieO.gif, jbaker-copy.gif, john.gif, keaton.gif, Kmarx.gif, malcolmx2.gif, MLK_stamp.gif, mona_lisa_stamp4.gif, Poe2.gif, warhol_stamp.gif). The page's arrangement can be made with a table or a sequence of div tags. (Using a table is easier if you are new to HTML; however, using div tags would allow more freedom and is ultimately the preferred approach.)

Some of the images have different sizes; you can style the image's width and/or height to control their size.

Style the text-align, padding , border, and margin attributes of the td tags (or div tags) within a script tag in the head section (i.e. in an internal style sheet). (http://www.w3.org/TR/CSS2/box.html) Style the colors within the individual td tags (or div tags) in the body (i.e. in an inline style). Make sure your page validates for both HTML and CSS.

Reference on internal style sheet versus inline style: http://www.w3schools.com/css/css_howto.asp

(If you are already very familiar with images on web pages then use the reference http://www.w3schools.com/css/css_image_transparency.asp to add a rollover effect that changes the opacity of the images.)

Part 2
Make a variation on the page shown below.

(Style the body background either with a color or an image. My bacground image is Sudoko_back2.gif, but feel free to find or make your own.)

The drop-down list were made using the HTML tags <select> and <option>. (http://www.w3schools.com/TAGS/tag_Select.asp)

In this example you will again style the margin, border and padding attributes. However, not all of the "cells" are styled alike. While it is tempting, do not use inline style. Instead use an internal style sheet and the idea of a class selector.

Reference on using a CSS class selector: http://www.tizag.com/cssT/class.php.

In my version I had classes like "top" and "left" and I took advantage of the fact that an element can belong to more than one class (e.g. class="top left").

Style the font (minimally family and size). Make sure your page validates for both HTML and CSS.

Ask questions!