Adding Images XHTML img Element img srcmypic jpg

Adding Images

XHTML <img> Element <img src="mypic. jpg" alt="my text" /> Element 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 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: n 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 Limited û û ü ü Image Extension: Supports transparency: Supports animation: