Placing Images on a Page

By default, the browser places the image on the page in the position where it is parsed. However, some actions change the default position. For example, if the first tag on the page is an <img> tag, the image will appear at the top-left corner of the client area of the browser window. The client area is the portion of the window where content appears. It excludes the border, status bar, and any toolbars. Any text following the image would appear starting at the bottom-right edge of the image, because placing the image on the page first moves the baseline to the bottom of the image (see Figure 2.8).

tii CJ 1W Tu* rsfc

■f-to* - - J J 3 Jt>y > i,rw<w*rt .J-+PH J .. r ,t:A

tii CJ 1W Tu* rsfc

■f-to* - - J J 3 Jt>y > i,rw<w*rt .J-+PH J .. r ,t:A

You can alter the <img> tag by adding an alignment attribute; for example, <img src="someURL/topImg.gif" align="right"> will align the image at the top-right corner of the client area. You might expect that adding text in the file after the image would then wrap the text so it would begin on the first line following the image and below the bottom edge of the image. But that's not how the browser renders the file. Changing the alignment renders the image on the right, as expected, but the browser begins plotting text at the top-left corner of the client area (see Figure 2.9).

Figure 2.9: Right-aligned image (ch2-9.htm)

If you go back and explicitly add an align="left" attribute to the tag in the file displayed in Figure 2.8 (ch2-8.htm), the text will plot at the right top corner of the image rather than the bottom right corner.

You should spend some time experimenting with the various attribute settings for the <img> tag, because the results aren't always what you would expect.

Was this article helpful?

0 0

Post a comment