15+ Contoh Coding HTML Website Sederhana untuk Pemula

2 hours ago 1

Selular.id – Membangun website kini bukan lagi ranah eksklusif para developer profesional. Dengan memahami dasar-dasar HTML (HyperText Markup Language), siapa pun, termasuk pemula, dapat mulai membuat halaman web sederhana untuk berbagai keperluan, mulai dari blog pribadi hingga toko online.

HTML berfungsi sebagai fondasi atau kerangka yang memberi struktur pada semua elemen di sebuah halaman web, seperti teks, gambar, tautan, dan formulir.

Berbeda dengan bahasa pemrograman yang kompleks, HTML adalah bahasa markup yang relatif mudah dipelajari karena hanya memberi “tanda” atau tag pada konten untuk menentukan bagaimana konten tersebut ditampilkan di browser. Misalnya, tag <h1> untuk judul utama, <p> untuk paragraf, dan <a> untuk membuat tautan.

Penguasaan dasar HTML menjadi langkah pertama yang krusial sebelum melangkah ke CSS untuk mempercantik tampilan atau JavaScript untuk menambah interaktivitas.

Berikut ini adalah struktur dasar dari sebuah dokumen HTML yang menjadi acuan untuk semua contoh coding yang akan dibahas. Struktur ini memastikan halaman web dapat dibaca dan diinterpretasikan dengan benar oleh browser.

<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Judul Website</title> </head> <body> <h1>Halo, Selamat Datang di Website Saya</h1> <p>Ini adalah paragraf pertama di website.</p> </body> </html>

Setiap bagian memiliki peran: <!DOCTYPE html> mendeklarasikan versi HTML5, <html> sebagai elemen akar, <head> berisi informasi meta dan judul halaman, sementara <body> adalah tempat semua konten yang terlihat oleh pengguna diletakkan.

Kumpulan Contoh Coding HTML Website dari Dasar hingga Fungsional

Berikut adalah lebih dari 15 contoh coding HTML website sederhana yang dapat langsung dipraktikkan untuk memahami penerapan berbagai elemen HTML dalam konteks yang berbeda.

1. Website Dasar dengan Teks
Contoh paling fundamental, cocok untuk latihan pertama. Kode ini menampilkan judul dan satu paragraf teks.

<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <title>Website Dasar</title> </head> <body> <h1>Selamat Datang</h1> <p>Ini adalah contoh coding HTML yang sederhana.</p> </body> </html>

2. Menambahkan Tautan (Link)
Tautan adalah elemen vital untuk navigasi. Tag <a> dengan atribut `href` digunakan untuk membuatnya.

<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <title>Website dengan Link</title> </head> <body> <h1>Halaman Utama</h1> <a href="https://www.google.com">Kunjungi Google</a> </body> </html>

3. Menampilkan Gambar
Gambar membuat website lebih hidup. Gunakan tag <img> dengan atribut `src` untuk sumber gambar dan `alt` untuk teks alternatif.

<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <title>Website Gambar</title> </head> <body> <h1>Website dengan Gambar</h1> <img src="gambar.jpg" alt="Contoh Gambar" width="300"> </body> </html>

4. Membuat Daftar (List)
List berguna untuk menampilkan informasi berurutan atau poin-poin. HTML mendukung list terurut (<ol>) dan tidak terurut (<ul>).

<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <title>Website List</title> </head> <body> <h1>Daftar Buah</h1> <ul> <li>Apel</li> <li>Pisang</li> <li>Jeruk</li> </ul> </body> </html>

5. Kerangka Website Penjualan Sederhana
HTML dapat menjadi fondasi toko online dengan menampilkan daftar produk dan harga. Ini adalah titik awal sebelum mengintegrasikan sistem keranjang belanja.

<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <title>Toko Online Sederhana</title> </head> <body> <h1>Selamat Datang di Toko Kami</h1> <p>Produk terbaru:</p> <ul> <li>Kaos Polos – Rp50.000</li> <li>Topi Baseball – Rp75.000</li> <li>Tas Ransel – Rp150.000</li> </ul> </body> </html>

6. Menyajikan Data dengan Tabel
Tabel ideal untuk menampilkan data terstruktur seperti daftar harga, jadwal, atau spesifikasi produk.

<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <title>Website Tabel</title> </head> <body> <h1>Daftar Harga</h1> <table border="1"> <tr> <th>Produk</th> <th>Harga</th> </tr> <tr> <td>Kaos</td> <td>Rp50.000</td> </tr> <tr> <td>Topi</td> <td>Rp75.000</td> </tr> </table> </body> </html>

7. Formulir Kontak Interaktif
Formulir memungkinkan interaksi dua arah dengan pengunjung. Tag <form> menjadi wadah untuk input teks, email, dan textarea.

<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <title>Formulir Kontak</title> </head> <body> <h1>Hubungi Kami</h1> <form action="/submit" method="post"> <label>Nama:</label><br> <input type="text" name="nama"><br><br> <label>Email:</label><br> <input type="email" name="email"><br><br> <label>Pesan:</label><br> <textarea name="pesan"></textarea><br><br> <input type="submit" value="Kirim"> </form> </body> </html>

8. Memahami Hierarki Heading
Tag heading dari <h1> hingga <h6> penting untuk struktur konten dan SEO, membantu mesin pencari memahami prioritas informasi.

9. Menambahkan Gaya Dasar dengan CSS Internal
Meski fokus pada HTML, sedikit CSS internal dalam tag <style> di <head> dapat langsung memperbaiki tampilan, seperti mengubah warna teks.

10. Menyematkan Video
HTML5 memudahkan penyematan video dengan tag <video>. Atribut `controls` menampilkan tombol putar, jeda, dan suara.

11. Menyematkan Audio
Sama seperti video, audio dapat disematkan dengan tag <audio>, cocok untuk website podcast atau musik.

12. Menampilkan Halaman Eksternal dengan Iframe
Tag <iframe> memungkinkan menampilkan halaman web lain (seperti peta Google) di dalam halaman Anda.

13. Membuat Tombol Interaktif
Tombol dengan tag <button> dapat diprogram dengan JavaScript untuk memberikan respons, seperti menampilkan pesan alert.

14. Website Penjualan dengan Gambar Produk
Pengembangan dari contoh ke-5, dengan menambahkan gambar untuk setiap produk menggunakan tag <img> di dalam <div>.

15. Navigasi Sederhana dengan Tag <nav>
Tag semantik <nav> dan <section> membantu membuat struktur navigasi dan bagian halaman yang lebih rapi dan mudah diakses.

16. Website dengan CSS Minimal untuk Tampilan Lebih Rapi
Contoh ini menunjukkan bagaimana sedikit CSS dapat mengubah tampilan secara signifikan, seperti menambahkan latar belakang, font, dan kartu produk yang lebih menarik.

Dari Kode ke Realita: Membawa Website Hasil Coding HTML Lebih Maksimal

Setelah berhasil membuat kerangka website dengan berbagai contoh coding HTML di atas, langkah selanjutnya adalah memastikan website tersebut dapat diakses publik dengan performa optimal. Di sinilah peran infrastruktur hosting yang handal menjadi krusial. Sebuah website yang hanya tersimpan di komputer lokal tidak akan bisa ditemukan di internet.

Memilih layanan hosting yang tepat, seperti Cloud VPS, dapat memberikan perbedaan signifikan. Infrastruktur ini menawarkan sumber daya dedicated (vCPU, RAM) yang menjamin kecepatan dan stabilitas, terutama untuk website yang mulai berkembang atau memiliki traffic yang dinamis.

Fitur seperti replikasi data di beberapa lokasi penyimpanan juga memberikan jaminan keamanan data yang penting untuk website bisnis. Untuk memahami investasi awal dalam membangun kehadiran online, calon pembuat website dapat mempelajari Biaya Hosting dan Domain untuk Website di 2025.

Selain hosting, elemen identitas online seperti nama domain juga memegang peranan penting untuk profesionalisme dan kemudahan diingat oleh pengunjung. Kombinasi antara kode HTML yang solid, desain yang ditingkatkan dengan CSS, hosting yang andal, dan nama domain yang tepat akan membentuk fondasi digital yang kuat untuk berbagai tujuan, baik itu portofolio, blog, atau toko online.

Perkembangan kemampuan dalam coding HTML membuka pintu menuju kontrol yang lebih besar atas kehadiran digital seseorang atau bisnis. Dari contoh-contoh sederhana yang telah dipaparkan, siapa pun dapat terus bereksperimen dan mengembangkan website menjadi lebih kompleks dan fungsional, seiring dengan penambahan pengetahuan tentang CSS, JavaScript, dan sistem manajemen konten.

Read Entire Article