A web site using XHTML, CSS and JavaScript

Objectives

• To write standards compliant XHTML;
• To write some JavaScript (ECMAScript);
• To understand how to write XHTML form elements and access them from JavaScript;
• To appreciate what CSS can do for a web page, and the Structure/Presentation/Content divide.

Details

You have by now completed assignment 1 for this module, which consisted of two parts. You have these in your public_html directory.

In this assignment, you will link them with a page, which will be created using a text editor, using XHTML, and will be formatted with a cascading stylesheet, which you will also create using a text editor.

In addition, you will write some JavaScript (ECMAScript) which will take input from a form, and display an appropriate message to the user, using a pop-up box.

You will write up your assignment in around 200 words, in a separate XHTML file, which is also to be formatted using the same stylesheet. You will:

• Create a subdirectory of your public_html directory, called cs15020 (lowercase cs). The name is important! If I can’t find it, I can’t mark it. If I fail to find it when I mark, because you put it somewhere else, I will not mark it later.
• Create an index.html file, in this cs15020 directory, which is to contain links to the two parts of Assignment 1 (using relative path names), and to your write-up for this assignment. It is to be formatted into (at least) three sections, using div elements. There should be a banner (heading) area, a menu area (preferably to the left),and a main area. These will be positioned appropriately using id attributes in conjunction with CSS. Make them clearly visually distinct, as you will observe on many professional web sites.
• Write a CSS file to format your pages. This should be in CSS1 or 2; you may use CSS3 if you wish, but bear in mind that much of it is yet to become a formal recommendation.
• For the banner, you can use your artistic flair to design something nice looking. A background image, maybe, and/or a fancy font. You can call the site what you want; if you’re really stuck for ideas, just use the title “(Your name)’s assignment 2 for CS15020”.
• The menu area should contain links to the two parts of assignment 1, as well as to your write-up for this assignment. Consider using a pale background colour for this side menu, or perhaps inverting colours, or using a background image of some sort, to make the menu clearly distinct from the main area. Try using the pseudo classes for the "a tag" element, as described in lectures, to make the hyperlinks more interesting.
• The main area should contain a text box, into which the user is to enter their name. There will be a separate Submit button. When this is clicked, a piece of JavaScript should be called, which works out the time of day, and displays a message such as “Good morning, Adrian”, or “Good evening, Adrian”. You will need to find out the time of day using JavaScript, in order to do this. At the bottom of this page, include a line from JavaScript which tells me when the document was last modified (using the lastModified method of the document object).
• In addition, the main area must contain a declaration of originality. If you have used code from elsewhere, you should say so here (using some form of words such as “I declare that the contents of this site are entirely my own work, except....., which came from .....”).
• Make sure you read http://www.aber.ac.uk/en/is/regulations/www/ and include the disclaimer on your index.html page as required: The information provided on this and other pages by me, Fred Smith (xxx@aber.ac.uk), is under my own personal responsibility and not that of Aberystwyth University. Similarly, any opinions expressed are my own and are in no way to be taken as those of A.U. Note that this page states: The use of the University’s logo or crest is not allowed on individual user’s web pages. This disclaimer need not be on every page, but it should be on your main index.html page at least. If you have already placed it in an index.html page you have already created in the root of your public_html directory, you probably do not need to include it again.
• Take the CV you have written for CS18010, CS18110, CI18010 or CC18010, and convert it to XHTML, with suitable markup. Link it from the menu, with a link named My CV. If you are not taking one of these modules, then write a short CV for the purpose of this assignment. I will not be marking the content of the CV; however, I will be looking at how well you have done the markup. This too should be formatted using the same cascading style sheet, so will also probably contain the same style banner and side menu. For the purposes of this assignment, saving your CV as pdf and linking that is not acceptable; I want to see that you can use xhtml markup effectively. This web CV might be very useful to you in the future - you can simply point prospective employers at it, if you make online contact with a prospective employer.
• Write a separate page, called about.html, and linked from the main page. In this page, you should write around 200 words explaining what you did, how you approached this project, problems you encountered, and how (if at all) you solved them. Also be sure to put any credits in here - if friends helped you, for example. I do not mind you helping each other, and generally this is encouraged. But if I think you have copied someone else’s work, and you have not acknowledged their help, then action will be taken. 200 words is a guideline, not a strict limit. But if you only write one or two short paragraphs, you will lose marks. Remember, write-ups are always important; they are our best tool for assessing how well you really understand what you’ve done.
• Your XHTML should validate to XHTML 1.0 strict or XHTML 1.1. If you want to validate to XHTML 1.0 transitional, you may, but say why in your write-up, and you are likely to lose one or two marks for doing so. Additionally, it must display without problems, and the JavaScript should work in the latest versions of the most popular browsers - Firefox, Chrome and Internet Explorer. In your documentation, state which versions you used for testing. I will mark using Firefox 10 for Linux.
• Your CSS must also validate, using the W3C CSS validator.
• For your own convenience whilst developing, and for my convenience whilst marking, please put a link to the validator in your web pages, such as that at http://www.aber.ac.uk/compsci/Dept/Teaching/CourseNotes/current/CS15020/ (you may use the code at the bottom of that page, if you wish).
• You should make all your pages should look professional and attractive. Some marks will be awarded for the overall impression the page gives, regardless of how well it’s designed technically.

Suggestions

• Use relative pathnames for linked xhtml files and your css, and any images you choose to use (if using images, please beware of copyright). Using relative pathnames means you can develop your site in another directory more easily, and just copy (or move) it to the appropriate place just before the deadline with ease.
• Mozilla Firefox has a JavaScript console, which will help you debug your code. It also has a number of useful add-ons for web developers. Other browsers may offer similar tools; use them!
• If your JavaScript is failing, it is quite possible that you have just one error, but the browser gives up on the lot! Don’t despair; use a debugger such as the JavaScript console in Firefox, or try commenting out lines until it works. You can then identify where the error is.
• If you cannot manage one aspect (e.g. JavaScript), do not give up on the rest. You could get a pass mark with a good web site which meets the rest of the requirements, even if the JavaScript doesn’t work.
• Do not neglect the write-up. This can show me your understanding.