Scanner class Methods in Java

on
0

Adding Images in HTML

on

The <img> Tag

In HTML, you can add and display images on your web page. Images makes web page beautiful and attractive. You can add as much as images you want.Adding images is quite simple.

The <Img> tag is used to add images to a web page. It is unpaired tag. It does not require the closing tag. It's a self closing tag. All you need is to mention src attribute within the tag.The src attribute takes the value of the URL or address of the image form your computer. 

Here's the syntax to use <img> tag.
Syntax:

<img src="image.jpg" />

Image Location

The src tag stands for source, which means it will give the source of the image to <img> tag.You need to put  the image location in the src attribute's value within the quotation marks("").
The location of image can be any internet URL(Uniform Resource Locator) or link of any image from the internet. It can also contains the image location or address form your computer. 

For example, if you have a photo named "tree.jpg" in the same folder as the HTML file in you computer, your code should like this:

Example:
<html>
<head>
<title>Image</title>
</head>
<body>
<img src="tree.jpg" alt="" />
</body
</html>

Result:

Image Not found

To show the image from internet , you can add URL as shown in alt section below .If you have saved image in other folder or directory then you need to specify full path . We'll see example of full path in image resizing section.

Attributes of <img> tag:-

There are many attributes to use within <img> tag. Some of them are as follows:-

  • alt:

In case the image cannot be displayed, the alt attribute specifies an alternate text that describes the image in words. The alt attribute is required.

Example:

Result:

alt attribute of <img> tag in html example

The alt attribute can have any value as the name of image, it can have value as tree image. I've given it Not found so it is displaying value as Not found.

  • Image Resizing

To define the image size,you can use the width and height attributes. The value can be specified in pixels  or percentage:

Example: If you have stored image in different folder then you have to give the full path of image in src attribute as shown below: 

Example Code:-
<html>
<head>
<title>Image</title>
</head>
</body>
<img src="C:\Users\user\Pictures\pics\tree.jpg" height="150px" width="150px" alt="" />
<!--or-->
<img src="C:\Users\user\Pictures\pics\tree.jpg" height="50%" width="50%" alt="" />
</body>
</html>
Result:- 

width and height attributes of <img> tag in html example


 Loading images takes time. Using large images can slow down your page, so use them with care.

  • Image Border

By default, an image has no borders.You can use the border attribute within an image tag to create a border around the image.

Syntax:

<img src="tree.jpg" height="50%" width="50%" border="5px"  alt="" />

Example:
<html>
<head>
<title>Image</title>
</head>
<body>
<img src="tree.jpg" height="50%" width="50%" border="5px"  alt="" />
</body>
</html>

Result:

Image border example in html

Try it Yourself! Happy Coding!

Comments

Post a Comment

If you have any doubt, ask here