Penjelasan CSS dan Javascripts

-
Penjelasan CSS dan JavaScript

1. Apa itu CSS?

CSS (Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk mengatur tampilan halaman web (styling).

Jika HTML adalah tulang dan struktur, maka CSS adalah pakaian dan dekorasi agar tampilan lebih menarik.

Fungsi CSS:

  • Mengatur warna, ukuran, dan jenis font.
  • Memberi jarak (margin, padding) dan tata letak.
  • Menambahkan efek visual (hover, animasi, border, background).
  • Membuat halaman responsif (cocok dilihat di HP maupun laptop).

Contoh sederhana CSS:

h1 { color: blue; /* warna teks */ text-align: center; /* rata tengah */ font-family: Arial; /* jenis font */ }

📌 Hasil: Semua teks <h1> akan berwarna biru, rata tengah, dan menggunakan font Arial.

2. Apa itu JavaScript?

JavaScript (JS) adalah bahasa pemrograman yang digunakan untuk membuat halaman web interaktif dan dinamis.

Kalau HTML adalah struktur, CSS adalah tampilan, maka JavaScript adalah otak dan logika dari sebuah website.

Fungsi JavaScript:

  • Validasi form (cek apakah input kosong, email benar, password cukup panjang).
  • Membuat interaksi (misalnya tombol klik, animasi, pop-up).
  • Mengolah data secara langsung di browser (tanpa harus ke server dulu).
  • Mengontrol elemen HTML (ubah teks, sembunyikan/tampilkan, dll).

Contoh sederhana JavaScript:

function salam() { alert("Selamat datang di website kami!"); }

📌 Hasil: Jika fungsi salam() dipanggil (misalnya dengan klik tombol), maka muncul pop-up pesan.

3. Perbedaan CSS dan JavaScript

Aspek CSS JavaScript
Fungsi utama Tampilan (style) Logika & interaksi
Contoh penggunaan Warna tombol, font, layout Validasi input, efek klik
Posisi di HTML <style>...</style> atau file .css <script>...</script> atau file .js
Sifat Dekoratif (mempercantik) Fungsional (mengatur aksi)

4. Hubungan HTML, CSS, dan JavaScript

- HTML → kerangka rumah (tembok, pintu, jendela).

- CSS → cat dan dekorasi rumah.

- JavaScript → listrik dan mesin, membuat rumah "hidup".

Dengan ketiganya, sebuah website menjadi indah, interaktif, dan bermanfaat.

Komentar

Posting Komentar

Postingan populer dari blog ini

Modul Pembelajaran: Membuat Form HTML Dasar

-
Modul Pembelajaran: Membuat Form HTML Dasar Modul Pembelajaran: Membuat Form HTML Dasar Belajar membuat form HTML dengan penjelasan baris per baris kode Form HTML adalah salah satu elemen terpenting dalam pengembangan web. Modul ini akan menjelaskan cara membuat form HTML dasar dengan penjelasan setiap baris kode, sehingga mudah dipahami oleh pemula. Mengapa Belajar Form HTML? Form HTML digunakan untuk mengumpulkan input dari pengguna. Form dapat digunakan untuk berbagai keperluan seperti: Formulir kontak Pendaftaran akun Pemesanan produk Kuis dan survei Dan banyak lagi Struktur Dasar Form HTML Berikut adalah contoh kode form HTML dasar dengan penjelasan ...
Baca selengkapnya

Cara Menggunakan CSS dan JavaScript di Form

-
Cara Menggunakan CSS dan JavaScript di Form Formulir (form) adalah salah satu elemen penting dalam pembuatan website. Form biasanya digunakan untuk menginput data, misalnya login, registrasi, atau mengisi survey. Agar form terlihat menarik dan lebih interaktif, kita bisa menambahkan CSS untuk mengatur tampilan dan JavaScript untuk memberikan logika atau validasi. 1. Menambahkan CSS pada Form CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan form agar lebih rapi, indah, dan mudah digunakan. Contoh HTML Form Dasar <form> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br><br> <label for="password">Password:</label><br> <input type="password" id="password" name="password"...
Baca selengkapnya