Berikut adalah 25+ contoh coding HTML dasar yang dapat digunakan oleh pemula untuk memahami konsep dasar pembuatan website. Setiap contoh di bawah ini memberikan langkah awal untuk mempelajari elemen-elemen penting dalam HTML:
1. Membuat Dokumen HTML Dasar
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Halo, Dunia!</h1>
<p>Ini adalah paragraf pertama saya.</p>
</body>
</html>
2. Menambahkan Gambar ke Halaman
<img src=”gambar.jpg” alt=”Deskripsi Gambar”>
3. Membuat Tautan (Hyperlink)
<a href=”https://www.contoh.com”>Kunjungi Website Kami</a>
4. Membuat Daftar Tidak Berurutan (Unordered List)
<ul>
<li>Poin 1</li>
<li>Poin 2</li>
<li>Poin 3</li>
</ul>
5. Membuat Daftar Berurutan (Ordered List)
<ol>
<li>Poin 1</li>
<li>Poin 2</li>
<li>Poin 3</li>
</ol>
6. Membuat Tabel Sederhana
<table border=”1″>
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
7. Membuat Formulir Kontak Sederhana
<form action=”/submit_form” method=”post”>
<label for=”name”>Nama:</label><br>
<input type=”text” id=”name” name=”name”><br>
<label for=”email”>Email:</label><br>
<input type=”email” id=”email” name=”email”><br>
<input type=”submit” value=”Kirim”>
</form>
8. Membuat Paragraf dengan Penekanan (Italic dan Bold)
<p>Ini adalah teks dengan <em>italic</em> dan <strong>bold</strong>.</p>
9. Menyematkan Video YouTube
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/kode_video” frameborder=”0″ allowfullscreen></iframe>
10. Membuat Heading dari H1 hingga H6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
11. Menambahkan Komentar di HTML
<!– Ini adalah komentar yang tidak akan terlihat di browser –>
12. Membuat Link Mailto untuk Mengirim Email
<a href=”mailto:[email protected]”>Kirim Email</a>
13. Menyematkan Audio
<audio controls>
<source src=”audio.mp3″ type=”audio/mp3″>
Browser Anda tidak mendukung pemutar audio.
</audio>
14. Membuat Blok Kutipan
<blockquote>
“Ini adalah kutipan dari seseorang yang terkenal.”
</blockquote>
15. Menggunakan Karakter Khusus
<p>Hak Cipta © 2024. Semua Hak Dilindungi.</p>
16. Menambahkan Favicon
<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>
17. Menggunakan CSS Inline
<p style=”color:blue; font-size:20px;”>Teks dengan gaya CSS inline.</p>
18. Membuat Hyperlink ke Bagian Tertentu di Halaman
<a href=”#bagian1″>Pergi ke Bagian 1</a>
<h2 id=”bagian1″>Bagian 1</h2>
<p>Ini adalah konten di bagian 1.</p>
19. Menambahkan Button
<button type=”button”>Klik Saya</button>
20. Menggunakan Tag <div> untuk Pembagian Layout
<div style=”background-color:lightblue;”>
<h2>Bagian 1</h2>
<p>Konten di bagian ini.</p>
</div>
21. Menggunakan Tag <span> untuk Styling Teks
<p>Ini adalah teks dengan <span style=”color:red;”>warna berbeda</span> di dalam paragraf.</p>
22. Membuat Navigasi Sederhana
<nav>
<a href=”#home”>Beranda</a> |
<a href=”#about”>Tentang</a> |
<a href=”#contact”>Kontak</a>
</nav>
23. Menggunakan iframe untuk Menyematkan Halaman Web
<iframe src=”https://www.contoh.com” width=”600″ height=”400″></iframe>
24. Membuat Teks Berjalan (Marquee)
<marquee>Ini adalah teks yang berjalan!</marquee>
25. Membuat Dropdown List
<label for=”cars”>Pilih mobil:</label>
<select id=”cars” name=”cars”>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”opel”>Opel</option>
<option value=”audi”>Audi</option>
</select>
26. Mengatur Alamat Email yang Tersembunyi dari Bot
<script type=”text/javascript”>
document.write(“<a href=’mailto:[email protected]’>Email Kami</a>”);
</script>
27. Membuat Tabel dengan Header dan Footer
<table>
<thead>
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=”2″>Footer Tabel</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
Dengan memahami dan mempraktikkan berbagai contoh di atas, Anda dapat menguasai dasar-dasar HTML yang penting untuk pengembangan website. Setelah Anda menguasai contoh-contoh ini, Anda bisa melanjutkan ke konsep yang lebih kompleks, seperti CSS dan JavaScript untuk meningkatkan tampilan dan fungsionalitas website Anda