HTML/CSS Assignment 3 – Due Date: June 8th, 2017
For this lab, you are required to follow the steps to create two pages, Name the three pages as index.html and menu.html
1. Open a new file in your text editor (Notepad++)
2. Create a home page and save it as index.html, create the HTML code (based on the screen shots):
a. Add header and h1 tags.
b. Add a nav tag that contains a vertical navigation bar made of unordered list. Note that the items of the navigation bar are also hyperlinks.
c. Add main tag that specifies the main content of the page. Inside main tag:
i. Add headings of size h2 and paragraphs (look at the screen shots)
d. Add the image (seafood-resturant.jpg), save image in the same folder as the index.html. Change the height and width of the img to 355 and 250 pixels respectively.
e. Draw a box around the content of the page by using div tag ( div /div ). The starting tag ( div id = “wrapper” ) should be placed before the start of header tag.
The ending tag ( /div ) should be placed right after the /footer . Note that the id selector uses the id attribute to select a specific element within an HTML document and apply style to it.
f. Add a footer to your page based on the screen shot.
3. Add CSS code for index.html:
a. You can add internal CSS (within the head section)
b. Apply background color to the page: #00005D
c. The fonts used in the page are: Verdana, Arial, Sans-serif
4. Apply following styles to the div tag with id = “wrapper”:
a. Select it by using this code: #wrapper
b. Apply background color of: #B3C7E6
c. Apply text color of: #000066
d. You should think of a way to center the div tag by changing CSS styling properties. Note that, the width of the div tag is 80% of the screen.
5. Apply following styles for the header tag:
a. Apply background color of: #869DC7
b. Apply text color of: #00005D
c. Apply appropriate inside spacing for the four sides (look at the screen shot)
6. Apply following styles for the main tag:
a. Apply background color of: #FFFFFF
b. Apply text color of: #000000
c. Add a top and bottom padding of 10px and left and right padding of 20px
d. You need to think of a way to fix the problem if the content of the main tag does not within the main tag, by using a CSS style property.
7. Apply following styles to the img tag:
a. The img is placed on the right.
b. Add the appropriate outside spacing for all the four sides of the image (refer to screen shot).
8. Apply following styles for the h2 tags:
a. Change the color of the text to: #869DC7
b. The fonts used for the h2 tags are: Arial, Sans-serif
9. Apply following styles for the nav tag:
a. The nav section is placed on the right
b. Change the format of the font to bold
c. Set appropriate width for the nav section by using CSS width property.
d. Apply a letter-spacing of 0.1em.
10. Apply following styles to the a tags in the navigation bar:
a. Apply background-color: #B3C7E6
b. Apply a border bottom of solid style, color of #FFFFFF and width of 1px.
c. Apply appropriate inside spacing for the four sides of the a tags.
d. Change the display property and remove the underline used for the links.
e. Add inside spacing required for the four sides.
f. Apply text color #FFFFFF if they are unvisited links.
g. Apply text color #EAEAEA if they are visited links.
h. Apply text color of #869DC7 and background-color of #EAEAEA if the cursor is hovered on the link.
11. Apply following styles to the footer:
a. Change the background-color to #869DC7
b. Change the font-size to match the screen shot
c. Center the text.
d. Add inside spacing required for the four sides.
12. Refer to the two screen shots for the Home page.
13. Create a menu page and save it as menu.html, create the HTML code (based on the screen shot):
a. Add header tag, within header tag:
b. Add h1 tag with the text: All YOU CAN EAT
c. Add an unordered list with these items: SOUPS & SALADS, FISH & CHIPS, TACO'S, SANDWICHES, DESERT, SIDE DISHES. The items are also hyperlinks.
d. Add a main tag for the main content of the page.
i. Add the image: (seafood.jpg), change the width to 350 and height to 300 pixels.
ii. Add 2 paragraphs of text based on the screen shot.
14. Add a footer, style it to italic and small text formats.
15. Add CSS code for main.html:
a. You can add internal CSS (within the head section)
b. Apply background color to the page: #00005D
c. The fonts used in the page are: Verdana, Arial, Sans-serif
d. Apply text color of white or (#FFFFFF).
e. You need to think of a way to center the body section by using CSS styling properties. The width of the body section is 80% of the screen.
f. Add a margin of 10px to the top side.
16. Apply following styles for the header tag:
a. Apply background color of: #869DC7
b. Apply text color of: #00005D
c. Apply appropriate inside spacing for the four sides (look at the screen shot)
d. Apply appropriate font-size. (look at the screen shot)
e. Apply a margin of 20px for the bottom side.
17. Apply following styles for the main tag:
a. Apply background color of: white
b. Apply text color of: black
c. Apply appropriate inside spacing for the four sides (look at the screen shot)
d. You need to think of a way to fix the problem if the content of the main tag does not within the main tag, by using a CSS style property.
18. Apply following styles for the img tag:
a. The img is placed on the right.
b. Apply a left-margin of 30px.
19. Apply text color of white and font size of large to the a tags.
20. Apply styling to the li tags, so they are displayed in one line and have appropriate inside spacing. Add a margin left of 5px.
21. Apply text color #FFFFFF if the a tags are unvisited links.
22. Apply text color violet if the a tags are visited links.
23. Apply text color of violet if the cursor is hovered on the links.
24. Refer to the screen shot for the Menu page.
Home page
Home page

Menu page
What to hand in:
1. Zip the two files: index.html, menu.html in a folder.
2. Upload the zipped folder on the portal, name the folder: CSCI 101- Lab Assignment 3.
3. The last day to upload your assignment is Thursday, June 8th, 2017.
4. Do not email your assignments.
PLEASE ENSURE THAT THIS IS YOUR WORK AND NOT A COPY OF OTHER’S SOLUTIONS, OTHERWISE MARKS WILL BE LOST AND DISCIPLINARY ACTION WILL BE TAKEN ACCORDING TO COLUMBIA COLLEGE REGULATIONS!