Contoh Coding HTML yang Sudah Jadi: Panduan Lengkap untuk Pemula

byTeguh Sigit •

Bagi kamu yang baru belajar pemrograman web, memahami contoh coding HTML yang sudah jadi merupakan langkah awal yang penting. HTML (HyperText Markup Language) adalah bahasa dasar untuk membuat halaman web. Dengan HTML, kamu bisa menampilkan teks, gambar, video, hingga formulir interaktif di browser.

Contoh Coding HTML yang Sudah Jadi
Contoh Coding HTML yang Sudah Jadi

Banyak pemula merasa kesulitan saat pertama kali menulis kode HTML. Padahal, dengan melihat contoh yang sudah jadi, kamu bisa lebih cepat memahami struktur dasar dan cara kerjanya. Artikel ini akan membahas berbagai contoh coding HTML lengkap yang bisa langsung kamu praktekkan.

1. Contoh Coding HTML Dasar

Berikut contoh sederhana struktur dasar HTML yang sudah jadi dan bisa kamu salin ke editor seperti Notepad atau VS Code:

<!DOCTYPE html>
<html>
<head>
    <title>Belajar HTML Dasar</title>
</head>
<body>
    <h1>Selamat Datang di Website Saya</h1>
    <p>Ini adalah paragraf pertama saya menggunakan HTML.</p>
</body>
</html>

Penjelasan:

  • <html> menandai awal dan akhir dokumen HTML.
  • <head> berisi informasi tentang halaman, seperti judul.
  • <body> adalah tempat menampilkan isi utama yang terlihat di browser.

2. Contoh Coding HTML dengan Gambar dan Link

Jika kamu ingin menampilkan gambar dan tautan (link), kamu bisa gunakan kode berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Gambar dan Link</title>
</head>
<body>
    <h2>Gambar Favorit Saya</h2>
    <img src="gambar.jpg" alt="Pemandangan Alam" width="400">
    <p>Klik link di bawah ini untuk melihat lebih banyak:</p>
    <a href="https://www.google.com" target="_blank">Kunjungi Google</a>
</body>
</html>

Penjelasan:

  • <img> digunakan untuk menampilkan gambar.
  • Atribut src menunjukkan lokasi file gambar.
  • <a> berfungsi untuk membuat tautan ke halaman lain.

3. Contoh Coding HTML dengan Tabel

Tabel sering digunakan untuk menampilkan data dalam format terstruktur. Berikut contoh tabel HTML yang sudah jadi:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Tabel HTML</title>
</head>
<body>
    <h2>Daftar Nilai Siswa</h2>
    <table border="1" cellpadding="5" cellspacing="0">
        <tr>
            <th>Nama</th>
            <th>Kelas</th>
            <th>Nilai</th>
        </tr>
        <tr>
            <td>Andi</td>
            <td>10A</td>
            <td>90</td>
        </tr>
        <tr>
            <td>Sinta</td>
            <td>10B</td>
            <td>85</td>
        </tr>
    </table>
</body>
</html>

Penjelasan:

  • <table> digunakan untuk membuat tabel.
  • <tr> artinya baris tabel (table row).
  • <th> adalah header kolom, sedangkan <td> untuk isi data.

4. Contoh Coding HTML dengan Formulir

Formulir HTML memungkinkan pengguna memasukkan data ke dalam website. Berikut contohnya:

<!DOCTYPE html>
<html>
<head>
    <title>Formulir Pendaftaran</title>
</head>
<body>
    <h2>Formulir Pendaftaran Sederhana</h2>
    <form action="proses.php" method="post">
        Nama: <input type="text" name="nama"><br><br>
        Email: <input type="email" name="email"><br><br>
        Jenis Kelamin:
        <input type="radio" name="gender" value="Laki-laki"> Laki-laki
        <input type="radio" name="gender" value="Perempuan"> Perempuan<br><br>
        <input type="submit" value="Kirim">
    </form>
</body>
</html>

Penjelasan:

  • <form> digunakan untuk membuat form.
  • action adalah file tujuan untuk memproses data.
  • <input> digunakan untuk membuat kolom input pengguna.

5. Contoh Coding HTML Lengkap (Website Mini)

Berikut contoh coding HTML yang sudah jadi dan bisa kamu gunakan untuk membuat halaman website sederhana:

<!DOCTYPE html>
<html>
<head>
    <title>Website Pribadi Saya</title>
</head>
<body style="font-family: Arial; background-color: #f2f2f2;">
    <header>
        <h1>Selamat Datang di Website Saya</h1>
        <p>Belajar HTML dengan mudah dan menyenangkan</p>
    </header>

    <nav>
        <a href="#home">Beranda</a> |
        <a href="#about">Tentang</a> |
        <a href="#contact">Kontak</a>
    </nav>

    <section id="home">
        <h2>Beranda</h2>
        <p>Ini adalah contoh halaman utama dari website HTML sederhana.</p>
    </section>

    <section id="about">
        <h2>Tentang Saya</h2>
        <p>Saya sedang belajar membuat website menggunakan HTML, CSS, dan JavaScript.</p>
    </section>

    <section id="contact">
        <h2>Kontak</h2>
        <p>Email: contoh@email.com</p>
    </section>

    <footer>
        <p>&copy; 2025 Website Pribadi Saya</p>
    </footer>
</body>
</html>

Kesimpulan

Contoh coding HTML yang sudah jadi di atas bisa menjadi panduan awal untuk kamu yang ingin belajar membuat website sendiri. Mulailah dari struktur sederhana, lalu tambahkan elemen seperti gambar, tabel, dan form untuk memperkaya tampilan. Setelah memahami dasar HTML, kamu bisa lanjut mempelajari CSS dan JavaScript agar websitemu lebih menarik dan interaktif.

Tags:
Lebih baru Lebih lama