HTML Images
To insert image in our HTML page, we can use <img> tag.
<img> tag is an empty tag and can contain only list of attributes, also it has no closing tag.
Syntax to use img tag:
Example:
<head>
<title>Image tag example</title>
</head>
<body>
<p>Image tag example </p>
<img src=”http://bestonetechnologies.com/wp-content/uploads/2016/10/imgEx.jpg”/>
</body>
</html>
alt Attribute
If for some reason (like: wrong image file path, slow connection, etc.) if we cannot view the image then alt attribute provides an alternate text for the image and it will display at the place of image on web browser.
Syntax to use this tag:
Example of the alt attribute:
<head>
<title>Image alt tag example</title>
</head>
<body>
<p>Image with alt tag</p>
<img src=”images/myimg.png” alt=”Test Image” />
</body>
</html>
Manage image size – width and height
We can use style attribute to manage the width and height of an image.
Syntax:
Example of width and height in image:
<head>
<title>Image width and height</title>
</head>
<body>
<p>Image width and height</p>
<img src=”http://bestonetechnologies.com/wp-content/uploads/2016/10/imgEx.jpg” style=”width:150px; height:150px;” alt=”my image” />
</body>
</html>
Alternatively, we can also use the width and height attributes to manage the size of image. Its values are specified in pixels by default:
<head>
<title>Image width and height</title>
</head>
<body>
<p>Image width and height</p>
<img src=”http://bestonetechnologies.com/wp-content/uploads/2016/10/imgEx.jpg” width=”150″ height=”150″ alt=”my image” />
</body>
</html>
Image border
We can mange the border of image by using border attribute.
Syntax:
Example of image border:
<head>
<title>Image border</title>
</head>
<body>
<p>Image border</p>
<img src=”http://bestonetechnologies.com/wp-content/uploads/2016/10/imgEx.jpg” border=”3″ alt=”my image” />
</body>
</html>
About Author
bestonetechnologies
I am a software developer.
