{"id":980,"date":"2026-04-14T01:58:28","date_gmt":"2026-04-13T18:58:28","guid":{"rendered":"http:\/\/www.tneutron.net\/mikro\/?p=980"},"modified":"2026-04-10T10:17:29","modified_gmt":"2026-04-10T03:17:29","slug":"presenting-the-image-display-format","status":"publish","type":"post","link":"https:\/\/www.tneutron.net\/mikro\/presenting-the-image-display-format\/","title":{"rendered":"Presenting the Image Display Format"},"content":{"rendered":"

A web page will look stiff, formal impressed, and a little drab if not accompanied by pictures.<\/span> We can see today, the web page on the Internet, almost all of them incorporate images, animation, audio and even video to attract and startle visitors.<\/span> As another example, for example, want to create a web page that contains a collection of photographs, as well as goods in accordance with the hobby.<\/span><\/p>\n

In this case, it must understand the technique for displaying the images to the web page so that it will look neat and attractive.<\/span> The necessary means for inserting or adding images to a web page is easy.<\/span> HTML tags have provided specifically for this purpose, ie <img>.<\/span> This tag is a single tag or do not have a partner.<\/span> The most important attribute of the <img> is SRC (source or sources), which contains the image file to be displayed in a web page.<\/span><\/p>\n

Common forms of use of the <img> is: <img src = “filename”><\/strong><\/span>
\n If the file to be displayed is in another directory, or even being on another website, meals need to mention also the location of the file.<\/span>
\n Example: <img src = “..\/ images \/ komputer.jpg”><\/strong><\/span>
\n Or<\/span>
\n <img src =<\/strong> <\/strong>http:\/\/www.abcde.com\/image\/kamera.jpg\/><\/strong><\/a><\/span><\/p>\n

Sample results HTML document in a Web browser as shown below:<\/span>
\n\"image\"<\/a>
\n Figure 11.1.<\/span> Presenting Image Format<\/span><\/p>\n

Image format that is often used in a web page is GIF (.gif) and JPEG (.jpg or. Jpeg).<\/span> GIF stands for Graphics Interface Format whereas JPEG stands for Joint Photographic Experts Group.<\/span> In addition to these formats, saaat is also already widely used image formats including PNG (.png), yanag which stands for Portable Network Graphics.<\/span><\/p>\n

Merging Images and Text<\/strong><\/span>
\n<\/strong> If we want to combine ataumenyisipkan picture in a text or a particular paragraph, there is a choice position of the image that must be considered:<\/span>
\n a.<\/span> Vertically:<\/span>
\n \uf0b7 The text can be aligned with the top of the picture<\/span>
\n \uf0b7 The text can be aligned with the center of the image<\/span>
\n \uf0b7 The text can be aligned with the bottom of the image<\/span>
\n b.<\/span> Horizontally:<\/span>
\n \uf0b7 Images can be located on the left side of the text \/ paragraph<\/span>
\n \uf0b7 Images can be in the right part of the text \/ paragraph<\/span><\/p>\n

For position yangdilihat from the vertical direction can be determined by filling values \u200b\u200bTOP, MIDDLE, or BOTTOM into the ALIGN attribute contained in the tag <img>.<\/span> Sample results HTML document in a Web browser as shown below:<\/span>
\n\"image\"<\/a>
\n Figure 11.2.<\/span> Combining Image and Text vertical direction<\/span><\/p>\n

As for the position of the image seen from the horizontal direction ditentukribut early by filling value ALIGN LEFT and RIGHT into the tag <img>.<\/span> By filling these attributes with values \u200b\u200bLEFT then the image will appear to the left of the text.<\/span> Conversely, if charged RIGHT will menyeabkan image position will be on the right of the text.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

A web page will look stiff, formal impressed, and a little drab if not accompanied by pictures. We can see<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"categories":[1238],"tags":[1207,1215,1209,1213,1217,1212,1210,1216,1208,1211,1214],"class_list":["post-980","post","type-post","status-publish","format-standard","hentry","category-english","tag-image-format","tag-image-format-comparison","tag-image-format-converter","tag-image-format-definition","tag-image-format-for-printing","tag-image-format-for-web","tag-image-format-with-transparent-background","tag-image-formation-by-lenses","tag-image-formats","tag-image-formats-with-transparency","tag-image-formatter"],"yoast_head":"\nPresenting the Image Display Format - TN Mikro<\/title>\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.tneutron.net\/mikro\/presenting-the-image-display-format\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Presenting the Image Display Format - TN Mikro\" \/>\n<meta name=\"twitter:description\" content=\"A web page will look stiff, formal impressed, and a little drab if not accompanied by pictures. We can see\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.tneutron.net\/mikro\/wp-content\/uploads\/sites\/5\/2015\/10\/image_thumb10.png\" \/>\n<meta name=\"twitter:creator\" content=\"@t_neutron\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Taufiqullah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.tneutron.net\\\/mikro\\\/presenting-the-image-display-format\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tneutron.net\\\/mikro\\\/presenting-the-image-display-format\\\/\"},\"author\":{\"name\":\"Taufiqullah\",\"@id\":\"https:\\\/\\\/www.tneutron.net\\\/mikro\\\/#\\\/schema\\\/person\\\/b57f791b694136047454bb6ac5cbe375\"},\"headline\":\"Presenting the Image Display Format\",\"datePublished\":\"2026-04-13T18:58:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tneutron.net\\\/mikro\\\/presenting-the-image-display-format\\\/\"},\"wordCount\":490,\"image\":{\"@id\":\"https:\\\/\\\/www.tneutron.net\\\/mikro\\\/presenting-the-image-display-format\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.tneutron.net\\\/mikro\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2015\\\/10\\\/image_thumb10.png\",\"keywords\":[\"Image Format\",\"image format comparison\",\"image format converter\",\"image format definition\",\"image format for printing\",\"image format for web\",\"image format with transparent background\",\"image formation by lenses\",\"image formats\",\"image formats with transparency\",\"image formatter\"],\"articleSection\":[\"English\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tneutron.net\\\/mikro\\\/presenting-the-image-display-format\\\/\",\"url\":\"https:\\\/\\\/www.tneutron.net\\\/mikro\\\/presenting-the-image-display-format\\\/\",\"name\":\"Presenting the Image Display Format - TN Mikro\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tneutron.net\\\/mikro\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.tneutron.net\\\/mikro\\\/presenting-the-image-display-format\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tneutron.net\\\/mikro\\\/presenting-the-image-display-format\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.tneutron.net\\\/mikro\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2015\\\/10\\\/image_thumb10.png\",\"datePublished\":\"2026-04-13T18:58:28+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.tneutron.net\\\/mikro\\\/#\\\/schema\\\/person\\\/b57f791b694136047454bb6ac5cbe375\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.tneutron.net\\\/mikro\\\/presenting-the-image-display-format\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.tneutron.net\\\/mikro\\\/presenting-the-image-display-format\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.tneutron.net\\\/mikro\\\/presenting-the-image-display-format\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.tneutron.net\\\/mikro\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2015\\\/10\\\/image_thumb10.png\",\"contentUrl\":\"https:\\\/\\\/www.tneutron.net\\\/mikro\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2015\\\/10\\\/image_thumb10.png\",\"width\":444,\"height\":411},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.tneutron.net\\\/mikro\\\/presenting-the-image-display-format\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.tneutron.net\\\/mikro\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Presenting the Image Display Format\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.tneutron.net\\\/mikro\\\/#website\",\"url\":\"https:\\\/\\\/www.tneutron.net\\\/mikro\\\/\",\"name\":\"TN Mikro\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.tneutron.net\\\/mikro\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.tneutron.net\\\/mikro\\\/#\\\/schema\\\/person\\\/b57f791b694136047454bb6ac5cbe375\",\"name\":\"Taufiqullah\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/dcdf36434717ce57bea7f17eb3c140a2ff8def45941b720aa8fc1cccd6cdd505?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/dcdf36434717ce57bea7f17eb3c140a2ff8def45941b720aa8fc1cccd6cdd505?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/dcdf36434717ce57bea7f17eb3c140a2ff8def45941b720aa8fc1cccd6cdd505?s=96&d=mm&r=g\",\"caption\":\"Taufiqullah\"},\"description\":\"Taufiqullah\",\"sameAs\":[\"http:\\\/\\\/www.tneutron.net\",\"https:\\\/\\\/x.com\\\/t_neutron\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Presenting the Image Display Format - TN Mikro","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.tneutron.net\/mikro\/presenting-the-image-display-format\/","twitter_card":"summary_large_image","twitter_title":"Presenting the Image Display Format - TN Mikro","twitter_description":"A web page will look stiff, formal impressed, and a little drab if not accompanied by pictures. We can see","twitter_image":"https:\/\/www.tneutron.net\/mikro\/wp-content\/uploads\/sites\/5\/2015\/10\/image_thumb10.png","twitter_creator":"@t_neutron","twitter_misc":{"Written by":"Taufiqullah","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tneutron.net\/mikro\/presenting-the-image-display-format\/#article","isPartOf":{"@id":"https:\/\/www.tneutron.net\/mikro\/presenting-the-image-display-format\/"},"author":{"name":"Taufiqullah","@id":"https:\/\/www.tneutron.net\/mikro\/#\/schema\/person\/b57f791b694136047454bb6ac5cbe375"},"headline":"Presenting the Image Display Format","datePublished":"2026-04-13T18:58:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tneutron.net\/mikro\/presenting-the-image-display-format\/"},"wordCount":490,"image":{"@id":"https:\/\/www.tneutron.net\/mikro\/presenting-the-image-display-format\/#primaryimage"},"thumbnailUrl":"http:\/\/www.tneutron.net\/mikro\/wp-content\/uploads\/sites\/5\/2015\/10\/image_thumb10.png","keywords":["Image Format","image format comparison","image format converter","image format definition","image format for printing","image format for web","image format with transparent background","image formation by lenses","image formats","image formats with transparency","image formatter"],"articleSection":["English"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.tneutron.net\/mikro\/presenting-the-image-display-format\/","url":"https:\/\/www.tneutron.net\/mikro\/presenting-the-image-display-format\/","name":"Presenting the Image Display Format - TN Mikro","isPartOf":{"@id":"https:\/\/www.tneutron.net\/mikro\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.tneutron.net\/mikro\/presenting-the-image-display-format\/#primaryimage"},"image":{"@id":"https:\/\/www.tneutron.net\/mikro\/presenting-the-image-display-format\/#primaryimage"},"thumbnailUrl":"http:\/\/www.tneutron.net\/mikro\/wp-content\/uploads\/sites\/5\/2015\/10\/image_thumb10.png","datePublished":"2026-04-13T18:58:28+00:00","author":{"@id":"https:\/\/www.tneutron.net\/mikro\/#\/schema\/person\/b57f791b694136047454bb6ac5cbe375"},"breadcrumb":{"@id":"https:\/\/www.tneutron.net\/mikro\/presenting-the-image-display-format\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tneutron.net\/mikro\/presenting-the-image-display-format\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tneutron.net\/mikro\/presenting-the-image-display-format\/#primaryimage","url":"https:\/\/www.tneutron.net\/mikro\/wp-content\/uploads\/sites\/5\/2015\/10\/image_thumb10.png","contentUrl":"https:\/\/www.tneutron.net\/mikro\/wp-content\/uploads\/sites\/5\/2015\/10\/image_thumb10.png","width":444,"height":411},{"@type":"BreadcrumbList","@id":"https:\/\/www.tneutron.net\/mikro\/presenting-the-image-display-format\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.tneutron.net\/mikro\/"},{"@type":"ListItem","position":2,"name":"Presenting the Image Display Format"}]},{"@type":"WebSite","@id":"https:\/\/www.tneutron.net\/mikro\/#website","url":"https:\/\/www.tneutron.net\/mikro\/","name":"TN Mikro","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tneutron.net\/mikro\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.tneutron.net\/mikro\/#\/schema\/person\/b57f791b694136047454bb6ac5cbe375","name":"Taufiqullah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/dcdf36434717ce57bea7f17eb3c140a2ff8def45941b720aa8fc1cccd6cdd505?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/dcdf36434717ce57bea7f17eb3c140a2ff8def45941b720aa8fc1cccd6cdd505?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dcdf36434717ce57bea7f17eb3c140a2ff8def45941b720aa8fc1cccd6cdd505?s=96&d=mm&r=g","caption":"Taufiqullah"},"description":"Taufiqullah","sameAs":["http:\/\/www.tneutron.net","https:\/\/x.com\/t_neutron"]}]}},"_links":{"self":[{"href":"https:\/\/www.tneutron.net\/mikro\/wp-json\/wp\/v2\/posts\/980","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tneutron.net\/mikro\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tneutron.net\/mikro\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tneutron.net\/mikro\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tneutron.net\/mikro\/wp-json\/wp\/v2\/comments?post=980"}],"version-history":[{"count":1,"href":"https:\/\/www.tneutron.net\/mikro\/wp-json\/wp\/v2\/posts\/980\/revisions"}],"predecessor-version":[{"id":2985,"href":"https:\/\/www.tneutron.net\/mikro\/wp-json\/wp\/v2\/posts\/980\/revisions\/2985"}],"wp:attachment":[{"href":"https:\/\/www.tneutron.net\/mikro\/wp-json\/wp\/v2\/media?parent=980"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tneutron.net\/mikro\/wp-json\/wp\/v2\/categories?post=980"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tneutron.net\/mikro\/wp-json\/wp\/v2\/tags?post=980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}