{"id":43405,"date":"2025-03-07T13:13:15","date_gmt":"2025-03-07T06:13:15","guid":{"rendered":"\/id\/tutorial\/?p=43405"},"modified":"2025-03-07T16:44:46","modified_gmt":"2025-03-07T09:44:46","slug":"cara-memasukkan-gambar-di-html","status":"publish","type":"post","link":"\/id\/tutorial\/cara-memasukkan-gambar-di-html","title":{"rendered":"Cara memasukkan gambar di HTML dalam 6 langkah mudah"},"content":{"rendered":"<p>Ketika membuat website dengan CMS populer seperti WordPress, Anda mungkin pernah ingin mengupload gambar tertentu, tapi tidak bisa karena terdapat batasan fitur.<\/p><p>Hal ini terkadang memang menyebalkan, terutama ketika Anda perlu menyisipkan gambar penting seperti logo website di header dan footer.<\/p><p>Tapi tenang, Anda tetap bisa melakukannya, yaitu dengan cara memasukkan gambar di HTML tema website. Meskipun membutuhkan sedikit pemahaman tentang <a href=\"\/id\/tutorial\/edit-html-wordpress\">penggunaan HTML di WordPress<\/a>, prosesnya tidak sulit dan tetap bisa diikuti oleh pemula, kok.<\/p><p>Di artikel ini, kami akan menunjukkan cara menyisipkan gambar ke HTML di website Anda. Ada enam langkah yang kami jelaskan, jadi pastikan untuk mengikutinya dengan cermat, ya!<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Speed-Up-Your-Website-ID.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/11\/eBook-Speed-Up-website-ID.png\/public\" alt=\"\" class=\"wp-image-27589\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/11\/eBook-Speed-Up-website-ID.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/11\/eBook-Speed-Up-website-ID.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/11\/eBook-Speed-Up-website-ID.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/11\/eBook-Speed-Up-website-ID.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-langkah-langkah-memasukkan-gambar-di-html\">Langkah-langkah memasukkan gambar di HTML<\/h2><p>Ada tiga cara untuk mengupload dan memasukkan gambar di HTML: melalui <a href=\"\/id\/tutorial\/cara-menggunakan-filezilla\">FTP client seperti FileZilla<\/a>, melalui File Manager hPanel, dan melalui dashboard WordPress. Untuk tutorial ini, kita akan menggunakan opsi kedua.<\/p><p>Kami juga akan menguraikan <a href=\"\/id\/tutorial\/contoh-coding-html\">kode HTML<\/a> gambar dan menjelaskan atribut yang diperlukan untuk menyisipkan gambar di website Anda. Langsung saja, simak tutorialnya di bawah ini yuk!<\/p><h3 class=\"wp-block-heading\" id=\"h-1-upload-file-gambar\">1. Upload file gambar<\/h3><p>Pada langkah ini, kita akan mengupload file gambar ke folder <strong>public_html<\/strong> di website WordPress melalui <a href=\"\/id\/tutorial\/cara-menggunakan-file-manager-hostinger\">file manager Hostinger<\/a>. Langkah-langkahnya tidak akan terlalu berbeda meskipun Anda menggunakan control panel hosting lainnya.<\/p><ol class=\"wp-block-list\">\n<li>Akses <strong>hPanel<\/strong> Anda, buka bagian <strong>Website <\/strong>&rarr; <strong>Daftar Website<\/strong>, lalu klik <strong>Dashboard<\/strong> di samping website Anda. Setelah itu, buka <strong>File Manager<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1128\" height=\"728\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/file-manager-dashboard-hpanel.png\/public\" alt=\"tampilan menu file manager hostinger di halaman dashboard hpanel\" class=\"wp-image-41526\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/file-manager-dashboard-hpanel.png\/w=1128,fit=scale-down 1128w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/file-manager-dashboard-hpanel.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/file-manager-dashboard-hpanel.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/file-manager-dashboard-hpanel.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/file-manager-dashboard-hpanel.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1128px) 100vw, 1128px\" \/><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Buka folder <strong>public_html<\/strong> dan klik dua kali folder <strong>wp-admin<\/strong>, lalu pilih folder <strong>images<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a099e59a49de\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"263\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/folder-images-public-html.png\/public\" alt=\"folder images di dalam wp admin - public html\" class=\"wp-image-43406\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/folder-images-public-html.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/folder-images-public-html.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/folder-images-public-html.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/folder-images-public-html.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Klik tombol <strong>Upload File<\/strong> di sudut kanan atas menu bar, lalu pilih <strong>File<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a099e59a653b\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"726\" height=\"394\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/05\/memilih-file-untuk-diupload-ke-file-manager-hostinger.png\/public\" alt=\"memilih upload file di file manager hostinger\" class=\"wp-image-35940\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/05\/memilih-file-untuk-diupload-ke-file-manager-hostinger.png\/w=726,fit=scale-down 726w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/05\/memilih-file-untuk-diupload-ke-file-manager-hostinger.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/05\/memilih-file-untuk-diupload-ke-file-manager-hostinger.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Pilih file gambar yang ingin Anda upload. Pastikan namanya jelas dan mudah dibaca, karena akan menjadi atribut judul gambar HTML Anda. Selain itu, gunakan tanda hubung untuk memisahkan kata-kata dalam namanya. Langkah ini juga akan membantu mesin pencari memahami konten gambar, yang turut meningkatkan <a href=\"\/id\/tutorial\/apa-itu-seo\">SEO website<\/a>.<\/li>\n\n\n\n<li>Tekan <strong>UPLOAD <\/strong>dan tunggu hingga prosesnya selesai.<\/li>\n<\/ol><p>Cara lainnya adalah dengan menambahkan gambar melalui dashboard WordPress. Berikut langkah-langkahnya:<\/p><ol class=\"wp-block-list\">\n<li>Di <strong>Dashboard WordPress<\/strong>, buka <strong>Media<\/strong> &rarr; <strong>Add New<\/strong> (Tambah File Media Baru).<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a099e59a7d6f\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1344\" height=\"512\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/menambahkan-media-baru-wordpress.png\/public\" alt=\"dashboard wordpress menampilkan menu menambahkan media baru yang dipilih\" class=\"wp-image-43407\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/menambahkan-media-baru-wordpress.png\/w=1344,fit=scale-down 1344w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/menambahkan-media-baru-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/menambahkan-media-baru-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/menambahkan-media-baru-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/menambahkan-media-baru-wordpress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1344px) 100vw, 1344px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Pilih gambar yang ingin Anda tambahkan, lalu tunggu sampai gambar selesai diupload.<\/li>\n<\/ol><p>Untuk menentukan <a href=\"\/id\/tutorial\/format-gambar\">format gambar terbaik<\/a>, ada dua kategori yang bisa dipilih, yaitu <strong>raster <\/strong>dan <strong>vektor<\/strong>. <strong>JPEG\/JPG<\/strong>, <strong>PNG<\/strong>, dan <strong>GIF <\/strong>adalah beberapa contoh format file gambar raster, sedangkan vektor mencakup <strong>PDF<\/strong>, <strong>SVG<\/strong>, dan <strong>EPS<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/id\/wordpress-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-37614\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-2-akses-folder-tema\">2. Akses folder tema<\/h3><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Tips berguna<\/h4>\n                    <p>Karena kita akan mengedit dokumen HTML, backup website Anda dulu sebelum melakukan perubahan apa pun. Hal ini akan memastikan tidak ada data yang hilang kalau terjadi error selama proses berlangsung.<\/p>\n                <\/div>\n\n\n\n<\/p><p>Untuk langkah ini, pertama akses <a href=\"\/id\/tutorial\/cara-edit-tema-wordpress\">editor tema WordPress<\/a> dan file HTML tempat Anda ingin menyisipkan gambar:<\/p><ol class=\"wp-block-list\">\n<li>Dari <strong>Dashboard WordPress<\/strong>, buka <strong>Appearance<\/strong> (Tampilan)<strong> <\/strong>&rarr; <strong>Theme Editor <\/strong>(Editor Tema).<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a099e59aa1b5\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1347\" height=\"597\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/theme-editor-dashboard-wordpress.png\/public\" alt=\"dashboard wordpress dengan opsi theme editor yang dipilih\" class=\"wp-image-43408\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/theme-editor-dashboard-wordpress.png\/w=1347,fit=scale-down 1347w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/theme-editor-dashboard-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/theme-editor-dashboard-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/theme-editor-dashboard-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/theme-editor-dashboard-wordpress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1347px) 100vw, 1347px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Pilih tema yang digunakan website Anda, misalnya <strong>Twenty-Twenty.<\/strong><\/li>\n\n\n\n<li>Scroll ke bagian <strong>Theme Files<\/strong> (File Tema)<strong> <\/strong>dan klik file HTML yang ingin Anda tambahkan gambar. Contohnya, kalau Anda ingin menambahkan logo ke header, klik file .<strong>header.php<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a099e59abcbd\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1285\" height=\"604\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/header-tema-wordpress.png\/public\" alt=\"tampilan file header tema (header.php) wordpress\" class=\"wp-image-43409\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/header-tema-wordpress.png\/w=1285,fit=scale-down 1285w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/header-tema-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/header-tema-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/header-tema-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/header-tema-wordpress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1285px) 100vw, 1285px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Temukan baris tempat tag <strong>body HTML<\/strong> atau <strong>&lt;body&gt;<\/strong> dimulai. Di bawah tag <strong>&lt;div&gt;<\/strong> yang pertama, masukkan tag gambar: <strong>&lt;img&gt;<\/strong>.<\/li>\n<\/ol><figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-qw.googleusercontent.com\/docsz\/AD_4nXcefRSJVrjlN1oNr5ol7t_HK21qvo9H9fRnzDadaFBl7Yf6d7fTEwLK3SmiZYvQCrRy23pN3igULU9WxdpS2-ecymt-EcBUjlOUJnLackc3LVBZ5Rejd_382eXqS76ggixe1Cun?key=axQyth2yGAZYwWckoUTp7APG\" alt=\"Inserting the img tag in the HTML body.\"><\/figure><p>Tag gambar akan berfungsi untuk menyematkan gambar ke dalam file HTML. Ini adalah tag kosong yang menyertakan atribut HTML, seperti <strong>img src<\/strong> dan <strong>alt<\/strong>,<strong> <\/strong>dan tidak memerlukan tag penutup.<\/p><p>Sekarang, kita akan menguraikan elemen HTML lain yang diperlukan setelah tag <strong>img<\/strong>.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-tambahkan-atribut-img-src-pada-gambar\">3. Tambahkan atribut img src pada gambar<\/h3><p>Atribut <strong>img src<\/strong> merupakan atribut HTML wajib bagi elemen gambar, yang menentukan path file gambar dalam HTML. Apabila <strong>img src<\/strong> tidak ditentukan dengan benar, gambar tidak akan dimuat.<\/p><p>Ada dua cara untuk menulis atribut <strong>img src<\/strong>, yaitu menggunakan path relatif atau absolut. Dengan path relatif, sumber gambar ditentukan pada direktori atau folder gambar saat ini.<\/p><p>Opsi ini digunakan ketika gambar diupload ke direktori yang sama dengan file HTML yang ingin Anda edit.<\/p><p>Syntax path relatif terlihat seperti ini:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;img src=\"images\/nama-file.jpg\" \/&gt;<\/pre><p>Sementara itu, path absolut menentukan URL gambar sebagai sumbernya. Gunakan path ini ketika gambar diupload melalui Media WordPress atau berada di folder yang berbeda dengan file HTML yang Anda edit.<\/p><p>Struktur syntax path absolut adalah sebagai berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;img src=\"URL-website-Anda\/nama-folder\/nama-file-gambar.jpg\" \/&gt;<\/pre><p>Untuk tutorial ini, kita akan menggunakan path absolut. Dalam hal ini, contoh <strong>img src <\/strong>untuk gambar yang kita upload di folder <strong>images<\/strong> akan terlihat seperti ini:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;img src=\"https:\/\/website-Anda.com\/wp-admin\/images\/logo-website.png\" \/&gt;<\/pre><p>Apabila Anda mengupload gambar melalui media WordPress, ikuti petunjuk ini untuk menemukan sumber gambar:<\/p><ol class=\"wp-block-list\">\n<li>Dari <strong>Dashboard WordPress<\/strong>, buka <strong>Media <\/strong>&rarr; <strong>Library<\/strong> (Pustaka).<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a099e59ad82e\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1346\" height=\"592\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/media-library-wordpress.png\/public\" alt=\"dashboard wordpress dengan opsi library media yang dipilih\" class=\"wp-image-43410\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/media-library-wordpress.png\/w=1346,fit=scale-down 1346w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/media-library-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/media-library-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/media-library-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/media-library-wordpress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1346px) 100vw, 1346px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Klik gambar yang akan Anda tambahkan, lalu scroll sidebar hingga Anda menemukan kolom File URL.<\/li>\n\n\n\n<li>Tekan tombol <strong>Copy URL to clipboard<\/strong> (Salin URL ke clipboard) dan cukup tempelkan sebagai sumber gambar.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a099e59af167\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1286\" height=\"577\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/url-file.png\/public\" alt=\"bagian url file di sidebar media wordpress untuk menyalin url gambar\" class=\"wp-image-43411\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/url-file.png\/w=1286,fit=scale-down 1286w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/url-file.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/url-file.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/url-file.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/url-file.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1286px) 100vw, 1286px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-4-atur-lebar-dan-tinggi-gambar\">4. Atur lebar dan tinggi gambar<\/h3><p>Atribut lebar dan tinggi menentukan ukuran gambar, biasanya dalam piksel. Penting untuk mengatur kedua atribut ini, karena akan menentukan ruang yang dibutuhkan oleh gambar tersebut saat browser memuat halaman web.<\/p><p>Kalau tidak diatur, browser tidak akan bisa menentukan ukuran gambar dan akan menggunakan ukuran aslinya. Hal ini bisa mengubah tata letak halaman web dan menyebabkan error saat browser memuat gambar.<\/p><p>Berikut adalah syntax untuk atribut lebar dengan contoh ukurannya:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;img src=\"gambar.jpg\" width=\"50px\" \/&gt;<\/pre><p>Sedangkan syntax atribut tinggi adalah:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;img src=\"gambar.jpg\" height=\"50px\" \/&gt;<\/pre><p>Ubah <strong>50px<\/strong> ke ukuran yang diinginkan, tergantung tempat Anda ingin meletakkan gambar dan desain halaman web Anda.<\/p><h3 class=\"wp-block-heading\" id=\"h-5-tambahkan-atribut-alt\">5. Tambahkan atribut alt<\/h3><p>Atribut <strong>alt <\/strong>HTML berfungsi untuk menambahkan teks alternatif atau informasi pada gambar. Teks deskriptif ini berguna untuk menunjukkan keterangan gambar ketika gagal dimuat akibat error atau koneksi yang lambat. Teks ini juga membantu aplikasi pembaca layar menjelaskan gambar kepada pengunjung yang memiliki gangguan penglihatan.<\/p><p>Selain itu, alt text membantu mesin pencari memahami konten gambar tersebut selama proses crawling. Hal ini meningkatkan peluang gambar muncul dalam hasil pencarian gambar, serta membantu mengoptimalkan peringkat halaman web Anda.<\/p><p>Ingat, jelaskan deskripsi gambar secara spesifik beserta konteksnya. Selain itu, pastikan untuk menyisipkan kata kunci target kalau memungkinkan.<\/p><p>Syntax atribut <strong>alt<\/strong> adalah seperti berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;img alt=\"masukkan alt text di sini\" \/&gt;<\/pre><h3 class=\"wp-block-heading\" id=\"h-6-simpan-perubahan\">6. Simpan perubahan<\/h3><p>Setelah Anda memasukkan semua atribut dan informasi penting ke dalam file gambar HTML, kode gambarnya akan terlihat seperti ini:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;img src=\"https:\/\/yoursite.com\/wp-admin\/images\/website-logo.png\" height=\"50px\" width=\"50px\" alt=\"site's logo\" \/&gt;<\/pre><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a099e59b0c29\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1143\" height=\"614\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/kode-gambar.png\/public\" alt=\"kode gambar yang disisipkan ke dalam file header php wordpress\" class=\"wp-image-43412\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/kode-gambar.png\/w=1143,fit=scale-down 1143w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/kode-gambar.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/kode-gambar.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/kode-gambar.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/kode-gambar.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1143px) 100vw, 1143px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Periksa kode sekali lagi sebelum mengklik tombol Update File (Perbarui file) untuk menyimpan perubahan. Kemudian, muat ulang website untuk melihat apakah langkah ini berhasil.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a099e59b2388\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"376\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/contoh-postingan.png\/public\" alt=\"contoh postingan dengan file gambar yang sudah berhasil dimasukkan ke HTML header\" class=\"wp-image-43413\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/contoh-postingan.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/contoh-postingan.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/contoh-postingan.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2025\/03\/contoh-postingan.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-bonus-tambahkan-link-ke-gambar\">Bonus: Tambahkan link ke gambar<\/h3><p>Saat mengupload foto dan gambar asli ke website Anda, penting untuk menambahkan URL atau link khusus ke foto dan gambar tersebut. Hal ini berguna untuk mencegah website lain mengambil dan menggunakannya tanpa izin, kredit, atau backlink.<\/p><p>Apabila Anda belum tahu caranya, Anda bisa melacak file yang disematkan melalui URL gambar. Tempel URL pada <strong>Google Penelusuran Gambar<\/strong>, lalu daftar website yang menggunakan gambar tersebut akan ditampilkan.<\/p><p>Cukup apit elemen anchor pada kode gambar kalau Anda ingin menautkan gambar dalam HTML. Anchor adalah teks yang menandai awal dan akhir <a href=\"\/id\/tutorial\/apa-itu-hyperlink\">link hypertext<\/a>. Elemen ini mencakup tag pembuka <strong>&lt;a&gt;<\/strong> dan tag penutup <strong>&lt;\/a&gt;<\/strong>.<\/p><p>Kode gambar dengan syntax anchor tag akan terlihat seperti ini:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;a href=\"https:\/\/www.yourwebsite.com\/image-name.html\"&gt;\n  &lt;img src=\"file-name.jpg\" height=\"50px\" width=\"50px\" alt=\"about image\" \/&gt;\n&lt;\/a&gt;<\/pre><p>Namun, kalau Anda mengupload gambar melalui Media WordPress, Anda tidak perlu membuat URL khusus. URL gambar dibuat secara otomatis ketika file diupload.<\/p><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Tips berguna<\/h4>\n                    <p>Pelajari <a href=\"\/id\/tutorial\/cara-membuat-logo-sendiri\">cara membuat logo<\/a> dengan Hostinger AI Logo Maker.<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-kesimpulan\">Kesimpulan<\/h2><p>Ketika menyesuaikan website, Anda mungkin tidak bisa menambahkan gambar ke halaman karena beberapa batasan fitur. CMS dan tema website biasanya menyediakan opsi sendiri untuk menyisipkan gambar, yang mungkin tidak sesuai dengan kebutuhan semua orang.<\/p><p>Solusinya, Anda bisa menambahkan gambar di HTML. Melalui artikel ini, Anda sudah mempelajari cara memasukkan gambar di HTML dalam enam langkah. Berikut rangkumannya:<\/p><ol class=\"wp-block-list\">\n<li>Upload file gambar ke folder di folder <strong>public_html <\/strong>website melalui file manager yang disediakan oleh web host atau Media WordPress.<\/li>\n\n\n\n<li>Akses file HTML tempat Anda ingin menyisipkan gambar, lalu tambahkan tag <strong>img<\/strong>.<\/li>\n\n\n\n<li>Sertakan atribut <strong>img src<\/strong> untuk menentukan sumber gambar.<\/li>\n\n\n\n<li>Tambahkan atribut <strong>lebar <\/strong>dan <strong>tinggi <\/strong>untuk menentukan bagaimana browser harus menampilkan gambar.<\/li>\n\n\n\n<li>Sisipkan atribut <strong>alt <\/strong>untuk mendeskripsikan gambar.<strong>&nbsp;<\/strong><\/li>\n\n\n\n<li>Simpan perubahan.<\/li>\n<\/ol><p>Anda mungkin juga perlu menambahkan URL gambar khusus untuk file Anda. Namun, kalau menggunakan media WordPress, link ini sudah dibuat secara otomatis.<\/p><p>Selamat mencoba dan semoga berhasil! Kalau masih memiliki pertanyaan lebih lanjut, silakan sampaikan lewat bagian komentar di bawah artikel ini ya.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ketika membuat website dengan CMS populer seperti WordPress, Anda mungkin pernah ingin mengupload gambar tertentu, tapi tidak bisa karena terdapat batasan fitur. Hal ini terkadang memang menyebalkan, terutama ketika Anda perlu menyisipkan gambar penting seperti logo website di header dan footer. Tapi tenang, Anda tetap bisa melakukannya, yaitu dengan cara memasukkan gambar di HTML tema [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/id\/tutorial\/cara-memasukkan-gambar-di-html\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":190,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Cara memasukkan gambar di HTML (6 langkah mudah)","rank_math_description":"Berikut cara memasukkan gambar di HTML: 1. Upload gambar, 2. Akses folder tema, 3. Tambahkan atribut. Baca selengkapnya di tutorial ini yuk!","rank_math_focus_keyword":"cara memasukkan gambar di html","footnotes":""},"categories":[4983],"tags":[],"class_list":["post-43405","post","type-post","status-publish","format-standard","hentry","category-web-development"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-insert-an-image-in-html","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-inserir-imagem-html-no-site","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/inserer-une-image-html","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/insertar-imagen-html","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-memasukkan-gambar-di-html","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-insert-an-image-in-html","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/insertar-imagen-html","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/insertar-imagen-html","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/insertar-imagen-html","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-inserir-imagem-html-no-site","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-insert-an-image-in-html","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-insert-an-image-in-html","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-insert-an-image-in-html","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-insert-an-image-in-html","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-insert-an-image-in-html","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-insert-an-image-in-html","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/43405","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/users\/190"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/comments?post=43405"}],"version-history":[{"count":2,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/43405\/revisions"}],"predecessor-version":[{"id":43415,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/43405\/revisions\/43415"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media?parent=43405"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/categories?post=43405"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/tags?post=43405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}