How to insert image in Web page using HTML in Urdu and Hindi | itbaba

Here is a video on “How to insert image in Web page using HTML in Urdu and Hindi”

Today’s our topic is related to “How To Insert Image In Web page Or Website”.

This course is related to Web designing and Development.It’s my Pleasure to teach you, how to create the website.this course will give you awareness of creating effective websites.Its all about you and those newbies who are interested in creating websites.

Today’s our topic is related to “How To Insert Image In Web page Or Website”.I have also told about in my first lecture that there are two important things for website 1)Text 2)Graphic.

Without graphics or images or slides, your website will look awkward.Images make your webpage or website attractive.

Visitors get knowledge easily with the help of images and searching is easily due to images that what the website is about?

Graphic creates the attraction for visitors and this is very important to beautify.To insert image you will use <img> tag.This tag is included in the stand-alone or empty tag.

After that,

you will use the attribute of source.src is short for “source”.

Then write the file name.In notepad, the method of image inserting is that you will go to image and copy the image name and paste in the src attribute.

<img src=”filename(image name).jpg”/>
insert image in html

Now save file at the same process which is defined in the lecture” How to apply basic HTML tags“.
You can use PNG, JPEG, or GIF image file based on your comfort but make sure you specify the correct file name in the src attribute.

These are extensions and must write after the file name.
It is noticed that the location of the file(webpage)and image must be same.Both save in the same folder.

If the location of both files is different than image will not insert in the webpage.
If you want to change your image size then you have an option you will use width and height attributes.But the value of width and height are specified in pixels(px).

<img src=”file name(image name).jpg” width=”300px” height=”200px”/>


when you will check result on the web browser, the size of your image will be changed.The setting of width and height shrink or expand the image.You can give the title to the image by using the attribute if title.

It is an additional information about the image.The use of the title is that when your cursor is moved on your image, the title which is given in title attribute is shown on your image.You can give any title according to your image.

<img src=”filename(image name).jpg” width=”300px” height=”300px” title=”house”/>

Afterward, you can use border attribute.Through the border, you can give an awesome look to your image.

The image will have a border around.

The value of border is also in pixel.The thickness of border is depend upon on your value.

<img src=”file name(image name).jpg” width=”300px” height=”300px” title=”house” border=”8px”/>

You can change your image position by using align attribute.You can set your image at left,right,bottom,center.

<img src=”file name(image name).jpg” width=”300px” height=”300px” title=”house” border=”8px” align=”right”/>

Watch Video:

This method is for notepad.This is process is also for website software like Adobe dreamviewer 8, Adobe dreamviewer cc, Adobe dreamviewer CS6.

Adobe dreamviewer is a software which is used for creating websites by using codes.

The difference between notepad and dreamviewer is that the tag and attribute are automatically updated in Adobe dreamviewer.

I hope you will achieve better knowledge about “How To Insert Image In Web page Or Website” from this video.

For my appreciation, please like and share this video with your friends and family members.

Visit and Subscribe To My channel “Technical College”. The Link Of This Channel is given below

Channel URL:

Hit the subscribe button to get notification of new video. You can also follow me on other social media

links which are given below.

Visit our official website:

Like us on Facebook Page:

You can Join our Facebook Group:



Google Plus:

Thanks for watching this Video. Join our other courses, let’s go and visit our site:

About Rashid BABA

Rashid BABA
Rashid BABA is a Web Developer, SEO Expert & Android App Developer From Pakistan.I am working for last 5 years on the internet.You can contact me on FaceBook.

Check Also

Google aim to Reveal the Way it Utilizes your Information

Google aim to Reveal the Way it Utilizes your Information

If you are tired of searching aimlessly for solitude info in your Google aim profile ...