LAB #2 HTML and CSS Solution

Remember to do the pre-lab quiz.
Once again, you must attend your assigned lab session (we will be marking your submission in the lab).
You must arrive on time – anyone later than 30 minutes will not be admitted to the lab.
Only a valid physician statement will be accepted if you are absent.



NOTE: This lab is more complicated, you need to attempt to complete as much of the lab as possible before coming to the lab.



GOALS/OUTCOMES FOR LAB



To learn how to change the presentation an HTML document using CSS



To help you analyze an HTML page and decide how to modify it for improved appearance using CSS.



It will be very useful to go over the Case Study in the examples I provided on the Additional Resource link week 3. The 12 minute video on CSS is also very useful, especially in showing you how to arrange div sections. You will also need to look at the lecture on “Layout” (see week 4).




2. LAB 2 – TASK




You are provided a simple eatfood.html document and corresponding images. Your job will be to improve the presentation of the HTML content and structure in an iterative (step-by-step) fashion.



You will generate a total of four HTML files and CSS files in this process. You should demo each HTML file to the TA. When the TA comes by, have each HTML file open in a different tab so you can show the progression.



See next pages for details on how to modify your HTML and CSS files.






3. SUBMISSIONS




1) [Manual verification by a TA]




You will need to have one of the TAs verify your lab before submission. The TA will look at your various files in their progression. If you have completed the lab assignment before coming to lab, the TA may ask you to make minor modifications to the lab to demonstrate your knowledge of the materials.




The TA will mark your name off a list and ask you to sign that you have been verified.




2) Moodle submission

You will see an assignment submission link on Moodle.




1) Create a folder named “Lab2” and copy all of your lab materials inside (image folder,




eatfood_ex{1,2,3,4}.html and eatfood_ex{1,2,3,4}.css). This folder should be compressed (or tar.gz on the VirtualBox machines) and the compressed file submitted. Please follow the instructions in the following video that we used for Lab 1:

https://www.youtube.com/watch?v=stEOh6ntV5o










STARTING POINT: eatfood.html and images in image folder. You are given the following HTML file and associated images. This file has no CSS file. The lab task is to improve the presentation of this HTML document by modifying the HTML slightly at each iteration and creating an associated CSS. We will do this step by step so you can see the process.

Download the lab’s ZIP file and unzip the contents into your WWW directory (if you are using your own laptop, you can save it to any folder). After unzipping the content, you will have two (2) files in the WWW directory (eatfood.html and Lab2.pdf). You will also have one (1) directory called “images”. The image directory will have five (5) images (background.gif, idly.png, jianbing.jpg, pide.jpg, shawarma.jpg). If you click on the eatfood.html file it should appear as shown below.




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 intention of this exercise is to to help you see the layout of your sections created using div, span, and classes.




Exercise 2: Create files: eatfood_ex2.html and eatfood_ex2.css. NOTE: The only change to eatfood_ex2.html is that it links to eatfood_ex2.css instead of eatfood_ex1.css.




1) Place a green border around all of the content.

2) Top of the page should have a red border.

3) The “Good things to eat” (and h2 element) should have its own border that is orange.

4) Each journal entry should have a blue border.

6) All paragraphs should have a thin black border. This is so you can see the page flow. Note, all images should be nested within <p elements.







i) Modify the CSS based on the annotations on the right.
1) Change the body of
the HTML page to have
ii) Pay attention to the difference between margin and padding.
a background of


iii) Use the rgb(-,-,-); notation for the color property in your CCS.
“background.gif”


(provided).


Add a left and right


margin of 10% to al of


the main content.









2) Change the div around all the elements (the one with a green border) to have a white background.










3) Change all the entries (all items with a blue border) to have the following background color:




R=196, G=226, B=255




You should also add padding of 5px and a top-margin of 10px.




(Note the difference between padding and margin)




4) Remove the black border for the <p elements.Exercise 3: (create files: eatfood_ex3.html and eatfood_ex3.css. )




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 red 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 image should stay within the bounds of the blue box; that is, it should not bleed into the other content below it. You will need to use the “overflow” attribute to make the float element fit correctly.




Exercise 4: (create files eatfood_ex4.html and eatfood_ex4.ccs)




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 all fonts in the HTML document to a better font (sans serif) of your choice.







Change border to




white. Make the




background




R=168, G=213, B=255







Change entries




border to




R=168, G=213, B=255




Change dates’ style to have a dashed black bottom border, width 2px.




Remove border of footer and align the text to the centre.