Lab 2: HTML and CSS

EECS 1012. Lab 2: HTML and CSS
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). Failing the pre-lab mini quiz is equal to failing the whole lab.
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. In order to pass this lab, your grade in it should be at least 70%.
Important note: this lab is more complex and time consuming compared to the previous lab; you need to
attempt to complete as much of the lab as possible before attending your lab session. We do not accept
late submissions. Email submissions receive a 0 too.
B. IMPORTANT PRE-LAB WORKS YOU NEED TO DO BEFORE GOING TO THE LAB
1) Download this lab description and the associated files and read it completely. Save the supplied
files in a separate folder (directory) on your computer, name that folder Lab02.
2) Follow the following link for more understanding of CSS:
• Demo: https://www.w3schools.com/css/css_intro.asp
• Color picker: https://www.w3schools.com/colors/colors_picker.asp
• Complete list of font properties https://www.w3schools.com/cssref/pr_font_font.asp
• Video on fonts: https://www.youtube.com/watch?v=yIVPuSyepX0
• Complete list of text properties https://www.w3schools.com/css/css_text.asp
• CSS Box Model: https://www.w3schools.com/css/css_boxmodel.asp
• HTML layout: https://www.w3schools.com/html/html_layout.asp
C. GOALS/OUTCOMES FOR LAB
1) To learn how to change the presentation of an HTML document using CSS,
2) To help you analyze an HTML page and decide how to modify it for a desired appearance using CSS.
D. TASKS
1) You are provided a simple diary.html document and corresponding images. Your job will be to
adjust the presentation of the HTML content and structure in an iterative (step-by-step) fashion.
2) You will generate five HTML and CSS files in this process. When you decide to demo your work to
the TA, please have each HTML file open in a different tab of your browser, so you can show the
progression.
3) See the following pages for details on how to modify your HTML and CSS files.
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. Create a folder named “Lab02” (if you
haven’t done so already) and copy all of your lab materials inside (image folder,
diary_ex{1,2,3,4,5}.html and diary_ex{1,2,3,4,5}.css). This folder should be compressed (zip or
tar.gz) and the compressed file submitted.
F. STARTING POINT: diary.html and images in the image folder.
You are given the following HTML file and associated images. This file has no CSS file. The lab task is to
adjust the presentation of this HTML document by modifying the HTML slightly at each iteration and
creating associated CSS files. We will do this step by step so you can see the process.
Exercise 1: (CREATE: diary_ex1.html and diary_ex1.css)
Try to match the output below as closely as possible – see the annotation for details. This exercise is to set
up the basic HTML structure to assist in further modification. The associated CSS is to help you see how the
item flow in the document. You need to organize the HTML content by adding in ids, classes, and associate
these with <spans> and various <div>. This requires you to modify the HTML page to add in these new
elements. In your CSS, create the corresponding selectors to set the borders to have a color and border
(make it at least 2 pixels thick). The intent of this exercise is to to help you visualize the layout of your
sections created using div, span, and classes.
1) Place a blue border around
all content; add a div
class="content" for this.
7) Bottom (footer) should
have a magenta border.
6) All paragraphs should have
a thin grey border. This is so
you can see the page flow.
Note, all images should be
within <p> elements.
4) Each diary entry should
have a lime border.
don’t use id or class for 5
5) The “by <author name>”
within these entries should
have a cyan border (consider
span element).
don’t use id or class for 2 and 3
2) The header of the page should
have a green border.
3) The “The books I've read…” (that
is in h2 element) should have its
own border that is orange.
Exercise 2: (CREATE: diary_ex2.html and diary_ex2.css by copying from Exercise 1.)
NOTE: The only change to diary_ex2.html is that it links to diary_ex2.css instead of diary_ex1.css.
i) Modify the CSS based on the annotations on the right.
ii) Pay attention to the difference between margin and padding.
iii) Use the rgb(-,-,-); notation for the color property in your CSS.
1) Make the body of the
HTML page to have a
background of
“paper.png” (provided).
Add a left and right
margin of 10% to all of the
main content.
2) Change the div
around all the elements
(the one with a blue
border) to have an ivory
background.
3) Change all the
entries (all items with a
lime border) to have the
following background
color:
R=236, G=236, B=245
You should also add
padding of 15px and a
top-margin of 10px.
(Note the difference
between padding and
margin)
4) comment out
paragraph borders.
Exercise 3: (CREATE: diary_ex3.html and diary_ex3.css by copying from Exercise 2.)
This exercise will change the alignment of elements using float, overflow, and alignment attributes in the
CSS. This should be possible without editing the main HTML page (other than the link to the new CSS). See
the annotations for the changes to make. Your webpage should look as close as possible to below.
The heading text in the
green box should appear
on the right side of that
section of the page.
The journal entries’ images
should float on the right
side next to the
surrounding text. The
images should stay within
the bounds of the blue
box; that is, they should
not bleed into the other
content below them. You
may need to use the
“overflow” attribute to
make the float elements fit
correctly.
Exercise 4: (CREATE: diary_ex4.html and diary_ex4.css by copying from Exercise 3.)
This exercise will finish the webpage. This last iteration makes small cosmetic adjustments to the border
and colors. Again, you will not need to modify the HTML file other than linking in the new CSS.
Change border to white.
Make the background
R=216, G=216, B=225
Change entries border to
R=216, G=216, B=225
Remove border of footer
and align the text to the
centre.
Change all fonts in the
HTML document to a
better font (sans serif) of
your choice.
Change the author info to
be in italics, slate grey
Exercise 5 (advanced layout):
This last exercise is to modify your HTML and CSS to add in a nav section (LINKS) to your website or width
196px. The colour of this section can be the same as the entries (that is, Book 1, Book 2, Book 3, … ); hence,
don’t rewrite the styling just use the one for entries. Note that you’ll have to consider how to make the
section such that the entries adjust correctly as shown below. Try to make your webpage look as close as
possible to the one below.
In the navigation section, add the following HTML code:
 <h2>Links</h2>
 <ul>
 <li><a href="https://www.torontopubliclibrary.ca/">TPL</a></li>
 <li><a href="https://www.blogto.com/bookstores/">Bookstores</a></li>
 <li><a href="https://www.boredpanda.com/parents-share-tips-tricks-to-make-kidsread/">Parents Hints</a></li>
 </ul>
G. AFTER-LAB TASKS (THIS PART WILL NOT BE GRADED)
Revisit each of the new HTML tags as well as CSS statements and properties that you used them in this lab
via https://www.w3schools.com/ and explore more features about them.