Instructions
CS1033 - Web Assignment (Assignment 2)
Designing a Website Using html5-editor.net
OVERVIEW:
This year, 2024, marks the 60th anniversary of the Computer Science department here at Western. For this assignment, you will be creating a website about our department to celebrate this milestone year. The content is all provided to you but it's up to you and your creativity to lay it out in a way that looks clean/professional/lovely.
NOTE: you may NOT use a template nor may you use existing html code (but you can use html code that YOU created while doing your labs) nor may you use website building software (do not use tools such as Kompozer, Dreamweaver, BlueGriffon, Wix, etc.) to create this website. Also you must use a table for your outer layout, you may NOT use tags for your layout (This puts everyone on an even playing field). You may only use html5-editor.net, Brackets/Notepad/TextEdit (simple text editor) and css to create the site. If the site was not made using just those tools you will receive a 25% deduction!
PLEASE NOTE: All the material needed to help you figure out how to complete this assignment can be found in:
To create the banner - Labs 2 and 3 (export as .jpg)
To create the web pages - Labs 4, 5 and 6 and any of the Week 6 Lecture Videos that start with HTML BEFORE YOU BEGIN YOUR ASSIGNMENT - IMPORTANT! PERFORM THE FOLLOWING STEPS:
First create a folder called webassign on the desktop of the machine where you intend to work on the assignment (or on the memory stick you plan to use, but be careful --> losing the memory stick is not grounds for an extension)
Create a subfolder inside the webassign folder called images.
Anytime you find or create an image to be included in this website, move the image into the webassign/images folder
Make backups often and on DIFFERENT devices. Use online (cloud) storage as well like OneDrive or Google Drive. We have had several complaints about Western USB sticks corrupting files. You may want to buy a second USB if you are currently using a Western USB drive. Losing your USB stick or your laptop/USB stick breaking down will NOT be grounds for an extension, make sure you back up your work occasionally.
CRITERIA:
Build a website to include ALL OF THE FOLLOWING things:
A banner for your website made with Affinity Photo
Size of banner must be roughly 1000 pixels wide (no more than 1050 pixels and no less than 950 pixels). The height is up to you but the recommended range is 150px to 350px.
You can use any images you find on the Internet but try to use ones from the official Western CS Dept site and/or the official Western Flickr site where possible (Remember that best practices are to pick images with no copyright issues but this will not be checked. We would prefer you pick free images but this is up to you) and that will add appeal to the banner but remember you need to save the URLs for the images used on your banner in order to include them on your References page.
The banner MUST include the words "Computer Science" and "60 Years" (or "60th Anniversary" or something similar).
Create a banner that is professional, appealing, and appropriate for the content
Content for the web pages: (read carefully)
The document https://www.csd.uwo.ca/~bsarlo/cs1033b/cs60/content.txt contains the content to be used for creating the web pages. This is provided so that you don't have to come up with the content. Your job is to lay out the content in an appealing and professional manner. Note: The content file is a text file with no formatting so that you can copy and paste the information into your website and work with the layout and the attributes as you choose. Your assignment will be marked on how nicely the information has been presented. Add at least one image to every web page (Exception: you are not required to add images to the references page) in order to give each page more visual appeal but, remember to reference all images used, even if we supplied the image (use the URL we gave you). Include references for any images you put on your banner and buttons. Replace hyphens for lists with the numbered or bulleted (structured) list.
Number of Web pages:
For your website you must create 5 web pages in total: Home, History, Current Courses, Research, and References. Every page must have your banner along the top before any other content is shown. You then need to create a navigational menu structure at the top or along the side of each webpage containing 5 links (buttons or text links), each linking to one of the 5 web pages. The text for the 5 web pages is contained in the content document . Every page in the website must have a properly formatted property title as shown in lecture and in labs. The file names for the 5 web pages should be lowercase, descriptive, and not contain spaces.
Listed below are guidelines for each of the 5 web pages:
1. Home --> Text for this webpage is included in the content document
Emphasize (make bigger or bolder, do something to make it stand out) the first line: "Happy 60th Anniversary!"
In the 2nd paragraph ("The department began in..."), convert the text "CS 1026" to a link that points to the "CS 1026" description on the Current Courses page of your site (see description of that page below).
Find and include 2 images that relate to Computer Science (such as someone programming) or related to our department at Western.
2. History --> Text for this webpage is included in the content document
Neatly format the given content on this page.
Convert the text "Computer Science Department" into a clickable link that points to the external site: https://csd.uwo.ca/
Convert the hyphenated points into a structured bulleted list.
Include a picture of Middlesex College somewhere on this page
Convert the image of Middlesex College to a clickable link that points to the external site: https://csd.uwo.ca/
Convert the email address at the bottom of this page into a working, clickable email link that will pull up Outlook or some other email reader. Note: it is just a fake email so don't try sending an email to this address
3. Current Courses --> Text for this webpage is included in the content document
Neatly format the given content on this page.
The first 4 lines ("1st Year Courses", "2nd Year Courses", etc.) must be turned into links that point to the anchors at the corresponding section below
Notice that each of the 12 courses listed has a description about the course material, except for CS 1033 which has "???". You must come up with your 2-3 sentence description about CS 1033 (since you are taking it and know what it's about!) to replace the "???".
Convert the last two words for this page (the words "this site") to a clickable link that points to the external site: https://csd.uwo.ca/undergraduate/current/courses/course_offerings.html
4. Research --> Text for this webpage is included in the content document
Neatly format the given content on this page.
Bold/Highlight the three professor's names
Find an image of each of the three professors to include near the description of their research
5. References --> This webpage must contain the URLs for EVERY image you obtained from the Internet (even the ones we provided!) and used within your website. Make sure this page is neatly laid out and organized. You no longer have to place your image references in the kritik.io box under your link since they are now listed on this web page. References do not have to be in MLA, APA, or any other official citation format. If you use a picture you took yourself, and don't have a URL for it, you MUST still include something like: Picture of Cat - Taken by me. Even for image(s) that we gave you, you MUST include a reference in your references page.
A Table to achieve clean edges and strong alignment:
Use a table(s) with fixed 1000 pixels width to control your overall website layout. You can also use nested tables, additional tables, rows, and columns to achieve your layout. NOTE: You may NOT use
A Navigational structure:
Create your menu links as button images, or as text to each of the 5 pages. NOTE: If you decide to create button images, you MUST use Affinity Photo to create your buttons, you may not use button generating software. Navigational buttons/links that are very professional looking will get more marks than plain text links. *IMPORTANT* Make sure your links all work from each page to every other page. Test this AFTER uploading it to the server to ensure it wasn't just working on your local PC only.
Appropriate Images:
Appropriate images MUST be embedded in each of your webpages (except for the References page) to make the pages interesting. All images used must be cited in your "References" webpage. You can find lots of free images to use in your site from here: https://pixabay.com/. You can also purchase images if you want from online stock photo companies such as http://www.bigstockphoto.com/, http://www.istockphoto.com/ We encourage you to follow best practices by using free images but this will not be checked and no marks will be deduced if you use copyrighted images, but either way, free or copyrighted, you MUST include a reference (the URL) for every image you use in your references page EVEN FOR PICTURES THAT WE SUPPLIED YOU WITH!
Colour creativity:
The colours used in your entire website (background colour, font colours, banner colours, button colours, etc.) should co-ordinate with each other and work well with the overall look of your pages
Clean Neat Layout:
Aim for neatly laid out pages as opposed to cluttered, crowded pages.
Links:
You need an instance of each of the following link type in your website:
e-mail link
link(s) pointing to another area within the same page (bookmark/anchor links) and link(s) that allow the user to return to the top of the current page (Back to Top links on long pages).
link(s) pointing to outside website(s) on the Internet
Structured List (ordered OR unordered):
You must have some sort of bulleted list or numbered list in one of your pages using the list tool in html5-editor.net (there should be no hyphens used as bullets for lists).
Well balanced text formatting. We will be looking for:
Appropriate size - headings, body of text, balance, did you use headings appropriately to make titles stand out, etc
Text emphasis - use bold/italics as you see fit. There must be at least one example of both.
Layout within each page - should not be cluttered, should be easy to read, should have clean alignment (use what is appropriate: Left, Right or Centered Alignment)
A well organized File/Folder structure to hold all your html files and images. Marks will be given based on how well you follow the instructions given in lectures and lab, how/where you stored your webpages in your folder and how/where you stored your images in your website folder/directory.
An uppermost folder called webassign. You must keep your index.html home page in the upper most folder (the upper most folder must be called webassign). You will be given marks for appropriate file names and folder names as indicated in class lectures and labs. The home page called index.html MUST be located in the webassign folder and NOT in a sub-folder of webassign. Thus, this is correct: webassign/index.html and this is incorrect: webassign/pages/index.html. The incorrect way will NOT display your home page initially so make sure you put index.html inside folder webassign NOT in a sub-folder of webassign.
Read the "FinalTips" table at the bottom. Some requirements are explained down there only so make sure you read it and follow it while building your website.
FINALLY - Make sure you watch this entire video (it is 1.5 hours but it will help you get a good mark and you can watch it at double speed to shorten the length of time it take to watch). Please watch the ENTIRE video!