TRY IT!

Once again, here is an opportunity to put the skills you've learned in the past few chapters to the test. Your client, LawnBirds, Inc., is asking you to redesign their home page on the World Wide Web. This time, they want to include their corporate logo on the page, along with background information on the company. In addition, they want to showcase brief descriptions of their top-selling products.

Figure 1 :

Using the tricks you learned for using images and lists, you'll create the document from scratch using Notepad, and finish with a complete, professional HTML document for LawnBirds, Inc.

1. Start Notepad.

   Figure 2 :

2. Turn Word Wrap on.

   Figure 3 :

3. Type in the first few lines of your HTML document as shown here, pressing Enter after each one.

   Figure 4 :

4. Type in a headline, and then press Enter.

   Figure 5 :

5. Now we'll insert the LawnBirds logo. First, you would preview the image using a graphics editor capable of displaying GIF and JPEG images. Since you probably don't have a copy of the LawnBirds logo on your system, you can use any image you like in its place. Save the file as logo.gif or logo.jpg, depending on the file type.

   Figure 6 :

6. Note the image's height and width in pixels and then write these numbers down. They'll be used later.

   Figure 7 :

7. Now we'll insert the LawnBirds logo. Type <IMG> to insert an image tag.

   Figure 8 :

8. Inside the <IMG> tag, type SRC= followed by the file name, logo.gif, in quotes.

   Figure 9 :

9. To create some alternate text for browsers that don't display graphics, type ALT="LawnBirds logo" inside the <IMG> tag.

   Figure 10 :

10. To align the image with the left margin, type ALIGN=LEFT inside the <IMG> tag.

    Figure 11 :

11. Type the height and width of the image inside the <IMG> tag.

    Figure 12 :

12. On the next line, type <P> to start a paragraph.

    Figure 13 :

13. Type the entire first paragraph. Remember, you do not need to press Enter to start new lines of text. At the end of the paragraph, type </P> and press Enter.

    Figure 14 :

14. LawnBirds, Inc. wants to use this home page to give customers quick descriptions of their available products. You've decided that this is the perfect opportunity to make creative use of a definition list. The product names will be formatted as definition terms, and the product descriptions will be formatted as the definitions themselves.
15. First, type <P> to start a new paragraph.

    Figure 15 :

16. Type in a brief introduction explaining what the list will contain. Then type </P> and press Enter.

    Figure 16 :

17. To begin the Definition List, type <DL> and then press Enter.

    Figure 17 :

18. Type <DT>, followed by the name of the first LawnBirds product. This line is a definition term. Press Enter to start a new line.

    Figure 18 :

19. Type <DD>, followed by the first product description. This line is the definition. When you're finished typing it in, press Enter.

    Figure 19:

20. Repeat the previous two steps for each of the products and product descriptions in the LawnBirds Line.

    Figure 20:

21. Type </DL> to close the definition list, and then press Enter.

    Figure 21 :

22. LawnBirds, Inc. also wants to include a list of ways to contact the company and order its products. The best way to present this information is by using an unordered list.
23. Type <UL> to begin the list, and then press Enter.

    Figure 22 :

24. To create a list heading and make it stand out from the list items, type <LH><STRONG>How to Contact LawnBirds, Inc.</STRONG></LH>. The <STRONG> tag is a logical markup tag that tells the Web browser to display this text with strong emphasis. Now press Enter.

    Figure 23 :

25. Type <LI> followed by the first line of contact information, then press Enter.

    Figure 24 :

26. Repeat the previous step for each of the elements in the list.

    Figure 25 :

27. After you've entered the last list item, type </UL> and press Enter.

    Figure 26 :

28. Type </BODY> to mark the end of the body section of the document, then press Enter.

    Figure 27:

29. Type </HTML> to mark the end of the document.

    Figure 28:

30. Save the file in Notepad. Choose a meaningful file name, such as lawnbird.html.

    Figure 29:

31. Load the new HTML document using the Open File option in your Web browser.

    Figure 30 :