1. Pengantar
HTML, CSS, dan JavaScript adalah tiga teknologi utama dalam pengembangan web. Dengan menguasai ketiganya, Anda dapat membuat website yang menarik, responsif, dan interaktif. Berikut adalah panduan lengkap untuk memahami dan menggunakan HTML, CSS, dan JavaScript.
2. HTML (HyperText Markup Language)
a. Apa Itu HTML?
HTML adalah bahasa markup yang digunakan untuk membangun struktur dasar sebuah website. Setiap elemen dalam HTML diatur menggunakan tag yang membentuk konten halaman web.
b. Struktur Dasar HTML
Berikut adalah contoh struktur dasar dokumen HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Judul Halaman</title>
</head>
<body>
<h1>Selamat Datang di Website Saya</h1>
<p>Ini adalah paragraf pertama.</p>
</body>
</html>c. Elemen Penting dalam HTML
-
Heading:
<h1> ... <h6>untuk judul -
Paragraf:
<p>untuk teks paragraf -
Gambar:
<img src="url" alt="deskripsi"> -
Tautan:
<a href="url">Teks Link</a> -
Daftar:
<ul>untuk daftar tidak berurutan,<ol>untuk daftar berurutan -
Tabel:
<table>,<tr>,<td>,<th> -
Formulir:
<form>,<input>,<button>,<textarea>
3. CSS (Cascading Style Sheets)
a. Apa Itu CSS?
CSS digunakan untuk mendesain tampilan halaman web agar lebih menarik. Dengan CSS, kita bisa mengatur warna, ukuran font, tata letak, dan animasi elemen dalam halaman web.
b. Cara Menggunakan CSS
-
Inline CSS (di dalam tag HTML)
<p style="color: blue; font-size: 20px;">Teks dengan warna biru</p>-
Internal CSS (dalam tag
<style>di<head>)
<style>
p {
color: red;
font-size: 18px;
}
</style>-
External CSS (file CSS terpisah)
<link rel="stylesheet" href="style.css">Contoh kode dalam style.css:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}c. Konsep Dasar CSS
-
Selector: Memilih elemen yang akan diberi gaya.
-
Properti: Aturan yang menentukan tampilan elemen.
-
Nilai: Pengaturan yang diterapkan pada properti.
Contoh:
h1 {
color: blue;
font-size: 24px;
text-align: center;
}d. Layout dengan CSS
-
Flexbox: Memudahkan pengaturan tata letak responsif.
-
Grid Layout: Memberikan kontrol lebih dalam tata letak berbasis grid.
-
Media Queries: Digunakan untuk membuat desain responsif berdasarkan ukuran layar.
4. JavaScript (JS)
a. Apa Itu JavaScript?
JavaScript adalah bahasa pemrograman yang digunakan untuk menambahkan interaktivitas ke dalam website.
b. Cara Menggunakan JavaScript
-
Inline JavaScript
<button onclick="alert('Halo, dunia!')">Klik Saya</button>-
Internal JavaScript
<script>
function sapa() {
alert('Selamat datang!');
}
</script>
<button onclick="sapa()">Klik Saya</button>-
External JavaScript (file JS terpisah)
<script src="script.js"></script>Contoh kode dalam script.js:
function ubahTeks() {
document.getElementById("judul").innerHTML = "Teks telah berubah!";
}c. Konsep Dasar JavaScript
-
Variabel: Menyimpan data dengan
var,let, atauconst. -
Fungsi: Kumpulan kode yang dapat dipanggil kembali.
-
Event Listener: Menjalankan kode berdasarkan aksi pengguna.
-
DOM Manipulation: Mengubah elemen HTML secara dinamis.
Contoh perubahan teks dengan JavaScript:
<h1 id="judul">Halo, Dunia!</h1>
<button onclick="ubahTeks()">Ubah Teks</button>5. Kesimpulan
Dengan memahami HTML, CSS, dan JavaScript, Anda dapat mulai membangun website dari nol hingga menjadi lebih interaktif dan menarik. Pastikan untuk terus berlatih dan mencoba proyek-proyek kecil untuk memperdalam pemahaman Anda!
Baca juga:
-
Cara Membuat Website Responsif dengan CSS
-
Panduan JavaScript untuk Pemula
-
Framework CSS & JavaScript yang Wajib Dicoba
