Download 2.1 Adding Images

Adding Images
XHTML <img> Element
<img src="mypic.jpg" alt="my text" />
Element
Attribute
Attribute
Value
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.
Get in the habit of naming image files in all
lowercase letters and use underscores or
dashes instead of spaces.
Attribute
Attribute
Value
Closing tag
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.
<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.
Determining the Height and Width:
By viewing the properties of an image file in Windows, you can see what the
width and height are.
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" />
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:
jpg
png
gif
Best suited for:
Photographs
Logos, Icons
Animations
Color support:
Excellent
Excellent
Limited






Image Extension:
Supports transparency:
Supports animation: