It was really annoying that the web at the beginning was just text. Fortunately a good news for web developer, the ability to embed the image in the web pages. The HTML images use img tag to insert image into a web document.
This tutorial gives you simple steps to insert image in your web site and make web page beautiful.
- In HTML document define <img> tag for use image.
- HTML <img> tag does not have any closing tag.
- The HTML <img> tag work some attributes. That’s like
- Src,
- Alt,
- Style.
Insert image
Insert a image in your web page using <img> tag. In HTML <img> tag can’t not show image without src attribute. HTML <img> tag work with some attribute in your web page. Insert a single image in your web browser follow this example code:
Example:
<!DOCTYPE html> <html> <body> <h2>Insert image</h2> <img src="web-image.jpg"> </body> </html>
Set image location
In HTML <img> tag, you can set image location in the src attribute. If your image have a folder the you give a image path in the src tag, for example:
<!DOCTYPE html> <html> <head> <title>Set image location:</title> </head> <body> <img src = "/images/my-image.png"/> </body> </html>
Or if you <img> tag get image from another URL link the set the image URL link in the src attribute, for example:
<!DOCTYPE html> <html> <head> <title>Set image location:</title> </head> <body> <img src = "http://datainflow.com/html/datainflow.jpg"/> </body> </html>
Set image width height
Change inserts image size, you can use the width and height attributes in your web page. In HTML, you can set image width and height using pixel or percentage, this attribute changes the image actual size. You can set image size using style attribute with specify width and height or use width and height attribute directly in your web site. Follow the example:
<!DOCTYPE html> <html> <head> <title>Set image location:</title> </head> <body> <img src = "datainflow.jpg" style="width:270px; height:170px;"/> <img src = "datainflow.jpg" width="100%" height="50%"/> </body> </html>
Note: To add a background image on an HTML document use <body style=”background-image:url(‘datainflow.jpg’)”>