GL1

Lab #1 overview
GL1 is an individual assignment. It requires you to create a simple HTML web page with the
requirements given in this document.

Due date: Friday September 16th, 2022, or Monday September 10, 2022, at 11:59 pm

Instructions
Step 1 Get Started
1. Create a folder named Lab1.
2. In this folder, create a file named index.html and another file named readme.md
3. Create a folder named validation within the folder named Lab1.
4. You're ready to begin the exercise in lab 1.

Step 2 HTML basics

1. Open index.html in your code editor (e.g., SublimeText, Visual Studio Code, Atom, Brackets,
Intellij WebStorm, Notepad++, etc.)
2. Create the basic structure of the HTML web page, including the doctype declaration, the
essential HTML elements (html, head and body).
3. Set the value for the <title> element to be GL1 Submission - Your Name
a. Replace Your Name with your full name.
4. Create the three following parts inside the body element, i.e., <header>, <main> and <footer>.
These are called container elements in HTML, because they contain other elements and content
like paragraphs, lists, images, etc.
5. Give these container elements ID attributes
a. IDs are attributes that have a unique value in the web page, i.e., they are like giving
identifiers to these HTML elements.
b. Think of IDs are being like the B00 numbers that you have as students - this is unique to
you in the university. Similarly, the ID attribute's value must be unique to a single
element on the web page.
c. We will talk about this more in future classes.

Step 3 Download the content

1. Download the content file given here: GL1-Content-lab#.docx
2. This file contains sample content in the form they are to be written in the HTML, i.e., you are
expected to create appropriate HTML elements to include the content as is.
3. For example,
 a. The website title in the file, "Web page title: Lab 1 web page", must be written as the
content for the <h1> element, i.e., the main level heading element.
b. This <h1> element must be placed inside the <header> element.
c. Similarly, all the paragraphs must be placed within individual paragraph, <p>, elements.
d. ... and so on (and remember the <footer> element in the end).
4. As in the above hints and examples. please include the content from the Word document in the
content file in the HTML within appropriate elements.
5. Save the HTML file.

Step 4 Test your website

1. Open index.html in your web browser to make sure that the content is appearing almost the
way you see it in the content file.
2. Do not style the web page -- this is an HTML only exercise.

Step 5 Update readme.md

1. Open readme.md in your code editor, just like you opened the HTML file (e.g., SublimeText,
Visual Studio Code, Atom, Brackets, Intellij WebStorm, Notepad++, etc.)
2. A readme.md file is written in a markup language called Markdown. This is like HTML but is
structured differently. The purpose of a file like this is to include project introduction
information that can be used and shared with collaborators on the code project. Therefore,
we're getting you started with using this language now.
3. Add the following information into the readme file (note - you can format the text in the readme
file based on the Markdown -md- guidelines available on this website):
a. GL1: Lab 1 Submission (style this as Heading level 1 in Markdown)
b. Student Name: Your name (style this as Heading level 4 in Markdown)
c. Email: YourEmail@Dal.ca (style this as Heading level 4 in Markdown)
4. Save the readme file.

Step 6 Validate your code

1. Validate your HTML using the W3C validator.
2. Click on the option to "Validate by Direct Input".
a. Copy your code that you have written (select all the code, right-click using the mouse
and click "copy") and paste it into the text box you see in the validator.
b. Click on the "validate" button.
3. You should now see either error and warning messages, or a message saying that there are no
errors and warnings to show.
4. If there are errors and warnings, do the following:
a. The error/warning message gives you the line number in your code where the error is
found, and the position of the error on this line of code.
 b. Sometimes, HTML errors may be on the previous line to the line shown in the error
message.
c. Fix all errors and warnings you see.
d. Validate again to verify.
5. Save this validation output as PDF. Name it W3C-html-validation-GL1.pdf and save it in the
folder named validation within the folder named GL1.
a. To save web pages like this as PDF, click the right mouse button and choose the option
to "print" the web page. Then, select "Save as PDF" in the options available to print.

Step 7 Verify how your code is organized

1. When you open your folder within Windows Explorer or Finder or File Manager, you should
see the file organized as below. The GL1 folder must contain the folder named validation, and
two files -- index.html and readme.md. The folder named validation must contain W3C-html-
validation-GL1.pdf

GL1
|---- index.html
|---- readme.md
|---- validation
|---- W3C-html-validation-GL1.pdf

Step 8 Submission
1. Save the folder named GL1 as a .ZIP file, i.e., compress this folder to get GL1.zip
2. Submit GL1.zip in the submission drop box available for GL1 before the deadline.
3. You can use late points to submit late. However, no additional extensions are granted.
Marking Rubric
Submission
organization and
formatting
Use semantic elements
and containers only for
content sections; no
generic container
elements
Include IDs for container
elements as specified in
the content sample
Use valid HTML
Make image(s) accessible
HTML file names are
appropriately used
Fully meets Doesn't meet Criterion Score
expectations expectations yet
10 points 0 points
Included in the Generic containers used /10
submission as expected significantly, instead of
using semantic containers
Included in the Does not use IDs as /10
submission as expected specified
HTML is valid HTML is not valid /10
Images used are Images used are not /10
accessible accessible
Names for HTML pages Names for HTML pages /10
are chosen appropriately, are not as specified.
as recommended in the
assignment specification
Total /50

Criteria Fully meets Moderately meets Somewhat Does not Criterion

expectations expectations meets meet Score
10 points 5 points expectations expectations
3 points yet
0 points
Organize web Demonstrates Demonstrates good Demonstrates Work does /10
pages as excellent understanding of some not meet
specified understanding of web page creation understanding of expectations
web page creation web page creation yet
Include all Organizes all Organizes most Organizes some Work does /10
aspects of content in content aspects as content aspects as not meet
content as appropriate HTML specified, HTML specified, HTML expectations
specified elements element choices are element choices yet
mostly appropriate are somewhat
appropriate
Include links Includes all links as Includes most links Includes some Work does /10
and have specified and links as specified and links as specified not meet
them behave behave as specified links behave as and links behave expectations
as specified in specified as specified, but yet
the content may be unreliable,
sample i.e., not everything
may work as
expected
Make code Code is readable, Code is mostly Code is somewhat Work does /10
readable & indented and readable, indented readable. not meet
include comments are used and comments are Comments may or expectations
comments as specified used as specified may not be yet
appropriately consistently used.
Total /40
Criteria Meets expectations Does not meet Criterion Score
10 points expectations yet
0 points

Citations and notes Includes citations for Citations or note not /10
any images used. included.
If no images used, then
includes a note in the
readme file saying as
such.
If images are used and
are generated or
created by the student,
includes a note in the
readme file that says
that the images were
created or developed
by the student and are
the original work of the
student.

Total /10
Final Score /100