Amit Bhawani Blog

Stay Updated!

Powered by Genesis

You are here: Home / How to Guide / How to add Photos/Images to web page html code tutorial

How to add Photos/Images to web page html code tutorial

May 25, 2008 by Amit Bhawani

In today’s world, most of us prefer to create a virtual identity. No matter whom you are, whether you are an individual or representing any business, you are free to create web pages of your own. If you are an individual and like to make a web page of your own, you can use any WYSIWYG software like Microsoft FrontPage, Macromedia Dreamweaver, or Adobe Go-Live. You certainly have another option if you prefer to do HTML coding. In this article, we will learn the techniques or HTML coding about how to add photos to web page. Let us begin.

When you put photo to a web page, you need to put it within <body> tag. So, the simple code for putting the image to the web page will go as follows:

<html>
<body>
<img src=”myimage.jpg” width=”775″ height=”574″ alt=”The Blend” border=”0″>
</body>
</html>

Let us start with it in step-by-step fashion. Open Notepad first. Go to Start > All Programs > Accessories > Notepad.

Now write the above mentioned code after opening the note pad. After finishing the coding, you can save the page in the name of mypage.html. Don’t forget to replace the image name shown in the code with your actual image name. Keep the file in the same folder with the image that you would line to insert in your web page. Note: You may keep it at different folders, but here we are keeping it in the same folder to avoid complexity at the initial phase. We are saving both the html file and the image on our desktop.

After saving it, you will get a browser file on your desktop. Double-click on it.

Now, by default, when you put the above mentioned code, the image will appear as left aligned in respect to the page. Now let us put the image in the middle of the page. Now we must add a

code with center alignment just before the image tag. The code will now look as follows:

<html>
<body>
<p align=”center”>
<img src=”myimage.jpg” width=”775″ height=”574″ alt=”The Blend” border=”0″>
</p>
</body>
</html>

When you put this code, your image will be placed at the central part of the page. If you wish to add a border around the image, give the border in the code a numerical value, say 1 or 2, etc. So, this is the code of adding photo to a web page.

Share this:

  • Click to share on X (Opens in new window) X
  • Click to share on Facebook (Opens in new window) Facebook

Related

About

My name is Amit Bhawani and here I like to share my internet/tech experience with my online readers. You can follow me on Twitter, Facebook & Instagram at @AmitBhawani I am also the Editor-in-Chief of PhoneRadar & Master Gadgets

About Amit Bhawani

My name is Amit Bhawani and here I like to share my internet/tech experience with my online readers. You can follow me on Twitter, Facebook & Instagram at @AmitBhawani

Comments

  1. Satya says

    October 13, 2010 at 1:48 am

    Thanks For You Content, Can Me Get The Feed ?

  2. Web Host says

    February 5, 2011 at 6:51 pm

    Its really a worthful tutorial showing you on how to add photos or images in webpage. Amit could you explain us the importance of adding alt tag to those image?

Timeline

Check out Just EV Tweets by @amitbhawani

Recommended To Read

  • How to Find your WiFi Signal Strength & Dead spots in your Home – Best Apps
  • The Wuhan Corona Virus Effect in India – How to Stay Safe
  • This Blogger Lost 25Kgs with this Secret Strategy that Includes a Fitness Tracker
  • Making Money on YouTube, MCN, Useful Tools, Tips & Success Stories
  • The #JaguarPerformance Experience that was Mind Blowing