25+ Proyek HTML untuk Pemula dengan Kode Sumber (2024)

Apakah Anda seorang pemula yang ingin meningkatkan keterampilan HTML Anda? Membangun proyek praktis adalah cara terbaik untuk belajar dan memantapkan pemahaman Anda tentang HTML. Artikel ini menyajikan lebih dari 25 proyek HTML yang dirancang khusus untuk pemula, lengkap dengan kode sumber untuk membantu Anda memulai. Proyek-proyek ini berkisar dari yang sederhana hingga yang sedikit lebih kompleks, memastikan ada sesuatu untuk setiap tingkat keahlian. Mari kita mulai membangun!

Mengapa Belajar HTML dengan Proyek?

Pembelajaran Praktis: Membangun proyek memungkinkan Anda menerapkan pengetahuan teoretis HTML dalam skenario dunia nyata.
Pemecahan Masalah: Anda akan belajar cara memecahkan masalah dan menemukan solusi, keterampilan penting bagi setiap pengembang web.
Membangun Portofolio: Proyek yang telah selesai dapat ditampilkan dalam portofolio Anda, membuktikan kemampuan Anda kepada calon pemberi kerja.
Memahami Konsep: Anda akan mendapatkan pemahaman yang lebih dalam tentang bagaimana berbagai elemen HTML bekerja sama.
Motivasi: Melihat proyek Anda hidup dan berfungsi akan memberikan motivasi dan kepercayaan diri.

Prasyarat

Sebelum Anda mulai, pastikan Anda memiliki dasar-dasar HTML. Ini termasuk:

Memahami struktur dokumen HTML (<html>, <head>, <body>).
Mengetahui tag HTML dasar seperti <h1>–<h6>, <p>, <a>, <img>, <ul>, <ol>, <li>, <div>, <span>, dan <table>.
Sedikit pengetahuan tentang CSS (opsional, tetapi disarankan untuk styling).
Editor kode (misalnya, VS Code, Sublime Text, Atom).
Peramban web (misalnya, Chrome, Firefox, Safari).

25+ Proyek HTML untuk Pemula (dengan Kode Sumber)

Berikut adalah daftar lebih dari 25 proyek HTML yang cocok untuk pemula, lengkap dengan deskripsi dan contoh kode sumber. Jangan ragu untuk memodifikasi dan meningkatkan proyek-proyek ini untuk menjadikannya milik Anda!

1. Halaman Judul Sederhana

Deskripsi: Membuat halaman judul sederhana dengan judul, subjudul, dan paragraf.

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Halaman Judul Sederhana</title>
</head>
<body>

  <h1>Selamat Datang!</h1>
  <h2>Ini adalah Halaman Judul Sederhana</h2>
  <p>Ini adalah contoh paragraf untuk mendeskripsikan halaman.</p>

</body>
</html>

2. Halaman Profil Diri

Deskripsi: Membuat halaman profil diri dengan gambar, nama, deskripsi singkat, dan tautan ke profil media sosial.

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Profil Diri</title>
</head>
<body>

  <img src="gambar_profil.jpg" alt="Foto Profil" width="150">
  <h1>Nama Anda</h1>
  <p>Deskripsi singkat tentang diri Anda.</p>
  <p><a href="https://twitter.com/username">Twitter</a> | <a href="https://linkedin.com/in/username">LinkedIn</a></p>

</body>
</html>

3. Daftar Todo Sederhana

Deskripsi: Membuat daftar todo sederhana dengan kotak centang dan item daftar.

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Daftar Todo</title>
</head>
<body>

  <h1>Daftar Todo</h1>
  <ul>
    <li><input type="checkbox"> Belanja bahan makanan</li>
    <li><input type="checkbox"> Mencuci mobil</li>
    <li><input type="checkbox"> Membayar tagihan</li>
  </ul>

</body>
</html>

4. Formulir Kontak Dasar

Deskripsi: Membuat formulir kontak dasar dengan input nama, email, dan pesan.

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Formulir Kontak</title>
</head>
<body>

  <h1>Hubungi Kami</h1>
  <form>
    <label for="name">Nama:</label><br>
    <input type="text" id="name" name="name"><br><br>

    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email"><br><br>

    <label for="message">Pesan:</label><br>
    <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

    <input type="submit" value="Kirim">
  </form>

</body>
</html>

5. Tabel Sederhana

Deskripsi: Membuat tabel sederhana dengan baris dan kolom.

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Tabel Sederhana</title>
</head>
<body>

  <h1>Daftar Siswa</h1>
  <table border="1">
    <thead>
      <tr>
        <th>Nama</th>
        <th>Usia</th>
        <th>Nilai</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>18</td>
        <td>90</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>19</td>
        <td>85</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

6. Halaman Galeri Gambar

Deskripsi: Membuat halaman galeri gambar dengan thumbnail dan deskripsi singkat.

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Galeri Gambar</title>
</head>
<body>

  <h1>Galeri Foto</h1>
  <div>
    <img src="gambar1.jpg" alt="Gambar 1" width="200">
    <p>Deskripsi gambar 1.</p>
  </div>
  <div>
    <img src="gambar2.jpg" alt="Gambar 2" width="200">
    <p>Deskripsi gambar 2.</p>
  </div>

</body>
</html>

7. Navigasi Sederhana

Deskripsi: Membuat navigasi sederhana dengan tautan ke halaman lain.

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Navigasi Sederhana</title>
</head>
<body>

  <nav>
    <ul>
      <li><a href="index.html">Beranda</a></li>
      <li><a href="about.html">Tentang</a></li>
      <li><a href="contact.html">Kontak</a></li>
    </ul>
  </nav>

</body>
</html>

8. Layout Dua Kolom

Deskripsi: Membuat layout dua kolom sederhana menggunakan <div>.

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Layout Dua Kolom</title>
  <style>
    .column {
      float: left;
      width: 50%;
    }
  </style>
</head>
<body>

  <div class="column">
    <h2>Kolom 1</h2>
    <p>Ini adalah konten untuk kolom pertama.</p>
  </div>

  <div class="column">
    <h2>Kolom 2</h2>
    <p>Ini adalah konten untuk kolom kedua.</p>
  </div>

</body>
</html>

9. Kotak Pencarian Sederhana

Deskripsi: Membuat kotak pencarian sederhana.

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Kotak Pencarian</title>
</head>
<body>

  <form>
    <input type="text" placeholder="Cari...">
    <button type="submit">Cari</button>
  </form>

</body>
</html>

10. Halaman Ucapan Selamat Sederhana

Deskripsi: Membuat halaman ucapan selamat sederhana.

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Ucapan Selamat</title>
</head>
<body>

  <h1>Selamat!</h1>
  <p>Anda telah berhasil menyelesaikan tantangan ini!</p>

</body>
</html>

11. Halaman Resep Sederhana

Deskripsi: Membuat halaman resep sederhana dengan daftar bahan dan langkah-langkah.

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Resep Sederhana</title>
</head>
<body>

  <h1>Resep Kue Coklat</h1>

  <h2>Bahan-bahan:</h2>
  <ul>
    <li>2 cangkir tepung terigu</li>
    <li>1 cangkir gula</li>
    <li>1/2 cangkir mentega</li>
    <li>2 butir telur</li>
  </ul>

  <h2>Langkah-langkah:</h2>
  <ol>
    <li>Campurkan semua bahan.</li>
    <li>Panggang selama 30 menit.</li>
    <li>Sajikan.</li>
  </ol>

</body>
</html>

12. Halaman Blog Sederhana

Deskripsi: Membuat halaman blog sederhana dengan judul posting dan isi.

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Halaman Blog</title>
</head>
<body>

  <h1>Judul Posting Blog</h1>
  <p>Ini adalah isi dari posting blog. Anda dapat menambahkan lebih banyak paragraf di sini.</p>

</body>
</html>

13. Halaman Testimonial Sederhana

Deskripsi: Membuat halaman testimonial sederhana dengan kutipan dan nama.

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Testimonial</title>
</head>
<body>

  <h1>Testimonial</h1>

  <blockquote>
    <p>"Produk ini sangat bagus! Saya sangat merekomendasikannya."</p>
    <footer>- John Doe</footer>
  </blockquote>

</body>
</html>

14. Halaman FAQ Sederhana

Deskripsi: Membuat halaman FAQ sederhana dengan pertanyaan dan jawaban.

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>FAQ</title>
</head>
<body>

  <h1>FAQ</h1>

  <h2>Pertanyaan: Apa itu HTML?</h2>
  <p>Jawaban: HTML adalah bahasa markup untuk membuat halaman web.</p>

  <h2>Pertanyaan: Bagaimana cara belajar HTML?</h2>
  <p>Jawaban: Anda dapat belajar HTML melalui tutorial online, buku, dan kursus.</p>

</body>
</html>

15. Halaman Unduhan Sederhana

Deskripsi: Membuat halaman unduhan sederhana dengan tautan unduhan.

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Unduhan</title>
</head>
<body>

  <h1>Unduhan</h1>

  <p><a href="file.pdf">Unduh File PDF</a></p>
  <p><a href="file.zip">Unduh File ZIP</a></p>

</body>
</html>

16. Halaman Terima Kasih Sederhana

Deskripsi: Membuat halaman terima kasih sederhana.

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Terima Kasih</title>
</head>
<body>

  <h1>Terima Kasih!</h1>
  <p>Terima kasih atas pesanan Anda!</p>

</body>
</html>

17. Halaman Coming Soon Sederhana

Deskripsi: Membuat halaman “Coming Soon” sederhana.

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Coming Soon</title>
</head>
<body>

  <h1>Coming Soon!</h1>
  <p>Situs web ini sedang dalam pengembangan.</p>

</body>
</html>

18. Halaman 404 Sederhana

Deskripsi: Membuat halaman 404 sederhana (Halaman Tidak Ditemukan).

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>404 Not Found</title>
</head>
<body>

  <h1>404 Not Found</h1>
  <p>Halaman yang Anda cari tidak ditemukan.</p>

</body>
</html>

19. Embed Video YouTube

Deskripsi: Menampilkan video YouTube pada halaman web.

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Embed Video YouTube</title>
</head>
<body>

  <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

</body>
</html>

Catatan: Ganti VIDEO_ID dengan ID video YouTube yang ingin Anda tampilkan.

20. Halaman Kalkulator Sederhana (UI)

Deskripsi: Membuat UI kalkulator sederhana (hanya tampilan, tanpa fungsionalitas JavaScript).

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Kalkulator Sederhana</title>
  <style>
    .calculator {
      width: 200px;
      border: 1px solid black;
      padding: 10px;
    }
    .display {
      width: 100%;
      margin-bottom: 10px;
    }
    button {
      width: 45px;
      height: 30px;
    }
  </style>
</head>
<body>

  <div class="calculator">
    <input type="text" class="display"><br>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>+</button><br>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>-</button><br>
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button>*</button><br>
    <button>0</button>
    <button>.</button>
    <button>=</button>
    <button>/</button>
  </div>

</body>
</html>

21. Halaman Timer Sederhana (UI)

Deskripsi: Membuat tampilan timer sederhana (hanya UI, tanpa fungsionalitas JavaScript).

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Timer Sederhana</title>
  <style>
    .timer {
      font-size: 3em;
      text-align: center;
      margin-top: 50px;
    }
  </style>
</head>
<body>

  <div class="timer">00:00:00</div>

</body>
</html>

22. Membuat Accordion Sederhana (dengan CSS dan HTML)

Deskripsi: Membuat komponen accordion sederhana yang dapat diperluas dan diciutkan.

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Accordion Sederhana</title>
  <style>
    .accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
    }

    .active, .accordion:hover {
      background-color: #ccc;
    }

    .panel {
      padding: 0 18px;
      background-color: white;
      display: none;
      overflow: hidden;
    }
  </style>
</head>
<body>

  <button class="accordion">Bagian 1</button>
  <div class="panel">
    <p>Konten bagian 1.</p>
  </div>

  <button class="accordion">Bagian 2</button>
  <div class="panel">
    <p>Konten bagian 2.</p>
  </div>

  <button class="accordion">Bagian 3</button>
  <div class="panel">
    <p>Konten bagian 3.</p>
  </div>

</body>
<script>
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.display === "block") {
        panel.style.display = "none";
      } else {
        panel.style.display = "block";
      }
    });
  }
</script>
</html>

23. Membuat Tombol dengan Efek Hover

Deskripsi: Membuat tombol sederhana dengan efek hover CSS.

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Tombol dengan Efek Hover</title>
  <style>
    .button {
      background-color: #4CAF50; /* Warna hijau */
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      cursor: pointer;
      transition-duration: 0.4s;
    }

    .button:hover {
      background-color: white;
      color: black;
      border: 1px solid #4CAF50;
    }
  </style>
</head>
<body>

  <button class="button">Hover Me</button>

</body>
</html>

24. Halaman dengan Ikon Font Awesome

Deskripsi: Menampilkan ikon Font Awesome pada halaman web.

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Ikon Font Awesome</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>

  <i class="fas fa-home"></i> Beranda
  <i class="fas fa-search"></i> Cari
  <i class="fas fa-user"></i> Profil

</body>
</html>

Catatan: Anda perlu menautkan ke Font Awesome CSS dari CDN. Contoh di atas menggunakan jsDelivr. Periksa versi terbaru di website Font Awesome.

25. Halaman dengan Google Fonts

Deskripsi: Menggunakan Google Fonts untuk mengubah gaya teks pada halaman web.

Kode Sumber:


<!DOCTYPE html>
<html>
<head>
  <title>Google Fonts</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
    }
    h1 {
      font-weight: 700;
    }
  </style>
</head>
<body>

  <h1>Selamat Datang!</h1>
  <p>Ini adalah contoh teks menggunakan Google Fonts.</p>

</body>
</html>

Catatan: Anda perlu memilih font dari Google Fonts (fonts.google.com) dan menambahkan tautan yang sesuai ke <head> halaman HTML Anda. Sesuaikan font family dan weight sesuai keinginan Anda.

26. Halaman Dengan Elemen Audio

Deskripsi: Menampilkan elemen audio yang dapat dimainkan di halaman web.

Kode Sumber:



<!DOCTYPE html>

<html>

<head>



        
            Posted in Tech News

Thursday

25+ HTML Projects for Beginners with Source Code

25+ Proyek HTML untuk Pemula dengan Kode Sumber (2024)

Mengapa Belajar HTML dengan Proyek?

Prasyarat

25+ Proyek HTML untuk Pemula (dengan Kode Sumber)

1. Halaman Judul Sederhana

2. Halaman Profil Diri

3. Daftar Todo Sederhana

4. Formulir Kontak Dasar

5. Tabel Sederhana

6. Halaman Galeri Gambar

7. Navigasi Sederhana

8. Layout Dua Kolom

9. Kotak Pencarian Sederhana

10. Halaman Ucapan Selamat Sederhana

11. Halaman Resep Sederhana

12. Halaman Blog Sederhana

13. Halaman Testimonial Sederhana

14. Halaman FAQ Sederhana

15. Halaman Unduhan Sederhana

16. Halaman Terima Kasih Sederhana

17. Halaman Coming Soon Sederhana

18. Halaman 404 Sederhana

19. Embed Video YouTube

20. Halaman Kalkulator Sederhana (UI)

21. Halaman Timer Sederhana (UI)

22. Membuat Accordion Sederhana (dengan CSS dan HTML)

23. Membuat Tombol dengan Efek Hover

24. Halaman dengan Ikon Font Awesome

25. Halaman dengan Google Fonts

26. Halaman Dengan Elemen Audio

Build Games with Amazon Q CLI and Get a Free T-shirt! 🏆👕

Cost Effective Image Optimization Solution With AWS

omcoding

Leave a Reply Cancel reply

OmCoding

25+ HTML Projects for Beginners with Source Code

25+ Proyek HTML untuk Pemula dengan Kode Sumber (2024)

Mengapa Belajar HTML dengan Proyek?

Prasyarat

25+ Proyek HTML untuk Pemula (dengan Kode Sumber)

1. Halaman Judul Sederhana

2. Halaman Profil Diri

3. Daftar Todo Sederhana

4. Formulir Kontak Dasar

5. Tabel Sederhana

6. Halaman Galeri Gambar

7. Navigasi Sederhana

8. Layout Dua Kolom

9. Kotak Pencarian Sederhana

10. Halaman Ucapan Selamat Sederhana

11. Halaman Resep Sederhana

12. Halaman Blog Sederhana

13. Halaman Testimonial Sederhana

14. Halaman FAQ Sederhana

15. Halaman Unduhan Sederhana

16. Halaman Terima Kasih Sederhana

17. Halaman Coming Soon Sederhana

18. Halaman 404 Sederhana

19. Embed Video YouTube

20. Halaman Kalkulator Sederhana (UI)

21. Halaman Timer Sederhana (UI)

22. Membuat Accordion Sederhana (dengan CSS dan HTML)

23. Membuat Tombol dengan Efek Hover

24. Halaman dengan Ikon Font Awesome

25. Halaman dengan Google Fonts

26. Halaman Dengan Elemen Audio

Build Games with Amazon Q CLI and Get a Free T-shirt! 🏆👕

Cost Effective Image Optimization Solution With AWS

omcoding

Related Posts

Leave a Reply Cancel reply

OmCoding