Attachment below. coding experience required though

1

CS 170 - Computer Applications for Business

Spring 2016 - Assignment 4 Advanced HTML - CSS

Due Date

Before 11:00 p.m. on Friday, February 19, 2016

Accept Until

Before 11:00 p.m. on Friday, February 26, 2016

Evaluation

15 points

Submit to Sakai

Assignment4.zip file

To get credit for this assignment:

1. Using the zip utility (see “creating_zip_file.pdf” that can be found in CS170_Spring_2016 −> Resources

−> Recitation Files) to create an Assignment4.zip file.

2. The .zip file should contain your four (4) html files, your optional theme.css, and your pictures.

3. Upload and submit the .zip file through Sakai.

Background: This assignment is designed to deepen your understanding of the more advanced HTML5 tags, CSS, and

styles. Directions

Create a website consisting of four pages as below.

 A homepage named a4_home.html to discuss different dog breeds as pets. (See next page).

 Three ‘child’ pages named a4_breed1.html, a4_breed2.html, and a4_breed3.html which describe the breed and their advantages as a pet. (See next page).

Your pages should:

 Using HTML comments add your name, section and TA name. Each on a separate line. (This will (should) NOT be visible in the document on the web browser)

 Use internal styling for the body, header (h1, h2 etc.), paragraph, list and table. (Using external styling is optional) to make them appear nicer.

 Have a vertical navigation bar on the left side of each page using a list of links. Make sure you can go back to the Home page from other pages.

 Display the images using the width (or height) attribute so they appear sufficiently large or small. Also create image links so that clicking on a picture of a dog image in the homepage will take you to

2

the corresponding breed page.

 Continue to use the <title> tag in the head section to give a suitable display name, and use comments. (Include your name, your TA’s name and the assignment name in comments in the head sections, but try to go beyond that).

. The appearance of the child pages (a4_breed1.html, a4_breed2.html, a4_breed3.html) should be similar to:

3

Suggestions:

1) Create skeleton files:

 Create the a4_home.html file

 Add the doctype and the html, head, and body tags

 Add the comments for the head section (name, TA etc.)

 Add the code for the navigation bar to the body and a suitable style tag to the head section

The code for the navigation bar would look similar to:

<ul style="width:100px; height:300px; list-style:none;

text-align:right; float:left; padding:24px; ">

<li> <br> <a href=" a4_home.html">Home</a> </li>

<li><a href=a4_breed1.html">breed 1</a></li>

<li> <a href=a4_breed2.html">breed2</a></li>

<li> <a href=a4_sbreed3.html">breed 3</a>

</ul>

Make appropriate and creative modifications!

 Using the ‘save as’ menu item create 3 copies of this file named a4_breed1.html,

a4_breed2.html, and a4_breed3.html

2) Add Content:

Follow the sample outputs shown in the previous page. You may reuse any relevant content from the

previous assignment.

3) Add some style:

 The tables in the child pages should use blue Helvetica font on a white background

 The menu should be styled as follows:

 Colors: white text on blue background

 Font: Arial

 Note: To make the menu appear on the left side use float:left (see the code given above). If you see

any content or images misaligned (appearing under the menu), increase the height of the unordered

lists height attribute.

4) Once you are done:

 Test to make sure the 4 pages look OK and that the links work.

 Create a .zip file adding in all the files and pictures

 Upload the .zip file to Sakai

5) Tips

 Using global selectors for CSS might help you with being consistent across pages

 Externally linking a theme.css file might help you avoid duplicating code in different pages.

 Use inline/embedded CSS only for very specific cases, try to be as general as you can.

4

 Pay attention to pages you usually use (facebook, cnn, twitter, etc) for styling tips from pros!

References: Lectures’ slides and examples

 w3schools.com o ALL TAGS: http://www.w3schools.com/tags o Comments: http://www.w3schools.com/tags/tag_comment.asp

 Chapters 4 of the Fluency 6 textbook