CSci 4608 Problem set 1.

CSci 4608 Problem set 1. Due Thursday, Sept. 23rd

Submission guidelines: you will submit all your work at your problem set submission area on the Wiki. The pages themselves may be elsewhere, they have to be linked to your submission page. Please check that the links work and your files are accessible. Please do not modify files after the submission. The last modification date of the actual files (not the posting time on the Wiki) will be considered the time of the submission.

You may write the answers to "paper-and-pencil" questions on the Wiki page, either directly or as attachments. Please do not use any non-standard file formats or compression/archiving programs.

The problems in this problem set are set up incrementally (i.e. you will be adding more and more functionality to the same files), the final version will be graded.

Problem 1 (HTML)

Set up an HTML web page which has at least one table, some links, and a couple of images. You may use an imagemap if you want. The topic of the page can be anything you want, but it must be a page written by you. Don't specify any colors, fonts, alignments, or background images: you will use CSS for this.

Problem 2 (CSS)

Part 1

Use CSS to set up:

a background color or a background image of the page,
a background color or a background image in some (not all) cells of the table,
the text color and/or font and/or alignment of all or a part of the text on the page (you may refer to the text by P tags or div tags)
the color and/or font of all or some of the links and/or headers

You may set other features of the page, too.

In your CSS you must address elements in the following different ways (you need to add class and ID attributes to some of the tags):

By just a tag name (for instance, when addressing the BODY tag).
By a class name (you must have at least two different tags included in one class).
By an ID name.

Part 2

Experiment with style sheets. Try different browsers and include the version of the browser in your answer.

If an element has both an ID and class attributes, which style definitions take precedence? What happens if the definition for an ID defines some of the properties, and the definition for the class defines other ones?
What happens if the element has an explicitly specified attribute (in the tag itself) and the same attribute is defined by the style sheet? For instance, a TD tag specifies one background color, and the style sheet for TD tags specifies the other?
Have you encountered any features that work in one browser, but not in another? What features and what browsers?
Were there any features that you would've liked to include, but they weren't available in CSS (or at least you couldn't find them)?

Part 3

Overall, did you find CSS technology easy to use? If you are designing a web site, under which circumstances would you use CSS?

Problem 3 (Javascript, DOM, events)

Some Javascript examples to get you started:

Part 1

This page gives you the hierarchy of elements and properties in DOM.

Add the following functionality to your page using JavaScript:

Use a JavaScript Date() object on your page. For instance, print out the day of the week, or today's date, or the current time. See the methods of the Date() object shown above.
Add a button to change the border or the cellspacing or the cellpadding of the table.
Add a button to change the height or width of all table cells (use GetElementsByTagName() method).
Add a button to change the background color or the text color in all even-numbered cells.
Add some text to a specified cell in the table (use ID to find the cell).
Add another row to the table.

You may put all the buttons in one table (see the example above). Note: some of the things that you attempt may not work in all browsers. Document any inconsistencies that you think are browser-related. Make sure to check your syntax (some browsers are tolerant of minor JavaScript syntactic errors, but others aren't).

Part 2

Investigate relations between JavaScript and CSS.

If you dynamically add an element to a page and set its class attribute, would it be formatted by the CSS definition for that class?
Can you dynamically set or reset the class of an element?
If you specify a property (such as a color or alignment) of a tag in CSS and then reset it using JavaScript, which value takes precedence?
Are any of these behaviors browser-specific?

Part 3

Overall, did you find JavaScript useful? Which features would you recommend using, and which ones you wouldn't recommend? Briefly explain why.

That's All!

This is a problem set from CSci 4608 course at UMM.