CS-081 Assignment 4

For this assignment, you are to construct a dummy home page for your blogger following the structure you developed in Assignment 3. Following the principle of “content-out markup,” you are to use only meaningful content tags in the body of your web page: h1, h2, h3, h4, p, ul, ol, li, and a. You may also use table and its related tags if your page contains tabular data, and you may use dl if your page has a list of definitiions. You may use lower level headings if necessary, but it would be very unusual if you need them. You do not need to use all the tags listed, just the ones you need for the content of your blogger’s home page.

First of all, I have changed the template.xhtml file that you are to use as a starting point for all web pages in this course. Download template.zip again, and exctract the new copy. Then make a copy of that and rename it to index.xhtml in your My Website directory as you did in Assignment 2. The new template eliminates several unnecessary elements that were in the original one. This change is especially important for this assignment because of the restriction on what tags you are allowed to use.

Change the title tag to give a meaningful name to your blogger’s web page. If your title has an apostrophe in it (“Lilly’s Landscape Lore,” for example), be sure to use the typographically correct ’ character entity rather than the single prime character ('), as discussed in class. If you can’t see the difference between the two characters in this paragraph, magnify the text by typing Control_+ (Command_+ on the Apple).

Your blogger’s page undoubtedly uses the h1 tag, so change the contents to the proper value for your blogger’s site, presumably the same thing as the page title.

Now add the headings, lists, and paragraphs for your blogger’s home page in order of importance, not necessarily what will be top-to-bottom, left-to-right order once the page’s presentation is in place. The idea here is to present the information in an order that will make the unstyled page easy to read quickly, even if the content is being presented aurally or on a small screen.

But remember that the sequence is not totally arbitrary. Paragraphs that relate to a certain heading must follow that heading in sequence, for example. After all, the heading (whichever level it is) is what tells the reader what the paragraphs are about.

Use meaningful content for all headings, but you should use dummy text for words of most paragraphs. You can get dummy text for paragraphs from lipsum.com. At the lower right corner of the page is a button to “Generate Lorem Ipsum”; click on it, and you will get a page with five paragraphs of Latin text, which you can copy and paste into your web page. You need to put p tags around the text in your code to make them into actual web paragraphs. For paragraphs or list items that will contain particular kinds of information, such as a date, it makes more sense to put in an actual date.

For images, you may put in img tags that use src="#" instead of the path to an actual image file. Be sure to put in an alt attribute with text to show what the image will be. Alternatively, you can use an actual picture of some sort, but I suggest you hold off on putting in actual images until we have discussed that topic in class.

When you have created your web page, view it using Firefox, Opera, Safari, and Internet Explorer and make sure it makes sense to look at, even though it is just black text on a white background, styled according to each browser’s built-in default style rules.

The most important test is for you to click the XHTML link at the bottom of the page. This will submit your web page to the W3C Validator. Your code must validate with no errors or warnings in order for you to complete the assignment successfully. Your web page is not to have any CSS style information included in it, so there is no need to check the CSS link at the bottom of the page: it will just give an error saying there is no style information, which you knew anyway!

You should build your page up in parts and test each part in Firefox as you go along. There should always be two green circles with checkmarks in them in the status bar at the bottom of the browser window: one from the Firebug extension that is installed in Firefox, and one from the HTML Validator extension that is also installed in Firefox.

When you have coded your page and verified that it is useable, log out so your code will be saved to the server, and send me an email message saying your assignment is ready. I will copy it from the server to the Unix computer in my office (babbage), and will check it out from there.

My email address is:

Christopher.VickeryATqc.cuny.edu

The Subject Line of your email must say CS-081 Assignment 4, exactly like that, in order to avoid my spam filters.

Always include CS-081 in the subject line of your email messages to me, even if you are not submitting an assignment, because of the spam filters.

Be sure to sign your email so I know who sent it!