Activity 04-02 Using Lists and Nested lists

= "Lists"

A friend of your family has decided to go into a small business for herself. For years she has been making cermatic gifts for friends, family, then started to go to crafts shows in her area of Florida. She wants to have a web page which she can refer potential customers to which will give the basic information about her crafts and show some examples of them like the ones on the right which are part of her "Winter Assortment."

She has given you the following directions:

These are the images you will need to complete this assignment:
| lindihead.png | variety-winter.jpg | back.gif | bowls2.jpg | pitchers-2.png | platter.jpg | banana-basket.jpg | teapots.jpg | cookie-jars.jpg | basket-ceramic.png | three-pigs.png | christmas-cabin2.png | shops.png | lighthouse.png | christmas-tree.png | magnolia-white.png | eggs-bask.jpg | apple-basket.jpg | bean-pots.jpg

1. Copy the above graphics to your images directory.
2. Title the web site Lindi's Ceramics Shack
3. In the BODY tag designate the colors for the text and the hyperlinks for this page.
4. Use the graphic back.gif as a background image for this page.
5. At the top of the page is an opening H1 element. Inside it is a png image with a transparent background of "Lindi" (the owner) which will be aligned (also called "floated") to the right of the words Lindi's Ceramics Shack. You will add the image of Florida following the word "Shack". The IMG tag for Florida will aligned to the "middle". Then close the H1 element.
6. In a following address element you will have her address and email address:
   lindi@lindiceramics.com
   1313 Mockingbird Lane
   Gainesville. FL 00325
7. Following "00325" insert a BR tag which will clear the contents following it to the right margin.
8. Insert an <hr>
9. Inside a paragraph element Float the variety-winter.jpg to the left of the following text which should be inside it's own paragraph element.:

   Our shop can produce over 3,000 types of custom-made reasonably priced ceramics which are functional, practical, and make excellent gifts: Cookie Jars, Platters, Bowls, Pitchers, Tea pots, Trinket boxes, Baskets, Ceramic fruit, and Candle holders. Holiday items for most holidays in the United States.

   She would like the above text to be in arial for PC's and Helvetica for Mac's and for those who may not have either, insert the generic font family that they both belong to in the FONT face value. She wants the above text placed so that the amount of blank space above the text is the same as what appears below it. That means you should have to add a one or two <BR> tags following the IMG tag or before the text. Following the text, you should ONLY have one BR tag with a clear attribute and the appropriate value, then a closing paragraph tag. The BR tag with the clear attribute's value make the <HR> mentioned in the next step go across the web page BELOW the bottom edge of the variety-winter.jpg image.

10. Separate this text from the rest of the page using another <hr> tag
11. She thought that you could place pictures of each example of her work, but you caution her that too many graphics on a page take too long to load. So you decide that you can use an unordered list of the names of the images and link each to the image. This way the user can look at the images that they are interested in and not have to wait for all of the graphics to load.
12. When you looked at the pictures she had, you noticed that some of them could use some editing, but decided to leave them like they were for now.
13. Along with the name and link to each of the images, she would like each of the listed items to include a short description of the item which you will make up (but the file names should give you a clue) next to a different bullet and indented to the right. THIS will require you to add a nested list inside each of the List Items for every link to a beanie baby very similar to how this one is written.
    • As she explained it, if the first List item had a link to Bowls, then inside that same List Item you would have to have another unordered list with one list item inside it which would contain a description such as There are a variety of bowls for making bread, decorative, and functional.
    • Your list will have 16 links and 16 nested descriptions, but this should help you visualize how to write your code. LUCKY YOU, Here is an image of the code for three such links.
14. Make each description short, but also have it appear in bold with a font tag which will make it purple and in one of the monospace fonts.

    NOTE:   monospace is a generic font family which also contains courier and courier new.   One way to write the face attribute part of the FONT tag would be face="courier, courier new, monospace".  Since monospace means literally one or single space, all letters in a monospace font take up the same amount of horizontal space in a word. Therefore, an "i" will take up the same lateral space as will an "M" in all monospace fonts.

15. Include a hidden comment in the body element somewhere that says This code for this page written by .......... Replace the ........... with your name and save the page as lists.htm.
16. Don't forget to insert your Validation link at the bottom of the page, just before the </BODY> and </HTML> tags.
    • If you have problems validating, or checking it with your Grading Check Sheet, remember to contact your instructor.
17. Here is a resized image of the page that a student wrote:
18. When finished, submit assignment for credit.

Submit the full URI for the file lists.htm as Assignment 04-02.

How Will This Be Assessed?

The Grading Check Sheet should be used to check the web page.