[ Prev ] [ Index ] [ Next ]

Inline Images

An inline image on a Web page is set as part of the text in which it is embedded (unlike an image in a page-layout program, which is anchored to a specific spot on the page). Anywhere that you can place a character of text, you can put an inline image.

The tag to insert is <IMG SRC="filename.ext">, the ext being that of a GIF or JPG file.

Mosaic was the first graphical browser capable of displaying images in-line with text.

For any image "missing" or unavailable, Netscape shows instead, while MS-IE shows

The images can also be hypertext-linked to give visual access to  more more information. The "more"-link here is to a page on a SEPARATE REMOTE SITE carrying more information about HTML (site "http://www.ncsa.uiuc.edu/Mosaic/Quickstart.html").

But if used as anchor-images without text, beware of creating anchors with "tails": Note the small blue dash after the image! "Tails" are caused by the inclusion (in the HTML source markup) of a carriage-return (ie. end-of-line CR) between the image-tag and the anchor-close. (The earlier "more" example had just such a CR in the markup but a "tail" didn't show because of the further blue underscored text after the image.) Image-anchors should therefore be written in the document source with no carriage-return between the end of a solo image-tag and the anchor-close (ie. keep them on the same line).

For example: is neater, written without a misplaced CR in the markup!

Of course there are other times when a CR is useful to create deliberate space between inline images. Compare for example the internal spacing in:
[top][prev][next] and: [top] [prev] [next]