{"id":949,"date":"2011-09-01T19:04:21","date_gmt":"2011-09-01T19:04:21","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2011\/09\/01\/inserting-images-using-html\/"},"modified":"2021-08-16T23:52:53","modified_gmt":"2021-08-17T03:52:53","slug":"inserting-images-using-html","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/","title":{"rendered":"Inserting Images using HTML"},"content":{"rendered":"<p>Most websites have pictures or images in them. Inserting images into websites is easy in HTML. \u00a0All that you need is one line of code, and the location of the file either on your own server or linked from a different server.<\/p>\n<p>First, you will need to open up the source code for the webpage and then navigate to where you would like to insert the image.\u00a0 The basic HTML tag for an image is &lt;img src&gt;. \u00a0Img src stands for &#8220;image source&#8221; and refers to where the image is located.\u00a0 Since images do not have any text to be displayed the tag does not need to be closed as with other tags such as the &lt;p&gt;.<\/p>\n<p>If you have your images in a folder called Images (remember that file names and folder are case sensitive and Index is not the same as index), then the code needed would look like:<\/p>\n<p class=\"code_block\"><strong>&lt;img src=&#8221;Images\/____.jpg&#8221; \/&gt;<\/strong><\/p>\n<p>That is it!\u00a0 If your image is called my-image.jpg, then the required HTML code would be:<\/p>\n<p class=\"code_block\"><strong>&lt;img src=&#8221;Images\/my-image.jpg&#8221; \/&gt;<\/strong><\/p>\n<p>There are a few other modifications you can do with image tags however we will discuss those later on the the series of tutorials.<\/p>\n<p>Please check the next article on <a href=\"\/support\/website\/changing-image-alignment\/\" target=\"_blank\" title=\"Click here to view the next article\" rel=\"noopener\"> Changing the Image Alignment<\/a>. For more information on this course please visit <a href=\"\/support\/\" target=\"_blank\" title=\"Click here to view the courses\" rel=\"noopener\">Inserting Images into a Website<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Most websites have pictures or images in them. Inserting images into websites is easy in HTML. \u00a0All that you need is one line of code, and the location of the file either on your own server or linked from a different server. First, you will need to open up the source code for the webpage<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/\"> Read More ><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4288],"tags":[],"class_list":["post-949","post","type-post","status-publish","format-standard","hentry","category-website"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Inserting Images using HTML | InMotion Hosting<\/title>\n<meta name=\"description\" content=\"Here we will show you how to insert an image into your webpage using an HTML tag.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Inserting Images using HTML | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"Here we will show you how to insert an image into your webpage using an HTML tag.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2011-09-01T19:04:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-17T03:52:53+00:00\" \/>\n<meta name=\"author\" content=\"Brad Markle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brad Markle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/\"},\"author\":{\"name\":\"Brad Markle\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\"},\"headline\":\"Inserting Images using HTML\",\"datePublished\":\"2011-09-01T19:04:21+00:00\",\"dateModified\":\"2021-08-17T03:52:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/\"},\"wordCount\":236,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"articleSection\":[\"Website\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/\",\"name\":\"Inserting Images using HTML | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"datePublished\":\"2011-09-01T19:04:21+00:00\",\"dateModified\":\"2021-08-17T03:52:53+00:00\",\"description\":\"Here we will show you how to insert an image into your webpage using an HTML tag.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Inserting Images using HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\",\"name\":\"Brad Markle\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Inserting Images using HTML | InMotion Hosting","description":"Here we will show you how to insert an image into your webpage using an HTML tag.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/","og_locale":"en_US","og_type":"article","og_title":"Inserting Images using HTML | InMotion Hosting","og_description":"Here we will show you how to insert an image into your webpage using an HTML tag.","og_url":"https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2011-09-01T19:04:21+00:00","article_modified_time":"2021-08-17T03:52:53+00:00","author":"Brad Markle","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Brad Markle","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/"},"author":{"name":"Brad Markle","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf"},"headline":"Inserting Images using HTML","datePublished":"2011-09-01T19:04:21+00:00","dateModified":"2021-08-17T03:52:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/"},"wordCount":236,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"articleSection":["Website"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/","url":"https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/","name":"Inserting Images using HTML | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"datePublished":"2011-09-01T19:04:21+00:00","dateModified":"2021-08-17T03:52:53+00:00","description":"Here we will show you how to insert an image into your webpage using an HTML tag.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/website\/inserting-images-using-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"Inserting Images using HTML"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf","name":"Brad Markle","url":"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/949","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=949"}],"version-history":[{"count":3,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/949\/revisions"}],"predecessor-version":[{"id":86605,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/949\/revisions\/86605"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=949"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=949"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=949"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}