|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
HTML 4.0 Sourcebook
Example 7: Image, Heading, and Paragraph AlignmentExample 2 presented some methods for obtaining very rudimentary control over the placement and alignment of images and text on the page. Fortunately, other attributes and attribute values allow for significantly more control over this aspect of document presentation. These extensions occur through the addition of ALIGN (alignment) attributes to most elements that contain text (i.e., Hn (heading), P (paragraph), BLOCKQUOTE, and DIV), and also additional ALIGN attribute values for the IMG element. These attributes, and their effects, are illustrated in Figures 2.13 through 2.16. Heading and Paragraph AlignmentFor elements that contain text, ALIGN defines the desired alignment for the text and can take the values “left” (left–justify the text: the default), “center” (center the text between the margins), “right” (right–justify the text), and “justify” (justify text between left and right margins). Currently, only left, center, and right alignment are widely implemented. Figure 2.14 shows the effect of these different alignment options on the heading and paragraph elements. If a browser does not understand the alignment value, it ignores the ALIGN attribute and uses the browser’s alignment default (usually left–adjusted). Image AlignmentImage alignment is more complex than text alignment, since the desire is to let the image “float” to some preferred location and then to let text flow around it. HTML supports the use of ALIGN values of “left” and “right” for this purpose, where left causes the image to float to the left margin and right causes the image to float to the right margin. Any text following the IMG element in the HTML markup, flows to the side of and below the image. Figure 2.16 (the HTML document is listed in Figure 2.15) shows the effect of the left and right alignment values. Here the images have floated to the indicated margins, with text flowing around them. Almost all browsers support this type of image alignment; however, some older ones do not and simply place the image inline with the text. It is therefore a good idea to place an IMG element as the first item in a line or to precede it by a line break element. This guarantees that the image will appear as the first item in a line, regardless of the browser. Image WIDTH and HEIGHT To format the page, a browser must know the size of the image being inserted. In general, a browser does not know this size until the image is delivered, which means that it can’t begin displaying the page until all the images have arrived. Since this can significantly delay the construction of the page, HTML supports the IMG element HEIGHT and WIDTH attributes, to specify the size of the image in pixels. Given this information, the browser can begin formatting the page, leaving an empty box for the image(s) still being downloaded. If an image is not of the specified size, the browser resizes the image to fit the defined box. This is illustrated in Figure 2.16, where the little home page icon has been zoomed to almost twice its actual size. Of course, with an image as ugly as this, shrinking the image would have been a better choice! Figure 2.13 HTML code for the document align.html. This document illustrates some of the alignment features possible with the heading and paragraph elements. <HTML> <HEAD><TITLE> Heading and Paragraph Alignment Options </TITLE></HEAD> <BODY> <H2 ALIGN=“center”> Alignment Options: Headings and Paragraphs</H2> <HR NOSHADE> <BLOCKQUOTE> <H3 ALIGN=“left”>Left–Aligned Paragraph & Heading</H3> <P> Alignment can take the four values “center“, “left” (the default), “ right“ and “justify”. This paragraph is “left“ (default) aligned, so that the text lines up with the left margin, and the right side is ragged. <H3 ALIGN=”right“>Right–Aligned Paragraph & Heading</H3> <P align=”right“> Here is a right–aligned paragraph. This can look odd, but is useful for special emphasis, or if placed against a left–aligned image. Note how the right margin is straight, and the left is ragged. <H3 ALIGN=”center“>Center–Aligned Paragraph & Heading</H3> <P align=”center”> Here is a centered paragraph. In principle, this means both the left and right margins will be ragged. This is a useful way of centering images. For example:<BR><IMG SRC=“sright.xbm”> <H3 ALIGN=“justify”>Justified Paragraph & Heading</H3> <P align=“justify”> Here is a justified paragraph. In principle, this means both the left and right margins should be smooth, with wordspaces being adjusted to keep it that way. If your browser does not understand <CODE>ALIGN=“justify”</CODE> (most do not), it will use the default left–justification. </BLOCKQUOTE> </BODY></HTML>
Image Padding: HSPACE and VSPACE When inserting an image into a document, an author may wish to leave extra space between the image and the surrounding text. One way to do this is to create the image with a surrounding border, and use this border (perhaps transparent—see Chapter 3 for more information on image formats and transparency) to space the image from the text. However, this is not always possible or convenient, so HTML supports HSPACE and VSPACE attributes to define a spacing, in pixels, to be left around an image. For example, in Figure 2.16, the second image has been inserted using HSPACE=“8” and VSPACE=“5”. This creates padding borders on all sides of the image—here 8 pixels on the left and right sides, and 5 pixels above and below. Image Borders An image can be inside an anchor element, which turns the image into a clickable icon for accessing another resource. By default, most browsers will box an anchored image with a colored or shaded border, just as they underline anchored text. This is not always desired, as the borders can detract from the appearance of the icon, particularly in a toolbar menu, where the “button” nature of the image is obvious. HTML supports a BORDER attribute to the IMG element, to specify the thickness, in pixels, of the border surrounding the image. The default value for an IMG inside an anchor element is BORDER=“1”; borderless images can be created by specifying BORDER=“0”. The navigational buttons at the top of Figures 2.15 and 2.16 illustrate this use of BORDER; note how the second arrow does not have a border, although it is an active anchor. Most graphical browsers indicate that an image is an active anchor by changing the mouse pointer to a special symbol (usually a hand) when the pointer passes over the image. Figure 2.15 HTML code for the document alignimg.html. This document illustrates some of the alignment features possible with the image element.
<HTML><HEAD>
<TITLE>
Heading, Paragraph and Image Alignment Options</TITLE>
</HEAD>
<BODY>
<A HREF=“isindex.html”><IMG SRC=“sleft.xbm” ALT=“[Previous]”></A>
<A HREF=“url.html”><IMG SRC=“sright.xbm” BORDER=0 ALT=“[Next]”></A>
<HR NOSHADE>
<H2 ALIGN=“right”> Alignment Options —<BR>
<em>Images</em></H2>
<P>
Here is some text that flows around the image. The
<CODE>ALIGN=“left”</CODE>
<IMG ALIGN=“left” ALT=“[Example Image”] SRC=“home.gif”>
attribute value causes the image to float to the left hand margin, and
allows the text to flow around the image. This results in much nicer
image—text placement, a better use of the page, and graphically more
attractive documents.
<P>
The following is the same example image, but with <B>HSPACE</B> and
<IMG VSPACE=5 HSPACE=8 ALIGN=“left” ALT=“[Example Image”] SRC=“home.gif”>
<B>VSPACE</B> attributes used to add spacings around the image.
Note how this improves the readability of both text and image. You
could get a similar effect by simply building this border into the image
file itself.
<P> To the right is the image with <B>HEIGHT</B> and <B>WIDTH</B> set
to 100—
<IMG ALIGN=“right” HEIGHT=100 WIDTH=100 ALT=“[Example Image”]
SRC=“home.gif”>
the image is zoomed to this size. To clear text to follow the image,
we need <CODE><BR CLEAR=“right”>:</CODE>.
<BR>
<em>after regular <CODE><BR></CODE></em>
<BR CLEAR=“right”>
<em>after <CODE><BR CLEAR=“right”></CODE></em>
<HR>
</BODY></HTML>
|
|
Products | Contact Us | About Us | Privacy | Ad Info | Home
Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc. All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.
|
)
)
){kind=link}
){kind=link}