Insert Images in HTML
For computer applications, I have covered Unit 1 Networking, HTML Basics, HTML Basic Elements, and HTML formatting tags in previous articles. In this article, I am going to discuss Images in HTML.
Topics Covered
Images supported by HTML
So basically, images are used to make the HTML document more attractive and presentable. HTML supports two types of images based on the saved locations:
1. Internal Images: The images saved in same folder where the HTML file is saved is known as Internal Images.
2. External Images: The images saved in another folder outside the folder where HTML file is saved is known as External Images.
The extensions supported by HTML are .jpg, .png, .gif, .bmp etc.
The <img> tag
To insert images in HTML <img> tag is used. This tag is an empty tag. It doesn’t have a closing tag.
How to insert images in HTML document?
Before inserting image in HTML document copy the images in the folder where you are going to save your HTML document. Here I am saving my file in D:HTML Codes folder. So, I have created one more folder i.e. Images in the same folder and all images I have copied into this folder. Observe the following screen shot:
If you are using windows OS you can’t see the extension automatically. You need to make it visible by following these steps (For window 7 or later):
- Open the folder where you are saving your files.
- Click on organize à Folder and Search options.
- Now click on View tab.
- Remove the click from the option hide extensions for known file types. As displayed in screenshot.
- Click on OK Button.
Now you are ready to insert image in your HTML document. The <img> tag has one attribute i.e. src which take the file location including file name as value. Look at the following code:
<head>
<title>Images in HTML</title>
</head>
<body>
To insert images use img tag.
<img src=”imagestulips.jpg”>
</body>
</html>
After saving this file my folder looks like this:
Now you can change the image layout by using different attributes of image tag.
Attributes of <img>
1. Src: Specifies the path of file inserted as images.
Width: It is used to change the horizonal pixels of image. The default value is in pixel. It can be set in pixels, pt, cm or %.
2. Height: It is used to change the vertical pixels of image.
3. Border: It is used to change/apply the border/frame to the image. The value can be in pixels.
4. HSpace: It is used to apply horizontal space between text and image.
5. Align: It is used to place the image at relative position with text.
6. Alt: It is used to provide descriptive text for the image. This text is displayed when user moves mouse over the image.
Observe the following code:
<html>
<head>
<title>Images in HTML</title>
</head>
<body>
To insert images use img tag. The img tag has one attribute i.e. src which take the file location including file name as value.
<img src=”imagestulips.jpg” width=”300″ height=”300″ border=”1″ Hspace=20 alt=”tulips are very beautiful flowers”>
</body>
</html>
Output
Inserting Multiple images in HTML
Code:
<html>
<head>
<title>Images in HTML</title>
</head>
<body>
The different images coming in the pictures folder are displayed as below:
<br/>
<img src=”imagestulips.jpg” width=”300″ height=”300″ border=”1″ Hspace=20 alt=”Tulips”>
<img src=”imagesChrysanthemum.jpg” width=”300″ height=”300″ border=”1″ Hspace=20 alt=”Chrysanthemum”>
<img src=”imagesDesert.jpg” width=”300″ height=”300″ border=”1″ Hspace=20 alt=”Desert”>
<img src=”imagesHydrangeas.jpg” width=”300″ height=”300″ border=”1″ Hspace=20 alt=”Hydrangeas”>
</body>
</html>
[…] website subscription, you have to do registration first. In previous articles, we have discussed images in HTML , Lists in […]