📄 625-628.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=625-628//-->
<!--UNASSIGNED1//-->
<!--UNASSIGNED2//-->
<CENTER>
<TABLE BORDER>
<TR>
<TD><A HREF="622-625.html">Previous</A></TD>
<TD><A HREF="../ewtoc.html">Table of Contents</A></TD>
<TD><A HREF="../ch33/629-632.html">Next</A></TD>
</TR>
</TABLE>
</CENTER>
<P><BR></P>
<H4 ALIGN="LEFT"><A NAME="Heading13"></A><FONT COLOR="#000077">Using Graphics</FONT></H4>
<P>One feature that has made the Web so popular is its capability to incorporate graphics and text in a simple format. HTML makes it easy to insert graphics into your documents. Before you start putting all sorts of graphic images into documents, though, remember that many people access the Web via low-speed telephone lines and that graphics can take a long time to transfer at these rates. Also, some people use text-based browsers, such as Lynx, which can’t display graphics at all. You should make sure that someone can navigate your Web documents easily, even if they have graphics turned off or if their browser doesn’t support graphics. In a moment, you’ll learn a technique for checking for graphics support.
</P>
<P>You can use graphics in your HTML documents in two ways: by using hypertext links or by using inline images.</P>
<DL>
<DD><B>•</B> You can make hypertext links to the graphics files themselves. This method requires the user to have a helper program that can display the graphics file properly. The exact type of graphic that can be displayed depends on the helper application used. Links for this method are hypertext links that name the graphics image as the destination document.
<DD><B>•</B> You can insert the graphics directly into your HTML document. Graphics inserted this way are known as <I>inline images</I>. Many browsers support graphics in the JPG, GIF, or X Bitmap formats as inline images.
<BR>HTML uses the <TT><IMG></TT> tag to indicate an inline image. This tag is combined with the <TT>SRC=“<I>filename</I>”</TT> attribute to define which image file is displayed. HTML also provides the <TT>ALIGN=</TT> attribute to tell Web browsers how they should line up the graphic image with any text that’s near it. The valid values for <TT>ALIGN</TT> are <TT>TOP</TT>, <TT>MIDDLE</TT>, and <TT>BOTTOM</TT>.
</DL>
<P>As mentioned earlier, you need to make your Web pages usable by browsers that don’t support graphics. To do this, you should provide some text reference any time you use a graphic image. HTML provides a way for you to define some text to be displayed if a browser can’t display a graphic image. The <TT>ALT=“text</TT> <TT>about</TT> <TT>the</TT> <TT>graphic”</TT> attribute defines some alternate text that will be displayed when the graphic can’t be displayed.</P>
<P>An example might help pull this all together. Listing 32.8 is a section of HTML that displays an inline GIF image. If a browser can’t display the image, a description of the image is shown instead.</P>
<P><B>Listing 32.8</B> Inserting a Graphic into Your Script</P>
<!-- CODE //-->
<PRE>
<HTML>
<HEAD>
<TITLE>Image example</TITLE>
</HEAD>
<BODY>
<H2>Images</H2>
<P>
<P>
<IMG src=“venus.jpg”
align=“right”
height=“160” width=“82”
alt=“Statue of Aphrodite”>
<UL>
<LI>Statue of Aphrodite, known as the “Venus de Milo”.
<LI>Carved out of marble in Greece, circa 100 B.C.
<LI>Currently in the Louvre in Paris
<LI>Part of the Louvre’s Greek, Etruscan and Roman
Antiquities Collection
</UL>
<HR>
To go to the Louvre’s web site click
<A HREF=“<A HREF="http://mistral.culture.fr/louvre/louvrea.htm">http://mistral.culture.fr/louvre/louvrea.htm</A>”>HERE</A>
</BODY>
</HTML>
</PRE>
<!-- END CODE //-->
<P>Figure 32.9 shows how this page is displayed in Netscape. You can see how different elements (heading, a list, horizontal line, graphic, and a link) combine to make up a page.
</P>
<P><A NAME="Fig9"></A><A HREF="javascript:displayWindow('images/32-09.jpg',480,587 )"><IMG SRC="images/32-09t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/32-09.jpg',480,587)"><FONT COLOR="#000077"><B>FIG. 32.9</B></FONT></A> An inline graphic displayed in Netscape.</P>
<P>You can combine graphic images and anchors to create graphic hypertext links as well. Simply surround the <TT><IMG></TT> tag with anchor tags that define which document to load. A picture serves as a hypertext link to another HTML document in the following example:</P>
<!-- CODE SNIP //-->
<PRE>
Click the picture to find out more about this statue.
<A HREF=“statue.html”><IMG SRC=“statue.gif”
ALIGN=BOTTOM ALT=“[Photo of statue]”>
</A>
</PRE>
<!-- END CODE SNIP //-->
<H3><A NAME="Heading14"></A><FONT COLOR="#000077">From Here…</FONT></H3>
<P>This chapter introduces you to basic HTML and how to create a Web page. You learned how to use tags, which provide commands to a Web browser, and how to use attributes and URLs, which provide details for the commands. Many HTML guides are available on the Internet that cover everything from syntax to design. Use one of the many search engines to look up HTML topics that interest you.
</P>
<BLOCKQUOTE>
<P><FONT SIZE="-1"><HR><B>ON THE WEB: </B><BR>A good starting point for ideas is Yahoo’s listings for HTML:<DL>
<DD><A HREF="http://www.yahoo.com/computers_and_internet/information_and_documentation/">http://www.yahoo.com/Computers_and_Internet/Information_and_Documentation/<DD>Data_Formats/HTML/</A>
</DL>
<HR></FONT>
</BLOCKQUOTE>
<P>You can find out more about the World Wide Web and the Internet in Chapter 31, “Surfing the Internet with the World Wide Web,” which introduces you to the Web and how to search it.
</P><P><BR></P>
<CENTER>
<TABLE BORDER>
<TR>
<TD><A HREF="622-625.html">Previous</A></TD>
<TD><A HREF="../ewtoc.html">Table of Contents</A></TD>
<TD><A HREF="../ch33/629-632.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 + -