{"id":41283,"date":"2024-11-11T13:39:18","date_gmt":"2024-11-11T06:39:18","guid":{"rendered":"\/tutorial\/?p=41283"},"modified":"2025-02-20T11:00:02","modified_gmt":"2025-02-20T04:00:02","slug":"contoh-coding-html","status":"publish","type":"post","link":"\/id\/tutorial\/contoh-coding-html","title":{"rendered":"23 Contoh Kode HTML yang Cocok Dipelajari oleh Pemula"},"content":{"rendered":"<p>HyperText Markup Language, atau yang lebih populer disebut HTML, adalah bahasa markup yang digunakan untuk menyusun struktur halaman web. Anda bisa mengatur teks, menambahkan gambar dan link, hingga membuat formulir.<\/p><p>Meskipun membutuhkan <a href=\"\/id\/tutorial\/apa-itu-coding\">coding<\/a>, HTML sebenarnya mudah dipelajari karena bukan merupakan bahasa pemrograman. Tag-tag HTML juga cukup jelas, karena memiliki struktur yang sederhana dan teratur.<\/p><p>Kalau Anda tertarik untuk belajar HTML, kami akan memandu Anda melalui artikel ini. Kami punya banyak contoh HTML untuk berbagai tujuan, mulai dari fungsi dasar hingga pembuatan halaman web. Sudah siap? Mari mulai!<\/p><h2 class=\"wp-block-heading\" id=\"h-contoh-kode-html-untuk-pemula\">Contoh Kode HTML untuk Pemula<\/h2><p>Untuk mempelajari HTML, Anda tidak perlu menguasai <a href=\"\/id\/tutorial\/apa-itu-algoritma-pemrograman\">algoritma pemrograman<\/a> atau logika seperti variabel dan syntax yang rumit. Hasil kode HTML juga akan langsung terlihat sehingga Anda bisa menyesuaikannya dengan lebih mudah.<\/p><p>Di tutorial ini, kami akan memberikan contoh coding HTML untuk membantu Anda mempelajarinya. Tenang, kami akan menunjukkan hasilnya sehingga Anda bisa mendapatkan gambaran yang lebih jelas.<\/p><p>Langsung saja, ini contoh kode HTML yang bisa Anda coba, dimulai dari yang paling mudah.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-struktur-dasar-html\">1. Struktur Dasar HTML<\/h3><p>Dalam HTML, ada struktur dasar yang harus Anda gunakan agar halaman web yang dibuat bisa berfungsi. Struktur ini akan menjadi kerangka halaman sehingga web browser bisa menampilkannya dengan benar.<\/p><p>Beberapa tag utama yang menjadi struktur dasar HTML adalah <strong>&lt;html&gt;<\/strong>, <strong>&lt;head&gt;<\/strong>, dan <strong>&lt;body&gt;<\/strong>. Semua tag ini harus berpasangan untuk membuka dan menutup setiap bagiannya, yang ditandai dengan garis miring. Misalnya, tag <strong>&lt;head&gt;<\/strong> harus ditutup dengan tag <strong>&lt;\/head&gt;<\/strong>.<\/p><p>Berikut contoh penggunaannya:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;Contoh Struktur Dasar HTML&lt;\/title&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;p&gt;Halo, dunia!&lt;\/p&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;<\/pre><p>Pada contoh ini, kode dimulai dengan <strong>&lt;!DOCTYPE html&gt;<\/strong>. Tag ini memberi tahu web browser bahwa dokumen yang dimuat adalah HTML5.<\/p><p>Kemudian, tag <strong>&lt;html&gt;<\/strong> mencakup semua elemen yang ada di halaman. Setelah itu ada bagian <strong>&lt;head&gt;<\/strong> yang memuat informasi tambahan, seperti <strong>&lt;title&gt;<\/strong> untuk judul yang nantinya akan muncul di tab browser.<\/p><p>Nah, bagian <strong>&lt;body&gt;<\/strong> adalah tempat Anda memasukkan semua konten utama website, seperti teks, gambar, dan elemen lainnya. Perlu diingat bahwa hampir semua contoh kode berikutnya dalam tutorial ini perlu disertakan dalam tag <strong>&lt;body&gt;<\/strong> dan <strong>&lt;\/body&gt;<\/strong> agar bisa berfungsi.<\/p><p>Dari contoh pertama ini, berikut hasil coding HTML kami ketika dibuka di browser:<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69e1b3cedd472\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"495\" height=\"227\" 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\/11\/contoh-halo-dunia.png\/public\" alt=\"tampilan contoh html halo dunia di chrome\" class=\"wp-image-41289\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-halo-dunia.png\/w=495,fit=scale-down 495w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-halo-dunia.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-halo-dunia.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 495px) 100vw, 495px\" \/><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-2-heading-dan-paragraf\">2. Heading dan Paragraf<\/h3><p>Berikutnya, ada heading dan paragraf yang membentuk struktur teks di halaman web. Dengan dua elemen ini, Anda bisa membuat teks dengan format judul, subjudul, dan isi paragrafnya.<\/p><p>Heading dalam HTML memiliki 6 tingkat yang dimulai dari tag <strong>&lt;h1&gt;<\/strong> untuk judul utama, sampai <strong>&lt;h6&gt;<\/strong> untuk subjudul terkecil. Sementara itu, tag untuk paragraf adalaj <strong>&lt;p&gt;<\/strong>. Jangan lupa untuk menyertakan tag penutupnya juga.<\/p><p>Contoh penggunaan tag heading dan paragraf adalah sebagai berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;h1&gt;Judul Utama (H1) di Bagian Ini&lt;\/h1&gt;\n&lt;h2&gt;Sub Judul (H2) Ada di Sini &lt;\/h2&gt;\n&lt;p&gt;Bagian ini berisi teks paragraf yang bisa Anda isi dengan konten tulisan.&lt;\/p&gt;<\/pre><p>Perlu diperhatikan bahwa tag <strong>&lt;h1&gt;<\/strong> biasanya hanya digunakan sekali sebagai judul utama. Heading lainnya boleh digunakan sesuai kebutuhan untuk subjudul. Anda akan melihat hasil seperti ini saat mencoba kode di atas:<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69e1b3ceddc15\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"536\" height=\"299\" 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\/11\/contoh-coding-html-heading-dan-paragraf.png\/public\" alt=\"tampilan hasil dari contoh coding html untuk heading dan paragraf\" class=\"wp-image-41292\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-coding-html-heading-dan-paragraf.png\/w=536,fit=scale-down 536w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-coding-html-heading-dan-paragraf.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-coding-html-heading-dan-paragraf.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 536px) 100vw, 536px\" \/><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-3-memformat-teks-dengan-bold-italic-underline\">3. Memformat Teks dengan Bold, Italic, Underline<\/h3><p>HTML memiliki tag <strong>&lt;strong&gt;<\/strong> untuk teks tebal atau <strong>bold<\/strong>, <strong>&lt;em&gt;<\/strong> untuk teks miring atau <em>italic<\/em>, serta <strong>&lt;u&gt;<\/strong> untuk <span style=\"text-decoration: underline\">garis bawah<\/span>. Sebenarnya ada juga tag <strong>&lt;b&gt;<\/strong> untuk menebalkan teks dalam HTML, tapi tag ini hanya mengubah tampilan teks tanpa ada makna khusus.<\/p><p>Tag <strong>&lt;strong&gt;<\/strong> memiliki fungsi semantik yang menekankan bahwa teks dalam tag tersebut bersifat penting dan perlu ditekankan. Tag ini digunakan oleh crawler mesin pencari untuk SEO, dan oleh aplikasi pembaca layar untuk memberikan penekanan khusus.<\/p><p>Ini contohnya:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;p&gt;Baris ini memiliki &lt;strong&gt;kata-kata yang diformat tebal dengan tag strong&lt;\/strong&gt;.&lt;\/p&gt;\n&lt;p&gt;Sementara itu, kata-kata di baris ini &lt;em&gt;diformat dengan tag em&lt;\/em&gt; agar miring.&lt;\/p&gt;\n&lt;p&gt;Di baris ini, &lt;u&gt;ada teks yang diformat underline&lt;\/u&gt; untuk menambahkan garis bawah.&lt;\/p&gt;<\/pre><p>Berikut hasil percobaan kami:<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69e1b3cede3a5\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"539\" height=\"255\" 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\/11\/contoh-format-teks-bold-italic-underline.png\/public\" alt=\"tampilan contoh teks bold, italic, dan underline\" class=\"wp-image-41336\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-format-teks-bold-italic-underline.png\/w=539,fit=scale-down 539w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-format-teks-bold-italic-underline.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-format-teks-bold-italic-underline.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 539px) 100vw, 539px\" \/><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-memasukkan-gambar-di-halaman-web\">4. Memasukkan Gambar di Halaman Web<\/h3><p>Gambar merupakan elemen penting yang membuat halaman web Anda terlihat lebih menarik. Untuk menambahkan gambar di HTML, Anda hanya perlu menggunakan tag <strong>&lt;img&gt;<\/strong>.<\/p><p>Namun, perlu diingat bahwa Anda tidak bisa langsung memasukkan file gambar ke HTML. Anda perlu menyimpannya dulu di suatu lokasi, lalu merujuknya menggunakan atribut seperti <code>src<\/code> dan <code>alt<\/code> agar gambar bisa ditampilkan dengan benar.<\/p><p>Coba perhatikan contoh berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;img src=\"gambar-pemandangan.jpg\" alt=\"Pemandangan Indah di Pegunungan\" width=\"300\" height=\"200\"&gt;<\/pre><p>Pada contoh di atas, <strong>src<\/strong> menunjukkan lokasi file atau URL gambar. Anda bisa memasukkan link gambar dari internet atau alamat dari folder lokal di perangkat Anda.<\/p><p>Sementara itu, tag <strong>alt<\/strong> digunakan untuk menuliskan deskripsi gambar. Teks ini akan muncul kalau gambar gagal dimuat di web browser, serta membantu menjelaskan isi gambar kepada pengunjung yang memiliki gangguan penglihatan.<\/p><p>Di bagian akhir, kami menambahkan tag ukuran <strong>width<\/strong> dan <strong>height<\/strong> untuk mengatur lebar dan tinggi gambar sesuai kebutuhan. Hasilnya adalah sebagai berikut:<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69e1b3cedea0d\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"554\" height=\"369\" 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\/11\/gambar-dalam-html.png\/public\" alt=\"tampilan contoh gambar yang dimasukkan dalam html\" class=\"wp-image-41297\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/gambar-dalam-html.png\/w=554,fit=scale-down 554w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/gambar-dalam-html.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/gambar-dalam-html.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 554px) 100vw, 554px\" \/><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-5-menambahkan-link-dalam-teks\">5. Menambahkan Link dalam Teks<\/h3><p>Link yang diletakkan dalam teks sebagai hyperlink akan memudahkan pengguna untuk beralih ke halaman atau website lainnya.<\/p><p>Apabila Anda ingin menambahkan hyperlink dalam teks HTML, gunakan tag <strong>&lt;a&gt;<\/strong> lalu tambahkan atribut <code>href<\/code> untuk menentukan tujuan link. Untuk membuat link terbuka di tab baru, tambahkan <code>target=\"_blank\"<\/code>.<\/p><p>Contoh kodenya adalah sebagai berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;p&gt;Dalam contoh ini, kami menambahkan &lt;a href=\"https:\/\/www.example.com\" target=\"_blank\"&gt;link dalam teks&lt;\/a&gt; yang bisa diklik dan mengarah ke halaman lain.&lt;\/p&gt;<\/pre><p>Teks di antara tag <strong>&lt;a&gt;<\/strong> dan <strong>&lt;\/a&gt;<\/strong> akan menjadi hyperlink. Apabila mengklik anchor text tersebut, Anda akan diarahkan ke link yang tercantum setelah atribut <strong>href<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"676\" height=\"174\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-link-dalam-html.png\/public\" alt=\"tampilan contoh link yang ditambahkan dalam html\" class=\"wp-image-41304\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-link-dalam-html.png\/w=676,fit=scale-down 676w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-link-dalam-html.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-link-dalam-html.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-6-mencantumkan-daftar-dengan-bullet-poin\">6. Mencantumkan Daftar dengan Bullet Poin<\/h3><p>Bullet point berfungsi untuk mencantumkan daftar dengan simbol tertentu, biasanya berupa lingkaran hitam. Anda mungkin membutuhkannya saat menulis konten website, misalnya untuk membuat checklist seperti di bawah ini:<\/p><ul class=\"wp-block-list\">\n<li>Ini adalah poin pertama dalam daftar.<\/li>\n\n\n\n<li>Ini adalah poin kedua dalam daftar.<\/li>\n\n\n\n<li>Ini adalah poin ketiga dalam daftar.<\/li>\n<\/ul><p>Di HTML, Anda bisa membuat daftar tersebut menggunakan tag <strong>&lt;ul&gt;<\/strong> yang berasal dari kata <strong>unordered list<\/strong>, lalu menambahkan setiap poin menggunakan tag <strong>&lt;li&gt;<\/strong>.<\/p><p>Berikut contoh HTML untuk membuat daftar dengan bullet poin:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;ul&gt;\n  &lt;li&gt;ni adalah poin pertama dalam daftar.&lt;\/li&gt;\n  &lt;li&gt;ni adalah poin kedua dalam daftar.&lt;\/li&gt;\n  &lt;li&gt;ni adalah poin ketiga dalam daftar.&lt;\/li&gt;\n&lt;\/ul&gt;<\/pre><p>Hasilnya akan terlihat seperti ini saat diakses menggunakan web browser:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"477\" height=\"201\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/bullet-point-dengan-html.png\/public\" alt=\"tampilan hasil bullet point yang dibuat dengan coding html\" class=\"wp-image-41309\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/bullet-point-dengan-html.png\/w=477,fit=scale-down 477w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/bullet-point-dengan-html.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/bullet-point-dengan-html.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 477px) 100vw, 477px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-7-mebuat-daftar-berurutan\">7. Mebuat Daftar Berurutan<\/h3><p>Nah, kalau perlu membuat daftar berurutan, misalnya untuk menjelaskan langkah-langkah dalam artikel tutorial, Anda bisa menggunakan tag <strong>&lt;ol&gt;<\/strong>. Tag ini merupakan singkatan dari kata <strong>ordered list<\/strong>, yang akan secara otomatis menomori item daftar saat dirender oleh browser.<\/p><p>Untuk menambahkan item daftar, gunakan tag <strong>&lt;li&gt;<\/strong> juga. Apabila ingin menggunakan urutan selain angka, cukup tambahkan atribut <code>type=<\/code> dalam tag <strong>&lt;ol&gt;<\/strong> sesuai daftar berikut:<\/p><ul class=\"wp-block-list\">\n<li><strong>&lt;ol type=&rdquo;1&Prime;&gt;<\/strong> untuk daftar dengan angka.<\/li>\n\n\n\n<li><strong>&lt;ol type=&rdquo;A&rdquo;&gt;<\/strong> untuk daftar dengan huruf besar.<\/li>\n\n\n\n<li><strong>&lt;ol type=&rdquo;a&rdquo;&gt;<\/strong> untuk daftar dengan huruf kecil.<\/li>\n\n\n\n<li><strong>&lt;ol type=&rdquo;I&rdquo;&gt;<\/strong> untuk daftar dengan angka romawi besar.<\/li>\n\n\n\n<li><strong>&lt;ol type=&rdquo;i&rdquo;&gt;<\/strong> untuk daftar dengan angka romawi kecil.<\/li>\n<\/ul><p>Misalnya, coba kode berikut ini:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;ol&gt;\n  &lt;li&gt;Pertama, buka hPanel dan pilih menu website.&lt;\/li&gt;\n  &lt;li&gt;Klik tombol &lt;strong&gt;Dashboard&lt;\/strong&gt; di samping website Anda.&lt;\/li&gt;\n  &lt;li&gt;Di bagian dashboard, temukan dan pilih &lt;strong&gt;File Manager&lt;\/strong&gt;.&lt;\/li&gt;\n&lt;\/ol&gt;<\/pre><p>Anda tidak perlu repot menuliskan nomor lagi karena browser akan menambahkannya secara otomatis dalam urutan yang sesuai. Ini hasil kodenya saat kami coba:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"490\" height=\"218\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-numbered-list.png\/public\" alt=\"tampilan contoh hasil numbered list dalam html\" class=\"wp-image-41311\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-numbered-list.png\/w=490,fit=scale-down 490w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-numbered-list.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-numbered-list.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 490px) 100vw, 490px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-8-membuat-tabel-dengan-baris-dan-kolom\">8. Membuat Tabel dengan Baris dan Kolom<\/h3><p>Tabel bisa sangat berguna ketika Anda perlu menyajikan data dalam tampilan yang lebih terstruktur. Menggunakan kolom dan baris, informasi yang Anda sajikan akan lebih mudah dibaca.<\/p><p>HTML menyediakan tag <strong>&lt;table&gt;<\/strong> untuk mengaktifkan elemen tabel. Kemudian, Anda bisa menggunakan tag berikut ini:<\/p><ul class=\"wp-block-list\">\n<li><strong>&lt;tr&gt;<\/strong> untuk menambahkan baris<\/li>\n\n\n\n<li><strong>&lt;th&gt;<\/strong> untuk menandai judul kolom, dan<\/li>\n\n\n\n<li><strong>&lt;td&gt;<\/strong> untuk mengisi data dalam sel.<\/li>\n<\/ul><p>Mari lihat contoh kode HTML untuk tabel sederhana berikut ini:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;table border=\"1\"&gt;\n  &lt;tr&gt;\n    &lt;th&gt;Nama&lt;\/th&gt;\n    &lt;th&gt;Usia&lt;\/th&gt;\n    &lt;th&gt;Asal&lt;\/th&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Agus&lt;\/td&gt;\n    &lt;td&gt;20&lt;\/td&gt;\n    &lt;td&gt;Yogyakarta&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Budi&lt;\/td&gt;\n    &lt;td&gt;25&lt;\/td&gt;\n    &lt;td&gt;Jakarta&lt;\/td&gt;\n  &lt;\/tr&gt;\n  &lt;tr&gt;\n    &lt;td&gt;Cantika&lt;\/td&gt;\n    &lt;td&gt;20&lt;\/td&gt;\n    &lt;td&gt;Purwokerto&lt;\/td&gt;\n  &lt;\/tr&gt;\n&lt;\/table&gt;<\/pre><p>Dalam contoh kode di atas, kami menambahkan atribut <code>border=\"1\"<\/code> untuk memberi garis batas pada tabel. Tambahkan angka yang lebih besar untuk membuat garis yang lebih tebal.<\/p><p>Kemudian, tag <strong>&lt;th&gt;<\/strong> membuat judul kolom yang terdiri dari <strong>Nama<\/strong>, <strong>Usia<\/strong>, dan <strong>Asal<\/strong>. Untuk membuat baris baru, kami menggunakan tag <strong>&lt;tr&gt;<\/strong>, lalu mengisi data per kolom menggunakan tag <strong>&lt;td&gt;<\/strong>. Berikut hasilnya saat kode ini dicoba:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"484\" height=\"228\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-tabel-html.png\/public\" alt=\"tampilan contoh tabel di chrome yang dibuat menggunakan html\" class=\"wp-image-41314\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-tabel-html.png\/w=484,fit=scale-down 484w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-tabel-html.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-tabel-html.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 484px) 100vw, 484px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-9-membuat-formulir-sederhana\">9. Membuat Formulir Sederhana<\/h3><p>Sekarang saatnya Anda mempelajari contoh kode yang sedikit lebih rumit daripada sebelumnya, yaitu membuat formulir. Biasanya, formulir dibutuhkan untuk halaman web yang perlu mengumpulkan data pengguna, seperti halaman login.<\/p><p>Untuk memulainya, gunakan tag <strong>&lt;form&gt;<\/strong> yang mengaktifkan fungsi untuk menambahkan berbagai elemen input, seperti kotak teks, radio button, dan tombol.<\/p><p>Berikut contoh kode HTML sederhana yang bisa Anda coba untuk membuat formulir:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;form action=\"\/submit\"&gt;\n  &lt;label for=\"name\"&gt;Nama Pengguna:&lt;\/label&gt;\n  &lt;input type=\"text\" id=\"name\" name=\"name\"&gt;\n  &lt;br&gt;\n  &lt;label for=\"email\"&gt;Kata Sandi:&lt;\/label&gt;\n  &lt;input type=\"email\" id=\"email\" name=\"email\"&gt;\n  &lt;br&gt;\n  &lt;input type=\"submit\" value=\"Login\"&gt;\n&lt;\/form&gt;<\/pre><p>Menggunakan kode tersebut, Anda bisa <a href=\"\/id\/tutorial\/cara-membuat-form-login-html-css\">membuat form login sederhana<\/a> yang menampilkan kolom <strong>Nama Pengguna<\/strong>, <strong>Kata Sandi<\/strong>, dan tombol <strong>Login<\/strong>.<\/p><p>Atribut <code>action<\/code> di baris pertama menunjukkan lokasi yang menjadi tujuan pengiriman data saat tombol <strong>Login<\/strong> diklik. Nantinya, lokasi ini perlu diganti dengan endpoint yang berupa file atau handler untuk validasi kredensial pengguna.<\/p><p>Kemudian, <strong>&lt;label&gt;<\/strong> berfungsi untuk mengidentifikasi setiap kolom input. Di bagian akhir, ada <strong>&lt;input type=&rdquo;submit&rdquo;&gt;<\/strong> yang menampilkan tombol untuk mengirimkan data pengguna. Hasilnya akan menjadi seperti ini:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"490\" height=\"212\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-form-sederhana.png\/public\" alt=\"tampilan contoh form login sederhana\" class=\"wp-image-41316\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-form-sederhana.png\/w=490,fit=scale-down 490w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-form-sederhana.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-form-sederhana.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 490px) 100vw, 490px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-10-menambahkan-daftar-dropdown\">10. Menambahkan Daftar Dropdown<\/h3><p>Daftar drop-down berfungsi untuk menyediakan pilihan dengan opsi yang sudah ditentukan. Elemen ini berguna untuk membatasi pilihan pengguna sesuai ketersediaan fitur, misalnya saat memilih bahasa website.<\/p><p>Anda bisa membuat drop-down di HTML menggunakan tag <strong>&lt;select&gt;<\/strong>, lalu membuat item daftarnya menggunakan tag <strong>&lt;option&gt;<\/strong>.<\/p><p>Berikut contoh kodenya:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;label for=\"kota\"&gt;Pilih Kota:&lt;\/label&gt;\n&lt;select id=\"kota\" name=\"kota\"&gt;\n  &lt;option value=\"yogyakarta\"&gt;Yogyakarta&lt;\/option&gt;\n  &lt;option value=\"jakarta\"&gt;Jakarta&lt;\/option&gt;\n  &lt;option value=\"purwokerto\"&gt;Purwokerto&lt;\/option&gt;\n&lt;\/select&gt;<\/pre><p>Dalam contoh ini, atribut <code>id<\/code> dan <code>name<\/code> dalam tag <strong>&lt;select&gt;<\/strong> diperlukan untuk identifikasi. Di bawahnya, setiap tag <strong>&lt;option&gt;<\/strong> memiliki atribut <code>value<\/code> untuk menentukan nilai yang dikirim apabila opsi tersebut dipilih.<\/p><p>Cobalah contoh HTML di atas dan sesuaikan isinya dengan opsi Anda sendiri. Dari contoh kami, browser akan menampilkan drop-down kota dengan pilihan <strong>Yogyakarta<\/strong>, <strong>Jakarta<\/strong>, dan <strong>Purwokerto<\/strong> seperti berikut:<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69e1b3cee082c\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"493\" height=\"237\" 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\/11\/contoh-drop-down-kota.png\/public\" alt=\"tampilan contoh drop-down kota yang dibuka di chrome\" class=\"wp-image-41323\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-drop-down-kota.png\/w=493,fit=scale-down 493w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-drop-down-kota.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-drop-down-kota.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 493px) 100vw, 493px\" \/><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\">11. Membuat Kotak Centang<\/h3><p>Saat perlu menampilkan beberapa opsi untuk dipilih oleh pengguna, Anda bisa menambahkan kotak centang. Dengan kotak centang, pengguna bisa memilih lebih dari satu opsi yang tersedia.<\/p><p>Elemen ini bisa Anda tambahkan di formulir atau survei, misalnya untuk pilihan hobi. Coba contoh kode berikut ini untuk membuat kotak centang:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;p&gt;Pilih hobi Anda:&lt;\/p&gt;\n&lt;input type=\"checkbox\" id=\"membaca\" name=\"hobi\" value=\"membaca\"&gt;\n&lt;label for=\"membaca\"&gt;Main Game&lt;\/label&gt;&lt;br&gt;\n&lt;input type=\"checkbox\" id=\"berkebun\" name=\"hobi\" value=\"berkebun\"&gt;\n&lt;label for=\"berkebun\"&gt;Menulis&lt;\/label&gt;&lt;br&gt;\n&lt;input type=\"checkbox\" id=\"menulis\" name=\"hobi\" value=\"menulis\"&gt;\n&lt;label for=\"menulis\"&gt;Menonton Film&lt;\/label&gt;<\/pre><p>Atribut <code>value<\/code> dalam setiap pilihan akan dikirim sebagai input kalau opsinya dipilih. Sementara itu, atribut <code>name<\/code> merupakan pengidentifikasi untuk kategori &ldquo;hobi&rdquo;. Menggunakan kode ini, Anda bisa menyediakan beberapa opsi yang bisa dipilih sekaligus.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"515\" height=\"234\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/opsi-kotak-centang.png\/public\" alt=\"tampilan opsi kotak centang di google chrome\" class=\"wp-image-41343\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/opsi-kotak-centang.png\/w=515,fit=scale-down 515w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/opsi-kotak-centang.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/opsi-kotak-centang.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 515px) 100vw, 515px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\">12. Menambahkan Radio Button<\/h3><p>Cara kerja radio button mirip dengan kotak centang, yaitu untuk menyediakan opsi yang bisa dipilih, tapi pengguna hanya bisa memilih satu opsi saja. Elemen ini cocok untuk pilihan tunggal, seperti jenis kelamin rentang gaji.<\/p><p>Untuk menambahkan radio button di HTML, gunakan kode berikut ini:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;p&gt;Pilih jenis kelamin:&lt;\/p&gt;\n&lt;input type=\"radio\" id=\"laki-laki\" name=\"gender\" value=\"laki-laki\"&gt;\n&lt;label for=\"laki-laki\"&gt;Laki-laki&lt;\/label&gt;&lt;br&gt;\n&lt;input type=\"radio\" id=\"perempuan\" name=\"gender\" value=\"perempuan\"&gt;\n&lt;label for=\"perempuan\"&gt;Perempuan&lt;\/label&gt;<\/pre><p>Sama seperti elemen kotak centang, atribut <code>name<\/code> merupakan pengidentifikasi untuk gender, dan <code>value<\/code> merupakan nilai yang akan dikirim saat opsinya dipilih.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"488\" height=\"200\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/radio-button.png\/public\" alt=\"tampilan radio button di web browser google chrome\" class=\"wp-image-41344\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/radio-button.png\/w=488,fit=scale-down 488w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/radio-button.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/radio-button.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 488px) 100vw, 488px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\">13. Memasukkan Video dan Audio<\/h3><p>Anda juga bisa menambahkan media interaktif seperti video dan audio menggunakan HTML untuk langsung menyisipkannya di halaman web, loh.<\/p><p>Untuk video, gunakan tag <strong>&lt;video&gt;<\/strong>, sedangkan untuk audio, gunakan tag <strong>&lt;audio&gt;<\/strong>. Kedua tag ini memiliki atribut <code>controls<\/code> agar pengguna bisa memutar atau menghentikan media sesuai keinginan.<\/p><p>Berikut contoh kode HTML sederhana untuk menambahkan video dan audio:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;video width=\"320\" height=\"240\" controls&gt;\n  &lt;source src=\"video-sample.mp4\" type=\"video\/mp4\"&gt;\n  Browser Anda tidak mendukung tag video.\n&lt;\/video&gt;\n\n&lt;audio controls&gt;\n  &lt;source src=\"audio-sample.mp3\" type=\"audio\/mpeg\"&gt;\n  Browser Anda tidak mendukung tag audio.\n&lt;\/audio&gt;<\/pre><p>Dalam contoh ini, Anda bisa mengganti &ldquo;video-sample.mp4&rdquo; dan &ldquo;audio-sample.mp3&rdquo; dengan file media yang ingin Anda tambahkan.<\/p><p>Namun, perlu diingat bahwa kalau Anda menambahkan media dari komputer lokal, file tersebut tidak akan bisa diakses ketika ditambahkan pada website. File media tersebut harus dihosting di server dulu agar bisa tersedia secara online.<\/p><p>Alternatifnya, Anda bisa menggunakan kode embed yang biasanya tersedia dari opsi share atau bagikan. Untuk video, kode embed biasanya menggunakan tag <strong>&lt;iframe&gt;<\/strong>.<\/p><p>Atau, kalau file media tersebut tersedia melalui URL langsung dengan akhiran format file seperti <strong>https:\/\/www.example.com\/path\/ke\/video-sample.mp4<\/strong>, Anda bisa langsung menambahkannya.<\/p><p>Nantinya, media akan ditampilkan dengan tombol yang bisa digunakan pengguna untuk memutar, menghentikan, atau mengatur volume. Berikut contohnya saat kami menggunakan tag <strong>&lt;iframe&gt;<\/strong>:<\/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;iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/j_xDNFrDl7A?si=vdcMihS00hIYOY8-\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen&gt;&lt;\/iframe&gt;<\/pre><p>Hasilnya akan langsung menampilkan <a href=\"\/id\/tutorial\/cara-embed-video-youtube\">video yang kami sematkan dari YouTube<\/a>:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"573\" height=\"423\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/embed-video-youtube.png\/public\" alt=\"tampilan chrome menunjukkan video youtube yang disematkan menggunakan iframe\" class=\"wp-image-41345\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/embed-video-youtube.png\/w=573,fit=scale-down 573w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/embed-video-youtube.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/embed-video-youtube.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 573px) 100vw, 573px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\">14. Mengubah Warna Teks<\/h3><p>Dengan mengubah warna teks, Anda bisa menandai bagian tulisan dengan warna tertentu atau membuat tampilannya lebih menarik. Di HTML, Anda bisa mengubah warna teks menggunakan atribut <code>style<\/code> dengan properti <code>color<\/code>.<\/p><p>Contoh kode untuk mengubah warna teks adalah sebagai berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;p style=\"color: violet;\"&gt;Teks ini diberi warna ungu.&lt;\/p&gt;\n&lt;p style=\"color: green;\"&gt;Teks ini diberi warna hijau.&lt;\/p&gt;<\/pre><p>Anda bisa mengganti warna dalam kode di atas menggunakan nama warna HTML (misalnya, <code>blue<\/code>, <code>green<\/code>) atau <a href=\"\/id\/tutorial\/daftar-kode-warna-html-dan-css\">kode warna HEX<\/a>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"512\" height=\"185\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/warna-teks.png\/public\" alt=\"tampilan chrome menunjukkan teks yang diberi warna\" class=\"wp-image-41346\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/warna-teks.png\/w=512,fit=scale-down 512w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/warna-teks.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/warna-teks.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\">15. Mengganti Font Teks<\/h3><p>Agar teks terlihat lebih menarik, Anda juga bisa mengubah gaya <a href=\"\/id\/tutorial\/font-untuk-website\">font HTML<\/a> menggunakan atribut <code>style<\/code> dan properti <code>font-family<\/code>. Cukup masukkan nama font yang Anda inginkan setelah properti <strong>font-family<\/strong>.<\/p><p>Berikut contohnya:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;p style=\"font-family: Arial;\"&gt;Teks dalam kalimat ini menggunakan font Arial.&lt;\/p&gt;\n&lt;p style=\"font-family: Courier New;\"&gt;Teks dalam kalimat ini menggunakan font Courier New.&lt;\/p&gt;<\/pre><p>Agar teks ditampilkan dengan benar, pastikan Anda memilih font yang tersedia di sebagian besar perangkat agar tampilannya tetap konsisten. Ini hasilnya saat kami mencoba contoh kode HTML di atas:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"525\" height=\"187\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/font-di-browser.png\/public\" alt=\"tampilan font yang diganti gayanya di google chrome\" class=\"wp-image-41347\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/font-di-browser.png\/w=525,fit=scale-down 525w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/font-di-browser.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/font-di-browser.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 525px) 100vw, 525px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\">16. Menyorot Teks dengan Warna<\/h3><p>Berbeda dengan mengganti warna teks, menyoroti teks dengan warna tertentu memberikan efek highlighter seperti saat Anda menandai teks di buku menggunakan stabilo.<\/p><p>Untuk kodenya, gunakan atribut <code>style<\/code> properti <code>background-color<\/code>. Tag <strong>&lt;span&gt;<\/strong> digunakan agar teks yang diberi sorotan tetap sebaris dengan teks lainnya.<\/p><p>Coba sisipkan kode berikut ini dalam file HTML Anda:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Dengan &lt;span style=\"background-color: yellow;\"&gt;AI website builder Hostinger&lt;\/span&gt;, Anda bisa membuat website dalam hitungan menit.<\/pre><p>Untuk menyorot teks dengan pilihan warna lain, Anda juga bisa menggunakan nama warna HTML. Seperti ini hasilnya ketika kami mencoba kode tersebut:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"633\" height=\"171\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-highlight-teks.png\/public\" alt=\"tampilan chrome dengan teks yang disorot\" class=\"wp-image-41348\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-highlight-teks.png\/w=633,fit=scale-down 633w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-highlight-teks.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/contoh-highlight-teks.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 633px) 100vw, 633px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\">17. Mengubah Ukuran Teks<\/h3><p>Masih dari kategori kustomisasi teks, Anda bisa mengubah ukuran font untuk memberikan penekanan pada bagian tertentu atau menyesuaikannya dengan <a href=\"\/id\/tutorial\/desain-website\">desain website<\/a>.<\/p><p>Untuk mengaturnya, gunakan properti <code>font-size<\/code> lalu tentukan ukurannya dalam piksel menggunakan <code>px<\/code>.<\/p><p>Ini contoh kode untuk mengubah ukuran teks:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;p style=\"font-size: 20px;\"&gt;Teks ini diformat dengan ukuran 20px.&lt;\/p&gt;\n&lt;p style=\"font-size: 32px;\"&gt;Teks ini diformat dengan ukuran 32px.&lt;\/p&gt;<\/pre><p>Sesuaikan lagi ukuran font dengan kebutuhan konten website Anda. Berikut hasil kode di atas saat dicoba:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"573\" height=\"240\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/ukuran-font.png\/public\" alt=\"tampilan teks yang diubah ukurannya di web browser chrome\" class=\"wp-image-41350\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/ukuran-font.png\/w=573,fit=scale-down 573w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/ukuran-font.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/ukuran-font.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 573px) 100vw, 573px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\">18. Mengatur Perataan Teks<\/h3><p>Dengan mengatur perataan atau alignment teks, Anda bisa memformat teks agar ditampilkan rata kiri, tengah, atau kanan.<\/p><p>Untuk pemformatan ini, gunakan properti <code>text-align<\/code> dalam kode HTML Anda. Contohnya adalah sebagai berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;p style=\"text-align: left;\"&gt;Teks ini diformat dengan alignment rata kiri.&lt;\/p&gt;\n&lt;p style=\"text-align: center;\"&gt;Teks ini diformat dengan alignment rata tengah.&lt;\/p&gt;\n&lt;p style=\"text-align: right;\"&gt;Teks ini diformat dengan alignment rata kanan.&lt;\/p&gt;<\/pre><p>Kode di atas akan mengatur teks pertama dengan format rata kiri, lalu teks kedua rata tengah, dan teks ketiga rata kanan. Berikut hasilnya saat ditampilkan di web browser:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"741\" height=\"245\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/alignment-teks.png\/public\" alt=\"tampilan contoh format alignment teks\" class=\"wp-image-41351\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/alignment-teks.png\/w=741,fit=scale-down 741w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/alignment-teks.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/alignment-teks.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 741px) 100vw, 741px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\">19. Mencoret Sebagian Teks<\/h3><p>Format teks yang dicoret mungkin diperlukan saat Anda perlu menampilkan informasi yang sudah diralat, atau perubahan yang membutuhkan riwayat pengeditan.<\/p><p>Gunakan tag <strong>&lt;s&gt;<\/strong> kalau Anda ingin kode yang lebih sederhana dengan makna semantik yang menandakan bahwa teks yang dicoret sudah tidak relevan.<\/p><p>Atau, gunakan properti <code>text-decoration<\/code> dengan nilai <code>line-through<\/code> kalau hanya ingin memberikan gaya coretan pada teks.<\/p><p>Contoh penggunaannya adalah seperti berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;p&gt;Baris ini menampilkan teks yang &lt;s&gt;dicoret menggunakan tag s&lt;\/s&gt; untuk ralat informasi.&lt;\/p&gt;\n&lt;p&gt;Sementara itu, baris ini menampilkan teks yang &lt;span style=\"text-decoration: line-through;\"&gt;dicoret menggunakan style CSS&lt;\/span&gt;, yang hasilnya tidak begitu berbeda.&lt;\/p&gt;<\/pre><p>Meskipun tidak ada perbedaan visual dalam output yang dihasilkan kedua baris kode di atas, penggunaan tag <strong>&lt;s&gt;<\/strong> dan properti <strong>text-decoration<\/strong> memiliki fungsi yang berbeda.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"777\" height=\"198\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/mencoret-teks-dalam-kode.png\/public\" alt=\"tampilan teks yang dicoret di chrome\" class=\"wp-image-41354\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/mencoret-teks-dalam-kode.png\/w=777,fit=scale-down 777w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/mencoret-teks-dalam-kode.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/mencoret-teks-dalam-kode.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/mencoret-teks-dalam-kode.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 777px) 100vw, 777px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-20-membuat-kutipan\">20. Membuat Kutipan<\/h3><p>Apabila perlu menyertikan kutipan yang diambil dari sumber lain, Anda bisa menggunakan tag <strong>&lt;blockquote&gt;<\/strong> untuk kutipan panjang, atau <strong>&lt;q&gt;<\/strong> untuk kutipan singkat. Tag ini bisa membuat konten website Anda terlihat lebih kredibel dan mudah dibaca.<\/p><p>Berikut contoh kode yang bisa digunakan:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;blockquote&gt;\n  \"Aku rela di penjara asalkan bersama buku, karena dengan buku aku bebas.\" - Mohammad Hatta.\n&lt;\/blockquote&gt;\n\n&lt;p&gt;Bung Karno pernah berkata, &lt;q&gt;Tuhan tidak mengubah nasib suatu bangsa sebelum bangsa itu mengubah nasibnya sendiri.&lt;\/q&gt;&lt;\/p&gt;<\/pre><p>Kalau menggunakan <strong>&lt;blockquote&gt;<\/strong>, Anda bisa menambahkan kutipan panjang yang biasanya akan diatur agak menjorok ke kanan secara otomatis oleh web browser. Sementara itu, tag <strong>&lt;q&gt;<\/strong> digunakan untuk kutipan singkat dalam teks paragraf.<\/p><p>Berikut contoh hasilnya saat kami mencobanya:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"804\" height=\"210\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/kutipan-contoh.png\/public\" alt=\"tampilan contoh teks kutipan di google chrome\" class=\"wp-image-41358\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/kutipan-contoh.png\/w=804,fit=scale-down 804w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/kutipan-contoh.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/kutipan-contoh.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/kutipan-contoh.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 804px) 100vw, 804px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-21-menambahkan-tooltip\">21. Menambahkan Tooltip<\/h3><p><a href=\"https:\/\/developer.android.com\/develop\/ui\/views\/components\/tooltips?hl=id\" target=\"_blank\" rel=\"noopener\">Tooltip<\/a> adalah teks tambahan yang muncul ketika pengguna mengarahkan kursor ke elemen tertentu. Dengan menambahkan atribut <code>title<\/code> pada elemen HTML, Anda bisa memberikan penjelasan atau informasi singkat yang muncul sebagai tooltip.<\/p><p>Di bawah ini adalah kode untuk menambahkan tooltip pada tombol:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;button title=\"Klik tombol ini untuk mengirim formulir\"&gt;Kirim&lt;\/button&gt;<\/pre><p>Dengan kode tersebut, pengguna akan melihat teks keterangan yang muncul ketika mereka mengarahkan kursor ke tombol <strong>Kirim<\/strong>. Fitur ini bisa digunakan untuk menambahkan penjelasan singkat pada elemen halaman tertentu.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"500\" height=\"189\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/tooltip-pada-tombol-kirim.png\/public\" alt=\"tampilan tooltip yang muncul saat kursor diarahkan ke tombol kirim\" class=\"wp-image-41361\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/tooltip-pada-tombol-kirim.png\/w=500,fit=scale-down 500w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/tooltip-pada-tombol-kirim.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/tooltip-pada-tombol-kirim.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-22-menambahkan-kolom-tanggal\">22. Menambahkan Kolom Tanggal<\/h3><p>Kolom tanggal berguna ketika Anda memerlukan input tanggal dari pengguna, misalnya untuk data tanggal lahir. Anda bisa menggunakan kolom input khusus di HTML menggunakan <code>&lt;input type=\"date\"&gt;<\/code>.<\/p><p>Melalui elemen ini, pengguna bisa memilih tanggal dari kalender bawaan browser untuk mengisi tanggal secara lebih mudah. Berikut contoh kodenya:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;label for=\"tanggal-lahir\"&gt;Tanggal Lahir:&lt;\/label&gt;\n&lt;input type=\"date\" id=\"tanggal-lahir\" name=\"tanggal-lahir\"&gt;<\/pre><p>Tag dalam kode di atas akan mengaktifkan kotak tanggal dengan ikon kalender. Ketika diklik, pengguna bisa langsung memilih tanggal dari kalender tersebut. Ini contoh hasilnya:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"494\" height=\"421\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/kalender-browser.png\/public\" alt=\"tampilan contoh menampilkan tanggal di browser\" class=\"wp-image-41362\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/kalender-browser.png\/w=494,fit=scale-down 494w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/kalender-browser.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/kalender-browser.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 494px) 100vw, 494px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-23-menampilkan-teks-superscript-dan-subscript\">23. Menampilkan Teks Superscript dan Subscript<\/h3><p>Superscript adalah teks yang ditampilkan lebih kecil di atas teks utama, seperti saat Anda menulis pangkat matematika. Sementara itu, subscript adalah kebalikannya, yaitu teks lebih kecil yang berada di bawah teks utama, seperti dalam rumus kimia.<\/p><p>Di HTML, Anda bisa menggunakan tag <strong>&lt;sup&gt;<\/strong> untuk teks superscript, serta <strong>&lt;sub&gt;<\/strong> untuk teks subscript. Untuk membuat superscript dan subcript, ini contoh kodenya:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;p&gt;Rumus luas lingkaran adalah &pi; r&lt;sup&gt;2&lt;\/sup&gt;.&lt;\/p&gt;\n&lt;p&gt;Nama elemen kimia air adalah H&lt;sub&gt;2&lt;\/sub&gt;O.&lt;\/p&gt;<\/pre><p>Di baris pertama, tag <strong>&lt;sup&gt;<\/strong> digunakan untuk menampilkan angka 2 sebagai pangkat dua dalam rumus luas lingkaran. Di baris kedua, tag <strong>&lt;sub&gt;<\/strong> digunakan untuk menampilkan angka 2 di bawah teks H dalam elemen kimia air, H&#8322;O.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"499\" height=\"194\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/superscript-dan-subscript.png\/public\" alt=\"tampilan teks superscript dan subscript luas lingkaran dan elemen air\" class=\"wp-image-41364\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/superscript-dan-subscript.png\/w=499,fit=scale-down 499w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/superscript-dan-subscript.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/superscript-dan-subscript.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 499px) 100vw, 499px\" \/><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-tips-membuat-hasil-kode-html-lebih-menarik\">Tips Membuat Hasil Kode HTML Lebih Menarik<\/h2><p>Bagaimana, Anda sudah mulai memahami penggunaan berbagai elemen HTML dasar setelah mempelajari contoh-contoh kode di atas? Setelah ini, Anda mungkin ingin menyempurnakan kode Anda untuk membuat halaman web yang lebih menarik dan interaktif.<\/p><p>Meskipun Anda bisa menggunakan HTML untuk menyusun struktur halaman web, hasilnya mungkin akan terlihat monoton dan statis. Nah, untuk menambahkan gaya, Anda bisa <a href=\"\/id\/tutorial\/cara-membuat-javascript-di-html\">menggabungkan HTML dengan CSS dan JavaScript<\/a>.<\/p><p>Berikut beberapa tips dari kami yang bisa diikuti untuk memaksimalkan tampilan dan fungsi elemen HTML yang sudah Anda buat.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-tambahkan-css-untuk-memberikan-style\">1. Tambahkan CSS untuk Memberikan Style<\/h3><p><a href=\"\/id\/tutorial\/apa-itu-css\">CSS (Cascading Style Sheets)<\/a> adalah bahasa yang dirancang untuk menyempurnakan tampilan visual elemen yang dibuat menggunakan HTML. Anda bisa mengganti warna, font, jarak tulisan, dan berbagai elemen lainnya menggunakan CSS.<\/p><p>Di bawah ini, kami punya contoh CSS sederhana yang bisa Anda gunakan untuk mempercantik tampilan teks dan tombol:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"id\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n  &lt;title&gt;Contoh Coding HTML&lt;\/title&gt;\n  &lt;style&gt;\n    body {\n      font-family: Arial, sans-serif;\n      margin: 0;\n      padding: 0;\n      height: 100vh;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    h1 {\n      color: #8000ff;\n      margin-top: 50px;\n      text-align: center;\n    }\n\n    .tombol-kustom {\n      background-color: #008CBA; \/* Warna latar tombol *\/\n      color: white;\n      padding: 10px 20px;\n      border: none;\n      border-radius: 5px;\n      cursor: pointer;\n      font-size: 16px;\n      margin-top: 20px; \/* Memberi jarak antara teks dan tombol *\/\n    }\n\n    .tombol-kustom:hover {\n      background-color: #005f73; \/* Warna latar tombol saat kursor diarahkan *\/\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;h1&gt;Selamat Datang di Hostinger!&lt;\/h1&gt;\n  &lt;button class=\"tombol-kustom\"&gt;Daftar Akun&lt;\/button&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><p>Kode CSS ditambahkan di dalam tag <strong>&lt;style&gt;<\/strong>, yang berfungsi untuk mengatur warna, jenis font, serta peletakan judul dengan tag <code>h1<\/code>.<\/p><p>Untuk tombol, ada class <code>.tombol-kustom<\/code> yang berfungsi untuk mengatur warna latar, warna teks, dan efek hover saat kursor diarahkan padanya. Hasilnya akan seperti ini:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"811\" height=\"315\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/html-yang-sudah-diberi-css.png\/public\" alt=\"tampilan teks html yang sudah diberi style dengan css\" class=\"wp-image-41365\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/html-yang-sudah-diberi-css.png\/w=811,fit=scale-down 811w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/html-yang-sudah-diberi-css.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/html-yang-sudah-diberi-css.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/html-yang-sudah-diberi-css.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 811px) 100vw, 811px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-2-berikan-animasi-interaktif-dengan-javascript\">2. Berikan Animasi Interaktif dengan JavaScript<\/h3><p>Setelah menambahkan CSS, Anda bisa menggunakan JavaScript agar elemen HTML Anda lebih interaktif dan dinamis. Contohnya, Anda bisa membuat tombol yang menampilkan pesan atau efek interaktif lainnya saat diklik.<\/p><p>Berikut contoh sederhana yang menggunakan JavaScript untuk menampilkan pesan:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n  &lt;style&gt;\n    .tombol-animasi {\n      padding: 10px 20px;\n      background-color: #FF5722;\n      color: white;\n      border: none;\n      border-radius: 5px;\n      cursor: pointer;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;button class=\"tombol-animasi\" onclick=\"tampilkanPesan()\"&gt;Klik tombol ini!&lt;\/button&gt;\n\n&lt;script&gt;\n  function tampilkanPesan() {\n    alert(\"Halo, pesan ini muncul setelah tombol oranye diklik.\");\n  }\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><p>Dalam contoh di atas, JavaScript ditambahkan dengan fungsi <code>tampilkanPesan()<\/code> yang akan menampilkan pesan pop-up ketika tombol diklik. Kemudian, event <code>onclick<\/code> pada tombol memicu fungsi tersebut saat ada interaksi pengguna.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"663\" height=\"261\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/elemen-tombol-interaktif-javascript.png\/public\" alt=\"tampilan elemen tombol interaktif yang ditambahkan menggunakan javascript\" class=\"wp-image-41366\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/elemen-tombol-interaktif-javascript.png\/w=663,fit=scale-down 663w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/elemen-tombol-interaktif-javascript.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/elemen-tombol-interaktif-javascript.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-3-gunakan-font-kustom\">3. Gunakan Font Kustom<\/h3><p>Berbeda dengan contoh kode untuk mengganti font di bagian sebelumnya, Anda bisa menggunakan font kustom, misalnya dari Google Fonts. Di platform ini, ada banyak pilihan font yang bisa langsung Anda integrasikan dalam kode HTML.<\/p><p>Berikut contoh menggunakan font kustom dari Google Fonts:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&amp;display=swap\" rel=\"stylesheet&amp;display=swap\"&gt;\n  &lt;style&gt;\n    body {\n      font-family: 'Comic Neue', sans-serif;\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;h2&gt;Judul Ini Diformat Menggunakan Font Kustom&lt;\/h2&gt;\n  &lt;p&gt;Teks dalam baris ini menggunakan font 'Comic Neue' yang diintegrasikan dari Google Fonts.&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><p>Font <a href=\"https:\/\/fonts.google.com\/specimen\/Comic+Neue\" target=\"_blank\" rel=\"noopener\">Comic Neue<\/a> diimpor dari <strong>Google Fonts<\/strong> dan diterapkan ke seluruh halaman menggunakan CSS. Apabila ingin mengganti font dalam kode di atas, Anda bisa menggunakan kode embed font pilihan Anda di Google Fonts, lalu mengganti nama font di bagian <code>font-family<\/code>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"663\" height=\"218\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/font-kustom.png\/public\" alt=\"tampilan tulisan di google chrome yang menggunakan font comic neue\" class=\"wp-image-41367\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/font-kustom.png\/w=663,fit=scale-down 663w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/font-kustom.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/font-kustom.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 663px) 100vw, 663px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-4-tambahkan-hover-dan-transisi\">4. Tambahkan Hover dan Transisi<\/h3><p>Hover adalah efek yang muncul saat kursor diarahkan ke suatu elemen, sedangkan transisi berfungsi untuk mengatur proses menampilkannya. Sebagai contoh, Anda bisa membuat tombol yang akan di-zoom sedikit saat kursor diarahkan padanya.<\/p><p>Contoh penggunaan efek hover dan transisi adalah sebagai berikut:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n  &lt;style&gt;\n    .gambar-hover {\n      width: 500px;\n      transition: transform 0.3s;\n    }\n\n    .gambar-hover:hover {\n      transform: scale(1.1);\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;img src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/b2d70090-d139-422e-a50d-f6b27384a600\/public\" alt=\"Contoh Gambar\" class=\"gambar-hover\"&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><p>Class <code>.gambar-hover<\/code> memiliki properti <code>transition<\/code> untuk mengatur durasi efek. Properti <code>transform: scale(1.1)<\/code> pada efek hover akan memperbesar gambar sedikit saat kursor diarahkan padanya.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"608\" height=\"452\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/efek-hover.png\/public\" alt=\"tampilan contoh efek hover gambar untuk memperbesarnya\" class=\"wp-image-41379\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/efek-hover.png\/w=608,fit=scale-down 608w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/efek-hover.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/11\/efek-hover.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 608px) 100vw, 608px\" \/><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-kesimpulan\">Kesimpulan<\/h2><p>Setelah mempelajari contoh kode HTML di artikel ini, sekarang Anda pun siap membuat halaman web yang fungsional. Jangan lupa, Anda bisa menggabungkan HTML, CSS, dan JavaScript agar halaman web Anda lebih menarik secara visual dan interaktif bagi pengguna.<\/p><p>Nah, kalau sudah lebih mahir menggunakan HTML, Anda bisa langsung mempraktikkannya untuk <a href=\"https:\/\/blog.hostinger.io\/co-id-tutorial\/cara-membuat-website-dengan-html\" target=\"_blank\" rel=\"noopener\">membuat website HTML<\/a>. Kemudian, kalau website Anda memiliki fitur login, <a href=\"https:\/\/blog.hostinger.io\/co-id-tutorial\/php-login-session\" target=\"_blank\" rel=\"noopener\">buat PHP login session<\/a> untuk menyediakan akses yang lebih mudah dan aman bagi pengguna.<\/p><p>Terakhir, jangan lupa mengonlinekan website Anda menggunakan <a href=\"\/id\/web-hosting\">layanan hosting yang optimal<\/a> dan nama domain agar bisa diakses dari mana saja. Di Hostinger, Anda akan mendapatkan hosting yang sudah dilengkapi domain gratis selama satu tahun, loh! Selamat mencoba dan semoga berhasil!<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/id\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-29634\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>HyperText Markup Language, atau yang lebih populer disebut HTML, adalah bahasa markup yang digunakan untuk menyusun struktur halaman web. Anda bisa mengatur teks, menambahkan gambar dan link, hingga membuat formulir. Meskipun membutuhkan coding, HTML sebenarnya mudah dipelajari karena bukan merupakan bahasa pemrograman. Tag-tag HTML juga cukup jelas, karena memiliki struktur yang sederhana dan teratur. Kalau [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/id\/tutorial\/contoh-coding-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":"23 Contoh Coding HTML Sederhana yang Bisa Langsung Dicoba","rank_math_description":"Mau mempelajari kode HTML tapi bingung harus mulai dari mana? Baca contoh coding HTML yang sudah jadi di artikel ini untuk langsung dicoba!","rank_math_focus_keyword":"contoh html","footnotes":""},"categories":[4983],"tags":[],"class_list":["post-41283","post","type-post","status-publish","format-standard","hentry","category-web-development"],"hreflangs":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/41283","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=41283"}],"version-history":[{"count":71,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/41283\/revisions"}],"predecessor-version":[{"id":43172,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/41283\/revisions\/43172"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media?parent=41283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/categories?post=41283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/tags?post=41283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}