Inline Images

Sr.No.
Topics
1

Image Size Attributes

2
Aligning Images
3
Alternate Text for Images
4
Images as Hyperlinks
5
Background Graphics
6
Background Color
7
External Images, Sounds, and Animations

 

Aligning Images

You have some flexibility when displaying images. You can have images separated from text and aligned to the left or right or centered. Or you can have an image aligned with text. Try several possibilities to see how your information looks best.

Aligning Text with an Image
By default the bottom of an image is aligned with the following text, as shown in this paragraph. You can align images to the top or center of a paragraph using the ALIGN= attributes TOP and CENTER.

This text is aligned with the top of the image (<IMG SRC = "underconstruction.gif" ALT="[Underconstruction]" ALIGN=TOP>). Notice how the browser aligns only one line and then jumps to the bottom of the image for the rest of the text.

And this text is centered on the image (<IMG SRC = "Underconstruction.gif" ALT="[Underconstruction]" ALIGN=CENTER>). Again, only one line of text is centered; the rest is below the image.

Images without Text
To display an image without any associated text (e.g., your organization's logo), make it a separate paragraph. Use the paragraph ALIGN= attribute to center the image or adjust it to the right side of the window as shown below:

<p ALIGN=CENTER>
<IMG SRC = "Underconstruction.gif" ALT="[Underconstruction]">
</p>
which results in:

The image is centered; this paragraph starts below it and left justified.