Adding Images Using the image Element in html

Adding Images Using the <img> Element
Images are added to a site using the <img> element, which must carry at least two attributes: the src
attribute, indicating the source of the image, and an alt attribute, which provides a description of
the image.
For example, the following line would add the image called logo.gif into the page (in this case, the
image lives in a directory called images).
example:
<img src="logo.gif" alt="Wrox logo" >

Note: an image may end with ".img", ".gif", "jpg", so just write the image name with what ever it ends with.

In addition to carrying all the universal attributes, the <img> element can carry the following
attributes: src alt height width ismap usemap.

The src Attribute
The src attribute tells the browser where to find the image. The value is a URL and, just like the
links you met in the previous chapter, the URL can be an absolute URL or a relative URL.
<img src="logo.gif" >
Generally speaking, images for your site should always reside on your server or on another server
you control. It is not good practice to link to images on other sites because if the owner of the other
site decides to move that image, your users will no longer see the image.
Because the images are on your server, rather than being an absolute URL, the value is more likely
to be a relative URL that uses the same shorthand notations you met in the previous chapter when
relative URLs were introduced.
Most web page authors create a separate directory (or folder) in the website for images. If you have
a large site, you might even create different folders for different types of images. For example, you
might keep any images used in the design of the interface (such as logos or buttons) separate from
images used in the content of the site.

The alt Attribute
The alt attribute should appear on every <img> element and its value should be a text description of
the image.
<img src="logo.gif" alt="Wrox logo" >
Often referred to as alt text, the value of this attribute should describe the image because of the
following:
 If the browser cannot display the image, this text alternative is shown instead.
Web users with visual impairments often use software called a screen reader to read a page to
them, in which case the alt text describes the image they cannot see.
 Although search engines are clever, they cannot yet describe or index the contents of an image;
therefore, providing a text alternative helps search engines index your pages and helps visitors
find your site.
Sometimes images do not convey any information and are used only to enhance the layout of the page.
(For example, you might have an image that is just a decorative element and does not add any information
to the page.) In such a case, the alt attribute should still be used but given no value, as follows:
<img src="stripy_page_divider.gif" alt="" >
As you’ll see in Chapter 7, “Cascading Style Sheets,” decorative elements are usually best handled
with CSS. Still, there are situations in which decorative images are unavoidable. In those exceptions
this is the correct pattern.

The height and width Attributes
The height and width attributes specify the height and width of the image, and the values for these
attributes are almost always shown in pixels. (If you are not familiar with the concept of pixels, look
at this in the section “Choosing the Right Image Format.”)
<img src="logo.gif" alt="Wrox Logo" height="120" width="180" >
Technically, the values of these attributes can be a percentage of the browser screen. Or if the image
is inside an element that takes up only part of the page, known as a containing element, it would be
a percentage of the containing element. If you do use a percentage, the number will be followed by a
percent sign, but for most web pages this is rare, and showing an image at any size other than the size
at which it was created can result in a distorted or fuzzy image.
Specifying the size of the image is considered good practice, so you should try to use these attributes
on any image that you put on your pages.
It also helps a page to load faster and more smoothly because the browser knows how much space to
allocate to the image, and it can correctly render the rest of the page while the image is still loading.
Also, if for some reason the image doesn’t load, you’ll also have the browser draw an empty box of
the given height and width with the alt text within it.

Example: try this out.
<p>Fixed size: width 130 height 130</p>
<img src="images/apple.jpg" alt="Photo of red apple" width="130"
height="130" >
<p>Enlarged: width 160 (no height specified)</p>
<img src="images/apple.jpg" alt="Photo of red apple" width="160" >
<p>Stretched: width 80 height 150</p>
<img src="images/apple.jpg" alt="Photo of red apple" width="80" height="150" >