📄 622-625.html
字号:
<HTML>
<HEAD>
<TITLE>Special Edition Using Linux, Fourth Edition:Creating Web Documents with HTML</TITLE>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<SCRIPT>
<!--
function displayWindow(url, width, height) {
var Win = window.open(url,"displayWindow",'width=' + width +
',height=' + height + ',resizable=1,scrollbars=yes');
}
//-->
</SCRIPT>
</HEAD>
-->
<!--ISBN=0789717468//-->
<!--TITLE=Special Edition Using Linux, Fourth Edition//-->
<!--AUTHOR=Jack Tackett//-->
<!--AUTHOR=Jr.//-->
<!--AUTHOR=Steve Burnett//-->
<!--PUBLISHER=Macmillan Computer Publishing//-->
<!--IMPRINT=Que//-->
<!--CHAPTER=32//-->
<!--PAGES=622-625//-->
<!--UNASSIGNED1//-->
<!--UNASSIGNED2//-->
<CENTER>
<TABLE BORDER>
<TR>
<TD><A HREF="618-622.html">Previous</A></TD>
<TD><A HREF="../ewtoc.html">Table of Contents</A></TD>
<TD><A HREF="625-628.html">Next</A></TD>
</TR>
</TABLE>
</CENTER>
<P><BR></P>
</P>
<P><FONT SIZE="+1"><B>Combining Lists</B></FONT></P>
<P>As you can see, the various lists in HTML give you several ways to present information to a user. In fact, HTML allows you to combine list types to gain even more control over how your information is presented. You can nest one list type within another easily.
</P>
<P>Suppose that you want to create a section of your home page to tell users your favorite movies and music. You can nest two glossary lists within an unordered list to create a detailed outline. Listing 32.7 shows an example HTML source that uses nested lists.</P>
<P><B>Listing 32.7</B> Creating a Custom List by Nesting Different List Types</P>
<!-- CODE //-->
<PRE>
<HTML>
<HEAD>
<TITLE>A Custom List</TITLE>
</HEAD>
<BODY>
This list shows some of my favorite musicians and movies.
It uses two definition lists nested in an unordered list.
It also uses some text formatting tags.<P>
I hope that you enjoy it.<HR>
<LI>Here are some of my favorite movies<P>
<DL>
<DT>
<DD>
<DT>
<DD>
</DL>
<P>
<LI>Here are some of my favorite musical groups<P>
<DL>
<DT>Coil
<DD>A European experimental and electronic project.
<DT>Philip Glass
<DD>An incredible modern composer.
<DT>Ozone Quartet
<DD>Instrumental progressive quartet.
</DL>
</UL>
</BODY>
</HTML>
</PRE>
<!-- END CODE //-->
<P>This combination list example is a bit more complicated than the others you’ve seen, but it still uses only techniques covered so far in this chapter. Notice that the glossary lists are indented in the HTML source code. The indent is used only to make the source code easier to read (recall that Web browsers ignore line breaks and extra spaces when they display the page). Figure 32.8 shows a custom list displayed in Netscape.
</P>
<P><A NAME="Fig8"></A><A HREF="javascript:displayWindow('images/32-08.jpg',480,586 )"><IMG SRC="images/32-08t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/32-08.jpg',480,586)"><FONT COLOR="#000077"><B>FIG. 32.8</B></FONT></A> A custom list displayed in Netscape.</P>
<P>As a quick review, Table 32.2 shows the HTML tags for creating lists we’ve gone over.
</P>
<TABLE WIDTH="100%"><CAPTION ALIGN=LEFT><B>Table 32.2</B> HTML List Tags
<TR>
<TH COLSPAN="2"><HR>
<TR>
<TH WIDTH="20%" ALIGN="LEFT">Tag
<TH WIDTH="80%" ALIGN="LEFT">Action
<TR>
<TD COLSPAN="2"><HR>
<TR>
<TD><UL>…</UL>
<TD>Create an unordered (bulleted) list; list items begin with the <TT><LI></TT> tag
<TR>
<TD><OL>…</OL>
<TD>Create an ordered (numbered) list; list items begin with the <TT><LI></TT> tag
<TR>
<TD VALIGN="TOP"><DL>…</DL>
<TD>Create a definition list; list items begin with a <TT><DT></TT> tag for a definition term or a <TT><DD></TT> tag for a definition
<TR>
<TD COLSPAN="2"><HR>
<TR>
</TABLE>
<H4 ALIGN="LEFT"><A NAME="Heading12"></A><FONT COLOR="#000077">Linking Pages with Anchors</FONT></H4>
<P>Now comes the neat stuff. In this section, you learn how to hook multiple Web pages together and create hypertext links that jump from place to place.
</P>
<P>Hypertext links in HTML are known as <I>anchors</I>, and the <TT><A></TT> and <TT></A></TT> tags are used to define an anchor. These tags are placed around the words you want to use for the hypertext link. Web browsers typically underline hypertext links automatically and show them in a different color.</P>
<P>To tell the Web browser which document to retrieve when the hypertext link is clicked, you use the <TT>HREF</TT> attribute and an URL with the anchor tag. Suppose that you want to create a hypertext link to the NCSA Mosaic home page. If you want to include the sentence <TT>Click here to go to the NCSA Mosaic home page.</TT>, where the word <TT>here</TT> is the hypertext link, you need the following HTML lines:</P>
<!-- CODE SNIP //-->
<PRE>
Click <A HREF=“<A HREF="http://www.ncsa.uiuc.edu/sdg/software/mosaic/index.html">http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/index.html</A>”>
here</A> to go to the NCSA Mosaic home page.
</PRE>
<!-- END CODE SNIP //-->
<P>The anchor tags surround the hypertext link—in this case, the word <TT>here</TT>. The <TT>HREF</TT> attribute is inserted inside the opening anchor tag. That’s all there is to it.</P>
<BLOCKQUOTE>
<P><FONT SIZE="-1"><HR><B>NOTE: </B>You can place any URL in the <TT>HREF</TT> attribute. You can link to a Web page, an FTP site, a Gopher server, or any other location.<HR></FONT>
</BLOCKQUOTE>
<P>In addition to just creating hypertext links, you can also give names to links by using the <TT>NAME</TT> attribute. Named links are very useful for jumping to specific locations in a document. You can list a table of contents at the beginning of a long document and have each entry in the table of contents be a hypertext link to the appropriate place in the document. By combining them with an <TT>HREF</TT>, you can send users to a specific location in another document.</P>
<P>Assume that you have a long document—maybe a Frequently Asked Questions (FAQ) list that discusses widgets. You can create a hypertext link from the table of contents to the “How to Use Widgets” section. The first thing you need to do is to create a named anchor in the “How to Use Widgets” section, so that you can jump to it from the table of contents. The HTML to do this looks like the following:</P>
<!-- CODE SNIP //-->
<PRE>
<A NAME=“howtouse”>How to Use Widgets</A>
Widgets are a very powerful tool if used properly.
Unfortunately, no one knows enough about them to use
them properly. Since they have no relevance to HTML, you
don’t need to discuss them further in this chapter.
</PRE>
<!-- END CODE SNIP //-->
<P>Now, all you need to do is to put a hypertext link from the table of contents to this spot. To do that, you use the <TT>HREF</TT> attribute to link to this anchor, and give the anchor’s name preceded by a <TT>#</TT> character. The table of contents entry looks like this:</P>
<!-- CODE SNIP //-->
<PRE>
<A HREF=“#howtouse”>How to Use Widgets</A>
</PRE>
<!-- END CODE SNIP //-->
<P>When someone clicks the entry <TT>How</TT> <TT>to</TT> <TT>Use</TT> <TT>Widgets</TT> in the table of contents, the browser jumps to the anchor named <TT>howtouse</TT> later in the document.</P>
<BLOCKQUOTE>
<P><FONT SIZE="-1"><HR><B>NOTE: </B>You can name an anchor that’s a hypertext link to another location. Just use the <TT>NAME</TT> and <TT>HREF</TT> attributes in the same anchor. For example,
<DL>
<DD><A HREF=“<A HREF="http://www.doesnotexist.com/index.html">http://www.doesnotexist.com/index.html</A>#end”>Go to the end</A>
</DL>
<P>would take you to another document. It also would display the file starting from wherever the <TT><#end></TT> anchor is located in that file.<HR></FONT>
</BLOCKQUOTE>
</P><P><BR></P>
<CENTER>
<TABLE BORDER>
<TR>
<TD><A HREF="618-622.html">Previous</A></TD>
<TD><A HREF="../ewtoc.html">Table of Contents</A></TD>
<TD><A HREF="625-628.html">Next</A></TD>
</TR>
</TABLE>
</CENTER>
</td>
</tr>
</table>
<!-- begin footer information -->
</body></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -