In today\u2019s 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.<\/p>\n
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:<\/p>\n
<html>
\n<body>
\n<img src=”myimage.jpg” width=”775″ height=”574″ alt=”The Blend” border=”0″>
\n<\/body>
\n<\/html><\/p>\n
Let us start with it in step-by-step fashion. Open Notepad first. Go to Start > All Programs > Accessories > Notepad.<\/p>\n
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\u2019t 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.<\/p>\n
After saving it, you will get a browser file on your desktop. Double-click on it.<\/p>\n
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<\/p>\n
code with center alignment just before the image tag. The code will now look as follows:<\/p>\n
<html>
\n<body>
\n<p align=”center”>
\n<img src=”myimage.jpg” width=”775″ height=”574″ alt=”The Blend” border=”0″>
\n<\/p>
\n<\/body>
\n<\/html><\/p>\n
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.<\/p>\n","protected":false},"excerpt":{"rendered":"
In today\u2019s 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[228],"tags":[],"class_list":{"0":"post-514","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-how-to","7":"entry"},"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":15115,"url":"https:\/\/www.amitbhawani.com\/blog\/list-photo-album-website-softwares-tools\/","url_meta":{"origin":514,"position":0},"title":"List of Photo Album Generator Softwares for Website","author":"Yogesh Patel","date":"October 4, 2010","format":false,"excerpt":"Web Photo Album Maker helps you to design a professional looking Flash or HTML photo galleries and publish it to web or save it to your hard drive. There are a lot of freeware and shareware software available for download and purchase which helps you to create amazing web galleries\u2026","rel":"","context":"In "Top Lists"","block_context":{"text":"Top Lists","link":"https:\/\/www.amitbhawani.com\/blog\/category\/top-lists\/"},"img":{"alt_text":"j-album","src":"https:\/\/i0.wp.com\/www.amitbhawani.com\/blog\/wp-content\/uploads\/2010\/10\/j-album-300x227.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":20253,"url":"https:\/\/www.amitbhawani.com\/blog\/web-design-tools-designers\/","url_meta":{"origin":514,"position":1},"title":"6 Must Have Web Design Tools For Web Designers","author":"Yogesh Patel","date":"December 15, 2010","format":false,"excerpt":"Web Design is a tedious task and without the help of tools or software's designing of any web page is very much difficult & absolutely impractical. However with the advent of latest browsers and other tools you can do web design without much advanced knowledge of CSS and HTML languages.\u2026","rel":"","context":"In "Web Tools"","block_context":{"text":"Web Tools","link":"https:\/\/www.amitbhawani.com\/blog\/category\/web-tools\/"},"img":{"alt_text":"Firebug","src":"https:\/\/i0.wp.com\/www.amitbhawani.com\/blog\/wp-content\/uploads\/2010\/12\/Firebug.png?fit=633%2C483&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.amitbhawani.com\/blog\/wp-content\/uploads\/2010\/12\/Firebug.png?fit=633%2C483&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.amitbhawani.com\/blog\/wp-content\/uploads\/2010\/12\/Firebug.png?fit=633%2C483&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":9900,"url":"https:\/\/www.amitbhawani.com\/blog\/what-is-html5\/","url_meta":{"origin":514,"position":2},"title":"What is HTML5","author":"Amit Bhawani","date":"April 10, 2010","format":false,"excerpt":"HTML5 - The Next Step In Internet Evolution The World Wide Web has come along ways since the early days of silent, frozen, simple text based pages with low quality graphics. The days when we were amazed if a company even had a website are long gone. And the advent\u2026","rel":"","context":"In "What is Guide"","block_context":{"text":"What is Guide","link":"https:\/\/www.amitbhawani.com\/blog\/category\/what-is\/"},"img":{"alt_text":"HTML5 Logo","src":"https:\/\/i0.wp.com\/www.amitbhawani.com\/blog\/wp-content\/uploads\/2010\/04\/HTML5-Logo.jpg?fit=400%2C321&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":22360,"url":"https:\/\/www.amitbhawani.com\/blog\/install-google-button-wordpress-blogger-blogs\/","url_meta":{"origin":514,"position":3},"title":"How to Install Google +1 Button on WordPress & Blogger Blogs","author":"Yogesh Patel","date":"June 2, 2011","format":false,"excerpt":"Google has launched +1 button which helps users to publicly show what you like or recommend on the web. +1 button can be placed on any webpage on web and will make users understand the importance of a particular webpage. Since there exists so many clones of one information on\u2026","rel":"","context":"In "Google"","block_context":{"text":"Google","link":"https:\/\/www.amitbhawani.com\/blog\/category\/google\/"},"img":{"alt_text":"Google +1 button sizes","src":"https:\/\/i0.wp.com\/www.amitbhawani.com\/blog\/wp-content\/uploads\/2011\/06\/Google%2B1.png?fit=684%2C601&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.amitbhawani.com\/blog\/wp-content\/uploads\/2011\/06\/Google%2B1.png?fit=684%2C601&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.amitbhawani.com\/blog\/wp-content\/uploads\/2011\/06\/Google%2B1.png?fit=684%2C601&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":15097,"url":"https:\/\/www.amitbhawani.com\/blog\/google-webp-image-format-work\/","url_meta":{"origin":514,"position":4},"title":"What is Google WebP Image Format & How does it Work?","author":"Neal","date":"October 4, 2010","format":false,"excerpt":"Web giant Google is all set in mood to capture the web traffic as Google unveiled its own image format WebP (pronounced as Weppy) which is all set to replace JPEG format, this comes after Google already launched its own video codec in VP8 recently, its own web transfer SPDY\u2026","rel":"","context":"In "What is Guide"","block_context":{"text":"What is Guide","link":"https:\/\/www.amitbhawani.com\/blog\/category\/what-is\/"},"img":{"alt_text":"Google WebP Logo","src":"https:\/\/i0.wp.com\/www.amitbhawani.com\/blog\/wp-content\/uploads\/2010\/10\/Google-WebP-Logo.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":15530,"url":"https:\/\/www.amitbhawani.com\/blog\/create-free-personal-contact-form-online\/","url_meta":{"origin":514,"position":5},"title":"How to Create Free Personal Contact Form Online","author":"Yogesh Patel","date":"October 15, 2010","format":false,"excerpt":"When a web-designer designs a webpage, one of the part of it is Contact Us page. Contact Us page is also called as 'Contact Form' where you provides details of you or your company by which people or clients can be in touch with you if needed. This is the\u2026","rel":"","context":"In "How to Guide"","block_context":{"text":"How to Guide","link":"https:\/\/www.amitbhawani.com\/blog\/category\/how-to\/"},"img":{"alt_text":"kontactr logo","src":"https:\/\/i0.wp.com\/www.amitbhawani.com\/blog\/wp-content\/uploads\/2010\/10\/kontactr-logo-e1286972682315.png?resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.amitbhawani.com\/blog\/wp-json\/wp\/v2\/posts\/514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.amitbhawani.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.amitbhawani.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.amitbhawani.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.amitbhawani.com\/blog\/wp-json\/wp\/v2\/comments?post=514"}],"version-history":[{"count":0,"href":"https:\/\/www.amitbhawani.com\/blog\/wp-json\/wp\/v2\/posts\/514\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.amitbhawani.com\/blog\/wp-json\/wp\/v2\/media?parent=514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.amitbhawani.com\/blog\/wp-json\/wp\/v2\/categories?post=514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.amitbhawani.com\/blog\/wp-json\/wp\/v2\/tags?post=514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}