HTML Images – How to Insert Images in HTML with Examples

0
167

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 Extension

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 extensionwidth=”width of imageheight=”height of image“>

See Example

Code

Image tag in HTML

Output

Image tag output

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=”sourceborder=”border size“>

Example of Image border

Code

image border in HTML

Output

image border output

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

Code

image title in HTML

Output

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.

Code

image alt attribute

Output

image alt output

 

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here