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:

<img src=”image_url”>

Example:

<html>
<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:

<img src=”image_url” alt=”alternate text here”>

Example of the alt attribute:

<html>
<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:

<img src=”http://bestonetechnologies.com/wp-content/uploads/2016/10/imgEx.jpg” style=”width:150px; height:150px;” alt=”my image”>

Example of width and height in image:

<html>
<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:

<html>
<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:

<img src=”http://bestonetechnologies.com/wp-content/uploads/2016/10/imgEx.jpg” border=”3″ alt=”my image”>

Example of image border:

<html>
<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>

Leave a Reply