|
|
|
| |
        
|
 |
|
To access the contents, click the chapter and section titles.
HTML 4.0 Sourcebook
Clearing Margins for Text Often, you will want text to appear after the bottom of an image and not beside it. To do this, you must clear the text so that subsequent text moves down unconditionally below the image. Since the image can be to the left or right, you must also be able to specify that the text should start only when the left margin is clear, when the right margin is clear, or when both margins are clear. In HTML, this is accomplished using the CLEAR attribute, available only on the BR element. Thus, <BR CLEAR="left"> ensures that the text following the BR is cleared to the left margin; while <BR CLEAR="right"> ensures that the following text is cleared to the right margin; and <BR CLEAR="all"> ensures that the following text is cleared to both margins. Figure 2.15 shows the effect of CLEAR=“right” to clear the text that follows the large right–hand image. This attribute is understood by any browser that allows left– and right–aligned images. Lessons from Example 7
Exercises for Example 7Take the example document align.html and modify the alignment options. In particular, use the HEIGHT and WIDTH attributes to modify the size of embedded images. Note how you can use these to stretch and deform inline images. Example 8: Tables and Backgrounds (1)The next two examples look at HTML elements and attributes for modifying the background of the display window and for defining tables of items. These features are particularly used to define complex page layout and typography, and are perhaps the most used elements in an HTML page designer’s repertoire. Several of the most common applications of these elements are illustrated here and in Example 9. Some additional table examples are found in Chapter 6. Background ControlHTML 3.2 supports a BACKGROUND attribute to the BODY element to indicate an image file that the browser can use as a background for the displayed document. The form is: <BODY BACKGROUND=“url”> The value for BACKGROUND is the URL of an image file. If capable, the browser will load this image and use it to tile the background of the document being displayed. Figure 2.18 shows an example of a loaded background (the HTML document is given in Figure 2.17). This can be an attractive change to the document, but should be used with care—remember that not everyone has a good graphics display or a high color (16–bit color) graphics card. Figure 2.17 HTML code for the document tables.html. This document illustrates the TABLE element, as well as the BODY element BACKGROUND attribute.
<HTML><HEAD>
<TITLE>Table and Background Example</TITLE></HEAD>
<BODY BACKGROUND=“paper01.jpg” TEXT=“#000000”
ALINK=“#ff0000” VLINK=“#005050”>
<H1> Simple Table Examples </H1>
<BLOCKQUOTE>
<P>This simple example demonstrates simple table layout. Note how the second
table does not have any borders, and is right–alignedon the page.
<HR>
<TABLE BORDER>
<CAPTION> <B>First Example <A HREF=“tables.html”>Table</A></B></CAPTION>
<TR BGCOLOR=“#ffffff”>
<TH ROWSPAN=“2”> Segment </TH> <TH COLSPAN=“2”> Total Memory </TH>
</TR> <TR>
<TH>Bytes</TH> <TH> Kbytes </TH>
</TR> <TR>
<TD> 005B5 </TD> <TD ALIGN=“right”> 78 </TD> <TD> (0K) </TD>
</TR> <TR>
<TD> 00780 </TD> <TD ALIGN=“right”> 175</TD> <TD> 0K </TD>
</TR> <TR>
<TD> 020B </TD> <TD ALIGN=“right”> 88348 </TD>
<TD BGCOLOR=“#ffffff”> 510K </TD>
</TR> <TR>
<TD COLSPAN=“2” ALIGN=“left”><A
HREF=“memory.html”>Total Free</A></TD>
<TD BGCOLOR=“#666666”> 510K </TD>
</TR>
</TABLE>
<HR>
<TABLE BORDER=“0” ALIGN=“right”>
<CAPTION> <B>Second Example <A HREF=“tables.html”>Table</A> </B></CAPTION>
<TR>
<TD COLSPAN=“2” ALIGN=“center”
BGCOLOR=“#ffff77”><EM><B>Note Well!!</B></EM></TD>
</TR><TR>
<TD BGCOLOR=“#f1ffff”>Here is some<BR>text in a cell </TD>
<TD BGCOLOR=“#666666”>Here is some<BR>text in the next cell</TD>
</TR>
</TABLE>
<P>Text flows around this right–aligned table, just as with images.
Thus you can create proper text documents and associated tabular
information (or images) without difficulty.
</BLOCKQUOTE>
</BODY></HTML>
Backgrounds can cause problems if the background color is similar to the default color of the text. Consequently, all browsers supporting BACKGROUND also support the attributes TEXT, LINK, ALINK, and VLINK for specifying the color of regular text, text within hypertext anchors, text within activated links (when the link is pressed), and text within visited hypertext anchors, respectively. Such browsers also support a BGCOLOR attribute to specify a single background color, which works even if image loading is disabled. BGCOLOR is also important because if image loading is disabled, the background image is not displayed. This can be a problem if, for example, the background image is dark and the TEXT attribute is used to change the text color to white. With image loading disabled, the background will be white (or gray, or whatever the default is for the user’s browser), not black (since the background image was not loaded), so that the text is rendered in white against a white background—difficult to read, to say the least! Thus, if BACKGROUND is used, BGCOLOR should also be used, to specify a color that mimics the background due to the image. TABLEsTables are defined using the TABLE element, while the content of the table is laid out as a sequence of table rows (TR), which, in turn, contain table headers (TH) and/or table data (TD). A table can also have a caption, defined by the CAPTION element. The caption can contain all forms of character formatting markup, including hypertext anchors. An example is shown in Figures 2.17 and 2.18. Tables can have borders and dividing lines or can be borderless. The start tag <TABLE BORDER> ensures that the table is drawn with borders and dividers—you can adjust the thickness of the border by assigning a value (in pixels) to the BORDER attribute.
HTML also allows tables to “float” on the page, like images. This is illustrated in Figure 2.18, where the second table was floated to the right–hand margin. Some older browsers do not support floating tables, in which case the tables always appear alone, with all images and text preceding or following the table. Rows and ColumnsTables are defined as a collection of rows, defined by the TR element. Each of these rows contains a collection of cells, defined by the TH or TD elements. TH (table header) elements are used for column or row headings, while TD (regular tabular entry) elements are used for everything else. The differences between the rendering of TH and TD content are small: In general, TD content is left–aligned, while TH content is centered within the cell and rendered in boldface. Both are nonempty elements, and end tags are required.1 These elements can take several attributes to define the horizontal and vertical alignment of the element content (ALIGN and VALIGN), or the number of rows or columns (ROWSPAN and COLSPAN) occupied by the table cell.
|
|
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}