Web Assignment

OVERVIEW:

Sports are watched, played, and enjoyed all over the world at all different ages and skill levels. Southern Ontario is home to several professional and semi-pro sports teams that have attracted viewers and grown fanbases around this region. You will be creating a website about some of the teams around London and Southern Ontario. 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. 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 a 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).
You can use any images you find on the Internet but try to use ones from official sports teams’ sites (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 “Southern Ontario Sports”
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/cs1033a/assignment2/fall2023/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, Hockey, Basketball, Baseball, 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 lower case, descriptive, and not contain spaces.
Listed below are guidelines for each of the 5 web pages:
Home –> Text for this webpage is included in the  [content document] Spotlight (make bigger or bolder, do something to make it stand out) the first line: “Welcome to this website about sports teams in Southern Ontario.”
In the 3rd paragraph (“This website is designed…”), convert the word “hockey” to a link to the hockey page, “basketball” to a link to the basketball page, and “baseball” to a link to the baseball page.
Include [this picture of the London Knights] somewhere in the home page. (You may resize/crop this picture to make it fit in with your design but be careful not to skew it)
Convert the image to a clickable link that points to the “London Knights” section of the hockey page (hint: create an anchor at the Knights section of the hockey page and then add a link on this image that points to that anchor).
Add another picture of your choosing that relates to any of the sports teams mentioned on this website
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 worry if the email bounces if you attempt to send something to it.
Hockey –> Text for this webpage is included in the [content document] Neatly format the given content on this page.
Convert the text “OHL (Ontario Hockey League)” into a clickable link that points to the external site: https://ontariohockeyleague.com/
Bold/Highlight the two header line team names: London Knights and Toronto Maple Leafs
Convert the hyphenated list to a structured (bulleted) list.
Include an image of Toronto Maple Leafs players (you can find lots of great action shots at their official site: https://mapleleafs.ice.nhl.com/club/gallery.htm)
Basketball –> Text for this webpage is included in the content document
Neatly format the given content on this page.
Bold/Highlight the two header line team names: London Lightning and Toronto Raptors
Include this picture showing the London Lightning’s back to back championships.
Find and include a picture of the Toronto Raptors (it can be from their 2019 championship or a more recent pic)
Come up with 3 “Did You Know?” facts related to basketball and include them in your page (similar to the 3 facts on the hockey page, but this time you have to come up with them on your own, but you can use Google to look up fun facts about basketball)
Baseball –> Text for this webpage is included in the content document
Neatly format the given content on this page.
Bold/Highlight the two header line team names: London Majors and Toronto Blue Jays
Convert the hyphenated list to a structured (bulleted) list.
For EACH of the 7 players mentioned in the list, convert their name to a link that jumps down to the section below corresponding to that player (i.e. when you click on “John “Buck” Martinez”, it should bring you down to the paragraph about John “Buck” Martinez, and so on).
For EACH of the 7 sections below about the players, have a “Back to Top” link that jumps back to the top of the Baseball page (just below your menu)
Find and add a picture of at least 2 of the 7 players described on this page.
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.

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.