Images improve the appearance of a webpage & help to explain a difficult situation in easy way, which can’t be put into words. In this tutorial, we will learn how to use various html tags to insert/edit images in a document.
How to Insert an Image to html Page:
You can insert an image to a document using html <img> tag. It’s a part of empty element family, which means doesn’t require a closing tag. The following syntax is used to insert an image:
| <img src=”url” alt=”some_text” > |
Where, html src attribute define image source and html alt attribute define alternative text (in case an image is not displayed due to wrong path or some other reason). Let’s see the example below, where image source was our media gallery:
| <!DOCTYPE html> <html> <head> <title> Inserting an Image</title> </head> <body> <p>Image name</p> <img src=”https://freetutorialpoint.com/wp-content/uploads/2016/10/images.jpg”” alt=”html image” /> </body> </html> |
The result will be displayed as:
| HTML Icon  |
Setting Image Height & Width:
You can set the height & width of a image file using html style attribute. Values are defined either in % or in pixels. Example is explained below:
| <!DOCTYPE html> <html> <head> <title> Height & width setting</title> </head> <body> <p>Html Icon </p> <img src=”https://freetutorialpoint.com/wp-content/uploads/2016/10/images.jpg” alt=”html image” width = “150 height=”150” /> </body> </html> |
The result will be displayed as:
| Html Icon |
Setting Image Border:
You can set an image border with html border attribute. Border thickness can be increased/decreased by defining a border value. A border value = 0 means no border around image. Let’s look at example below :
| <!DOCTYPE html> <html> <head> <title> Setting border around image</title> </head> <body> <p>Html Icon </p> <img src=”https://freetutorialpoint.com/wp-content/uploads/2016/10/images.jpg” alt=”html image” border = “2” /> </body> </html> |
The result will be displayed as:
Setting Image Alignment:
You can set image alignment using html align attribute. Let’s see how to do this with following example:
| <!DOCTYPE html> <html> <head> <title> Image Alignment</title> </head> <body> <p>Html Icon </p> <img src=”https://freetutorialpoint.com/wp-content/uploads/2016/10/images.jpg” alt=”html image” align = “left” /> </body> </html> |
The result will be displayed as:
| Html Icon |
Adding a Link to Image:
You can add a link to an image by inserting html <img> tag inside html <a> tag. But, sometimes a border is displayed around an image while adding link to an image. In that scenario, you can set border value = 0. Let’s see this example below:
| <!DOCTYPE html> <html> <head> <title> Adding link to an image</title> </head> <body> <p>Html Icon </p> <a href= “https://freetutorialpoint.com”> <img src=”https://freetutorialpoint.com/wp-content/uploads/2016/10/images.jpg” alt=”html image” /> </a> </body> </html> |
The result will be displayed as:
| Html Icon |
Chapter Summery:
- Use html <img> tag to insert an image.
- Use html style attribute to adjust height & width of an image.
- Use html border attribute to add border to an image
- Use html align attribute to set image alignment.
- Use html <a> tag to put a link to an image.
Interview Questions:
- Which pair of attribute is required for html <img> tag.
Two required attributes for <img> tag are “src” and “alt”. Where src = source/path of the image file and alt = alternative text for image, in case it is not displayed due to some reasons.
- How can we put a link to an image file.
A link can added to an image using html <a> tag. Remember, always put html <img> tag inside html<a> tag to add a link.
Practice Exercise:
| <!DOCTYPE html> <html> <head> <title>Practice Excercise</title> </head> <body> <p>Html Icon </p> <img src=”https://freetutorialpoint.com/wp-content/uploads/2016/10/images.jpg” alt=”html image” /> </body> </html> |
In above html code,
- Set image height = 200 & width = 150.
- Set image alignment to ‘Right side’.
- Add a link to image = https://freetutorialpoint.com.
- Change the image heading to ‘Learn HTML’
- Change the image heading text color to ‘Green’.
| Click here to practice above exercise in real time HTML code editor |
|---|
[wp_objects_pdf]
One thought on “Lesson 11 – HTML Images”