Web Programming Assignment
In this assignment, you will design and write a small website, with a topic of your own choice, consisting of webpages using Hypertext Markup Language (HTML) code and Cascading Style Sheets (CSS). You are to develop a basic website, which provides information in a clear way and links to other pages and websites (Part A). Students are to include appropriate images, lists and tables on their pages (Part B) and add CSS functionality (Part C).
Part A
You are to develop a basic website using a suitable HTML editor (We recommend using the Microsoft Expression Web 4 (free version) which is available on all PCs in our PC Labs at UC). An end user accessing your website should be able to quickly understand the topic of this website. You are to show your understanding of good web design principles, such as clear hierarchy, easy navigation, and clear presentation of information.
The following screenshot gives an example of a website that fulfils these criteria (for all parts, not just Part A).
Example of a well designed website – Code available on IIT Canvas site
Requirements:
You are to demonstrate your understanding of the correct use of HTML tags. Use both the code and design view, if you are using MS Expression Web editor. It will be quite obvious to your tutor if you only used the design view, as it shows up in the code structure. Automatically generated code looks different from manually created HTML code. We will look for evidence that you either manually coded the webpages or that you manually corrected the code generated by MS Expression Web or a similar tool.
In Part A, you are to create a main page (named index.html) and a minimum of four different subpages. These can be on the same hierarchy level or on different levels. Remember that one of the points you will be marked on is good web design and a clear hierarchy! Each page needs to have a minimum of 50 words on them.
Make sure that the user can get to all of your pages via hyperlinks as well as return to previous pages via hyperlinks (rather than having to use the back button of the web browser). Also include at least one link to an external website, e.g. http://www.canberra.edu.au.
What the tutors will be looking for
The tutor’s instructions include
• Structure of the website: Is it clear? How many hierarchy levels are there? Have they described their choice of hierarchy in a Word document? (5 marks)
• Navigation: Is it easy to get from one page to another? Are all links (both to other pages on your site as well as external links) working? (5 marks)
• Layout: Is the information on the pages easy to find? Does the layout support the viewing of the pages? Does the student use a suitable colour scheme to produce a highly readable site? (5 marks)
• Has the student created the minimum number of webpages (five)? (2 marks)
• Has the student added a sufficient amount of original content (minimum 50 topic-related words) on
each page? (4 marks)
• Is the code clearly structured (head, body)? Did the student use empty lines to separate blocks of
code? Did the student use different levels of indentation in the code? Did the student use comments in the code? Are different tag pairs on different lines in the code? (6 marks)
Total: 27 marks
Step by Step Guide for Part A
1. Start Microsoft Expression Web 4
2.
NOTE: When you run this program for the first time it may show a dialog box saying “Microsoft Expression Web is not currently your default Web page (HTML) editor. Would you like to make it your default editor? “you can safely click Yes to this.
Click on File→New→Page
3.
In the ‘New’ dialogue window, select ‘General’ from the first column, select ‘HTML’ from the second column. Then click the ‘Page Editor Options…’ in ‘Options’ section below the Preview.
4. In the Page Editor Options window, select “Authoring” tab, then set “Document Type Declaration (DTD)” to “HTML 5”. Leave CSS Schema version at 2.1. Click on OK.
This will ensure that the HTML version used is HTML 5.
5. Now, click OK to create a New HTML Page
6. This will open a new Untitled HTML file which already has the basic HTML structure of head, body, and so on. Click on File → Save, then type in index.html as file name for this main page file in the File Save dialog. Save this in a new directory / folder, e.g. IIT_Web_Assignment.
Note 1: During your Lab sessions it is recommended that you explore the interface of the Microsoft Expression Web. If you have any questions or concerns, please raise these with your tutor. You’re most welcome to use any other editor if this is your preference. Particularly, using a simple text editor will help you to learn coding much better than using the suggested editor.
Note 2: If you’re using the MS Expression Web, make sure to change the code view to ‘Split’ (see bottom mid-section of the HTML editor – image on next page) so you could see the actual code as well as the resulting web page design live.
7. Create four more HTML pages (or more, if you feel like it) that will become the subpages following above procedure. Make sure you save them! You can choose your own file names for these files, but make sure they end .html. It is recommended not leave spaces between words if your file names are multiple words long (e.g use my_obbies.html instead of ‘my hobbies.html’)
8. Think about the hierarchy of your website. Do you have one main page and then a second level in the hierarchy where all your pages live? Or do you have more levels of hierarchy, that is subpages of subpages?
9. Add content to the pages. The topic is your choice. Maybe a hobby, maybe a sports club, maybe a fashion line, maybe an event, etc. Note, the choice of topic or content will not be marked, but it’s more fun if you choose an interesting topic.
10. Link your pages in a suitable way. Decide whether you will only provide links from the main page to all subpages and from each subpage back to the main page, or whether subpages will also link to each other.
Part B
Here, you are to add some images / graphics, lists and tables.
Requirements
Add a different image / graphics file to each of two of your pages (main page or subpages). What size is your image displayed at? What dimensions, DPI and file size does your image have? Is that suitable for web presentations? Remember, the smaller the file size, the faster the page loads!
Add an unordered list of four or more items to at least one of your pages. Add an ordered list of four or more items to at least one other page.
Add a table with a minimum of three rows and columns. Choose a suitable table layout. Does your table have borders?
What the tutors will be looking for
• Same as for Part A, plus
• Minimum of two images / graphics files on separate pages (total, not per page). (5 marks)
o What size is the image displayed at?
o What file size does the actual image file have?
o Doestheactualimagesizelenditselftobeputonawebpage? o Make sure the image is in the same folder or a subfolder.
• Minimum of one unordered list with at least four items. (2 marks)
• Minimum of one ordered list with at least four items. (2 marks)
• Minimum of one table with at least three rows and columns. Did the student choose a suitable
table layout? (4 marks)
Total: 13 marks
Part C
In this part, you are to use Cascading Style Sheets (CSS) for the layout of your website. Requirements
Create a menu for your pages to improve ease of navigation and clarity of your site (see the example website Interspeech 2008) and compare how it was done there. Your menu does not have to be on the left- hand site, it can be at the top, bottom or right-hand side. Define your own styles for menu entries, headings, background and font colours. Consider highlighting the current menu item in a suitable way (e.g. different font and/or background colour).
You are also to add metadata in accordance with the Dublin Core (http://dublincore.org/documents/dces/). As a minimum, include metadata for:
• Creator
• Title
• Subject (Keywords)
• Descriptions
• Type
What the tutors will be looking for
• Same as for Part A, plus
• Correct use of CSS (7 marks)
o Has the student defined their own styles and used these on the webpages?
o Have they defined a menu somewhere to ease navigation? • Inclusion of metadata (3 marks)
o Has the student added metadata to each page?
o Have they followed the Dublin Core recommendations?
Total: 10 marks
Submission
Zip the entire project folder, including all files and the Word file describing the hierarchy, and submit via Canvas. Please note that you must first upload your ZIP file and then click on the Submit button. You are no longer required to submit a separate cover sheet. This is now part of the electronic submission via Canvas. The maximum ZIP file size allowed on Canvas is 10MB. If you find yours is larger than 10MB, check the file size of your image files and other files. If you follow the requirements listed here, 10MB is plenty and you should not need any more than that.
In all parts, ensure that you ZIP the entire assignment folder including all files and submit it via the unit’s Canvas site. Make sure that any additional files, e.g. image files, are part of your submitted ZIP file! The maximum file size is 10MB in total. If you find your ZIP file to be larger than 10MB, check your image files. Follow the steps to reduce the DPI and the resolution to right display resolution and you should have no problems to be within 10MB overall.