In this tutorials you learn how you can add an image in your webpage. The image is a separate file and we make this file as part of our webpage so user can view this image in web browser.
For inserting an image in a webpage is possible with image element. Below we discus Image tag and its different attribute.
The Source attribute " src " is major attribute of image element which tell the browser that where the image file is save.
For example :
<img src=" images/html.gif ">
will display the image which is store in images folder of root directory.
The size attributes control the the width and height of the image.
<img src="image.jpg" width="200" height="150">
if you add an image but when user open your webpage and the image source is not found then a blank space display instead of image. So we specify the alternative text which appear in case of image source is not found. This is Alternative text which is define with ALT attribute.
<img src="image.jpg" alt="Picture Not Found">
on the other hand Title attribute specify the tool-tip text. When user move mouse over your image the tool-tp text appear.
<img src="image.jpg" alt="Picture Not Found" title="Learning Hints.com">
The border attribute set the border border size around your image. In the following example a 1-pixel border is applied:
<img src="image.jpg" border="1">
Note : - The alt attribute is also an attribute which provide the image title to search engines, when search engine looking for images searching.
Align attribute is used for horizontally alignment of the image. Image elements are aligned to the left by default.
For example :
<img src="sunset.gif" align="right">
HTML DECIMAL Color Code and HEX Color Code
HTML Nested Lists
Elements and Tags In HTML
4 Primary Tags In HTML
Create Your First Web Page in HTML
Attributes in HTML Tags
HTML DOCTYPE Declaration
HEAD Tag in HTML
Meta Tags in HTML
Body Tag in HTML
H1 to H6 HTML Elements
Basic HTML Elements
HTML Table Element
Basefont HTML Element
Formatting Element in HTML
Font Element In HTML
Style Element in HTML
DIV in HTML Document
List in HTML
Creating Menus With HTML list
Creating Horizontal Menu With HTML list
HTML Image Tag
Hyperlinks In HTML