{"id":487,"date":"2026-05-03T08:15:59","date_gmt":"2026-05-03T01:15:59","guid":{"rendered":"https:\/\/www.bisasoftware.id\/2026\/?p=487"},"modified":"2026-05-03T08:15:59","modified_gmt":"2026-05-03T01:15:59","slug":"bab-9-gambar-html-manajemen-folder-assets","status":"publish","type":"post","link":"https:\/\/www.bisasoftware.id\/2026\/bab-9-gambar-html-manajemen-folder-assets\/","title":{"rendered":"BAB 9 : GAMBAR HTML &amp; MANAJEMEN FOLDER ASSETS"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">1. Pengertian Gambar dalam HTML<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Gambar digunakan untuk:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Memperjelas informasi<\/li>\n\n\n\n<li>Menarik perhatian pengguna<\/li>\n\n\n\n<li>Membuat tampilan website lebih profesional<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Tag yang digunakan:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"gambar.jpg\" alt=\"deskripsi gambar\"&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">2. Struktur Tag <code>&lt;img&gt;<\/code><\/h1>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"lokasi_gambar\" alt=\"deskripsi\"&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Penjelasan:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Atribut<\/th><th>Fungsi<\/th><\/tr><\/thead><tbody><tr><td>src<\/td><td>lokasi file gambar<\/td><\/tr><tr><td>alt<\/td><td>deskripsi gambar<\/td><\/tr><tr><td>width<\/td><td>lebar<\/td><\/tr><tr><td>height<\/td><td>tinggi<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">3. Contoh Dasar<\/h1>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"gambar.jpg\" alt=\"Pemandangan\"&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">4. Atribut Penting pada Gambar<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">4.1 Alt (WAJIB di industri)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"logo.png\" alt=\"Logo Sekolah\"&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Fungsi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>SEO<\/li>\n\n\n\n<li>Accessibility (screen reader)<\/li>\n\n\n\n<li>Jika gambar gagal load<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">4.2 Width &amp; Height<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"foto.jpg\" width=\"200\"&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">4.3 Style (CSS)<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"foto.jpg\" style=\"border-radius:10px;\"&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">5. FORMAT GAMBAR YANG DIDUKUNG<\/h1>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Format<\/th><th>Kegunaan<\/th><\/tr><\/thead><tbody><tr><td>JPG<\/td><td>foto<\/td><\/tr><tr><td>PNG<\/td><td>transparan<\/td><\/tr><tr><td>GIF<\/td><td>animasi<\/td><\/tr><tr><td>SVG<\/td><td>vector<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">6. FOLDER ASSETS (WAJIB INDUSTRI \ud83d\udd25)<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">6.1 Pengertian<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Assets adalah folder untuk menyimpan:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gambar<\/li>\n\n\n\n<li>CSS<\/li>\n\n\n\n<li>JavaScript<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">6.2 Struktur Folder Standar<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>project\/<br>\u2502<br>\u251c\u2500\u2500 index.html<br>\u251c\u2500\u2500 profil.html<br>\u2502<br>\u251c\u2500\u2500 assets\/<br>\u2502   \u251c\u2500\u2500 img\/<br>\u2502   \u2502   \u251c\u2500\u2500 logo.png<br>\u2502   \u2502   \u251c\u2500\u2500 banner.jpg<br>\u2502   \u2502<br>\u2502   \u251c\u2500\u2500 css\/<br>\u2502   \u2514\u2500\u2500 js\/<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">6.3 Kenapa Harus Pakai Assets?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u2714 Rapi<br>\u2714 Mudah dikelola<br>\u2714 Standar industri<br>\u2714 Siap dikembangkan ke framework<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">7. MENGAMBIL GAMBAR DARI FOLDER<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">7.1 Contoh<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"assets\/img\/logo.png\" alt=\"Logo\"&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">7.2 Jika dari folder berbeda<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"..\/assets\/img\/logo.png\"&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 <code>..<\/code> = naik folder<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">8. STUDI KASUS UTAMA (WEBSITE REAL \ud83d\udd25)<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83c\udfaf Kasus: Website Sekolah<\/h2>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Struktur:<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>sekolah\/<br>\u251c\u2500\u2500 index.html<br>\u251c\u2500\u2500 profil.html<br>\u2502<br>\u251c\u2500\u2500 assets\/<br>\u2502   \u2514\u2500\u2500 img\/<br>\u2502       \u251c\u2500\u2500 sekolah.jpg<br>\u2502       \u251c\u2500\u2500 siswa.jpg<br>\u2502       \u251c\u2500\u2500 logo.png<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">8.1 index.html<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1&gt;SMK Teknologi&lt;\/h1&gt;<br><br>&lt;img src=\"assets\/img\/logo.png\" alt=\"Logo Sekolah\" width=\"100\"&gt;<br><br>&lt;p&gt;Selamat datang di website sekolah.&lt;\/p&gt;<br><br>&lt;img src=\"assets\/img\/sekolah.jpg\" alt=\"Gedung Sekolah\" width=\"400\"&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">8.2 profil.html<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1&gt;Profil Sekolah&lt;\/h1&gt;<br><br>&lt;a href=\"index.html\"&gt;Kembali&lt;\/a&gt;<br><br>&lt;img src=\"assets\/img\/siswa.jpg\" alt=\"Siswa belajar\" width=\"400\"&gt;<br><br>&lt;p&gt;Sekolah berbasis teknologi modern.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 Ini sudah <strong>website real sederhana + gambar nyata<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">9. GAMBAR SEBAGAI LINK<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">Contoh:<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"profil.html\"&gt;<br>    &lt;img src=\"assets\/img\/logo.png\" alt=\"Logo\"&gt;<br>&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 Klik gambar \u2192 pindah halaman<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">10. BEST PRACTICE INDUSTRI<\/h1>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 Gunakan folder assets<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 Gunakan nama file jelas<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>logo-sekolah.png<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 Gunakan alt yang deskriptif<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u274c Salah:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>alt=\"gambar\"<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u2714 Benar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>alt=\"Gedung SMK Teknologi\"<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u2714 Optimasi ukuran gambar<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 Jangan upload gambar 5MB<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">11. KESALAHAN UMUM SISWA<\/h1>\n\n\n\n<h3 class=\"wp-block-heading\">\u274c Gambar tidak muncul<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Penyebab:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Salah path<\/li>\n\n\n\n<li>Nama file salah<\/li>\n\n\n\n<li>Huruf besar\/kecil beda<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u274c Tidak pakai alt<\/h3>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u274c File berantakan (tidak pakai folder)<\/h3>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">12. DEBUGGING GAMBAR<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Jika gambar tidak tampil:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Cek path<\/li>\n\n\n\n<li>Cek folder<\/li>\n\n\n\n<li>Cek nama file<\/li>\n\n\n\n<li>Inspect \u2192 lihat error<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">13. LATIHAN SISWA<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">Latihan 1<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Tampilkan 3 gambar dari folder<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Latihan 2<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Buat gambar sebagai link<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Latihan 3<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Gunakan alt + width<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">14. MINI PROJECT<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83c\udfaf \u201cWEBSITE PROFIL SEKOLAH REAL\u201d<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Fitur:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navbar<\/li>\n\n\n\n<li>Gambar logo<\/li>\n\n\n\n<li>Banner sekolah<\/li>\n\n\n\n<li>Halaman profil<\/li>\n\n\n\n<li>Semua gambar dari folder assets<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">15. KESIMPULAN<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Gambar + assets adalah kunci untuk:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Website terlihat profesional<\/li>\n\n\n\n<li>Struktur project rapi<\/li>\n\n\n\n<li>Siap ke level berikutnya (CSS, framework)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Tag utama:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"\" alt=\"\"&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>1. Pengertian Gambar dalam HTML Gambar digunakan untuk: Tag yang digunakan: 2. Struktur Tag &lt;img&gt; Penjelasan: Atribut Fungsi src lokasi&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[5],"tags":[32],"class_list":["post-487","post","type-post","status-publish","format-standard","hentry","category-tutorial-html","tag-tutorial-html"],"_links":{"self":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/comments?post=487"}],"version-history":[{"count":1,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/487\/revisions"}],"predecessor-version":[{"id":488,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/487\/revisions\/488"}],"wp:attachment":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/media?parent=487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/categories?post=487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/tags?post=487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}