ch20.htm

《Perl 5 Unreleased》

</BLOCKQUOTE>
<BLOCKQUOTE>
<TT><FONT FACE="Courier">&nbsp;1 &lt;HTML&gt;<BR>
&nbsp;2 &lt;HEAD&gt;&lt;TITLE&gt;Using Lists&lt;/TITLE&gt;<BR>
&nbsp;3 &lt;/HEAD&gt;<BR>
&nbsp;4 &lt;BODY&gt;&lt;P&gt;<BR>
&nbsp;5 &lt;P&gt;<BR>
&nbsp;6 &lt;H1&gt;Futures Contracts in Sugar&lt;/H1&gt;<BR>
&nbsp;7 &lt;P&gt;<BR>
&nbsp;8 &lt;A HREF=&quot;../cgi-bin/testing.pl&quot;&gt; Test&lt;/A&gt;
<BR>
&nbsp;9 &lt;A HREF=&quot;query.pl&quot;&gt; Test HTML&lt;/A&gt;
<BR>
10 &lt;A HREF=&quot;../cgi-bin/query.pl&quot;&gt; Test HTML&lt;/A&gt;
<BR>
11 &lt;H2&gt;Summary of Contracts available.&lt;/H2&gt;<BR>
12 &lt;IMG SRC=&quot;red-ball-small.gif&quot;&gt; &lt;B&gt;Sugar
Contracts&lt;/B&gt;&lt;BR&gt; <BR>
13 &lt;IMG SRC=&quot;red-ball-small.gif&quot;&gt; &lt;B&gt;Sugar
Options&lt;/B&gt;&lt;BR&gt;<BR>
14 &lt;IMG SRC=&quot;red-ball-small.gif&quot;&gt; &lt;B&gt;Combination&lt;/B&gt;&lt;BR&gt;
<BR>
15 &lt;HR&gt;<BR>
16 &lt;H2&gt; Ordered list of particulars &lt;/H2&gt;<BR>
17 &lt;UL&gt;&nbsp;&nbsp;<BR>
18 &lt;LI&gt; Price per cent move of Sugar&nbsp;&nbsp;prices:
$1120.00<BR>
19 &lt;LI&gt; Appox min. deposit for contract required by broker:
$5000 to $10000.<BR>
20 &lt;LI&gt; Appox min. deposit for option required by broker:
$1500 to $3000.<BR>
21 &lt;LI&gt; Appox commissions cost: $35 to $75<BR>
22&lt;/UL&gt;<BR>
23 &lt;P&gt; <BR>
24 &lt;H2&gt; Some Detailed Information in Description Lists.&nbsp;&nbsp;&lt;/H2&gt;
<BR>
25 &lt;P&gt;<BR>
26 &lt;DL&gt;<BR>
27 &lt;DT&gt;&lt;IMG SRC=&quot;yellow-ball.gif&quot;&gt; &lt;B&gt;Risks
with open contracts &lt;/B&gt;<BR>
28 &lt;DD&gt; One cent move equals $1120 in your profits. Therefore
a 4 cent move<BR>
29 can either make you a handsome profit or break your bank. A
flood in sugar<BR>
30 growing area may cause prices to drop sharply. If you are holding
a long<BR>
31 contract, this drop in price will have to be covered at the
end of the<BR>
32 trading day or your position will be liquidated.<BR>
33 &lt;DT&gt;&lt;IMG SRC=&quot;yellow-ball.gif&quot;&gt; &lt;B&gt;
Sugar &lt;/B&gt;<BR>
34 &lt;DD&gt; Options cost a fixed amount of money. However, the
money spent on<BR>
35 an option should be treated like insurance. No matter where
the price<BR>
36 goes your loss will be limited to the price of the option.
Of course,<BR>
37 with limiting risk you are also limiting profits.<BR>
38 &lt;DT&gt;&lt;IMG SRC=&quot;yellow-ball.gif&quot;&gt; &lt;B&gt;
Combination of both &lt;B&gt;<BR>
39 &lt;/BODY&gt;&lt;/HTML&gt;</FONT></TT>
</BLOCKQUOTE>
<HR>
<P>
Your browser will show a different font for each header style.
In this listing, we used two heading levels, <TT><FONT FACE="Courier">&lt;H1&gt;</FONT></TT>
and <TT><FONT FACE="Courier">&lt;H2&gt;</FONT></TT>, lines 5 and
8. The required <TT><FONT FACE="Courier">&lt;TITLE&gt;</FONT></TT>
is also shown and terminated with the <TT><FONT FACE="Courier">&lt;/TITLE&gt;</FONT></TT>
keyword in line 1. The <TT><FONT FACE="Courier">&lt;P&gt;</FONT></TT>
tag is used to start a new paragraph in lines 4, 5, and 7, for
example. If the <TT><FONT FACE="Courier">&lt;P&gt;</FONT></TT>
tags were not used, the text would follow in one big clump unless
you were beginning a new header or a horizontal line with the
<TT><FONT FACE="Courier">&lt;HR&gt;</FONT></TT> tag. See Line
15 where the <TT><FONT FACE="Courier">&lt;HR&gt;</FONT></TT> tag
is used to draw a horizontal line.
<P>
Look at lines 12 through 14. Using <TT><FONT FACE="Courier">&lt;BR&gt;</FONT></TT>
tags, I have created the list of three items using IMG tags. 
<P>
Note how images are stored and displayed within the document with
the <TT><FONT FACE="Courier">&lt;IMG&gt;</FONT></TT> tag. Basically,
the IMG tag specifies where an image will be displayed in the
HTML document. The SRC attribute of the IMG tag specifies the
URL for the contents of the image. The URL can be a complete (absolute)
pathname or a relative pathname. An absolute path would describe
the entire URL: <TT>http://www.ikra.com/mydirectory/red-ball-small.gif</TT>,
whereas the relative pathname will assume the default directory
for images on the server and pick the image called <TT><FONT FACE="Courier">red-ball-small.gif</FONT></TT>
from that directory. By using image files, you can enhance the
appearance of items in a list and provide your own bullets. Consider
this reference in line 12:
<BLOCKQUOTE>
<TT><FONT FACE="Courier">&lt;IMG SRC=&quot;red-ball-small.gif&quot;&gt;
&lt;B&gt;Sugar Contracts&lt;/B&gt;&lt;BR&gt;</FONT></TT>
</BLOCKQUOTE>
<P>
The file <TT><FONT FACE="Courier">red-ball-small.gif</FONT></TT>
is shown next to the text <TT><FONT FACE="Courier">Sugar Contracts</FONT></TT>
using the relative URL scheme. 
<P>
There are several more attributes to an IMG tag allowing you to
align text around the image, size the image, provide a mapping
of URLs to go to if the user clicks on a section of the image,
and so on. Be sure to check the references provided in the &quot;HTML,
CGI, and MIME&quot; section for more information on how to use
IMG tags.
<H2><A NAME="FormattingLists"><FONT SIZE=5 COLOR=#FF0000>Formatting
Lists </FONT></A></H2>
<P>
HTML supports the following types of list formats with which you
can show information:
<UL>
<LI><FONT COLOR=#000000>Unnumbered lists (items in </FONT><TT><FONT FACE="Courier">&lt;UL&gt;</FONT></TT>
and <TT><FONT FACE="Courier">&lt;/UL&gt;</FONT></TT> tags) where
the items in a list are not numbered.
<LI><FONT COLOR=#000000>Numbered lists (items in </FONT><TT><FONT FACE="Courier">&lt;OL&gt;</FONT></TT>
and <TT><FONT FACE="Courier">&lt;/OL&gt;</FONT></TT> tags) where
each item in a list is numbered.
<LI><FONT COLOR=#000000>Definition lists (items in </FONT><TT><FONT FACE="Courier">&lt;DT&gt;</FONT></TT>
and <TT><FONT FACE="Courier">&lt;DD&gt;</FONT></TT> tags) where
each item in the list is a term followed by a descriptive paragraph
that applies to that term.
</UL>
<P>
Items in a list are separated by <TT><FONT FACE="Courier">&lt;LI&gt;</FONT></TT>
tags. The <TT><FONT FACE="Courier">&lt;/LI&gt;</FONT></TT> tag
is not needed to stop one item and start another. In Listing 20.1,
lines 17 to 22 provide an unnumbered list with the use of <TT><FONT FACE="Courier">&lt;UL&gt;</FONT></TT>
and <BR>
<TT><FONT FACE="Courier">&lt;/UL&gt;</FONT></TT> tags. To make
this a numbered list, simply change the <TT><FONT FACE="Courier">&lt;UL&gt;</FONT></TT>
and <TT><FONT FACE="Courier">&lt;/UL&gt;</FONT></TT> pair to an
<TT><FONT FACE="Courier">&lt;OL&gt;</FONT></TT> and <TT><FONT FACE="Courier">&lt;/OL&gt;</FONT></TT>
tag, respectively, and all the items in the list will be numbered.
<P>
A definition list has two items: a <TT><FONT FACE="Courier">&lt;DT&gt;
</FONT></TT>tag with a term and the definition of the term with
<TT><FONT FACE="Courier">&lt;DD&gt;</FONT></TT>. The <TT><FONT FACE="Courier">&lt;LI&gt;</FONT></TT>
and <TT><FONT FACE="Courier">&lt;DD&gt;</FONT></TT> items can
contain multiple paragraphs with the use of the <TT><FONT FACE="Courier">&lt;P&gt;</FONT></TT>
tag. Lines 27 through 38 in Listing 20.1 show how to create a
simple definitions list. 
<P>
You can even nest lists within lists. Just remember to end each
list completely within the list item of the parent list. See the
sample HTML code in Listing 20.2. 
<HR>
<BLOCKQUOTE>
<B>Listing 20.2. Nested lists.<BR>
</B>
</BLOCKQUOTE>
<BLOCKQUOTE>
<TT><FONT FACE="Courier">&nbsp;1 &lt;HTML&gt;&lt;HEAD&gt;&lt;TITLE&gt;Another
Lists Example&lt;/TITLE&gt;&lt;/HEAD&gt;<BR>
&nbsp;2 &lt;BODY&gt;<BR>
&nbsp;3 &lt;P&gt;&lt;H1&gt;This shows Numbered Lists&lt;/H1&gt;&lt;P&gt;
<BR>
&nbsp;4 Start of List here.<BR>
&nbsp;5 &lt;OL&gt;<BR>
&nbsp;6 &lt;LI&gt; Toulouse<BR>
&nbsp;7&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;UL&gt;<BR>
&nbsp;8&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LI&gt; To Barritz
<BR>
&nbsp;9&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LI&gt; To Bordeaux
<BR>
10&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LI&gt; To Marseille
<BR>
11&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LI&gt; To Paris<BR>
12&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/UL&gt;<BR>
13 &lt;LI&gt; Paris<BR>
14&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;UL&gt;<BR>
15&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LI&gt; To Dijon<BR>
16&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LI&gt; To Rennes<BR>
17&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LI&gt; To Toulouse<BR>
18&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/UL&gt;<BR>
19 &lt;LI&gt; Rennes<BR>
20&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;UL&gt;<BR>
21&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LI&gt; To Paris<BR>
22&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LI&gt; To Cherbourg
<BR>
23&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/UL&gt;<BR>
24 &lt;LI&gt; Nice<BR>
25&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;UL&gt;<BR>
26&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LI&gt; To Digne<BR>
27&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;LI&gt; To Menton<BR>
28&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/UL&gt;<BR>
29 &lt;/OL&gt;<BR>
30 &lt;/BODY&gt;<BR>
31 &lt;/HTML&gt;</FONT></TT>
</BLOCKQUOTE>
<HR>
<P>
The top level numbered list is started at line 5 and ends in line
29. Each item of the numbered list is inserted in lines 6, 13,
19, and 24. Nested lists are shown as unnumbered lists enclosed
in <TT><FONT FACE="Courier">&lt;UL&gt;</FONT></TT> and <TT><FONT FACE="Courier">&lt;/UL&gt;</FONT></TT>
tags in lines 8 to 12, 14 to 18, 20 to 23, and 25 to 28. Each
<TT><FONT FACE="Courier">&lt;UL&gt;</FONT></TT> and <TT><FONT FACE="Courier">&lt;/UL&gt;</FONT></TT>
pair is terminated in the space for each item in the top level
numbered list. 
<H2><A NAME="UsingHTMLTags"><FONT SIZE=5 COLOR=#FF0000>Using HTML
Tags</FONT></A></H2>
<P>
The basic set of HTML tags such as the <TT><FONT FACE="Courier">&lt;HEAD&gt;</FONT></TT>,
<TT><FONT FACE="Courier">&lt;BODY&gt;</FONT></TT>, and <TT><FONT FACE="Courier">&lt;TITLE&gt;</FONT></TT>
are almost always supported by all browsers. However, you should
keep in mind that not all tags are supported by all Web browsers.
If a browser does not support a tag, it just ignores it. 
<P>
You can emphasize text in the document so that it stands out when
displayed by a browser. For example, to underline text, use <TT><FONT FACE="Courier">&lt;U&gt;</FONT></TT>
and <TT><FONT FACE="Courier">&lt;/U&gt;</FONT></TT> to enclose
the text. For bold text, enclose the text in <TT><FONT FACE="Courier">&lt;B&gt;</FONT></TT>
and <TT><FONT FACE="Courier">&lt;/B&gt;</FONT></TT> tags. For
italics, use <TT><FONT FACE="Courier">&lt;I&gt;</FONT></TT> and
<TT><FONT FACE="Courier">&lt;/I&gt;</FONT></TT>. See the sample
HTML code in Listing 20.3. 
<HR>
<BLOCKQUOTE>
<B>Listing 20.3. Using HTML tags to change font style.<BR>
</B>
</BLOCKQUOTE>
<BLOCKQUOTE>
<TT><FONT FACE="Courier">&nbsp;1 &lt;HTML&gt;<BR>
&nbsp;2 &lt;HEAD&gt;<BR>
&nbsp;3 &lt;TITLE&gt; IISTV.htmL &lt;/TITLE&gt;<BR>
&nbsp;4 &lt;/HEAD&gt;<BR>
&nbsp;5 &lt;BODY&gt;<BR>
&nbsp;6 &lt;Center&gt;&lt;H1&gt;Time Change for Islam TV Program&lt;/H1&gt;&lt;/Center&gt;
<BR>
&nbsp;7 &lt;HR&gt;<BR>
&nbsp;8 &lt;P&gt;<BR>
&nbsp;9 From January 1996, the Islamic Information Service TV
(IISTV)<BR>
10 Program, will be broadcast &lt;b&gt;every Sunday at 9.00 A.M.
<BR>
11 on Channel 67 (KHSH TV)&lt;/b&gt; in the &lt;U&gt;Houston Metropolitan
Area&lt;/U&gt;.<BR>
12 Islam TV is regularly watched in 5000 homes and is a totally
<BR>
13 viewer supported program and we need your support.&lt;P&gt;
<BR>
14 The program is also carried on the &lt;EM&gt;International
Cable channel&lt;/EM&gt;<BR>
15 &lt;STRONG&gt;every Saturday at 9:30 AM.&lt;/STRONG&gt;<BR>
16 &lt;P&gt;<BR>
17 For more information or to send contributions, please contact&lt;P&gt;
<BR>
18 &lt;hr&gt;<BR>
19 &lt;CENTER&gt;<BR>
20 &lt;STRONG&gt;<BR>
21&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ISGH/IIS-TV
&lt;BR&gt;<BR>
22 &lt;/STRONG&gt;<BR>
23&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;9336-B
Katy Freeway Suite 314&lt;BR&gt;<BR>