1. Adding Images

2. XHTML <img> Element
<img src="mypic.jpg" alt="my text" />
Element
Attribute
Attribute Value
Attribute
Attribute Value
Closing tag
The src attribute supplies the name and location of the image file you wish to display. If no path is specified, the browser will expect the file to be in the same folder as the web page.
The alt attribute determines what text will display in the web page if the image is not available. This is also what screen readers (for the visually impaired) will use.
Get in the habit of naming image files in all lowercase letters and use underscores or dashes instead of spaces.

3. <img> height and width attributes
<img src="sunset.jpg" height="600" width="800" alt="A beautiful sunset" />
By specifying the height and width attributes of an image, we help the browser display the image correctly on the page.
We can use these attributes to make a large image appear smaller on the page. We can also make a smaller image appear larger on the page, but this is not recommended, as the image will look pixelated and of poor quality.
When making a large image appear smaller on the page, be sure to keep the same ratio of height to width. If you don't, the resulting image will look "squished" when it displays on the page.

4. Determining the Height and Width:
By viewing the properties of an image file in Windows, you can see what the width and height are.

5. Resizing the Height and Width:
By dividing the height and width evenly, we can resize an image on our web page.
<img src="sunset.jpg" height="300" width="400" alt="A beautiful sunset" />

6. Image Formats for the Web:
The most common image formats for websites are (.jpg), (.png), and (.gif) extensions. While jpg files are used most often, the other two formats have their own advantages:
Image Extension:
jpg
png
gif
Best suited for:
Photographs
Logos, Icons
Animations
Color support:
Excellent
Excellent
Limited
Supports transparency: û ü ü
Supports animation: û û ü