Cara Membuat List Sederhana dengan HTML dan CSS

By Posted on

Cara Membuat List Sederhana dengan HTML dan CSS – Apakah Anda ingin mempelajari cara membuat list sederhana dengan menggunakan HTML dan CSS? Mungkin Anda baru saja memasuki dunia pengembangan web dan ingin memahami dasar-dasar pembuatan list yang estetis dan responsif. Artikel ini akan membantu Anda memahami langkah-langkahnya secara detail, mulai dari pembuatan folder proyek hingga penyusunan kode CSS. Mari kita eksplorasi bersama untuk menciptakan list yang menarik secara visual dan mudah dipahami!.

Alat yang Harus Disiapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk membuat list sederhana dengan html dan css:

  • Perangkat laptop,
  • Google chrome (Web browser),
  • Notepad++ (Text editor code),
  • Niat yang kuat.

Cara Membuat List Sederhana dengan HTML dan CSS

1. Buat Folder Project “List Sederhana”

Langkah pertama yang perlu dilakukan adalah membuat folder khusus untuk proyek ini di dalam komputer Anda. Beri nama folder tersebut sesuai keinginan Anda, misalnya “Project_List_Sederhana“.

2. Buat Sebuah File “list_sederhana.html”

Setelah folder proyek dibuat, selanjutnya buatlah file HTML baru di dalamnya. Ikuti langkah-langkah berikut:

  • Buka teks editor favorit Anda (misalnya Notepad, Sublime Text, atau Visual Studio Code).
  • Buat file baru dengan nama “list_sederhana.html” di dalam folder proyek yang telah Anda buat.
  • Ketik kode berikut ini di dalam file HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Sederhana</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="container">
  <h2>List Sederhana</h2>
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
  </ul>
</div>

</body>
</html>
 

3. Buat File “style.css”

Selanjutnya, kita akan membuat file CSS untuk mempercantik tampilan list yang telah dibuat. Ikuti langkah-langkah ini:

  • Di dalam folder proyek, buatlah file baru dengan nama “style.css“.
  • Ketik kode berikut di dalam file CSS:
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
  }
  
  .container {
    width: 80%;
    margin: 20px auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
  }
  
  ul {
    list-style-type: none;
    padding: 0;
  }
  
  li {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    background-color: #f9f9f9; /* Warna latar belakang untuk setiap item */
  }
  
  li:last-child {
    border-bottom: none;
  }
  
  a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s;
  }
  
  a:hover {
    color: #007bff;
  }
 

4. Mengubah Isi List

Anda dapat dengan mudah mengubah isi dari list sesuai dengan kebutuhan Anda. Caranya adalah dengan mengedit bagian <ul> di dalam file HTML. Anda bisa menambah, menghapus, atau mengubah urutan item-item dalam list.

Baca Juga:  Cara Membuat Alert Konfirmasi di HTML

5. Save & View Tampilan

Setelah Anda selesai mengedit file HTML dan CSS, simpan perubahan yang telah Anda buat. Kemudian, buka file “list_sederhana.html” menggunakan browser web seperti Google Chrome, Mozilla Firefox, atau lainnya. Anda akan melihat tampilan list sederhana yang telah Anda buat dengan HTML dan CSS.

Preview hasil

Berikut ini preview hasil list sederhana dengan html dan css jika Anda berhasil membuatnya:

Penutup

Dengan panduan ini, Anda akan merasakan keajaiban dari proses pembelajaran yang terstruktur dan menyenangkan. Mari jelajahi dunia pengembangan web dan temukan kekuatan dalam menciptakan tampilan yang menarik dan fungsional dengan list sederhana. Selamat belajar dan selamat mencoba!

Related posts: