HTML Images
HTML Images
Images can improve the design and the appearance of a web page.
HTML IMAGES SYNTAX
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
THE ALT ATTRIBUTE
The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
The value of the alt attribute should describe the image:
e.g.
<!DOCTYPE html>
<html>
<body>
<p>If a browser cannot find the image, it will display the alternate text:</p>
<img src="wrongname.gif" alt="Flowers in Chania">
</body>
</html>
IMAGE SIZE - WIDTH AND HEIGHT
You can use the style attribute to specify the width and height of an image.
<!DOCTYPE html>
<html>
<body>
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
</body>
</html>
Alternatively, you can use the width and height attributes:
e.g.
<!DOCTYPE html>
<html>
<body>
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
</body>
</html>
The width and height attributes always defines the width and height of the image in pixels.
Note: Always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.
<!DOCTYPE html>
<html>
<head>
<style>
/*This stylesheet sets the width of all images to 100%: */
img {
width:100%;
}
</style>
</head>
<body>
<p>
The image below has the width attribute set to 128 pixels, but the stylesheet overrides it, and sets the width to 100%.
</p>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<p>The image below uses the style attribute, where the width is set to 128 pixels which overrides the stylesheet:</p>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
ANIMATED IMAGES
HTML allows animated GIFs:
<!DOCTYPE html>
<html>
<body>
<p>The GIF standard allows moving images.</p>
<img src="programming.gif" alt="Computer man" style="width:48px;height:48px;">
</body>
</html>
IMAGE AS A LINK
To use an image as a link, put the <img> tag inside the <a> tag:
e.g.
<!DOCTYPE html>
<html>
<body>
<p>The image is a link. You can click on it.</p>
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
<p>Add "border:0;" to prevent IE9 (and earlier) from displaying a border around the image.</p>
</body>
</html>
IMAGE FLOATING
Use the CSS float property to let the image float to the right or to the left of a text:
<!DOCTYPE html>
<html>
<body>
<p><strong>Float the image to the right:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>
<p><strong>Float the image to the left:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>
<p>Please use the CSS float property. The align attribute is deprecated in HTML 4, and not supported in HTML5.</p>
</body>
</html>
IMAGE MAPS
Use the <map> tag to define an image-map. An image-map is an image with clickable areas.
In the image below, click on the computer, the phone, or the cup of coffee:
e.g.
<!DOCTYPE html>
<html>
<body>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</body>
BACKGROUND IMAGE
To add a background image on an HTML element, use the CSS property
background-image:
<!DOCTYPE html>
<html>
<body style="background-image:url('clouds.jpg')">
<h2>Background Image</h2>
<p>By default the background image will repeat itself if it is smaller than the element where it is specified, in this case the BODY element.</p>
</body>
</html>
CHAPTER SUMMARY
- Use the HTML <img> element to define an image
- Use the HTML src attribute to define the URL of the image
- Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
- Use the HTML width and height attributes to define the size of the image
- Use the CSS width and height properties to define the size of the image (alternatively)
- Use the CSS float property to let the image float
- Use the HTML <map> element to define an image-map
- Use the HTML <area> element to define the clickable areas in the image-map
- Use the HTML <img>'s element usemap attribute to point to an image-map
- Use the HTML <picture> element to show different images for different devices
Note: Loading images takes time. Large images can slow down your page. Use images carefully.
No comments:
Post a Comment