MODUL AJAR: HTML, CSS, dan JavaScript untuk Pemula
BAGIAN 1: HTML (HyperText Markup Language)
Apa itu HTML?
HTML adalah bahasa markah yang digunakan untuk membuat dan menyusun halaman web. HTML
berfungsi sebagai kerangka dasar suatu halaman.
Struktur Dasar HTML:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Selamat Datang</h1>
<p>Ini adalah paragraf pertama.</p>
</body>
</html>
Penjelasan Setiap Elemen:
• <!DOCTYPE html> : Mendeklarasikan bahwa dokumen menggunakan HTML versi 5.
• <html> : Elemen root yang membungkus seluruh isi dokumen HTML.
• <head> : Bagian kepala yang menyimpan metadata, link CSS, script, dan judul.
• <title> : Judul yang muncul di tab browser.
• <body> : Bagian utama tempat semua konten halaman web ditampilkan di browser.
• <h1> sampai <h6> : Heading atau judul. <h1> adalah yang paling besar dan penting.
• <p> : Paragraf. Digunakan untuk membuat blok teks biasa.
• <a href=""> : Tautan atau link ke halaman lain atau situs lain.
• <img src="" alt=""> : Menampilkan gambar. src untuk lokasi file, alt untuk teks alternatif.
• <ul> : Unordered list (daftar tak berurutan, biasanya bullet).
• <ol> : Ordered list (daftar berurutan, biasanya angka).
• <li> : List item, digunakan dalam <ul> dan <ol> .
• <table> : Tabel.
• <tr> : Table row (baris tabel).
• <th> : Table header (judul kolom atau baris).
• <td> : Table data (isi sel tabel).
• <form> : Digunakan untuk membuat formulir input data.
• <input> : Elemen input (teks, tombol, checkbox, dll).
• <textarea> : Kotak teks multi-baris.
• <button> : Tombol yang bisa diklik.
1
BAGIAN 2: CSS (Cascading Style Sheets)
Apa itu CSS?
CSS digunakan untuk mengatur tampilan dan gaya halaman HTML. CSS mengontrol warna, font, layout,
dan efek visual lainnya.
Cara Menyisipkan CSS:
1. Inline CSS – Langsung dalam tag HTML:
<p style="color:red;">Teks merah</p>
1. Internal CSS – Dalam elemen <style> di bagian <head> :
<style>
p {
color: blue;
}
</style>
1. External CSS – Menggunakan file terpisah:
<link rel="stylesheet" href="[Link]">
Properti Dasar CSS dan Penjelasan:
• color : Mengatur warna teks.
• background-color : Warna latar belakang.
• font-size : Ukuran huruf.
• font-family : Jenis huruf yang digunakan.
• margin : Jarak luar antar elemen.
• padding : Jarak dalam antara isi dan batas elemen.
• border : Garis tepi elemen.
• width dan height : Ukuran elemen.
• display : Cara elemen ditampilkan (block, inline, flex, dll).
• position : Mengatur posisi relatif atau absolut dari elemen.
• text-align : Perataan teks (kiri, tengah, kanan).
Contoh CSS:
body {
background-color: #f4f4f4;
2
font-family: Arial;
}
h1 {
color: navy;
text-align: center;
}
BAGIAN 3: JavaScript (JS)
Apa itu JavaScript?
JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web menjadi interaktif.
Misalnya: popup, validasi form, perubahan isi halaman secara dinamis.
Penempatan JavaScript:
1. Internal JS – Ditulis langsung dalam tag <script> :
<script>
alert("Halo Dunia!");
</script>
1. External JS – Menggunakan file .js terpisah:
<script src="[Link]"></script>
Konsep Dasar JavaScript dan Penjelasan:
• Variabel: Menyimpan data.
• var , let , const
• Fungsi: Blok kode yang dapat digunakan kembali.
• Contoh: function tampil() { alert("Hai!"); }
• Event: Merespons aksi pengguna.
• Contoh: onclick , onchange , onload
• DOM (Document Object Model): Mengakses dan memodifikasi elemen HTML dengan JavaScript.
• [Link]("id") untuk ambil elemen berdasarkan ID.
• [Link] untuk ubah isi elemen.
Contoh Sederhana:
<button onclick="tampilPesan()">Klik Saya</button>
<script>
function tampilPesan() {
3
alert("Tombol diklik!");
}
</script>
TUGAS PRAKTIKUM
1. Buatlah halaman HTML yang memiliki:
2. Judul, paragraf, gambar, dan link.
3. Desain sederhana menggunakan CSS.
4. Interaksi sederhana menggunakan JavaScript.
5. Simpan sebagai: [Link] , [Link] , [Link]
PENUTUP
Dengan memahami HTML, CSS, dan JavaScript, kita bisa membangun halaman web sederhana. Pelajari
masing-masing bagian perlahan, dan terus praktik untuk menguasainya.