IT-202: Assignment #1, Spring 2025
Introduction
Remember to use an acceptable text editor such as Visual Studio Code. Do not use TextEdit (Mac users) or Windows Notepad.
Details Matter!
One key objective of this assignment -- and of the course in general -- is to recognize that in a technical course such as this one, even seemingly minute details matter. In other words, you must demonstrate that you can adhere to and follow all of the tiny little details and requirements inherent in a technical course.
This includes issues such as: case sensitivity (e.g. DOCTYPE tag in upper case, whereas all file names should be in lower case), appropriate use of whitespace, inclusion of meta tags, file-naming conventions, and so on. By the time you are done with the first week of materials and this assignment, you must demonstrate that you can create a page that adheres to all of the conventions described. As an example, you can start with the HTML template discussed in the first HTML lecture.
Create the following two web pages
Page 1
Have a main heading called something like "Assignment #1, Page #1"
In this page, have the following paragraphs. Solutions can be found in lectures, News postings, and the syllabus.
All of the following paragraphs should be inside HTML <p> tags.
A short paragraph describing the difference between the "due date" and the "end date" on an assignment. In this paragraph, change the color to blue using an inline style.
A short paragraph describing one thing that should always be included when emailing the professor. (Hint: It has to do with the subject line of the email message.)
A short paragraph describing why it is important to subscribe to News postings. In this paragraph, also write a short sentence confirming that you have subscribed to the News postings. For this paragraph, use an inline style to make the paragraph appear italicized (i.e. in italics).
A short paragraph describing why HTML comments can be helpful.
Lastly: Create an ordered list where you provide 3 ways to get help in the course. Using CSS, have the list be in upper case letters (i.e. A, B C) instead of the default of (1, 2, 3). It is possible that we will not have explicitly discussed how to do this in class. If so, go to the MDN (or W3Schools) website, and look under the Reference pages for CSS. From there explore until you find the appropriate CSS property to change the appearnce of a bullet.
Page 2
Create the following web page
Have a main heading called something like Assignment #1, Page #2. Inside this heading have two subheadings. Since these are a level down from the main title of your page, they should be in <h2> tags. For your two subheadings have one called Olympic Gold Medalists and another called Form Practice.
Under "Olympic Gold Medalists"
To save you time, here is one page with a list of medalists.
Create an ordered list of a few (at least 3) examples of category. (e.g. Leon Marchand, Summer Macintosh, Simone Biles).
For this ordered list, instead of the default 1, 2, 3 etc, change it to lower case Roman numerals (i.e. i, ii, iii iv, v, vi, etc.)
The CSS property to change a bullet type is list-style-type. Search this property in either MDN or W3Schools to see how to apply this to create the lower case Roman numerals as required. (That is, do not use the HTML type attribute).
Each item should open to some link (e.g. a Wikipedia page) for that topic/person. The link must open in a new page or tab.
Remember that you may not use deprecated tags or attributes.
Under each item in the above list, have a nested sublist in which you list the event in which the person won. (If they won more than one, just pick one of them). This list should be unordered. Change the default bullet from a solid circle, to some other type of bullet. Again, use CSS to do this.
Form Practice
For this part, create a form in which you simulate a (very ) simple calculator. Your calculator will ask for the height and circumference of a cylinder, and will calculate the volume. We won't worry about the actual calculation for now though, since we haven't yet learned any JavaScript. So your form will simply be made up of:
a text field representing the height (i.e. where you ask the user to enter a height) of the cylinder
a text field representing the circumference
a button that says "Calculate the Volume"
We will shortly learn how to actaully do this calculation. But for now, this is simply a chance to practice creating a form.
Include an Image
Somewhere on your page, also include an image. It can be anything you like!
Submission Requirements
Submit your HTML file(s) and any images if required by the assignment to the D2L Submissions folder.
Upload your files to the web server (don't forget to upload any accessory files such as images)
In the "Comments" box in the D2L Submissions folder, provide the URLs to each of the two web pages you created for this assignment.
Be sure to submit your assignment no later than the due date specified on the checklist. Again: Note that the assignment is due by the "due" date. That is, you will note that the submissions folder also includes an end date: This "end" date is the last point at which D2L will allow you to submit your assignments. However, the "end" date is essentially a grace period. You may submit up until the end of the grace period, but please note that there will be a small (3 point) penalty for each day after the due date the assignment is submitted. In other words, if you submit 1 day after the due date, 3 points will be deducted. 2 days late = 6 points. After 2 days, D2L will not allow you to submit.
Details Matter! I realize that I have already said this, but it bears repeating. In any situation that requires programming, it is vital to respect the importance of even seemingly tiny details. As we continue through the course, more and more "nitpicky" details are going to be added. So you want to make sure that you stay on top of them as we progress. Reinforcing good habits and regular practice now will benefit you tremendously when the course really starts to pick up steam (around weeks 3 and 4).
Assignment Checklist: Be sure to use the "Assignment Checklist": This can be found on the main course web page. You work hard, so you don't want to miss points on "silly mistakes", i.e. things that are easy to do. I put this assignment checklist together to help you keep track of several of those little things that are sometimes easily forgotten. You should refer to this web page throughout the entire course. It is almost guaranteed to help you minimize losing points for small or silly things.
Important note about uploading HTML documents to D2L
The D2L submissions folder can accept pretty much any type of file (PDF, Images, Word documents, Zip files, etc.) However, when you upload an HTML file (as you are doing for this assignment), D2L sometimes does funny things to that file. In particular, if, after you have submitted your HTML file, if you then go to your submission page on D2L and click on that file to view or download it, you may notice that the document shows code that is different from the code that you wrote!
However, do not worry. When the grader downloads the HTML file, they will see your original file – exactly the way you wrote it.
If you want to confirm that the file has been uploaded as you intended, then do not click the file directly. Instead select your file using the checkbox, and click on the 'Download' button. When you download the file and open it in your text editor, it will be the same code that you uploaded. This is the same procedure that the grader will be using.
But the MAIN thing is for the URLs for your pages to be working properly. The HTML documents that you attach to D2L are mainly there to confirm the date and time that the assignment was submitted.
Questions?
Remember to post to the D2L Discussion forum! This way we can all help each other out. However, for obvious reasons, please do NOT post chunks your code unless it is very small snippets. I don't mind posting a line or two, but more than that, we run the risk of simply posting answers to the assignment on the forum!