Mengenal HTML, CSS dan Javascript

Modul Pengenalan HTML, CSS, & JavaScript untuk Pemula 🚀

Selamat datang di dunia pengembangan web! Untuk membuat sebuah website, ada tiga teknologi dasar yang perlu kamu ketahui: HTML, CSS, dan JavaScript. Anggap saja kita sedang membangun sebuah rumah:

• HTML adalah kerangka rumahnya.

• CSS adalah cat, dekorasi, dan perabotan yang membuat rumah itu indah.

• JavaScript adalah sistem listrik, air, dan pintu otomatis yang membuat rumah itu berfungsi dan interaktif.

Mari kita bahas satu per satu!

1. HTML (Hypertext Markup Language)

Apa itu? HTML bukanlah bahasa pemrograman, melainkan bahasa markup. Tugasnya adalah memberikan struktur dan konten pada halaman web. Kamu memberi tahu browser, "ini adalah judul", "ini adalah paragraf", atau "ini adalah gambar".

Fungsinya:

• Menyusun elemen-elemen di halaman web.

• Menampilkan teks, gambar, dan tautan (link).

• Menjadi fondasi dari semua website.

Contoh Praktis dari Video: Dalam video, kamu bisa melihat bagaimana tag HTML digunakan:

• <b>Tulisan ini tebal</b> akan membuat tulisan menjadi tebal.

• <i>Tulisan ini miring</i> akan membuat tulisan menjadi miring.

• <a href="https://www.cnn.com">Klik di sini</a> akan membuat sebuah tautan yang bisa diklik untuk menuju ke situs CNN.

2. CSS (Cascading Stylesheet)

Apa itu? CSS adalah bahasa yang digunakan untuk mendesain dan mempercantik tampilan elemen-elemen HTML yang sudah kamu buat. Tanpa CSS, website akan terlihat sangat polos dan membosankan.

Fungsinya:

• Mengatur warna, ukuran, dan jenis font.

• Mengatur tata letak (layout) halaman, seperti membuat kolom.

• Menambahkan animasi dan efek visual.

Contoh Praktis dari Video:

• Kamu bisa mengubah warna latar belakang halaman menjadi abu-abu.

• Kamu juga bisa mengubah warna teks menjadi oranye agar lebih menarik.

• Contoh lain adalah membuat elemen berubah warna saat kursor mouse menyentuhnya.

3. JavaScript (JS)

Apa itu? Nah, ini baru bahasa pemrograman. JavaScript digunakan untuk membuat website menjadi interaktif dan dinamis. Jika website bisa melakukan sesuatu selain hanya menampilkan informasi, itu berkat JavaScript.

Fungsinya:

• Membuat elemen yang bisa bereaksi terhadap tindakan pengguna (seperti klik atau scroll).

• Menampilkan notifikasi atau pop-up.

• Mengubah konten halaman tanpa perlu me-refresh.

Contoh Praktis dari Video:

• Membuat sebuah tautan, yang jika diklik, tidak pindah halaman tetapi memunculkan sebuah kotak pesan (pop-up) bertuliskan "Hai saya adalah pop-up nih!".

• Membuat menu navigasi yang bisa muncul dan disembunyikan saat diklik.

Kesimpulan

Ketiga teknologi ini bekerja bersama untuk menciptakan pengalaman web yang kita nikmati setiap hari:

• HTML untuk Struktur [03:21]

• CSS untuk Gaya [10:28]

• JavaScript untuk Interaktivitas [15:20]

Dengan memahami peran masing-masing, kamu sudah mengambil langkah pertama untuk menjadi seorang pengembang web. Selamat belajar! 🎉