Panduan Dasar HTML, CSS, dan JavaScript

Simbol Peringatan Web

Visualisasi Sederhana Kode Web

Pengantar Integrasi Web

Pengembangan web modern sangat bergantung pada tiga pilar utama: HTML (HyperText Markup Language) untuk struktur, CSS (Cascading Style Sheets) untuk presentasi visual, dan JavaScript (JS) untuk interaktivitas. Memahami bagaimana ketiganya bekerja bersama sangat penting, terutama saat merancang untuk perangkat seluler di mana efisiensi dan kecepatan muat sangat diutamakan.

Artikel ini menyajikan contoh html css dan javascript yang terintegrasi, dirancang agar terlihat rapi dan responsif pada tampilan mobile. Struktur diatur menggunakan Flexbox dasar dalam CSS untuk memastikan tata letak vertikal yang terorganisir.

1. Contoh Struktur HTML

HTML mendefinisikan konten halaman web Anda, seperti judul, paragraf, dan tombol.

<!DOCTYPE html>
<html lang="id">
<head>
    <title>Contoh</title>
   <style>...CSS disini...</style>
</head>
<body>
    <h1>Judul Utama</h1>
    <button id="aksiBtn">Klik Saya</button>
   <p id="output">Hasil akan muncul di sini.</p>
   <script>...JavaScript disini...</script>
</body>
</html>

2. Contoh Styling CSS

CSS di dalam tag <style> di bagian head halaman ini bertanggung jawab atas tampilan, pewarnaan, dan tata letak yang rapi, memastikan margin dan padding minimal sehingga cocok untuk layar kecil.

body {
    display: flex;
    flex-direction: column; /* Penting untuk mobile */
    align-items: center;
}
.container {
    width: 95%;
    max-width: 700px;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

3. Contoh Interaksi JavaScript

JavaScript digunakan untuk menambahkan fungsionalitas dinamis. Dalam contoh ini, kita akan mengubah teks di layar ketika tombol ditekan.

// Ambil elemen tombol dan output
const tombol = document.getElementById('aksiBtn');
const outputTeks = document.getElementById('output');
let hitungan = 0;

tombol.addEventListener('click', function() {
    hitungan++;
    outputTeks.textContent = `Tombol telah diklik sebanyak ${hitungan} kali!`;
});

Menguji Interaktivitas

Tekan tombol di bawah ini untuk melihat bagaimana JavaScript mengubah konten halaman secara langsung tanpa memuat ulang (AJAX-style interaction).

Output:

Hasil akan muncul di sini.

Integrasi yang sukses dari ketiga teknologi ini menghasilkan pengalaman pengguna (UX) yang mulus. Untuk aplikasi skala penuh, CSS biasanya ditempatkan di file terpisah (.css) dan JavaScript di file terpisah (.js) untuk menjaga kebersihan kode, namun untuk demonstrasi dasar, penempatan internal seperti ini sudah cukup jelas.

Ini adalah contoh minimalis untuk menunjukkan struktur web responsif.

Related Posts