{"id":40,"date":"2025-09-06T09:16:21","date_gmt":"2025-09-06T09:16:21","guid":{"rendered":"https:\/\/blog.rumahjooocode.com\/?p=40"},"modified":"2025-09-06T09:16:21","modified_gmt":"2025-09-06T09:16:21","slug":"materi-belajar-html-dasar-untuk-pemula","status":"publish","type":"post","link":"https:\/\/blog.rumahjooocode.com\/?p=40","title":{"rendered":"Materi Belajar HTML Dasar untuk Pemula"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">1. Apa itu HTML?<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>HTML<\/strong> = <strong>HyperText Markup Language<\/strong><\/li>\n\n\n\n<li>Digunakan untuk membuat <strong>kerangka halaman web<\/strong>.<\/li>\n\n\n\n<li>HTML bukan bahasa pemrograman, tapi bahasa markup (penanda).<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html>\n  &lt;head>\n    &lt;title>Halaman Pertamaku&lt;\/title>\n  &lt;\/head>\n  &lt;body>\n    &lt;h1>Halo, dunia!&lt;\/h1>\n    &lt;p>Ini adalah paragraf pertama saya.&lt;\/p>\n  &lt;\/body>\n&lt;\/html>\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">2. Struktur Dasar HTML<\/h2>\n\n\n\n<p>Setiap halaman HTML biasanya punya bagian utama:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><code>&lt;!DOCTYPE html><\/code> \u2192 memberitahu browser bahwa ini dokumen HTML5.<\/li>\n\n\n\n<li><code>&lt;html>...&lt;\/html><\/code> \u2192 pembungkus semua isi halaman.<\/li>\n\n\n\n<li><code>&lt;head>...&lt;\/head><\/code> \u2192 berisi informasi (judul, meta, link css, dll).<\/li>\n\n\n\n<li><code>&lt;body>...&lt;\/body><\/code> \u2192 isi utama yang terlihat di halaman web.<br><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">3. Tag Dasar HTML<\/h2>\n\n\n\n<p>Berikut beberapa tag yang sering dipakai:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Heading (Judul)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1>Judul Utama&lt;\/h1>\n&lt;h2>Sub Judul&lt;\/h2>\n&lt;h3>Judul Kecil&lt;\/h3>\n<\/code><\/pre>\n\n\n\n<p><strong>Paragraf<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p>Ini adalah sebuah paragraf.&lt;\/p>\n<\/code><\/pre>\n\n\n\n<p><strong>Link<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/www.google.com\">Kunjungi Google&lt;\/a><\/code><\/pre>\n\n\n\n<p>Gambar<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"gambar.jpg\" alt=\"Deskripsi Gambar\" width=\"200\">\n<\/code><\/pre>\n\n\n\n<p>Daftar<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ul>\n  &lt;li>Apel&lt;\/li>\n  &lt;li>Pisang&lt;\/li>\n  &lt;li>Mangga&lt;\/li>\n&lt;\/ul>\n\n&lt;ol>\n  &lt;li>Pertama&lt;\/li>\n  &lt;li>Kedua&lt;\/li>\n  &lt;li>Ketiga&lt;\/li>\n&lt;\/ol>\n<\/code><\/pre>\n\n\n\n<p><strong>Latihan Membuat Halaman Sederhana<\/strong><br><\/p>\n\n\n\n<p><code>Salin kode ini ke Visual Studio Code \u2192 simpan dengan nama <strong>index.html<\/strong> \u2192 lalu buka di browser.<\/code><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n  &lt;title>Belajar HTML&lt;\/title>\n&lt;\/head>\n&lt;body>\n  &lt;h1>Selamat Datang di Belajar HTML&lt;\/h1>\n  &lt;p>Saya baru belajar coding dari nol!&lt;\/p>\n\n  &lt;h2>Hobi Saya&lt;\/h2>\n  &lt;ul>\n    &lt;li>Membaca&lt;\/li>\n    &lt;li>Menulis&lt;\/li>\n    &lt;li>Olahraga&lt;\/li>\n  &lt;\/ul>\n\n  &lt;h2>Link Favorit&lt;\/h2>\n  &lt;a href=\"https:\/\/www.wikipedia.org\">Buka Wikipedia&lt;\/a>\n\n  &lt;h2>Foto Favorit&lt;\/h2>\n  &lt;img src=\"https:\/\/via.placeholder.com\/200\" alt=\"Gambar Contoh\">\n&lt;\/body>\n&lt;\/html>\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">5. Tips Belajar HTML<\/h2>\n\n\n\n<p>\u2705 Latihan dengan mengetik ulang, jangan hanya copy-paste.<br>\u2705 Mulai dari tag dasar, lalu bertahap ke CSS &amp; JavaScript.<br>\u2705 Gunakan browser (Chrome\/Firefox) untuk melihat hasil.<br>\u2705 Bisa coba juga editor online seperti <strong>CodePen<\/strong> atau <strong>JSFiddle<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. Apa itu HTML? 2. Struktur Dasar HTML Setiap halaman HTML biasanya punya bagian utama: 3. Tag Dasar HTML Berikut beberapa tag yang sering dipakai: Heading (Judul) Paragraf Link Gambar Daftar Latihan Membuat Halaman Sederhana Salin kode ini ke Visual Studio Code \u2192 simpan dengan nama index.html \u2192 lalu buka di browser. 5. Tips Belajar HTML \u2705 Latihan dengan mengetik ulang, jangan hanya copy-paste.\u2705 Mulai dari tag dasar, lalu bertahap ke CSS &amp; JavaScript.\u2705 Gunakan browser (Chrome\/Firefox) untuk melihat hasil.\u2705 Bisa coba juga editor online seperti CodePen atau JSFiddle.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[7,6,4,3,5],"class_list":["post-40","post","type-post","status-publish","format-standard","hentry","category-teknologi","tag-belajar-coding","tag-belajar-html","tag-belajar-pemula-coding","tag-html","tag-mulai-dari-nol"],"_links":{"self":[{"href":"https:\/\/blog.rumahjooocode.com\/index.php?rest_route=\/wp\/v2\/posts\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.rumahjooocode.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.rumahjooocode.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.rumahjooocode.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.rumahjooocode.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=40"}],"version-history":[{"count":2,"href":"https:\/\/blog.rumahjooocode.com\/index.php?rest_route=\/wp\/v2\/posts\/40\/revisions"}],"predecessor-version":[{"id":42,"href":"https:\/\/blog.rumahjooocode.com\/index.php?rest_route=\/wp\/v2\/posts\/40\/revisions\/42"}],"wp:attachment":[{"href":"https:\/\/blog.rumahjooocode.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=40"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.rumahjooocode.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=40"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.rumahjooocode.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}