H T M L   1 0 1 - INLINE GRAPHICS

Inline graphics are graphics (including photos) and video that are embedded in a web page. Inline graphics are displayed in a web browser as part of the document, and do not require a separate external viewer application to be seen. Likewise, inline video refers to a video clip embedded in a web page that runs in real time without requiring a separate player.

This magnifying glass is an inline graphic.

This is what the source code for the image tag looks like:
<img src="img/lupe13.gif" width="34" height="35" alt="Magnifying Glass" border="0">

The basic structure of the image tag requires both the img attribute and the src attribute. IMG identifies the the type of tag and SRC identifies where the tag is stored and its name. Note that in our example the file "lupe13.gif" is stored in the img directory.

The alt="..." attribute
If your web pages will be viewed by users using a text-only browser (such as lynx), they will not be able to view any inline images. Or sometimes, users will turn off the loading of inline images to save time on downloading over slow network connections. An attribute for the <img ...> tag allows for substitution of a descriptive string of text to hold the place of the image. The most important reason though is that it is good coding practice and is in conformance with Web Accessibility Guidelines.

The height="..." attribute and the width="..." attribute
Other options you should always include in your <img...> tags are two attributes that give the dimensions of the image in pixels: height and width. Why? Normally, your web browser has to determine these dimensions as it reads in the image; the loading of your page can be faster if you specify these numbers in your HTML.

The border="..." attribute indicates if you want a border around the image. The default is "0."