HTML Images
You can insert HTML images in a web page.
Images plays an important part to make a web page attractive and beautiful. You can add multiple images with variety of sizes in HTML page. Some of the mostly used image formats and extensions are: .jpg, .png, .jpeg & .gif.
Till now, we have used text along with different formatting options. Now we will see how to add images, graphics and even icons on our web page.
How to Insert HTML Images:
Images can be inserted with the <img> tag in HTML.
The source (src) attribute specifies the image URL (address). The <img> tag is an empty tag, so it does not have any closing tag. However you can optionally close it like this: <img />
Example to simply include “photo.jpg”: <img src="photo.jpg">
Example using Relative Image URL:
Relative URL specify path that is relative to current folder/page. When you have have image in the same or nearby folder, you need not to specify full domain or path of the image. You can only specify image name in source, if image exists in the same folder.
<img src="myimage.jpg">If image is in any sub-folder, you can mention folder name with slash “/” and then image name. Suppose image “myphoto.jpg” is available in “pictures” folder, We can include it as given in following example:
<img src="pictures/myphoto.jpg"> Example using Absolute Image URL:
Absolute URL refers to the full Image URL/Path for the image location. You can include images from external website using absolute URL in source. See example below:
<img src="http://tutorialsclass.com/wp-content/uploads/2016/04/tutorialsclass-logo1.png">Image Alternate Text Attribute
The alt attribute is used to specify an alternate text for an image. This text will be displayed if image not found at given location. You can test it by using wrong image URL in source. Use example below:
<img src="test.png" alt="Test Photo Alternate Text">
Image Title Attribute
The title attribute is used to specify the title of an image. This title is visible when you point your mouse over any image. Use example below:
<img src="http://tutorialsclass.com/wp-content/uploads/2016/04/tutorialsclass-logo1.png" title="This is Tutorials Logo Title">
You can change image name as per your image.
Image Size (Width & Height Attribute)
Width and Height attributes are available to specify the image width and height. The values for Height and Width attributes are specified in pixels (px) by default.
<img src="www.tutorialsclass.com/photo.jpg" height="300" width="500" >Image Border Attribute
You can set border around the image using “border” attribute. By default border thickness will be measured in pixels (px) and images will have 0 or no border if not specified.
<img src="www.tutorialsclass.com/photo.jpg" border="5px" >Image Alignment Attribute
You can align image horizontally using “align” attribute of “img” tag. Images are aligned left be default. To test image alignment in better way, you can add some text or paragraph as well.
Commonly used align properties given below:
- Set Image Alignment Left:
align="left" - Set Image Alignment Right:
align="right“ - Set Image Alignment Center:
align="center"
This is sample text. <img src="www.tutorialsclass.com/photo.jpg" align="right" > This is another text.
Complete Example using all Image Attributes
You can use multiple images in any webpage. Different attributes can be used together for any image as well. Use following example to test various image properties. Please change Image name & URL as per your image.
<html>
<head>
<title>Example of Image Tag & Attribute - Tutorials Class</title>
</head>
<body>
<p>This is a test paragraph.</p>
<img src="sample-picture.jpg" alt="Sample Image Text" border="5" align="right" />
<p>This is sample text. We will add image in html page.</p>
<img src="test-photo.jpg" height="300" width="400" title="Sample title" />
</body>
</html>| Exercises & Assignments |
|---|
| No Content Found. |
| Interview Questions & Answers |
|---|
| No Content Found. |