Deadline: Wednesday, September 19th, 2007, 11:59PM

Create A Web Page to Introduce iPod nano

In this exercise we use the knowledge from 3rd and 4th lecture to create a simple webpage to introduce one of the widely popular Apple product - iPod nano. Before you start click here to download the zip file which contains XHTML template for the web page, content of the web page, images used in the web page and a screen shot of the completed web page.

Content of the zip file:
assign2_template.html
content.txt
iPod_nano_1G.jpg
iPod_nano_2G.jpg
iPod_nano_3G.jpg
screenshot1.PNG
screenshot2.PNG
screenshot3.PNG
screenshot4.PNG
screenshot5.PNG
screenshot6.PNG
screenshot7.PNG

Inserting text

Create a web page called "ipod_nano.html" using the HTML template "assign2_template.html" provided in the downloaded zip file. Insert all the text content from the "content.txt" into your web page. You have divide the text into multiple paragraphs, and refere to the screen shots for the division of the paragraphs.

Formatting Headers

Apply <h1> tag to the text "iPod Nano", and create a rule called "h1" in "ipod_nano.html" inside the internal style sheet section and format it as following:

The rule h1 should has
font family is Georgia, "Times New Roman", Times, serif; font-size is 32 pixels, text color is #3099D3; has a 20-pixel padding and 6-pixel border with #9DACBF color. Decide rest of the style properties yourself to make it the same as the one in the above screen shot.

Apply <h2> tag to the text "Features" (line 25 in content.txt), "Criticisms" (line 31), "Colors and pricing" (line 37), "First generation" (line 47), "History" (line 51), "Endurance" (line 55), "Electronics" (line 59), "Consumer reactions" (line 63), "Second generation" (line 71), "Endurance" (line 77), "Third generation" (line 81) and create a rule called "h2" in "ipod_nano.html" inside the internal style sheet section and format it as following:

The rule h2 should has
font family is Georgia, "Times New Roman", Times, serif; font-size is 20 pixels, text color is #B9090B.

Apply <h3> tag to the text "Contents" (line 12 in content.txt), and create a rule called "h3" in "ipod_nano.html" inside the internal style sheet section and format it as following:

The rule h3 should has
font family is Georgia, "Times New Roman", Times, serif; font-size is 18 pixels, text color is #988F5E; and has 0 margin and 0 padding.

Apply <h6> tag to the text "© 2007 Wikipedia" at the very bottom of the content.txt file, and create a rule called "h6" in "ipod_nano.html" inside the internal style sheet section and format it as following:

The rule h6 should has:
font-size is 10 pixels, text color is #3099D3; text-align is center; has 20-pixel margin at the top and bottom and 0-pixel margin at the left and right side; 20-pixel padding; and a solid 2-pixel thick border with color #9DACBF.

Creating the navigation menu

Insert a table with only one cell and without width and without border attribute, right after the 3rd paragraph. Create a rule called ".contentMenu" inside the internal style sheet section of the web page and let width property equal to 250 pixels, and let it has a 1-pixel thick solid border with color #ddc. Also let it has 0 margin and a padding of 20-pixels at the top and bottom and 10-pixels at the left and right side. The table border should look like as in the following screen shot:

Apply the rule ".contentMenu" to the only cell of the table(apply it to the <td> tag not to the <table> tag, by let the class attribute of the <td> tag equal to "contentMenu", i.e. put class="contentMenu" inside the openning <td> tag).

As showed in the screen shot, put the menu items "Features" (line 13 in content.txt) to "Third generation" (line 23) inside the only cell of the table created above. And make a list which looks like above. Create rule called "ol" inside the internal style sheet section and let font-size property equal to 12 pixels.

After you finished creation of the list, you might notice it still doesn't look like the list showed in the screen shot above. Because for each item in the list above, a link is created and pointed to one place in the document. Actually, each item in the list corresponding to a header 2 text we formatted above.

So now you have to do two things: 1) create anchors (or places) inside your "ipod_nano.html" file; 2) create links and let them link or point to the places (or anchors) created. As an example of creating an anchor for "Feature" right before the HTML code <h2>Features</h2> is as following:

	<a id="Features" />
	<h2>Features</h2>

Assume we already created the menu list, then we might have menu item <li>Features</li> in the "ipod_nano.html". Then we can create a link for this menu item and link it to the anchor we created in the above example by following:

	<li><a href="#Features">Features</a></li>

Finish creating anchors for all the header 2 text and creating links for all the corresponding menu items to link to the anchors. After you finish, the menu items should look like the screen shot.

Create an external link

Create an external link for the first "Apple" word in the first paragraph, and link it to the Apple web site (address: http://www.apple.com/).

Creating the table

Insert a table in "ipod_nano.html", right after the header 2 text "Colors and pricing", with 4 rows and 5 columns. Copy the content of each table cell from the "content.txt" file and paste into the corresponding cell of the table in "ipod_nano.html". Refer to the following screen shot for what text to put into which cell:

Ater finish filling in the content of the table, create a style sheet rule called ".priceTable" in the internal style sheet section of the web page. Add the following properties to the rule:
border-width is 1 pixel; border-spacing is 0 pixel; border-style is solid; border-collapse is equal to "collapse"; has margin of 25 pixels at the top and bottom, and 0 pixel at the left and right side; font-size is 10 pixels; text-align is center; border-color is #FF6600.

Create a style sheet rule with name ".priceTable th" and add following properties:
border is 1-pixel thick solid with color #FF6600; has 4-pixel padding, and background color is #666666;

Also create a style sheet rule with name ".priceTable td" and add following properties:
border is 1-pixel thick solid with color #FF6600; has 4-pixel padding.

Apply the rule "priceTable" to the table created above, and make it look like the table in the screen shot.

Inserting images

Insert the image "iPod_nano_1G.jpg" at the beginning of the paragraph which starts with "The iPod nano is Apple's mid-range ...". Insert the image "iPod_nano_2G.jpg" at the beginning of the paragraph which starts with "Advertising emphasized the iPod nano's ...". Insert the image "iPod_nano_3G.jpg" at the beginning of the paragraph which starts with "On September 12, 2006, Apple updated ...".

Create a style sheet rule with name ".imgleft" in the internal style sheet section of the web page. The rule should has:
position property equal to "relative"; float property equal to "left"; .4em margin at the top, bottom, and right, and 1em margin at the left side.

Also create a style sheet rule with name "img.imgleft", and let it has following properties:
padding is equal to 0 pixel; has a 5 pixel thick solid border with color #FFFFFF.

Apply the "imgleft" rule to the images "iPod_nano_1G.jpg", "iPod_nano_2G.jpg", and "iPod_nano_3G.jpg". Following is an example of correct display of the images:

Creating the last list

Make the text, which describes the dimention and weight of the iPod nano right after the last paragraph, as an unordered list as following:

You might have problem with the font-size of the text. Solve the problem by creating a style sheet rule with name "ul" and add correct text property. Correct font-size for this list is 12 pixels.

Check the correctness of your web page

After you complete inserting all the content and creating and applying all the necessary style sheet rules, your web page should look like the one showed in the screen shots in the zip file ("assignment2.zip") you downloaded. Check for it! Also check for the syntax errors in your website, and correct it if there is any.

Submission

Rename your "ipod_nano.html" file as "Yourfirstname_Yourlastname.html" and submit it to the "Assignment2" directory under the submission folder. Click here for how to use FTP to submit your files to the submission directory.

<back to top>