Belajar HTML #2: Struktur dasar dan Tag HTML
Hai! Semoga semangat belajarnya tetap tinggi. ? Kali ini kita akan membahas struktur dasar HTML lebih dalam dan mengenal beberapa tag penting yang wajib kamu ketahui saat membuat halaman web. Yuk, kita mulai!
Mengapa Struktur Itu Penting?
Struktur HTML menentukan bagaimana konten akan ditampilkan di browser. Kalau HTML-mu tertata rapi, tidak hanya memudahkan kamu membaca kodenya, tapi juga memudahkan browser untuk merender halaman dengan benar.
Struktur Dasar HTML
Coba perhatikan kode berikut:
Mari kita pecah satu per satu:
-
Ini memberi tahu browser bahwa kita menggunakan HTML5. Penting banget, jangan lupa menulis ini di bagian atas setiap file HTML. -
Semua elemen HTML berada di dalam tag ini. Ini adalah elemen paling luar. -
Bagian ini berisi informasi tentang halaman, seperti judul (dengan</code>) dan metadata (dengan <code><meta></code>).</p> </li> <li> <p><strong><code><body></code></strong><br>Semua konten yang terlihat oleh pengguna berada di sini, seperti teks, gambar, atau video.</p> </li> </ol> <hr> <h4>Tag Penting dalam HTML</h4> <p>Berikut adalah beberapa tag dasar yang wajib kamu tahu:</p> <ol> <li> <p><strong>Tag Heading (<code><h1></code> hingga <code><h6></code>)</strong><br>Digunakan untuk judul. Ukurannya dari besar ke kecil:</p> <div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"> <div class=""> <pre data-language="html"><h1>Ini Heading 1</h1> <h2>Ini Heading 2</h2> <h3>Ini Heading 3</h3> </pre> </div> </div> </li> <li> <p><strong>Tag Paragraf (<code><p></code>)</strong><br>Untuk menulis teks paragraf:</p> <div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"> <div class=""> <pre data-language="html"><p>Belajar HTML itu menyenangkan!</p> </pre> </div> </div> </li> <li> <p><strong>Tag Tautan (<code><a></code>)</strong><br>Membuat hyperlink:</p> <div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"> <div class=""> <pre data-language="html"><a href="https://www.code80vity.com">Kunjungi Code80vity</a></pre> </div> </div> </li> <li> <p><strong>Tag Gambar (<code><img></code>)</strong><br>Menampilkan gambar:</p> <div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"> <div class=""> <pre data-language="html"><img src="gambar.jpg" alt="Deskripsi Gambar"> </pre> </div> </div> <ul> <li><strong><code>src</code></strong>: Lokasi file gambar.</li> <li><strong><code>alt</code></strong>: Teks alternatif jika gambar gagal dimuat.</li> </ul> </li> <li> <p><strong>Tag Daftar (<code><ul></code> dan <code><ol></code>)</strong><br>Membuat daftar bullet atau nomor:</p> <div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"> <div class=""> <pre data-language="html"><!-- Daftar tidak berurutan --> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <!-- Daftar berurutan --> <ol> <li>Langkah 1</li> <li>Langkah 2</li> <li>Langkah 3</li> </ol> </pre> </div> </div> </li> </ol> <hr> <h4>Praktik Langsung</h4> <p>Coba buat file baru dan tambahkan kode berikut:</p> <div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950"> <div class=""> <pre data-language="html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Belajar HTML Selamat Datang di Belajar HTML
Ini adalah contoh struktur dasar HTML dengan beberapa tag penting:
Daftar Teknologi
- HTML
- CSS
- JavaScript
Gambar Favorit
Tautan
Kunjungi Code80vity untuk belajar lebih banyak.
Buka file ini di browser. Lihat hasilnya dan coba edit beberapa bagian, misalnya tambahkan daftar lain atau ganti gambar.
Tantangan untuk Kamu
- Buat daftar baru tentang hobi favoritmu menggunakan
- Tambahkan gambar lain dengan tag
- Buat tautan ke situs favoritmu menggunakan
.
Artikel ini adalah fondasi penting untuk memahami elemen dasar HTML. Jangan lewatkan pembelajaran ini sebelum lanjut ke tutorial berikutnya di www.code80vity.com. Yuk, terus berlatih dan eksplorasi! ?
Tutorial Terkait
Belajar HTML #6: Membuat Formulir di HTML
Halo teman-teman! Semoga kalian semua sehat dan semangat belajar. Kali ini kita akan bahas sesuatu y...
Belajar HTML #5: Cara Menambahkan Gambar dan Tautan di HTML
Hai lagi! Gimana belajarnya? Semoga makin lancar, ya. Kali ini kita akan bahas cara membuat tabel di...
Belajar HTML #4: Cara Menambahkan Gambar dan Tautan di HTML
Halo lagi! Kali ini kita bakal bahas tentang daftar atau list di HTML. Kalau kamu pernah lihat websi...