Lab 1: VS Code, HTML

EECS 1012. Lab 1: VS Code, HTML, Pre-Lab Quiz, Attendance, Submission
A. IMPORTANT REMINDERS
1) You should attend your own lab session (the one you are enrolled in). If you need to change your lab enrollment,
you should go to the department. Instructors or TAs cannot change your enrollment. TAs are available via Zoom
to help you during your lab hours.
2) You are required to pass the pre-lab mini quiz posted on eClass not later than the first 10 minutes of your lab
time. You have 3 attempts; and you need at least 80% to pass. However, each time you may get some different
questions. Make sure you do not start the pre-lab quiz unless you have done the pre-lab tasks (Section B) and
paid attention to the hint below. Failing the pre-lab mini quiz is equal to failing the whole lab.
Hint: pre-lab quiz 1 may have questions from the course outline/syllabus, academic honesty slides, and Intro
slides among other questions.
3) You can also have your work verified and graded during the lab sessions. Feel free to signal a TA for help if you
stuck on any of the steps below. Yet, note that TAs would need to help other students too.
4) You can submit your lab work in eClass any time before 21:00 on Wednesday of the week the lab is for.
B. IMPORTANT PRE-LAB TASKS YOU NEED TO PERFORM BEFORE THE LAB
1) Find out which lab you are officially enrolled in.
2) Download this lab description and read it completely. Save the supplied files in a separate folder (directory) on
your computer, name that folder Lab01.
3) Read the course outline and syllabus, here:
https://www.eecs.yorku.ca/course_archive/2021-22/F/1012/
4) Read the academic honesty slides available on eClass.
5) Read the Intro slides; there are some links in the last two slides, make sure you explore all the links and go over
some basic/first steps.
6) Download and install VS Code on your computer from here: https://code.visualstudio.com/download
7) Learn basics of HTML including like p, img, h1, h2, html, body, li from https://www.w3schools.com/
8) Also learn about what a descriptive tag is in HTML and what an empty tag is.
C. GOALS/OUTCOMES FOR LAB
1) To get you familiar with the lab environment that uses Linux,
2) To get you familiar with a code editor, in this case Visual Studio Code (aka VSCode),
3) To get you familiar with writing a simple HTML document from scratch,
4) To get you familiar with your TA, lab attendance, and your work evaluation,
5) To get you familiar with submitting your lab results through eClass.
D. TASKS
Note: to do the tasks that were originally performed using university lab computers on your own computer, you
need to install 1) a plain text editor (preferable with code syntax highlighting; e.g., VS Code), and 2) Firefox. Your
computer does not need to run Linux. You may use other browsers as well; however, keep in mind that the
shortcuts the names, and the layout of additional development-related features and menus tend to differ across
browsers.
Part 1: Using Firefox on your own computer (nothing is submitted for this part)
1) Launch Firefox (on lab computers this would most probably automatically render the
eecs.lassonde.yorku.ca webpage),
a) click on this icon:
If the icon is not on the current screen, use whichever method is applicable for your computer
b) Using Firefox, open the supplied index.html file, which has a title “Web Sandbox”. You should see a page
starting with “Welcome to the Web Sandbox!”.
c) Close Firefox.
Part 2: Manipulating a file using VS Code
a) Find the index.html file that came with this lab on your own computer
b) Now, right click on index.html, and click on Open With Other Application (the exact phrasing will vary
depending on the operating system you use). If you do not see Visual Studio Code among the
recommended applications, click on View All Applications, and scroll down until you see it, then double click
on it. VS Code may (or may not) have your web browser automatically open the Visual Studio webpage. If it
does, just close the web browser. What you now see should look like this:
Is the content of this file familiar to you? If your answer is negative, do Part 1 (above) again.
c) Now, go to line 8 and change it to this:
You should replace MYNAME with your actual first and last name.
To save these changes to the file, press Ctrl + S, or click on File (near top left) and then on Save.
Part 3: reopening your page in a browser
Repeat the steps in Part 1: Launch Firefox again, and then open your file. (If you do not know how, read Step 2 of
Part 1 again.) Do you see your first and last name in what this time Firefox renders!? If not, do Part 2 again.
Part 4: creating an HTML document named myFirst.html.
1) Launch the VSCode editor
2) In VSCode, open folder where you saved the lab files; then make a new file and save it as myFirst.html
Now, type the following lines of codes in your myFirst.html file, and replace … with some appropriate
code:
<!DOCTYPE html>
<html>
<head>
<title> John first page</title>
</head>
<body>
<h1> Welcome to my first website</h1>
<h2> my name is yourname</h2>
…
</body>
</html>
3) Open the resulting file in Firefox. Its structure should look like the following figure. Make sure a) you
replace the name with your own name, b) replace the hobbies with at least 4 of your own hobbies, and c)
replace the favourite places/images, with at least 4 of either your favourite foods, or favourite drinks, or
favourite arts, or favourite cars, or favourite hair styles, etc. The width and height of the images should be
the same. All images should be references to images available on Internet (not a local file on your
computer).
Hint: you need the following html tags: <h1>, <h2>, <p>, <strong>, <u>, <hr>, <ul> or <ol>, <li>, and <img>
Part 5: Verifying your work and submitting it to eClass
For details of this part, please see SUBMISSIONS section below.
E. SUBMISSIONS
1) Manual verification by a TA
You may want to have your TA verifying your lab before submission. The TA will look at your various files in their
progression. The TA may also ask you to make minor modifications to the lab to demonstrate your knowledge of
the materials. The TA can then record your grade in the system.
2) eClass submission
You will see an assignment submission link on eClass. Submit your index.html and myFirst.html to the
appropriate lab folder withing the deadline. Otherwise, that is equivalent to failing in this lab. We do not accept
any work after the deadline. We do not extend the deadline either. We do not accept submissions by email. We
have already provided all students with several grace tokens for a bad day they may have. For academic fairness
to all students, we do not make exceptions by providing extra grace tokens to anyone.
F. AFTER THE LAB
Study each of the HTML elements/tags that you saw in this lab via https://www.w3schools.com/