HTML:Including Picture-Inline Images

INLINE IMAGES

Not all images are best viewed separately from the HTML document and are best displayed as part of the document. Such images are called In-line Images.

An example of the use of in-line images can be seen at the bottom of every page of this course. Using the Source... option on the View menu you can see the original source tags used to construct an HTML page. Look at this page and pay particular attention to the in-line graphics shown at the bottom of this page. They are included by using the following commands:

<img src="image_URL" alt="text" />

where

src
indicates the location (source) of the image
alt
indicates alternative text that will be displayed if the image can’t be seen by either the browser or the user who might be using a “screen reader”. Not all Web browsers are capable of displaying in-line images. You should always include alternative text that is displayed if the image is ignored by the browser. Note: make the alt text meaningful – don’t just simply use alt="picture".

Addition information can be included in the above:

align
by default the paragraph text is aligned to the bottom of the image. Alternatives include top or center.

The following HTML demonstrates how to include inline images into your Web pages. Note: all images are stored in a sub-directory called images. It is good working practice to store similar types of media (pictures, sound files, pdfs etc.) in a dedicated directory.


<h3>Example Document With an Inline Image</h3>


<p><img src="images/ladybird.gif" alt="ladybird" />This is a ladybird</p>
<p><img src="images/ladybird.gif" alt="bee"/>This is a bee</a></p>

This would be displayed by a Web browser in the following way:


Example Document With an Inline Image

ladybirdThis is a ladybird

beeThis is a bee

Note: the text, by default, is aligned to the bottom of the image. This can be changed with the align parameter. For example:

align=top
ladybirdThis is a ladybird
align=center
ladybirdThis is a ladybird

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *