Positioning images

When you combine text with images, you can start with the basic image code and let the text begin at the bottom and go on from there. This is okay sometimes, but you'll usually want something a little fancier . . .


Aligning the image in relation to the text:

Now you have text which displays beside the image. Like this: Text text text and some more text right here please.

Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please.

Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please.

Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please.


This is "align=left"

This text displays on the right of the image -- which is aligned to the left. Notice that the image is placed at that point in which the image source is imbedded in the text. Like this: Text text text and some more text right here please. Text text text and some more text right here please.

Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please.

Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please.

Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please.

However, notice that the text is to close to the image . . .


Horizontal and vertical spacing

Now you have text which displays beside the image. Like this: Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please.

Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please.

Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please.

Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please.

Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please.

Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please.

Text text text and some more text right here please. Text text text and some more text right here please. Text text text and some more text right here please.

Sizing images

You have two opportunities to size images you use. First, you can size the actual image, so that it is no larger than you actually need. Then you can size how it displays on the page. Just as we saw in sizing the width of a line, you can display an image based on percentage of the screen or in point sizes. This first example is set to display at 25 percent of the width of the screen. While a percentage size is relative, you can also express it in absolute terms by sizing in points, like this. If you change the width of the browser window you will see that the image which is sized in terms of points does not change, but the image which is set as a percentage of the window becomes larger or smaller as the window is changed.

While you will sometimes want to size images relative to the screen, you will find absolute sizing more practical when doing page design.


outline
next