A web page look very beautiful with images or in other words web page is incomplete without images.
In this tutorial we will explain how to insert images in HTML document. To insert a image in a web page use <img> tag. Remember , <img> tag has no ending tag.
Syntax of Image Tag
<img src=”Source of Image with Extension“>
Source Attribute of Image tag
Source tells the browser from where the image will be loaded. Source can be the location of the image locally stored on disk/server or a link to an image located on other server/website. Suppose You are working on a local computer than source may be look like this <img src = “desktop/new.jpg“> or if you want to place an image then you can write <img src = “link with extension“>
Extensions of Images
An extension tells about the type of the image. Image has different types like JPEG , PNG. There are many image extensions for example JPG , PNG , GIF etc. You have to write image extension at the end of image name. You can check extension of image by checking image property. See Screen Shot below.
Image Width and Height
You can set image height and width in image tag. Just add these two attributes in image tag.
<img src=”source with extension” width=”width of image” height=”height of image“>
Setting Border of Image in HTML
You can set border of an image in HTML. Just insert a border attribute in image tag.
<img src=”source” border=”border size“>
Example of Image border
Title of Image in HTML
You can set a title of an image so that if someone hover ( bring mouse at image ) can see what is this image about.
Example of Image Title
Alt Attribute in Image Tag
You can set an alternative text on image so that if your image is not available people can see the alternative text. Note that the alternative text will be shown only if the image link is broken , image name has been changed or image is not available. See Example below.