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.
- Start Notepad.
Figure 2 :
- Turn Word Wrap on.
Figure 3 :
- Type in the first few lines of your HTML document as shown
here, pressing Enter after each one.
Figure 4 :
- Type in a headline, and then press Enter.
Figure 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 :
- Note the image's height and width in pixels and then write
these numbers down. They'll be used later.
Figure 7 :
- Now we'll insert the LawnBirds logo. Type <IMG>
to insert an image tag.
Figure 8 :
- Inside the <IMG> tag, type SRC= followed by the
file name, logo.gif, in quotes.
Figure 9 :
- To create some alternate text for browsers that don't display
graphics, type ALT="LawnBirds logo" inside the
<IMG> tag.
Figure 10 :
- To align the image with the left margin, type ALIGN=LEFT
inside the <IMG> tag.
Figure 11 :
- Type the height and width of the image inside the <IMG>
tag.
Figure 12 :
- On the next line, type <P> to start a paragraph.
Figure 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 :
- 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.
- First, type <P> to start a new paragraph.
Figure 15 :
- Type in a brief introduction explaining what the list will
contain. Then type </P> and press Enter.
Figure 16 :
- To begin the Definition List, type <DL> and then
press Enter.
Figure 17 :
- 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 :
- Type <DD>, followed by the first product description.
This line is the definition. When you're finished typing it in,
press Enter.
Figure 19:
- Repeat the previous two steps for each of the products and
product descriptions in the LawnBirds Line.
Figure 20:
- Type </DL> to close the definition list, and
then press Enter.
Figure 21 :
- 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.
- Type <UL> to begin the list, and then press Enter.
Figure 22 :
- 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 :
- Type <LI> followed by the first line of contact
information, then press Enter.
Figure 24 :
- Repeat the previous step for each of the elements in the list.
Figure 25 :
- After you've entered the last list item, type </UL>
and press Enter.
Figure 26 :
- Type </BODY> to mark the end of the body section
of the document, then press Enter.
Figure 27:
- Type </HTML> to mark the end of the document.
Figure 28:
- Save the file in Notepad. Choose a meaningful file name, such
as lawnbird.html.
Figure 29:
- Load the new HTML document using the Open File option in your
Web browser.
Figure 30 :