Simply add the phrase align=right to the image tag:
[img src="http://www.austen.com/images/aust4.gif" align=right].
Result (the tag is not shown, but immediately proceeds the text):
.
"...The respect created by the conviction of his valuable qualities, though at first unwillingly admitted, had for some time ceased to be repugnant to her feeling; and it was now heightened into somewhat a friendlier nature, by the testimony so highly in his favor, and bringing forward his disposition in so amiable a light, which yesterday had produced. But above all, above respect and esteem, there was a motive within her of goodwill which could not be overlooked. It was gratitude; gratitude, not merely for having once loved her, but for living her still well enough to forgive all the petulance and acrimony of her manner in rejecting him, and all the unjust accusations accompanying her rejection. He who, she had been persuaded, would avoid her as his greatest enemy, seemed, on this accidental meeting, most eager to preserve the acquaintance, and without any indelicate display of regard, or any peculiarity of manner, where their two selves only were concerned, was soliciting the good opinion of her friends, and bent on making her known to his sister..."
Notice that the text wraps around the picture at the bottom. Also, the text can butt directly up to the picture. If you want to put spaces between the picture and the text, see click here and click here.
Simply add the phrase align=left to the image tag:
[img src="http://www.austen.com/images/aust4.gif" align=left].
Result (the tag is not shown, but immediately proceeds the text):
.
"...The respect created by the conviction of his valuable qualities, though at first unwillingly admitted, had for some time ceased to be repugnant to her feeling; and it was now heightened into somewhat a friendlier nature, by the testimony so highly in his favor, and bringing forward his disposition in so amiable a light, which yesterday had produced. But above all, above respect and esteem, there was a motive within her of goodwill which could not be overlooked. It was gratitude; gratitude, not merely for having once loved her, but for living her still well enough to forgive all the petulance and acrimony of her manner in rejecting him, and all the unjust accusations accompanying her rejection. He who, she had been persuaded, would avoid her as his greatest enemy, seemed, on this accidental meeting, most eager to preserve the acquaintance, and without any indelicate display of regard, or any peculiarity of manner, where their two selves only were concerned, was soliciting the good opinion of her friends, and bent on making her known to his sister..."
Notice that the text wraps around the picture at the bottom. Also, the text can butt directly up to the picture. If you want to put spaces between the picture and the text, see click here and click here.
Simply add the phrase hspace=20 to the image tag. This stands for horizontal space:
[img src="http://www.austen.com/images/aust4.gif" align=left hspace=20].
The number "20" represents the number of pixels you wish to leave blank. Higher numbers results in more space, lower numbers less.
Result (the tag is not shown, but immediately proceeds the text):
.
"...The respect created by the conviction of his valuable qualities, though at first unwillingly admitted, had for some time ceased to be repugnant to her feeling; and it was now heightened into somewhat a friendlier nature, by the testimony so highly in his favor, and bringing forward his disposition in so amiable a light, which yesterday had produced. But above all, above respect and esteem, there was a motive within her of goodwill which could not be overlooked. It was gratitude; gratitude, not merely for having once loved her, but for living her still well enough to forgive all the petulance and acrimony of her manner in rejecting him, and all the unjust accusations accompanying her rejection. He who, she had been persuaded, would avoid her as his greatest enemy, seemed, on this accidental meeting, most eager to preserve the acquaintance, and without any indelicate display of regard, or any peculiarity of manner, where their two selves only were concerned, was soliciting the good opinion of her friends, and bent on making her known to his sister..."
Simply add the phrase vspace=20 to the image tag. This stands for vertical space:
[img src="http://www.austen.com/images/aust4.gif" align=left vspace=20].
The number "20" represents the number of pixels you wish to leave blank. Higher numbers results in more space, lower numbers less.
Result (the tag is not shown, but immediately proceeds the text):
.
"...The respect created by the conviction of his valuable qualities, though at first unwillingly admitted, had for some time ceased to be repugnant to her feeling; and it was now heightened into somewhat a friendlier nature, by the testimony so highly in his favor, and bringing forward his disposition in so amiable a light, which yesterday had produced. But above all, above respect and esteem, there was a motive within her of goodwill which could not be overlooked. It was gratitude; gratitude, not merely for having once loved her, but for living her still well enough to forgive all the petulance and acrimony of her manner in rejecting him, and all the unjust accusations accompanying her rejection. He who, she had been persuaded, would avoid her as his greatest enemy, seemed, on this accidental meeting, most eager to preserve the acquaintance, and without any indelicate display of regard, or any peculiarity of manner, where their two selves only were concerned, was soliciting the good opinion of her friends, and bent on making her known to his sister..."
The spacing tags can, of course, be used in combination:
[img src="http://www.austen.com/images/aust4.gif" align=left vspace=20 hspace=30].
Result (the tag is not shown, but immediately proceeds the text):
.
"...The respect created by the conviction of his valuable qualities, though at first unwillingly admitted, had for some time ceased to be repugnant to her feeling; and it was now heightened into somewhat a friendlier nature, by the testimony so highly in his favor, and bringing forward his disposition in so amiable a light, which yesterday had produced. But above all, above respect and esteem, there was a motive within her of goodwill which could not be overlooked. It was gratitude; gratitude, not merely for having once loved her, but for living her still well enough to forgive all the petulance and acrimony of her manner in rejecting him, and all the unjust accusations accompanying her rejection. He who, she had been persuaded, would avoid her as his greatest enemy, seemed, on this accidental meeting, most eager to preserve the acquaintance, and without any indelicate display of regard, or any peculiarity of manner, where their two selves only were concerned, was soliciting the good opinion of her friends, and bent on making her known to his sister..."
When a browser loads a page, it often waits to get all of the pictures loaded before the text appears. This is because it does not know in advance how much room the pictures will take up, and therefore it can not know where the text should start. This can slow down a person's access to a page, especially when they are more interested in the text than in the visual decoration of a site. If a browser knows exactly how large a picture is, then it can set aside the space for it, and allow the text to appear right away. If you have a graphics program, it will usually tell you somewhere how large, in pixels, a picture is. This is the information you need to speed up load times.
Once you have determined the height and width of a picture in pixels, you can add these numbers to the image tag. For example, the picture I have been using here is 218 pixels wide and 109 pixels tall. To provide this information, add the following phrases: height=109 and width=218 to the image tag, (the numbers will be different for each picture.) It is not considered acceptable to use these attributes to resize a picture, as different browsers will handle it differently, and it can cause problems. The numbers you use should be accurate. Inserting the height and width numbers will not change the appearance of the picture, it will only allow the browser to draw the correct size box for the picture right away.
A complete tag, with all of these attributes then looks like:
[img src="http://www.austen.com/images/aust4.gif" align=right vspace=20 hspace=20 height=77 width=159].
Result (the tag is not shown, but immediately proceeds the text):
.
"...The respect created by the conviction of his valuable qualities, though at first unwillingly admitted, had for some time ceased to be repugnant to her feeling; and it was now heightened into somewhat a friendlier nature, by the testimony so highly in his favor, and bringing forward his disposition in so amiable a light, which yesterday had produced. But above all, above respect and esteem, there was a motive within her of goodwill which could not be overlooked. It was gratitude; gratitude, not merely for having once loved her, but for living her still well enough to forgive all the petulance and acrimony of her manner in rejecting him, and all the unjust accusations accompanying her rejection. He who, she had been persuaded, would avoid her as his greatest enemy, seemed, on this accidental meeting, most eager to preserve the acquaintance, and without any indelicate display of regard, or any peculiarity of manner, where their two selves only were concerned, was soliciting the good opinion of her friends, and bent on making her known to his sister..."
Some people prefer to see only the text on a site. They might be using a strictly textual browser, or they might find that loading the images slows down their browser more than the pictures are worth. For these people it is helpful to tell them something about the pictures they are not seeing.
This is done by adding alt="Name Of Picture" to an image tag, where the name is whatever you wish it to be.
For example a tag might look like:
[img src="http://www.austen.com/images/aust4.gif" alt="Austen.com"]
The quotation marks are essential. A text user would then see this title in a box with an unloaded image icon, or next to "[image]" in a textual browser.
Because text will wrap around a picture, and because one never knows what font settings other people are using, it is sometimes very difficult to get text and graphics to align properly. I have found that it is sometimes easier to put everything into a table. This allows one to prevent text from wrapping around graphics. I have described how to create tables on the Advanced HTML Stuff page.
© 1997, 1998, 1999, 2000 Copyright held by Ann Haker.