{"id":47,"date":"2019-07-15T10:02:09","date_gmt":"2019-07-15T10:02:09","guid":{"rendered":"https:\/\/www.webhozz.com\/code\/?p=47"},"modified":"2019-09-03T11:55:26","modified_gmt":"2019-09-03T11:55:26","slug":"gambar-html","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/code\/gambar-html\/","title":{"rendered":"HTML : Image"},"content":{"rendered":"\n

Inserting Images in HTML Documents <\/h4>\n\n\n\n

Web bukan hanya berisi tentang\nteks, multi-media dan fitur multimedia HTML saja tetapi memungkinkan kalian\nuntuk memasukkan gambar, klip audio, klip video, dan elemen multimedia lainnya\ndi halaman web.<\/p>\n\n\n\n

Tag <img> digunakan untuk menyisipkan gambar dalam dokumen HTML. Ini merupakan elemen kosong dan hanya berisi atribut saja. Sintaks tag <img> dapat diberikan dengan:<\/p>\n\n\n

\n<img src="url" alt="some_text">\n<\/pre><\/div>\n\n\n
Contoh berikut kita akan mencoba untuk memasukkan tiga gambar di halaman web: <\/p>\n\n\n
\n<img src="kites.jpg" alt="Flying Kites">\n<img src="sky.jpg" alt="Cloudy Sky">\n<img src="balloons.jpg" alt="Hot Air Balloons">\n<\/pre><\/div>\n\n\n
Catatan:<\/em><\/strong> Seperti <br>, elemen <img> juga merupakan elemen kosong, dan tidak memiliki tag penutup. Dalam XHTML elemen tersebut akan otomatis tertutup sendiri diakhiri dengan “\/>”.<\/p>\n\n\n\n
Atribut Gambar Src<\/h4>\n\n\n\n
Setiap gambar memiliki atribut\nsrc (src adalah singkatan dari source). Atribut src memberi tahu browser tempat\npenyimpanan gambar yang ingin kalian tampilkan. URL gambar yang disediakan\nsebagai nilai atribut src menunjuk ke lokasi di mana gambar disimpan.<\/p>\n\n\n\n
Sebagai Contoh, Gambar bernama “sky.jpg”, terletak di direktori “gambar” di “www.tutorialrepublic.com” memiliki URL: <\/p>\n\n\n
\n<img url="https:\/\/www.tutorialrepublic.com\/images\/sky.jpg" alt="Sky">\n<\/pre><\/div>\n\n\n
 Atribut ALT Gambar <\/h4>\n\n\n\n
Atribut alt adalah deskripsi alternatif dari sebuah gambar, jika gambar yang dimaksud gagal ditampilkan. Nilai dari atribut alt adalah teks yang kita tentukan sendiri.<\/p>\n\n\n
\n<img url="https:\/\/www.tutorialrepublic.com\/images\/kites.jpg" alt="Kites">\n<\/pre><\/div>\n\n\n
Catatan:<\/em><\/strong> Atribut ALT akan memberikan informasi berupa tulisan apabila gambar dalam sebuah halaman gagal untuk di tampilkan karena kesalahan, misal seperti kesalahan dalam penulisan atribut src, koneksi yang lambat dll<\/p>\n\n\n\n
Mengatur Lebar dan Tinggi Gambar<\/h4>\n\n\n\n
Atribut width dan height digunakan untuk menentukan tinggi dan lebar gambar. Nilai atribut ditentukan dalam pixel secara default ataupun secara persentase.<\/p>\n\n\n
\n<img src="kites.jpg" alt="Flying Kites" width="300" height="300">\n<img src="sky.jpg" alt="Cloudy Sky" width="250" height="150">\n<img src="balloons.jpg" alt="Hot Air Balloons" width="200" height="200">\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"
Inserting Images in HTML Documents Web bukan hanya berisi tentang teks, multi-media dan fitur multimedia HTML saja tetapi memungkinkan kalian untuk memasukkan gambar, klip audio,<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-47","post","type-post","status-publish","format-standard","hentry","category-html"],"yoast_head":"\nBelajar HTML : Image - WebHozz Code<\/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\/code\/gambar-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar HTML : Image - WebHozz Code\" \/>\n<meta property=\"og:description\" content=\"Inserting Images in HTML Documents Web bukan hanya berisi tentang teks, multi-media dan fitur multimedia HTML saja tetapi memungkinkan kalian untuk memasukkan gambar, klip audio,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/code\/gambar-html\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Code\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-15T10:02:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-03T11:55:26+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\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.webhozz.com\\\/code\\\/gambar-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/gambar-html\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"headline\":\"HTML : Image\",\"datePublished\":\"2019-07-15T10:02:09+00:00\",\"dateModified\":\"2019-09-03T11:55:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/gambar-html\\\/\"},\"wordCount\":244,\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/gambar-html\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/gambar-html\\\/\",\"name\":\"Belajar HTML : Image - WebHozz Code\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\"},\"datePublished\":\"2019-07-15T10:02:09+00:00\",\"dateModified\":\"2019-09-03T11:55:26+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/gambar-html\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/code\\\/gambar-html\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/gambar-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML : Image\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\",\"name\":\"WebHozz Code\",\"description\":\"Tutorial Web & Pemrograman Indonesia\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/author\\\/dody\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Belajar HTML : Image - WebHozz Code","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\/code\/gambar-html\/","og_locale":"en_US","og_type":"article","og_title":"Belajar HTML : Image - WebHozz Code","og_description":"Inserting Images in HTML Documents Web bukan hanya berisi tentang teks, multi-media dan fitur multimedia HTML saja tetapi memungkinkan kalian untuk memasukkan gambar, klip audio,","og_url":"https:\/\/www.webhozz.com\/code\/gambar-html\/","og_site_name":"WebHozz Code","article_published_time":"2019-07-15T10:02:09+00:00","article_modified_time":"2019-09-03T11:55:26+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/code\/gambar-html\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/gambar-html\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"headline":"HTML : Image","datePublished":"2019-07-15T10:02:09+00:00","dateModified":"2019-09-03T11:55:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/code\/gambar-html\/"},"wordCount":244,"articleSection":["HTML"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/code\/gambar-html\/","url":"https:\/\/www.webhozz.com\/code\/gambar-html\/","name":"Belajar HTML : Image - WebHozz Code","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/#website"},"datePublished":"2019-07-15T10:02:09+00:00","dateModified":"2019-09-03T11:55:26+00:00","author":{"@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"breadcrumb":{"@id":"https:\/\/www.webhozz.com\/code\/gambar-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/code\/gambar-html\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/code\/gambar-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/code\/"},{"@type":"ListItem","position":2,"name":"HTML : Image"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/code\/#website","url":"https:\/\/www.webhozz.com\/code\/","name":"WebHozz Code","description":"Tutorial Web & Pemrograman Indonesia","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/code\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/code\/author\/dody\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/47","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/comments?post=47"}],"version-history":[{"count":3,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/47\/revisions"}],"predecessor-version":[{"id":395,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/47\/revisions\/395"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/media?parent=47"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/categories?post=47"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/tags?post=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}