HTML (English) 11
MORE HTML
Don’t you think it’s about time that Jumbo’s menu actually had a menu? Jumbo might not be the most astute marketer, so you may need to help with his offerings. For Jumbo’s menu page you’d really like to have two kinds of lists. One list would let Jumbo highlight the unique qualities of his blends. This list would not have to be in any type of order. In HTML, this is called an unordered list and is created by use of the <UL> and </UL> tag pair. These define a bulleted list. Inside the list, you’ll want to add some bulleted items. You do this by using the list item tags, <LI> and While this sort of list is fine for advertising bullets, some kind of numbered list would be better for the menu items. That way the customers can just tell Pierre the waiter that they would like two of the number 4 specials. To create a numbered list, called an ordered list in HTML-speak, you use the tags <OL> and </OL>. The individual list items use the same list item tags as the ordered list. Listing 1-11 adds one of each of these list types to the menu page.
Listing 1-11 OrderedList.html
<HTML>
<! -- Listing 1-11 jumbo's hyperlinked menu page -->
<HEAD>
<TITLE> Jumbo's Jungle Java Joint - Primo Menu Page</TITLE>
</HEAD>
<BODY>
<H1> The Place for Premium Java </H1>
<HR>
<H2> Jumbo's quality ensures </H2>
<UL>
<LI> The Freshest Ingredients </LI>
<LI> The Most Imaginative Concoctions </LI>
<LI> The Friendliest Atmosphere </LI>
</UL>
<H2> Today's Specials </H2>
<OL>
<LI><B>Bold</B> Brazilian Roast </LI>
<LI><I>Italian</I> Espresso </LI>
<LI><U>Luscious</U> Licorice-Lime</LI>
</OL>
<HR>
<A HREF="Logo.html"> Go back to Jumbo's home page </A>
</BODY>
</HTML>
Lists can also be nested, that is, contained within other lists. Perhaps the Licorice Lime was really not a good not a good idea. On the other hand, maybe the customers only need some convincing. Listing 1-12 shows how nesting is done. Notice how indentation is used in the HTML file to clarify the structure of the list for a reader. Notice how indentation is used in the HTML file to clarify the structure of the list for reader. Note also that the bullet symbols are different for first-level list items and second-level list items. The browser automatically selects bullets for you.
Listing 1-12 NestedList.html
<HTML>
<!-- Listing 1-12 Jumbo's menu gets nested -->
<HEAD>
<TITLE>Jumbo's Jungle Java Joint - Primo Menu Page</TITLE>
</HEAD>
<BOD>
<H1> The Place for Premium Java
<HR>
<H2> Jumbo's quality ensures </H1>
<HR>
<H2> Jumbo's quality ensures </H2>
<UL>
<LI>The Freshest Ingredients </LI>
<LI>The Most Imaginative Concoctions </LI>
<LI>The Friendliest Atmosphere </LI>
</UL>
<H2>Today's Specials </H2>
<OL>
<LI><B>bold</B> Brazilian Roast </LI>
<LI><I>Italian</I> Espresso </LI>
<LI><U>Luscious</U> Licorice-Lime </LI>
<UL>
<LI>Great for the whole family!!! </LI>
<LI>Add a topping of whi0pped cream!!! </LI>
<LI>Try it ice-cold or piping hot!!! </LI>
</UL>
</OL><HR>
<A HREF="Logo.html"> Go back to Jumbo's home page </A>
</BODY>
</HTML>
