Berikut adalah kumpulan contoh penulisan kode praktis untuk sepuluh materi HTML, mulai dari pengenalan struktur dasar hingga jenis jenis URL. Setiap contoh ditulis sebagai kode yang dapat langsung disalin ke dalam file berekstensi .html dan dibuka menggunakan browser apa pun seperti Chrome, Firefox, atau Edge.
1. Mengenal HTML: Apa Itu, Untuk Apa, dan Bagaimana Cara Kerjanya
Contoh dokumen HTML paling minimal yang menunjukkan bagaimana browser menerjemahkan kode menjadi tampilan halaman. Simpan sebagai halo.html.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Halaman Pertama Saya</title>
</head>
<body>
<h1>Halo, Dunia!</h1>
<p>Ini adalah paragraf pertama yang saya buat menggunakan HTML.</p>
</body>
</html>2. Cara Menyiapkan Environment Belajar HTML: Text Editor dan Browser untuk Pemula
File uji coba sederhana untuk memastikan text editor dan browser sudah terhubung dengan benar. Simpan sebagai tes-editor.html, lalu buka melalui menu File kemudian Open File di browser.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Tes Environment</title>
</head>
<body>
<h1>Environment Saya Sudah Siap</h1>
<p>Jika tulisan ini muncul di browser, editor dan browser sudah berhasil terhubung.</p>
</body>
</html>3. Anatomi Dokumen HTML: Memahami Struktur DOCTYPE, html, head, dan body
Contoh struktur lengkap yang menunjukkan fungsi masing masing bagian: deklarasi tipe dokumen, elemen akar, kepala dokumen berisi metadata, dan tubuh dokumen berisi konten yang tampil.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Anatomi Dokumen HTML</title>
</head>
<body>
<h1>Ini Konten yang Tampil di Browser</h1>
<p>Semua yang terlihat pengguna berada di dalam tag body.</p>
</body>
</html>4. Cara Kerja Tag dan Elemen HTML: Opening Tag, Closing Tag, dan Self Closing Tag
Contoh perbandingan tag berpasangan yang memiliki penutup dengan tag void yang tidak memerlukan penutup.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Jenis Jenis Tag</title>
</head>
<body>
<!-- Tag berpasangan: opening tag dan closing tag -->
<p>Ini paragraf dengan tag pembuka dan tag penutup.</p>
<!-- Self closing tag / void element: tidak memiliki tag penutup -->
<img src="foto.jpg" alt="Contoh gambar">
<br>
<hr>
<p>Baris ini muncul setelah garis pemisah horizontal.</p>
</body>
</html>5. Menguasai Atribut HTML: Cara Menambahkan Properti pada Elemen HTML
Contoh penggunaan berbagai atribut umum seperti id, class, src, alt, dan title pada elemen yang berbeda.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Contoh Atribut HTML</title>
</head>
<body>
<h1 id="judul-utama">Judul dengan Atribut id</h1>
<p class="teks-penting" title="Ini adalah tooltip">
Arahkan kursor ke paragraf ini untuk melihat tooltip.
</p>
<img src="pemandangan.jpg" alt="Pemandangan gunung" width="400">
<a href="https://www.contoh.com" target="_blank">
Kunjungi Situs Contoh
</a>
</body>
</html>6. Heading HTML H1 sampai H6: Hierarki Judul dan Dampaknya pada Struktur Konten
Contoh penerapan enam tingkat heading secara berurutan untuk membentuk struktur dokumen yang logis.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Struktur Heading</title>
</head>
<body>
<h1>Judul Utama Artikel</h1>
<h2>Bab Satu</h2>
<h3>Sub Bab Satu Titik Satu</h3>
<h4>Poin Detail</h4>
<h2>Bab Dua</h2>
<h3>Sub Bab Dua Titik Satu</h3>
<h5>Catatan Kecil</h5>
<h6>Keterangan Sumber</h6>
</body>
</html>7. Tag Paragraf dan Pemformatan Teks Dasar HTML: p, br, strong, em, dan span
Contoh kombinasi elemen teks untuk membuat paragraf dengan penekanan, baris baru, dan penandaan bagian teks tertentu.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Pemformatan Teks</title>
</head>
<body>
<p>
Produk ini <strong>wajib</strong> digunakan sesuai petunjuk.<br>
Simpan di tempat yang <em>sejuk dan kering</em>.
</p>
<p>
Kode produk: <span style="color: red;">A1234</span>
berlaku sampai akhir bulan.
</p>
</body>
</html>8. Cara Membuat List di HTML: Ordered List, Unordered List, dan Description List
Contoh tiga jenis list sekaligus dalam satu dokumen untuk membandingkan strukturnya masing masing.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Contoh List HTML</title>
</head>
<body>
<h2>Unordered List</h2>
<ul>
<li>Teh</li>
<li>Kopi</li>
<li>Susu</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>Siapkan air panas</li>
<li>Masukkan bahan</li>
<li>Aduk rata</li>
</ol>
<h2>Description List</h2>
<dl>
<dt>HTML</dt>
<dd>Bahasa markup untuk struktur halaman web.</dd>
<dt>CSS</dt>
<dd>Bahasa untuk mengatur tampilan halaman web.</dd>
</dl>
</body>
</html>9. Cara Membuat Hyperlink di HTML: Tag Anchor, Atribut href, Target, dan Rel
Contoh penggunaan tag a dengan kombinasi atribut href, target, dan rel untuk tautan internal maupun eksternal.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Contoh Hyperlink</title>
</head>
<body>
<h1>Kumpulan Tautan</h1>
<p>
<a href="kontak.html">Halaman Kontak</a>
</p>
<p>
<a href="https://www.contoh.com" target="_blank" rel="noopener noreferrer">
Kunjungi Situs Eksternal
</a>
</p>
<p>
<a href="mailto:info@contoh.com">Kirim Email</a>
</p>
</body>
</html>10. Jenis Jenis URL di HTML: Absolute URL, Relative URL, dan Anchor Link Internal
Contoh perbandingan tiga jenis nilai href dalam satu halaman: alamat lengkap, alamat relatif terhadap folder file, dan tautan menuju bagian tertentu dalam halaman yang sama.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Jenis Jenis URL</title>
</head>
<body>
<h1 id="atas">Contoh Jenis URL</h1>
<p>
Absolute URL:
<a href="https://www.wikipedia.org" target="_blank">Wikipedia</a>
</p>
<p>
Relative URL:
<a href="tentang/profil.html">Halaman Profil</a>
</p>
<p>
Anchor Link Internal:
<a href="#bagian-akhir">Loncat ke Bagian Akhir</a>
</p>
<h2 id="bagian-akhir">Bagian Akhir Halaman</h2>
<p><a href="#atas">Kembali ke Atas</a></p>
</body>
</html>Ditulis dan diedit oleh Ahmad Ismail Al Malik