EXPECTATIONS: WHAT’S OKAY & WHAT’S NOT
This is an individual assignment.
Give credit where credit is due.
This assignment tests your individual learning.
Work on it by yourself.
Help each other in the class and/or in your
groups – do not share solutions.
It will be tested for plagiarism, inappropriate
collaboration and violation of academic integrity
principles.
Restrict your help to conceptual discussions
only.
If you receive help, include a citation in your
code AND in readme.md in your submission
folder with the following information:
Start your work early and budget your time.
It helps you work on your assignments in a healthy
manner.
Help received from: person, URL of website,
etc.
If you have any questions or concerns, please email
Date help received: DD-MMM-YYYY
Nature of help received: one-two line
description of the nature of the help received.
both [email protected] and [email protected] –
at least 48 hours BEFORE the deadline
EXPECTATIONS: WHAT’S OKAY & WHAT’S NOT (PAGE 2)
How can your TAs help?
Remember, this is an assignment.
We are assessing how you can apply what you have learned in the context that is given in the
assignment.
Your TAs can guide you in your work, but…
They will not give you the answer.
They will not be able to review your work and tell you whether it is correct or not.
They will not be able to review your work in the last minute, i.e., a few minutes or hours before
the deadline – remember that they are students taking courses too.
They cannot give you extensions – if you want an extension for any reason, you must contact
both Raghav ([email protected]) and Gabriella ([email protected]).
GOALS OF ASSIGNMENT 1 (A1)
This assignment tests your knowledge in the following aspects:
Valid HTML
Content organization in HTML using appropriate semantic and structural HTML elements
Creating accessible web pages in HTML
Ensuring separation of concerns between content, presentation and behaviour layers in web pages
By completing this assignment, you stand to gain the following skills:
Developing simple web pages using HTML
Organizing content in web pages
Creating accessible web pages in HTML
Validating HTML web pages
This is Part 1 of a 3-part
OVERVIEW OF THE ASSIGNMENT (A1)
assignment. You will
incrementally build a usable
website over 2-3 assignments.
A1 requires you to create a single page website.
This website is supposed to be a website for an interactive learning service.
This is an HTML-only assignment. You are not expected to add any additional styles in this assignment.
Think of an interactive learning service as something that includes text material in addition to interactive
elements for learners to interact, for example, either W3Schools or zyBooks.
Create a single page website as specified in the next few pages in this document.
This web page must:
Be accessible
Use valid HTML
Use container elements appropriately (as specified)
Use structural HTML elements such as headings, lists, images, forms, etc. appropriately
Note: this assignment must be submitted on Brightspace.
A1: DETAILED REQUIREMENTS (PAGE 1)
1. Create an HTML-only website (single page website, i.e., create a file named index.html
in which you will have all the HTML).
2. Content
Creative license – you decide what you will “teach” the learner through this website. Choose a
computer science topic that you will “teach” through this website.
Use content appropriately. DO NOT USE copyrighted content. If you cannot use free-to-use content for
the website you create, use dummy content (i.e., you can use one of the dummy text generators
available here to generate dummy text: Ultimate List of Lorem Ipsum Generators)
Make sure that you create sections appropriately to display different content that you will teach.
A simple example of this can be observed in zyBooks through the chapters that are available.
Make sure to use headings appropriately for each section that you create, and try to include navigation
links for such sections on the page.
A1: DETAILED REQUIREMENTS (PAGE 1)
3. Container elements
All container elements must have an ID attribute as specified in the assignment description.
Use appropriate headings for sections to ensure accessibility.
Use only semantic HTML containers, minimize the use of generic
elements.
4. Links, images and forms
If you use images, cite the source in the readme file.
If you use your own image, i.e., a picture you took or an image you created, include a note in the readme file that
says that this is an image that you created.
If you do not cite the source or include a note to indicate your own image, you will get a penalty of 20% of the
score you obtain in the assignment.
Use external or internal (bookmark) links as appropriate.
Make sure to create a navigation element to point to various sections of the page.
Use of forms is optional for this assignment.
You are welcome to use it if you prefer or are able to use them correctly, but you are not expected to.
A1: DETAILED REQUIREMENTS (PAGE 3)
5. Layout and styling
Do not style your web page or content.
You are not expected to create any fancy layouts. Just create the HTML elements and content.
If you create simple HTML websites with no styling or layouts, it will look like a simple text-based website with no
“fancy” structures, i.e., all text will look like they have serifs (e.g., like using the Times New Roman font), the
images will look larger, all content will look as if they appear one below the other (e.g., text paragraphs, list of
navigation elements, images, to be on their own lines, etc.).
This topic is covered in the live lecture on September 9. Please refer to the recording of the lecture for information
about this topic.
You will add CSS (for styling) and add layouts in future assignments. Not in this one.
No styling, no layouts in this assignment.
A1: DETAILED REQUIREMENTS (PAGE 3)
1. Notes:
As you can see, the description of this assignment is aimed at getting you started with coding web pages using HTML.
Content:
Include relevant and respectful text content as needed and as per the computer science topic that you choose.
If all content is copyrighted, you may use dummy text. You can generate dummy text from one of the many
generators listed on this page: Ultimate List of Lorem Ipsum Generators
If you use any external content, please cite the source in readme.md
Refer to concept videos and lecture videos for guidelines on adding code and content references.
2. Code:
Make sure that you organize your code well.
Your code must be readable and properly indented.
Use comments appropriately.
Do not use comments for each line of the code.
Use comments to describe parts of your web page and what each part does.
If you have learned any concept from content other than those provided in the course, include a citation in both the comments in the
code and in the readme.md file that is in your submission.
A1: SUBMISSION
A1
Format your submission as follows:
index.html
1. Create a folder named A1
2. This folder must include the HTML file and the
ReadMe file (readme.md), and must be organized
as shown in the figure on the right à
3. Include the following details about your group in readme.md:
readme.md
img
Include any images
you will use in this
folder
Assignment 1
Your full name, B00 number & your email address
Citations to material studied / learned outside class and textbook and/or help received
4. Download the image (2021.png) from Brightspace and save it in a folder named img inside A1
5. Compress the folder (in .zip format only).
If you submit in any format other than .zip, the assignment will not be graded, and you will get a
grade of zero (0). Sorry.
6. Submit this in the submission folder (.zip) on Brightspace.
10