{"id":404,"date":"2025-12-25T09:55:34","date_gmt":"2025-12-25T02:55:34","guid":{"rendered":"http:\/\/localhost\/2026\/?p=404"},"modified":"2026-01-07T11:41:04","modified_gmt":"2026-01-07T04:41:04","slug":"bab-3-atribut-pada-html","status":"publish","type":"post","link":"https:\/\/www.bisasoftware.id\/2026\/bab-3-atribut-pada-html\/","title":{"rendered":"BAB 3 &#8211; Atribut Pada HTML"},"content":{"rendered":"\n<p><strong>Indikator Materi :<\/strong><br>1. Memahami atribut pada elemen HTML<br>2. Menerapkan Tag, Elemen dan Atribut pada HTML<\/p>\n\n\n\n<p><strong>Atribut<\/strong>&nbsp;menyediakan informasi tambahan tentang sebuah elemen HTML. Informasi ini bisa berupa:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pengidentifikasi unik.<\/li>\n\n\n\n<li>Sumber file (misalnya untuk gambar atau link).<\/li>\n\n\n\n<li>Dimensi (lebar dan tinggi).<\/li>\n\n\n\n<li>Petunjuk styling.<\/li>\n\n\n\n<li>Dan banyak lagi, tergantung jenis elemennya.<\/li>\n<\/ul>\n\n\n\n<p><strong>Aturan Penulisan Atribut:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Selalu Ditaruh di Tag Pembuka<\/strong>: Atribut&nbsp;<em>hanya<\/em>&nbsp;ditulis di dalam tag pembuka elemen, bukan di tag penutup.<\/li>\n\n\n\n<li><strong>Format Pasangan&nbsp;<code>nama=\"nilai\"<\/code><\/strong>: Setiap atribut terdiri dari dua bagian:\n<ul class=\"wp-block-list\">\n<li><strong>Nama Atribut<\/strong>: Menunjukkan jenis informasi yang mau kita kasih (misalnya&nbsp;<code>id<\/code>,&nbsp;<code>class<\/code>,&nbsp;<code>src<\/code>,&nbsp;<code>href<\/code>,&nbsp;<code>style<\/code>).<\/li>\n\n\n\n<li><strong>Nilai Atribut<\/strong>: Isi dari informasi tersebut, biasanya diapit oleh tanda kutip dua (<code>\" \"<\/code>). Tanda kutip satu (<code>' '<\/code>) juga bisa, tapi kutip dua lebih umum.<\/li>\n\n\n\n<li><strong>PENTING<\/strong>: Walaupun kadang browser bisa toleran kalau nilai atribut gak pake kutip (khususnya kalau nilainya satu kata tanpa spasi),&nbsp;<strong>sangat disarankan untuk SELALU menggunakan tanda kutip<\/strong>. Ini praktik terbaik biar kode lebih rapi, aman, dan menghindari error tak terduga.<br><br>Contoh penulisan atribut pada elemen HTML :<br>&lt;p id=&#8221;paragraf1&#8243;&gt;Ini paragraf dalam bahasa Indonesia.&lt;\/p&gt;<br>&lt;p class=&#8221;paragraf&#8221;&gt;This is a paragraph in English.&lt;\/p&gt;<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\nContoh praktek bisa menggunakan platform code editor di bawah ini : <br>\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"KwMKEzp\" data-pen-title=\"project\" data-preview=\"true\" data-editable=\"true\" data-user=\"deka-wildan\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n      <span>See the Pen <a href=\"https:\/\/codepen.io\/deka-wildan\/pen\/KwMKEzp\">\n  project<\/a> by deka wildan (<a href=\"https:\/\/codepen.io\/deka-wildan\">@deka-wildan<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n      <\/p>\n      <script async src=\"https:\/\/public.codepenassets.com\/embed\/index.js\"><\/script>\n\n\n\n<p><strong>TUGAS !<\/strong><br>1. Buatkan syntax html untuk menampilkan paragraf biodata diri dengan background warna kuning !<br>2.  Buat kesimpulan untuk konten berupa paragraf dan non paragraf !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Indikator Materi :1. Memahami atribut pada elemen HTML2. Menerapkan Tag, Elemen dan Atribut pada HTML Atribut&nbsp;menyediakan informasi tambahan tentang sebuah&#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-404","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\/404","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=404"}],"version-history":[{"count":7,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/404\/revisions"}],"predecessor-version":[{"id":458,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/404\/revisions\/458"}],"wp:attachment":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/media?parent=404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/categories?post=404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/tags?post=404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}