1.HTML
HTML (HyperText Markup Language) adalah bahasa markup standar yang digunakan untuk membuat dan menyusun struktur halaman web.
Dengan HTML, kamu bisa menentukan apa saja yang ditampilkan di halaman web, seperti teks, gambar, video, tabel, tombol, dan lainnya.
Fungsi HTML
HTML tidak mengatur tampilan (itu tugas CSS), dan tidak membuat website interaktif (itu tugas JavaScript). HTML hanya:
1.Menyusun kerangka halaman.
2,Menandai bagian-bagian penting seperti:
Judul (<h1>, <title>)
Paragraf (<p>)
Daftar (<ul>, <ol>)
Gambar (<img>)
Link/tautan (<a>)
Formulir (<form>)
Dan Lain Lain
Struktur Dasar HTML
Contoh struktur dasar sebuah halaman HTML:
<!DOCTYPE html>
<html>
<head>
<title>Halaman Saya</title>
</head>
<body>
<h1>Selamat Datang!</h1>
<p>Ini adalah website pertamaku.</p>
</body>
</html>
Penjelasan:
<!DOCTYPE html>→ memberi tahu browser bahwa ini dokumen HTML5<html>→ elemen paling luar dari halaman HTML<head>→ bagian kepala (judul, metadata, link ke CSS/JS)<body>→ bagian isi halaman yang akan ditampilkan ke pengguna
2.CSS
CSS adalah singkatan dari Cascading Style Sheets.
CSS adalah bahasa yang digunakan untuk mengatur tampilan (desain) dari elemen-elemen HTML di halaman web.
Kalau HTML adalah kerangka atau struktur website, maka CSS adalah gaya, warna, dan dekorasi dari website tersebut.
Fungsi css
CSS digunakan untuk mengatur:
- Warna teks dan latar belakang
- Jenis dan ukuran font
- Posisi elemen di halaman
- Jarak antar elemen (padding, margin)
- Border dan bayangan
- Efek hover, animasi, transisi
- Responsivitas (agar website tampil bagus di HP & PC)
Contoh Penggunaan CSS
HTML tanpa CSS:
<h1>Selamat Datang</h1>
<p>Ini paragraf tanpa gaya.</p>
HTML + CSS:
<style>
h1 {
color: blue;
font-size: 40px;
text-align: center;
}
p {
color: gray;
font-family: Arial;
}
</style>
<h1>Selamat Datang</h1>
<p>Ini paragraf dengan CSS.</p>Bagaimana CSS Bekerja
CSS bekerja dengan memilih elemen HTML dan memberi aturan gaya kepadanya.
Contoh sintaks CSS:
selector {
properti: nilai;
}
Contoh nyata:
p {
color: red;
font-size: 16px;
}
Artinya: semua tag <p> akan berwarna merah dan ukuran hurufnya 16 piksel.
3.Java Script
JavaScript (JS) adalah bahasa pemrograman yang digunakan untuk membuat halaman web menjadi interaktif dan dinamis.
Kalau HTML itu kerangka dan CSS adalah gaya/tampilan, maka JavaScript adalah otak atau mesin penggerak dari sebuah website.
Dengan JavaScript, kamu bisa:
- Membuat form interaktif
- Menangani event klik, hover, input
- Menampilkan pesan otomatis
- Mengubah isi halaman tanpa refresh (AJAX)
- Mengontrol animasi, popup, navigasi
- Bahkan membuat game atau aplikasi web!