<Img> causes an "inline image" to be inserted into
the output. The image will be retrieved and rendered as if it were just
another part of the text. Inline images can occur within headings, or
paragraphs, almost anywhere in fact, except
body (in other
words, you can have a 'free floating'
must be contained within some other element.)
<hr>, this is an
empty element. That is, there must be no end-tag. You will
<hr> used with an end-tag (e.g as a
container around a caption), but this is obsolete usage.
<Img> has 1 required attributes
well as 3 optional attributes.
srcattribute is used to specify the URL of the image (i.e. the address or filename the browser uses to retrieve the image file), e.g.
<img src="http://planet-earth.bogus.us/icons/secret.pictures.gif"> <img src="grandchild.gif">
altis used to provide an text alternative to the image for readers whose browsers do not support graphics (or for visually impaired readers using alternative display devices). Although not required, the use of the
altattribute is nearly always appropriate and is strongly recommended. The only exception might be cases where the image is strictly decorative or of generic character. In this case the default text chosen by the browser (typically something like "[IMAGE]" may be adequate.
aligncan take one of three values:
and is used to indicate how the browser should align the image with the
bottom: align the bottom of the image with the bottom of text
middle: align the middle of the image with the middle of text
top: align the top of the image with the top of text.
Lets align an image with the Top of this text and then Middle and finally the Bottom , just to see what happens.
ismapmarks the image as an active image map. This allows the user to click the mouse over the image and have different regions of the image cause different actions. In order for this attribute to have any effect, some configuration must be done at the server. On some servers setting up an imagemap is quite simple, on others the process is more involved and may involve some programming. Merely including the
ismapattribute in the
<img>in your document will not magically make it a 'clickable map'.
<h3><img alt =" [Angel Fractal] " src="angels.gif">Lovely Fractals</h3> <p>Watch out when you insert an image in a line of text. Because the image is a fixed height, it will do some <img src="smalross.gif" align="middle">odd things to line spacing.<br> Future versions of HTML may support options for 'flowing' text around inline images</p>
which is rendered
Watch out when you insert an image in a line of text. Because the
image is a fixed height, it will do some odd things to line spacing.
Future versions of HTML may support options for 'flowing' text around inline images
Images can also be retrieved using by means of a hypertext link using the <a> tag. The key difference between an inline image and an image retrieved with the <a> tag is that an inline image requires no action on the part of the reader; it is retrieved with the page just as if it were part of the text. With the <a> tag, the reader has to make a special action (e.g. clicking on a button) to retrieve the image.
In fact, the two methods are often used in tandem. For example, to use graphics as buttons:
Press the button to meet the muses of this guide
or to use a thumbnail (reduced size) version of a larger image as a button. When the button is pushed, the larger image is retrieved:
Although they are not part of the HTML specification per se, there are a few practical considerations that most be dealt with in order to use inline images.
Most browsers can only handle inline images that are in GIF format. Some can also handle images in JPEG format, but you can't rely on this. If you want to use an image in a format other than GIF, it is prudent to use a <a> tag instead.
Some browsers insert a space between adjacent elements if there is any whitespace between the end-tag of one element and the start-tag of the other, which can be annoying if you're trying to put together a tool bar or a compound image. Thus
<p><img src="button1.gif" alt='Button1"> <img src="button1.gif" alt='Button1"></p>
may be rendered as
If you really want to ensure that two images are contiguous, the only way I've found to accomplish it is do something like
<p><img src="button1.gif" alt='Button1"><img src="button1.gif" alt='Button1"></p>
I believe that according to the specification, this shouldn't be necessary, and that the browsers are misbehaving, but I may well be wrong.