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

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.

We will send you useful technology related Tips. Enter your email address :

About Amit Bhawani

My name is Amit Bhawani and I am the chief blogger at Amit Bhawani Blog and where I like to share my internet/tech experience with my online readers on this website. You can read more about me at my About Page. You can follow me on Twitter, Facebook & Google +1 at +Amit Bhawani

Comments

  1. Thanks For You Content, Can Me Get The Feed ?

  2. 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?

Speak Your Mind

*

More in How to Guide (220 of 255 articles)