{"id":722,"date":"2014-06-10T08:09:15","date_gmt":"2014-06-10T08:09:15","guid":{"rendered":"http:\/\/www.webhozz.com\/blog\/?p=722"},"modified":"2019-06-28T11:21:26","modified_gmt":"2019-06-28T11:21:26","slug":"menampilkan-gambar-di-html","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/blog\/menampilkan-gambar-di-html\/","title":{"rendered":"Menampilkan Gambar di HTML"},"content":{"rendered":"<p><a href=\"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/06\/html.png\"><img fetchpriority=\"high\" decoding=\"async\" class=\" wp-image-732 aligncenter\" src=\"http:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/06\/html-300x300.png\" alt=\"html\" width=\"243\" height=\"243\" srcset=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/06\/html-300x300.png 300w, https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/06\/html-150x150.png 150w, https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/06\/html.png 512w\" sizes=\"(max-width: 243px) 100vw, 243px\" \/><\/a><\/p>\n<p>Ada banyak cara untuk membuat website kita terlihat menarik. Salah satu cara adalah dengan menggunakan gambar. Kali ini saya akan membahas bagaimana caranya memanggil gambar di html.<br \/>\nDengan adanya gambar tentu nya web akan terlihat lebih menarik, adanya banner, logo, galllery, dsb. Sudah pasti web anda pun akan terlihat lebih hidup, hanya anda saja tinggal bagaimana menata gambar-gambar tersebut agar terlihat menarik.<\/p>\n<p><!--more--><br \/>\nUntuk memanggil gambar di html, kita akan menggunakan tag di bawah ini<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;img src=&quot;nama file gambar anda&quot;&gt;<\/pre>\n<p>jika gambar tersebut disimpan didalam folder maka pemanggilannya menjadi<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;img src=&quot;nama folder\/nama file gambar anda&quot;&gt;<\/pre>\n<p>kita juga bisa menambahkan atribut di dalam tag tersebut diantaranya:<\/p>\n<p>alt=&#8221;&#8221; jika gambar tidak muncul maka alt akan berfungsi<br \/>\nwidth=&#8221;&#8221; mengatur lebar gambar<br \/>\nheight=&#8221;&#8221; mengatur tinggi gambar<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ada banyak cara untuk membuat website kita terlihat menarik. Salah satu cara adalah dengan menggunakan gambar. Kali ini saya akan membahas bagaimana caranya memanggil gambar<\/p>\n","protected":false},"author":3,"featured_media":8702,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1890,3],"tags":[32,9,127],"class_list":["post-722","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-artikel","category-belajar-web-design","tag-belajar-web-design-2","tag-belajar-html","tag-image-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Menampilkan Gambar di HTML - WebHozz Blog<\/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.webhozz.com\/blog\/menampilkan-gambar-di-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Menampilkan Gambar di HTML - WebHozz Blog\" \/>\n<meta property=\"og:description\" content=\"Ada banyak cara untuk membuat website kita terlihat menarik. Salah satu cara adalah dengan menggunakan gambar. Kali ini saya akan membahas bagaimana caranya memanggil gambar\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/blog\/menampilkan-gambar-di-html\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Blog\" \/>\n<meta property=\"article:published_time\" content=\"2014-06-10T08:09:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-28T11:21:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/06\/HTML-Effects-Featured-670x335.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\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.webhozz.com\\\/blog\\\/menampilkan-gambar-di-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/menampilkan-gambar-di-html\\\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Menampilkan Gambar di HTML\",\"datePublished\":\"2014-06-10T08:09:15+00:00\",\"dateModified\":\"2019-06-28T11:21:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/menampilkan-gambar-di-html\\\/\"},\"wordCount\":141,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/menampilkan-gambar-di-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/06\\\/HTML-Effects-Featured-670x335.jpg\",\"keywords\":[\"belajar web design\",\"HTML\",\"image html\"],\"articleSection\":[\"Artikel\",\"Belajar Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/menampilkan-gambar-di-html\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/menampilkan-gambar-di-html\\\/\",\"name\":\"Menampilkan Gambar di HTML - WebHozz Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/menampilkan-gambar-di-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/menampilkan-gambar-di-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/06\\\/HTML-Effects-Featured-670x335.jpg\",\"datePublished\":\"2014-06-10T08:09:15+00:00\",\"dateModified\":\"2019-06-28T11:21:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/menampilkan-gambar-di-html\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/menampilkan-gambar-di-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/menampilkan-gambar-di-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/06\\\/HTML-Effects-Featured-670x335.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2014\\\/06\\\/HTML-Effects-Featured-670x335.jpg\",\"width\":750,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/menampilkan-gambar-di-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Menampilkan Gambar di HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"name\":\"WebHozz Blog\",\"description\":\"Kursus Web &amp; Android di Jakarta Bandung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\",\"name\":\"WebHozz\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"width\":442,\"height\":442,\"caption\":\"WebHozz\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/author\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Menampilkan Gambar di HTML - WebHozz Blog","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.webhozz.com\/blog\/menampilkan-gambar-di-html\/","og_locale":"en_US","og_type":"article","og_title":"Menampilkan Gambar di HTML - WebHozz Blog","og_description":"Ada banyak cara untuk membuat website kita terlihat menarik. Salah satu cara adalah dengan menggunakan gambar. Kali ini saya akan membahas bagaimana caranya memanggil gambar","og_url":"https:\/\/www.webhozz.com\/blog\/menampilkan-gambar-di-html\/","og_site_name":"WebHozz Blog","article_published_time":"2014-06-10T08:09:15+00:00","article_modified_time":"2019-06-28T11:21:26+00:00","og_image":[{"width":750,"height":400,"url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/06\/HTML-Effects-Featured-670x335.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/blog\/menampilkan-gambar-di-html\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/menampilkan-gambar-di-html\/"},"author":{"name":"","@id":""},"headline":"Menampilkan Gambar di HTML","datePublished":"2014-06-10T08:09:15+00:00","dateModified":"2019-06-28T11:21:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/menampilkan-gambar-di-html\/"},"wordCount":141,"publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/menampilkan-gambar-di-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/06\/HTML-Effects-Featured-670x335.jpg","keywords":["belajar web design","HTML","image html"],"articleSection":["Artikel","Belajar Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/blog\/menampilkan-gambar-di-html\/","url":"https:\/\/www.webhozz.com\/blog\/menampilkan-gambar-di-html\/","name":"Menampilkan Gambar di HTML - WebHozz Blog","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/menampilkan-gambar-di-html\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/menampilkan-gambar-di-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/06\/HTML-Effects-Featured-670x335.jpg","datePublished":"2014-06-10T08:09:15+00:00","dateModified":"2019-06-28T11:21:26+00:00","breadcrumb":{"@id":"https:\/\/www.webhozz.com\/blog\/menampilkan-gambar-di-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/blog\/menampilkan-gambar-di-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/menampilkan-gambar-di-html\/#primaryimage","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/06\/HTML-Effects-Featured-670x335.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2014\/06\/HTML-Effects-Featured-670x335.jpg","width":750,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/blog\/menampilkan-gambar-di-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Menampilkan Gambar di HTML"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/blog\/#website","url":"https:\/\/www.webhozz.com\/blog\/","name":"WebHozz Blog","description":"Kursus Web &amp; Android di Jakarta Bandung","publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webhozz.com\/blog\/#organization","name":"WebHozz","url":"https:\/\/www.webhozz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","width":442,"height":442,"caption":"WebHozz"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"","url":"https:\/\/www.webhozz.com\/blog\/author\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/722","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/comments?post=722"}],"version-history":[{"count":10,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/722\/revisions"}],"predecessor-version":[{"id":733,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/722\/revisions\/733"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media\/8702"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media?parent=722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/categories?post=722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/tags?post=722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}