📚 Memahami Struktur dan Fungsi Kode HTML, CSS, dan JavaScript pada Website Elegan

Saat membuat website, ada tiga teknologi utama yang harus kita pahami: HTML, CSS, dan JavaScript. Masing-masing punya peran penting supaya website kamu tampil keren, terstruktur rapi, dan punya fitur interaktif.

1. 🏗️ HTML: Struktur Dasar Halaman Web

HTML (HyperText Markup Language) adalah pondasi dari halaman web. HTML menentukan apa saja isi halaman seperti judul, paragraf, gambar, dan tombol.

Contoh awal HTML pada website elegan:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Elegant Website</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header class="navbar">
    <h1>Luxury Vibe</h1>
    <nav>
      <ul>
        <li><a href="#">Beranda</a></li>
        <li><a href="#">Tentang</a></li>
        <li><a href="#">Layanan</a></li>
        <li><a href="#">Kontak</a></li>
      </ul>
    </nav>
  </header>

  <section class="hero">
    <div class="hero-content">
      <h2>Selamat Datang di Dunia Elegan</h2>
      <p>Keanggunan dan kemewahan dimulai dari sini.</p>
      <button onclick="showAlert()">Pelajari Lebih Lanjut</button>
    </div>
  </section>

  <footer>
    <p>&copy; 2025 Luxury Vibe. Semua hak dilindungi.</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>

✨ Penjelasan singkat:

<!DOCTYPE html> menandai dokumen ini sebagai HTML5.

<html lang="id"> menunjukkan bahasa halaman adalah Bahasa Indonesia 🇮🇩.

<head> berisi info penting seperti judul dan pengaturan karakter.

<body> adalah tempat isi konten yang dilihat pengunjung.

2. 🎨 CSS: Mengatur Tampilan Visual

CSS (Cascading Style Sheets) bertugas untuk membuat tampilan halaman jadi menarik dengan warna, font, tata letak, dan efek visual lainnya.

Contoh kode CSS di <style>:

/* Reset dasar */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Warna dan tipografi elegan */
body {
  background: linear-gradient(to right, #1c1c1c, #2e2e2e);
  color: #fff;
  line-height: 1.6;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #111;
  padding: 1rem 2rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.navbar h1 {
  font-size: 1.8rem;
  color: #d4af37;
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.navbar a {
  text-decoration: none;
  color: #ccc;
  transition: color 0.3s;
}

.navbar a:hover {
  color: #d4af37;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80vh;
  background: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c') no-repeat center center/cover;
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.hero-content {
  position: relative;
  text-align: center;
  color: #fff;
  max-width: 600px;
}

.hero-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.hero-content button {
  background-color: #d4af37;
  color: #000;
  border: none;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.hero-content button:hover {
  background-color: #b8962c;
}

footer {
  text-align: center;
  padding: 1.5rem;
  background-color: #111;
  color: #999;
}

✨ Apa yang dilakukan kode ini?

Membuat background gradasi warna gelap 🌑 yang elegan.

Warna teks terang supaya mudah dibaca ✨.

Jenis font modern yang nyaman di mata 👓.

Jarak antar baris agar teks tidak berjejal 📄.

Ruang di sekitar teks supaya tidak mepet ke tepi layar ↔️.

Membatasi lebar konten supaya mudah dibaca di layar besar 📱💻.

3. ⚙️ JavaScript: Menambah Interaktivitas (Opsional)

JavaScript adalah bahasa pemrograman yang membuat website bisa berinteraksi dengan pengunjung, seperti animasi, tombol klik, dan popup.

Contoh sederhana:

function showAlert() {
  alert("Terima kasih telah mengunjungi kami. Kami siap melayani Anda!");
}

✨ Ini akan memunculkan pesan sambutan saat halaman selesai dimuat.

🏁 Kesimpulan

Teknologi	Fungsi Utama	Emoji
HTML	Struktur dan isi halaman	🏗️
CSS	Tampilan warna, font, layout	🎨
JavaScript	Interaktivitas dan fungsi dinamis	⚙️

Dengan paduan ketiganya, website kamu bisa tampil cantik, teratur, dan hidup! 🌟

Kalau mau saya buatkan contoh lengkap atau cara pisah file HTML, CSS, dan JS juga siap membantu ya! 😊

CandraAndiP

Cari Blog Ini