HTML Images
In HTML, images are characterized with the <img> tag.
The <img> tag is vacant, it contains characteristics just, and does not have an end tag.
The src quality indicates the URL (web address) of the image:
The <img> tag is vacant, it contains characteristics just, and does not have an end tag.
The src quality indicates the URL (web address) of the image:
Example
<img src="img_chania.jpg" alt="Flowers
in Chania">
Image Size - Width and Height
Example
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Alternatively, you can use the width and height attributes:
Example
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Width and Height, or Style?
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%; }
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
Images in Another Folder
Example
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
Animated Images
HTML allows animated GIFs:
Example
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Image as a Link
To use an image as a link, put the <img> tag inside the <a>
tag:
Example
<a href="default.asp">
<img src
Image Floating
Use the CSS float property to let the image float to the right or to the left of a text:
Example
<p><img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of
the text.</p>
<p><img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
The image will float to the left of
the text.</p>
Image Maps
Example
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<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="Coffee" href="coffee.htm">
</map>
Background Image
To add a background image on an HTML element, use the CSS propertybackground-image:Example
To add a background image on a web page, specify the background-image property on the BODY element:
<body style="background-image:url('clouds.jpg')">
<h2>Background
Image</h2>
</body>
Example
To add a background image on a paragraph, specify the background-image
property on the P
element:
<body>
<p style="background-image:url('clouds.jpg')">
...
</p>
</body>
Thanks for sharing this post, this post is really very informative
ReplyDeletePrivate Detective Agency In Punjab