Page 1

HTML Images: Inserting Image in HTML is very simple or easy and it can be inserted using the <img> tag and Image Map In HTML is possible. If you want to insert any image in HTML then you have to define the path of the image using src attribute of the <img> tag. The syntax is as follows: <img src=”path of image” width=”width in pixel” height=”height in pixel”> For example: <img src=”eit.jpg” width=”100px” height=”100px”> Let us see the different example on the HTML images using the HTML img tag which are as follows: Example 1: image having its own size: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Image Example</title> </head> <body> <img src="Data Entry/images/img3.jpg" /> </body> </html> In this, image have its original size. The output for this program is as follows:


Example 2 for fixing the image width: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Image Example</title> </head> <body> <img src="Data Entry/images/img3.jpg" width="500" /> </body> </html>


In this example you just have to define the width for the image then you can get the desired width for the image. The output of this program is as follows:

Example 3 fixing height of the HTML Images using HTML img tag: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Image Example</title> </head> <body> <img src="Data Entry/images/img3.jpg" heigt="300" />


</body> </html> Here we just set the height of the image using the height attribute and define the size. The output of this program is as follows:

Example 4 fixing the width and height for HTML images: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Image Example</title> </head>


<body> <img src="Data Entry/images/img3.jpg" height="300" width="300" /> </body> </html> Here we have defined the width and height both at a time so you can control the Images in HTML according to need. The output of this program is as follows:

Example 5 to give the link on HTML images: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Image Example</title> </head> <body> <a href="http://www.google.com"><img src="Data Entry/images/img3.jpg" height="50" width="100" />Google </a> </body> </html> In this example we just insert HTML images and give one link. The output of this program is as follows:


You can learn Image Map In HTML, Inserting Image in HTML, HTML Images by using HTML img tag in easy and simple way.

For more information visit: html-tag

https://www.bebee.com/producer/@eit-world/html-images-learn-

Html images  

You can learn Image Map In HTML, Inserting Image in HTML, HTML Images by using HTML img tag in easy and simple way.

Html images  

You can learn Image Map In HTML, Inserting Image in HTML, HTML Images by using HTML img tag in easy and simple way.

Advertisement