display | more...
The HTML tag that allows you to post images on any HTML page. It includes the variables:

src, which is the location of the image
height and width, which are self-explanatory
border, which tells how thick the border is if the picture is linked to something
and alt, which gives the image description

For some reason, these are disabled on everything2, so don't try to use one.
The <img> tag is the HTML tag which allows you to include inline images in any web document. There is no ending tag for <img> (ie. it does not end with an </img>), and images must be placed in the <body> of the document. The image tag can not be used in nodes on everything2. It has a number of different attributes which can be included in the tag. These include:

src="URL" (Required)
The source of the image to be placed into the document. The actual image can be in a variety of different image formats, the most common including GIF, JPEG, and more recently, PNG. The source of the image can be defined in a number of different ways. The attribute accepts values in the form of either complete, partial or relative URLs for the image.

alt="text" (Optional)
This is the alternative text for the inline image. While loading the image, the browser will display this text in place of the image, and when finished loading the image, will replace the text with the new image. Also, when the user hovers their mouse cursor over the image, a tool-tip displaying the alternative text will display. This text can help in non-graphical environments, and also helps surfers use the document, by letting them know what exactly they are loading.

height="value", width="value" (Optional)
Specifies the height and width of the image, in pixels. When the browser is downloading the image, it will insert a placeholder into the web document with these dimensions. If the downloaded image is smaller or larger than the specified sizes, then the image will be scaled to fit. By using these tags, you can speed up loading of your web pages.

align="type" (Optional)
Specifies a method that the image will be aligned with the rest of the document. Valid types include:
  • ALIGN=left - image will float the image to the left margin (into the next available space there), and subsequent text will wrap around the right hand side of that image.
  • ALIGN=right - will align the image aligns with the right margin, and the text wraps around the left.
  • ALIGN=top - aligns itself with the top of the tallest item in the line.
  • ALIGN=texttop - aligns itself with the top of the tallest text in the line (this is usually but not always the same as ALIGN=top).
  • ALIGN=middle - aligns the baseline of the current line with the middle of the image.
  • ALIGN=absmiddle - aligns the middle of the current line with the middle of the image.
  • ALIGN=baseline - aligns the bottom of the image with the baseline of the current line.
  • ALIGN=bottom - aligns the bottom of the image with the baseline of the current line. (Essentially, this is the same as ALIGN=baseline)
  • ALIGN=absbottom - aligns the bottom of the image with the bottom of the current line.

border="value" (Optional)
This specifies the size of a border around the image, in pixels. If the image is in a hyperlink, then the border colour will be the colour of the links; if not, it will be the colour of the normal text. The most common use of this attribute is to remove the border around hyperlinked images (which is the default), by setting its border to 0.

A few attributes have been implemented recently, and are therefore only avaliable in recent browsers. These new attributes include:

title="text" (Optional)
This attribute is for informational purposes. If present, the text specified will appear as a "tool-tip" when the user hovers their mouse above the image. The tooltip text for title will override any alternative text for the tooltip in alt.

style="value", class="value" (Optional)
Both of these values are related to Cascading Style Sheets (CSS), which is beyond the scope of this document.

name="value", id="value" (Optional)
The name attribute can set a specific name to the image object, which can later be accessed using scripting methods; and the id attribute is almost the same, but not identical, as more attributes to the image object can be accessed using the id attribute.

It is important to note that this is not a fully comprehensive list of all the attributes and information available for the <img> tag, it is merely a guide. For a more complete guide to images, please visit the World Wide Web Consortium (http://www.w3c.org), which sets the standards for HTML.

If you have any comments relating to this document, or you have any suggestions, or queries, please feel free to message me (klinkon).

<IMG> is one of the many quick hacks produced by the NCSA/Netscape developers in their relentless pursuit of functional, featureful Web software.

In this case, the feature was inline images in HTML documents. Marc Andreessen didn't give other WWW developers much time to comment, he just went ahead and added it to Mosaic.

One of the basic design principles of the WWW is that document types are properties of the documents themselves, not of the documents using them or referring to them. In HTTP, document types are provided with the document as a MIME type. The client is expected to be prepared to handle whatever document type is being sent in a manner appropriate to the type. What it can do is announce the range of document types it wants to receive as part of the HTTP request.

The Mosaic developers never bothered to implement this. They always asked for all types but were only really prepared to handle a limited range. The IMG tag is a case of bad design because it limits the range of document types to images, which is unnecessary and which should be done using MIME types anyway. A proper design would use <OBJECT> or <EMBED> as the tag name and specify the ranges of document types it is prepared to handle in the HTTP request. This is implemented in other browsers.

Like so many broken features from the Web software NCSA was producing at the time, the IMG element was later patched up and worked around to provide a little more flexibility, but we will be stuck forever with the broken core. On the other hand, without this attitude of 'release first, think later' none of us would have heard of the Web today.

Log in or register to write something here or to contact authors.