
Mungkin Anda pernah bertanya-tanya, bagaimana sebuah website bisa terbentuk? Jawabannya ada pada HTML. HTML, atau HyperText Markup Language, adalah fondasi utama dalam membangun struktur halaman website. Dengan memahami HTMLdan SEO, Anda dapat menciptakan kerangka sederhana hingga kompleks yang menjadi dasar tampilan web.
Bagi pemula, mengenal HTML adalah langkah awal yang penting untuk membuka pintu ke pengembangan web. Artikel ini akan membantu Anda memahami dasar-dasar HTML serta elemen utamanya, sehingga Anda dapat mulai membangun website dengan percaya diri. Mari kita mulai dari awal!
Apa Itu HTML dan Mengapa Penting?
HTML, atau HyperText Markup Language, adalah bahasa markup standar yang digunakan untuk membuat struktur dasar halaman website. Semua elemen visual yang kita lihat di sebuah website—judul, paragraf, gambar, bahkan tabel—disusun menggunakan HTML. Bisa dibilang, HTML adalah “kerangka” dari sebuah halaman web, seperti tulang yang menopang tubuh manusia.
Sebagai pemula dalam pengembangan web, memahami HTML sangat penting karena ini merupakan titik awal dalam membangun website. HTML memungkinkan Anda untuk membuat konten terstruktur yang dapat diakses oleh browser. Tanpa HTML, tidak ada website yang bisa muncul dengan rapi dan fungsional di layar pengguna.
Definisi HTML
HTML adalah bahasa markup yang dirancang untuk mengorganisir dan menampilkan konten di web. Setiap elemen dalam HTML menggunakan tag untuk memberi tahu browser bagaimana menampilkan konten tersebut. Misalnya, tag <h1>
digunakan untuk membuat judul utama, sedangkan tag <p>
digunakan untuk paragraf teks. Anda dapat membaca lebih dalam tentang pengertian HTML di Exabytes.
HTML juga memungkinkan pengembang untuk menyisipkan tautan, menyematkan gambar, atau membuat daftar dengan berbagai elemen yang mudah digunakan.
Fungsi Utama HTML
HTML adalah fondasi dari setiap halaman website. Berikut adalah fungsi utamanya:
- Struktur Halaman Web: HTML menentukan bagaimana konten diatur pada halaman.
- Mendukung Multimedia: Anda dapat menyisipkan gambar, video, dan audio ke dalam sebuah halaman.
- Interaksi Pengguna: HTML memungkinkan tombol, form, atau link yang dapat digunakan oleh pengguna.
- Meningkatkan SEO: HTML membantu mesin pencari mengidentifikasi dan memahami konten website.
Banyak pemula menganggap HTML hanya untuk desain, tetapi sebenarnya HTML memainkan peran penting dalam membuat website yang dapat diakses oleh berbagai perangkat dan browser. Untuk memahami fungsi lebih lanjut tentang HTML, kunjungi Kompas Skola.
Mengapa Penting Memahami HTML?
Anda mungkin bertanya-tanya, “Kenapa saya harus belajar HTML?” Jawabannya sederhana: untuk membuat dan mengelola website. Meskipun sekarang ada banyak platform seperti WordPress atau Wix yang dapat membuat website tanpa coding, pemahaman HTML memberi Anda lebih banyak kontrol.
Berikut adalah alasan utama mengapa belajar HTML bermanfaat:
- Dasar untuk Belajar Coding Lainnya: HTML adalah langkah pertama sebelum belajar CSS dan JavaScript.
- Menyesuaikan Website: Dengan HTML, Anda dapat membuat website yang sesuai kebutuhan, bukan hanya template standar.
- Memperbaiki Masalah Web: Jika terjadi bug, pemahaman HTML membantu Anda untuk memperbaikinya secara langsung.
- Meningkatkan Skill Digital: Dalam era digital, memahami HTML adalah keterampilan yang banyak dicari.
Untuk mendapatkan gambaran lebih rinci tentang kegunaan HTML, Anda bisa membaca artikel di Hostinger.
HTML bukan hanya alat untuk programmer, tapi juga untuk siapa saja yang ingin membangun kehadiran online dengan lebih fleksibel dan profesional.
Struktur Dasar Dokumen HTML
HTML adalah pilar utama dari setiap halaman website, menyediakan struktur yang memungkinkan konten menjadi terlihat dan dapat diakses oleh pengguna. Dalam membuat halaman web menggunakan HTML, ada beberapa elemen kunci yang harus Anda pahami. Mari kita bahas satu per satu.
Deklarasi Doctype
Deklarasi <!DOCTYPE html>
adalah langkah pertama dalam setiap dokumen HTML. Apa fungsinya? Deklarasi ini memberitahu browser tentang versi HTML yang digunakan sehingga dapat menampilkan konten dengan benar. Bayangkan ini seperti memberikan petunjuk kepada koki tentang resep yang akan dimasak.
Sebagai contoh:
<!DOCTYPE html>
Pada HTML5, deklarasi ini sangat sederhana, cukup dengan satu baris seperti di atas. Dengan menggunakan deklarasi ini, Anda memastikan bahwa browser mematuhi standar rendering modern. Jika ingin mempelajari lebih lanjut, kunjungi artikel di DomaiNesia yang menjelaskan lebih mendalam.
Elemen <html>
Elemen <html>
adalah akar dari semua elemen dalam dokumen HTML Anda. Elemen ini membungkus semua konten lain di halaman website, seperti tubuh sebuah buku yang mencakup semua bab dan kata.
Contoh penggunaannya:
<html>
<!-- Isi dokumen HTML lainnya -->
</html>
Elemen ini memiliki atribut penting seperti lang
yang digunakan untuk menentukan bahasa dokumen. Dengan atribut ini, Anda membantu mesin pencari dan alat-alat aksesibilitas lainnya memahami konten halaman.
Elemen <head>
Bagian <head>
dalam sebuah dokumen HTML adalah tempat untuk metadata—informasi yang tidak langsung terlihat oleh pengguna tetapi penting untuk browser. Ini seperti menyusun daftar pustaka sebelum pembaca membuka halaman pertama buku. Berikut adalah komponen khas dalam <head>
:
- Tag
<title>
: Menentukan judul halaman yang muncul di tab browser. - Tag
<meta>
: Memberikan deskripsi halaman, informasi charset, dan data lainnya. - Link CSS: Menghubungkan file CSS yang mengatur tampilan halaman.
Contoh kode sederhana:
<head>
<title>Belajar HTML</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
Informasi lebih lengkap tentang elemen ini tersedia di PetaNIKode.
Elemen <body>
Elemen <body>
menampung semua konten utama yang biasanya dilihat oleh pengguna, seperti teks, gambar, video, tautan, dan sebagainya. Jika dokumen HTML diibaratkan rumah, elemen <body>
adalah ruang tamu tempat semua orang berkumpul.
Berikut adalah contoh struktur dasar elemen <body>
:
<body>
<h1>Selamat Datang di Website Saya</h1>
<p>Ini adalah contoh paragraf.</p>
<img src="gambar.jpg" alt="Contoh Gambar">
</body>
Elemen ini juga dapat dilengkapi dengan berbagai atribut seperti onload
untuk memicu aktivitas saat halaman dimuat. Penjelasan lebih rinci tentang fungsi elemen <body>
dapat dibaca di MDN Web Docs.
Dengan memahami elemen-elemen ini, Anda telah memiliki dasar yang kuat untuk membangun dokumen HTML dengan struktur yang baik. Di bagian berikutnya, kita akan membahas elemen-elemen tambahan yang memungkinkan Anda memperluas fungsionalitas website.
Elemen HTML Penting untuk Pemula
HTML terdiri dari berbagai elemen yang berfungsi untuk menyusun dan menampilkan konten di halaman web. Dalam bagian ini, kita akan membahas beberapa elemen HTML dasar yang sering digunakan, mulai dari heading hingga daftar, agar Anda bisa memahami cara membangun struktur halaman yang jelas dan terorganisir.
Tag Heading (<h1>
hingga <h6>
)
Tag heading digunakan untuk memberikan struktur hierarki pada judul dan subjudul konten. Heading membantu pengguna dan mesin pencari memahami topik utama di halaman. Ada enam tingkatan heading:
<h1>
: Judul utama, paling penting dan terbesar.<h2>
: Subjudul utama.<h3>
hingga<h6>
: Untuk subjudul atau bagian dengan kepentingan lebih rendah.
Sebagai contoh:
<h1>Judul Utama</h1>
<h2>Subjudul</h2>
<h3>Subbagian</h3>
Menggunakan heading dengan tepat akan meningkatkan keterbacaan dan juga relevansi SEO. Penjelasan lebih mendalam bisa Anda temukan di W3Schools atau MDN Web Docs.
Tag Paragraf (<p>
)
Tag <p>
digunakan untuk menulis teks dalam bentuk paragraf. Elemen ini membantu memisahkan teks menjadi bagian yang lebih mudah dibaca.
Contoh penggunaan:
<p>Ini adalah sebuah paragraf dalam HTML. Paragraf memberikan struktur narasi pada konten web.</p>
Menempatkan konten dalam paragraf membuatnya tampak lebih rapi dan profesional. Pelajari lebih detail mengenai penggunaan tag ini di Petani Kode.
Tag Gambar (<img>
)
Gambar pada halaman web disisipkan menggunakan tag <img>
. Tag ini membutuhkan atribut wajib seperti:
src
: Lokasi atau URL gambar.alt
: Teks alternatif yang berguna jika gambar tidak dapat ditampilkan.
Berikut adalah contoh kode:
<img src="gambar.png" alt="Deskripsi Gambar">
Pastikan Anda menambahkan atribut alt
untuk meningkatkan aksesibilitas dan SEO. Informasi lebih lengkap mengenai tag ini bisa Anda temukan di Petani Kode atau DomaiNesia.
Tag Tautan (<a>
)
Tag <a>
digunakan untuk membuat tautan ke halaman lain, file, atau bahkan bagian tertentu dari halaman itu sendiri. Atribut utama yang perlu Anda sertakan adalah href
, yang berisi URL tujuan.
Contoh penggunaan:
<a href="https://www.contoh.com">Kunjungi Website Ini</a>
Anda juga dapat membuat tautan membuka di tab baru dengan menambahkan atribut target="_blank"
. Pelajari lebih lanjut di Petani Kode.
Daftar Tak Berurutan dan Berurutan
HTML menyediakan dua jenis daftar utama:
- Daftar Tak Berurutan menggunakan tag
<ul>
untuk membuat poin berbentuk bullet. - Daftar Berurutan menggunakan tag
<ol>
untuk membuat poin bernomor.
Setiap item dalam daftar menggunakan tag <li>
:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
Daftar cocok untuk membuat poin-poin atau langkah-langkah. Informasi tambahan tersedia di Petani Kode.
Dengan memahami elemen-elemen dasar ini, Anda sudah siap untuk mulai membuat website sederhana yang rapi dan terstruktur. Detil penggunaan yang lebih mendalam dapat membantu Anda meningkatkan pengalaman pengguna di website Anda.
HTML5 dan Elemen Semantik Baru
HTML5 membawa beberapa elemen semantik yang dirancang untuk memberikan struktur lebih jelas dan bermakna pada dokumen web. Elemen-elemen ini memudahkan pengembang dalam menyusun konten dan membantu browser serta mesin pencari memahami tujuan setiap bagian halaman. Mari kita bahas elemen-elemen penting yang wajib diketahui.
Elemen <header>
, <nav>
, dan <footer>
Elemen ini dirancang untuk mendefinisikan bagian utama, navigasi, dan penutup dari sebuah halaman web. Dengan menggunakan elemen ini, struktur sebuah website menjadi lebih mudah dikenali.
<header>
: Digunakan untuk menyusun bagian kepala halaman, seperti logo, judul, atau menu navigasi. Ini adalah bagian pertama yang biasanya dilihat pengguna.<nav>
: Berfungsi sebagai wadah untuk tautan navigasi. Elemen ini sangat berguna untuk membantu pengunjung menjelajahi website dengan cepat.<footer>
: Berisi informasi pada bagian bawah halaman, seperti copyright, kontak, atau tautan tambahan.
Sebagai contoh:
<header>
<h1>Judul Website</h1>
<nav>
<ul>
<li><a href="/home">Beranda</a></li>
<li><a href="/about">Tentang</a></li>
</ul>
</nav>
</header>
<footer>
<p>© 2023 Website Anda</p>
</footer>
Informasi lebih lanjut mengenai elemen-elemen ini dapat ditemukan di Petani Kode atau Revou.
Elemen <main>
dan <section>
Elemen <main>
dan <section>
digunakan untuk memisahkan konten utama dan bagian-bagian spesifik dalam halaman web, sehingga isi halaman menjadi lebih terstruktur dan terorganisir secara logis.
<main>
: Menunjukkan konten utama dari sebuah halaman. Elemen ini hanya boleh digunakan satu kali dalam dokumen, biasanya mencakup area yang langsung terkait dengan tujuan utama halaman.<section>
: Digunakan untuk membagi konten menjadi bagian-bagian dengan tema tertentu. Bisa dianggap mirip seperti “bab” dalam sebuah buku.
Contoh penggunaannya:
<main>
<section>
<h2>Artikel Terbaru</h2>
<p>Berikut adalah artikel-artikel terkini kami.</p>
</section>
<section>
<h2>Portofolio</h2>
<p>Lihat proyek-proyek terbaru kami.</p>
</section>
</main>
Baca lebih detail tentang elemen ini di Jefrydco Blog atau Codekop.
Keuntungan Elemen Semantik
Mengapa elemen semantik begitu penting dalam pengembangan web modern? Berikut adalah beberapa keuntungannya:
- Meningkatkan SEO:
- Mesin pencari, seperti Google, lebih mudah memahami struktur halaman yang menggunakan elemen semantik. Ini membantu meningkatkan peringkat website di hasil pencarian.
- Sebagai contoh, elemen
<article>
memberi tahu mesin pencari bahwa bagian ini adalah konten utama, bukan elemen tambahan.
- Meningkatkan Aksesibilitas:
- Alat bantu seperti screen reader dapat mengidentifikasi elemen semantik dan membacanya kepada pengguna dengan kebutuhan khusus.
- Elemen
<nav>
dapat membantu pengguna langsung ke bagian navigasi tanpa membaca terlalu banyak teks.
- Konsistensi Antar Developer:
- Dengan elemen semantik, kode menjadi lebih mudah dipahami oleh developer lain yang mungkin bekerja pada proyek yang sama.
Sebagai referensi tambahan, Anda bisa membaca artikel di Maknative.
HTML5 dengan elemen-elemen semantiknya tidak hanya menjadikan kode lebih terstruktur, tetapi juga memastikan semua pengguna, termasuk perangkat lunak, dapat memahami konten di halaman dengan mudah.
Atribut Penting dalam HTML
Atribut HTML berfungsi untuk memberikan informasi tambahan pada elemen dan membantu dalam pengaturan tampilan serta perilaku halaman website. Dalam pengembangan web, memahami cara kerja atribut ini adalah langkah penting untuk meningkatkan fleksibilitas dan kontrol dalam pembuatan struktur halaman.
Atribut Id dan Class: Digunakan untuk Seleksi dan Styling
Atribut id
dan class
adalah komponen penting yang digunakan untuk menandai elemen HTML guna mempermudah styling dengan CSS atau manipulasi DOM menggunakan JavaScript. Meskipun terlihat serupa, keduanya memiliki perbedaan dalam penerapan.
id
: Bersifat unik dan hanya digunakan untuk satu elemen di halaman. Ideal untuk mengidentifikasi elemen tertentu.class
: Dapat diterapkan ke beberapa elemen sekaligus. Digunakan untuk kelompok elemen dengan desain atau fungsionalitas serupa.
Misalnya, penggunaannya pada elemen HTML seperti ini:
<div id="header">Ini header</div>
<div class="menu">Item Menu 1</div>
<div class="menu">Item Menu 2</div>
Pada contoh di atas, atribut id
digunakan untuk elemen unik, yaitu header, sementara class
dipakai pada beberapa elemen yang berbagi gaya yang sama. Untuk informasi lebih rinci, Anda dapat membaca panduan lengkap di Codepolitan.
Atribut Src dan Alt: Sumber Gambar dan Deskripsi Alternatif
Gambar merupakan bagian tak terpisahkan dari sebuah website, dan atribut src
serta alt
dalam elemen <img>
memiliki peranan penting dalam menampilkan gambar dan meningkatkan aksesibilitas.
src
(source): Menunjukkan lokasi file gambar yang ingin ditampilkan. URL bisa berupa path relatif atau absolut.alt
: Memberikan teks alternatif jika gambar gagal dimuat. Juga berguna untuk keperluan SEO dan pembaca layar.
Berikut adalah contoh implementasinya:
<img src="images/logo.png" alt="Logo Perusahaan">
Dalam kasus di mana gambar tidak dapat ditampilkan, teks “Logo Perusahaan” akan menggantikan gambar tersebut.
Atribut Href pada Tautan: Menentukan Tujuan Tag <a>
Atribut href
digunakan dalam tag <a>
untuk membuat hyperlink menuju halaman lain, file, atau sumber daya lainnya. Ini adalah cara utama untuk menghubungkan satu halaman ke halaman lain.
Berikut adalah contoh penggunaan atribut href
:
<a href="https://www.contoh.com">Kunjungi Website Kami</a>
Jika pengguna mengklik tautan tersebut, mereka akan diarahkan ke URL yang ditentukan. Atribut tambahan seperti target="_blank"
juga dapat digunakan untuk membuka tautan di tab baru. Artikel lengkap tentang cara membuat hyperlink dengan atribut ini dapat Anda pelajari di Web.dev.
Memahami atribut-atribut ini memungkinkan Anda untuk membuat struktur dan navigasi website yang lebih dinamis serta ramah pengguna. Di bagian selanjutnya, kita akan membahas elemen HTML lainnya yang penting untuk diperhatikan.
Alat untuk Membuat dan Mengedit HTML
Untuk mulai belajar HTML, Anda memerlukan alat yang memadai untuk menulis dan memeriksa kode. Dengan alat yang tepat, Anda dapat bekerja lebih efisien dan membuat pengkodean menjadi pengalaman yang menyenangkan. Berikut ini adalah beberapa alat yang biasa digunakan oleh pemula maupun profesional dalam pengembangan website.
Teks Editor seperti Notepad++ dan VS Code
Teks editor adalah alat utama untuk menulis HTML. Dua editor yang paling banyak digunakan adalah Notepad++ dan VS Code.
- Notepad++:
Notepad++ adalah teks editor ringan yang cocok untuk pemula. Dengan antarmuka yang sederhana, Anda dapat dengan mudah menulis dan mengedit kode HTML. Fitur seperti penyorotan sintaks dan tab multi-dokumen membuatnya lebih baik dibandingkan Notepad biasa. Selain itu, Notepad++ hanya mendukung Windows, tetapi ukurannya yang kecil menjadikannya ideal untuk pengguna dengan keterbatasan sumber daya komputer. Anda bisa membaca ulasan lebih lanjut mengenai Notepad++ di Sololearn. - VS Code (Visual Studio Code):
Ini adalah teks editor yang lebih canggih, dengan berbagai fitur seperti autocomplete, debugger bawaan, dan integrasi dengan berbagai plugin. VS Code juga mendukung hampir semua bahasa pemrograman, termasuk HTML. Meskipun lebih berat dibandingkan Notepad++, VS Code memberikan kemudahan bagi pengguna yang perlu menangani proyek yang lebih kompleks. Anda bisa mengunduh dan menjelajahi VS Code di Visual Studio Code.
Mengapa memilih satu teks editor dibandingkan yang lain? Jika Anda baru memulai dan membutuhkan sesuatu yang ringan, Notepad++ adalah pilihan tepat. Namun, jika Anda mencari alat yang lebih canggih untuk mempelajari keterampilan tambahan atau menangani proyek besar, VS Code adalah pilihan terbaik.
Peramban untuk Pengujian
Selain menulis kode, Anda juga perlu memeriksa bagaimana HTML Anda ditampilkan di browser. Dua peramban yang sering digunakan untuk pengujian adalah Google Chrome dan Mozilla Firefox.
- Google Chrome:
Chrome menyediakan developer tools yang sangat lengkap. Dengan fitur seperti inspect element, network monitoring, dan mobile view testing, Anda dapat dengan mudah mendeteksi masalah pada HTML dan CSS Anda. Alat ini memudahkan pengembang untuk menganalisis kode dan segera memperbaiki kesalahan. Panduan praktis menggunakan DevTools Chrome dapat ditemukan di OpenClassrooms. - Mozilla Firefox:
Firefox Developer Edition adalah pilihan lain yang populer di kalangan pengembang. Browser ini memiliki fitur seperti CSS inspector, visual editor, dan alat untuk pengujian kecepatan. Selain itu, Firefox sangat dihargai karena akurasi dalam menampilkan standar web yang kompleks. Anda dapat mempelajari fitur lengkapnya melalui dokumentasi resmi Mozilla di Mozilla Firefox Source Docs.
Menggunakan kedua browser ini secara bergantian adalah cara yang baik untuk memastikan kompatibilitas website Anda di berbagai platform. Dengan cara ini, Anda dapat memastikan pengalaman pengguna yang konsisten di semua perangkat.
Tips dan Best Practices dalam HTML
Menulis kode HTML bukan hanya soal membuat halaman web yang berfungsi, tetapi juga memastikan bahwa kode tersebut bisa dimengerti, dirawat, dan dikembangkan di masa depan. Kode yang rapi dan sesuai dengan praktik terbaik akan menghasilkan website yang lebih profesional dan efisien. Berikut ini adalah beberapa tips yang bisa Anda ikuti untuk menjaga kualitas kode HTML Anda.
Penggunaan Nama File yang Konsisten
Nama file yang konsisten adalah kunci untuk mengorganisir proyek web secara efisien. File dengan nama yang deskriptif akan mempermudah Anda dalam mengelola proyek, terutama jika proyek tersebut menjadi lebih besar. Misalnya, halaman utama situs Anda sebaiknya selalu dinamai index.html
karena ini adalah standar yang akan dikenali oleh sebagian besar web server. Hal ini membuat server dapat langsung menampilkan file tersebut sebagai halaman utama tanpa konfigurasi tambahan.
Beberapa tips untuk menjaga nama file tetap konsisten:
- Gunakan huruf kecil dalam penamaan file (contoh:
tentang-kami.html
). Hal ini menghindari potensi kesalahan pada server berbasis Linux yang case-sensitive. - Pisahkan kata-kata menggunakan tanda hubung (kebab-case) untuk meningkatkan keterbacaan, seperti
kontak-kami.html
. - Hindari penggunaan ekstensi yang salah. Pastikan file HTML menggunakan ekstensi
.html
atau.htm
.
Untuk tips tambahan mengenai penggunaan clean code pada HTML, Anda bisa membaca di panduan praktis ini.
Menghindari Karakter Khusus dalam Nama File
Karakter khusus, seperti spasi, tanda petik, atau simbol lain, dapat menyebabkan masalah saat file diakses melalui URL. Contoh: nama file halaman utama.html
akan diubah menjadi halaman%20utama.html
dalam URL, membuat nama file terlihat tidak profesional dan sulit diingat.
Sebagai alternatif, berikut adalah beberapa aturan praktis yang dapat Anda ikuti:
- Gunakan Huruf dan Angka Saja: Hindari karakter seperti
@
,#
, atau!
. - Ganti Spasi dengan Tanda Hubung atau Garis Bawah: Sebagai contoh, ubah
halaman utama
menjadihalaman-utama
atauhalaman_utama
. - Jangan Gunakan Nama yang Sama pada Folder Berbeda: Ini menghindari kebingungan jika file dipindahkan atau dikaitkan.
Misalnya, gunakan nama seperti profile-pengguna.html
daripada sesuatu yang mengandung karakter rumit.
Menjaga konsistensi dalam nama file dan menghindari karakter khusus adalah langkah kecil, tetapi memberikan dampak besar untuk proyek Anda, baik dari sisi teknis maupun profesionalisme.
Kesimpulan
Belajar HTML membuka peluang besar untuk memahami dasar-dasar pengembangan website. Dengan menguasai struktur seperti <html>
, <head>
, dan <body>
, Anda dapat menciptakan halaman sederhana yang berfungsi dengan baik.
Manfaatkan waktu untuk mempraktikkan tag-tag dasar dan elemen semantik HTML5. Mulailah dengan membangun dokumen singkat untuk mengasah keterampilan Anda.
Jangan takut bereksperimen dan terus eksplorasi. Anda bisa memanfaatkan banyak sumber daya daring untuk memperdalam pengetahuan.
Apakah Anda sudah siap mengambil langkah pertama? Luangkan waktu sekarang juga untuk mencoba menulis kode HTML Anda sendiri!