Pelajari HTML, CSS, dan JavaScript: Buat Website Pertamamu!
Daftar Isi
1. Pengenalan HTML
HTML (HyperText Markup Language) adalah bahasa standar untuk membuat halaman web. HTML digunakan untuk membuat struktur dan konten pada website, seperti teks, gambar, tautan, dan elemen lainnya.

HTML menggunakan tag-tag yang membungkus konten untuk memberi tahu browser bagaimana menampilkan konten tersebut.
2. Struktur Dasar HTML
Struktur dasar sebuah dokumen HTML terdiri dari beberapa bagian utama:
- <!DOCTYPE html> : Mendefinisikan tipe dokumen sebagai HTML5.
- <html> : Elemen root yang membungkus seluruh konten halaman.
- <head> : Bagian yang berisi metadata, judul, dan link ke file eksternal.
- <body> : Bagian yang berisi konten utama yang akan ditampilkan di halaman.
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <title>Judul Halaman</title> </head> <body> <h1>Halo Dunia!</h1> <p>Ini adalah paragraf pertama saya.</p> </body> </html>
Struktur ini adalah pondasi untuk membuat halaman web yang valid dan terstruktur dengan baik.
3. Elemen dan Tag HTML
Elemen HTML terdiri dari tag pembuka, konten, dan tag penutup. Contohnya:
<p>Ini adalah paragraf.</p>
Beberapa elemen penting yang sering digunakan:
- <h1> - <h6> : Judul dengan tingkat heading berbeda.
- <p> : Paragraf teks.
- <a> : Tautan/link.
- <img> : Gambar (tag self-closing).
- <ul> dan <ol> : Daftar tidak berurutan dan berurutan.
Contoh penggunaan gambar dengan tag
<img>
:

4. Pengenalan CSS
CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan layout halaman web. Dengan CSS, kamu bisa mengubah warna, ukuran, posisi, dan gaya elemen HTML.

CSS membuat website menjadi lebih menarik dan mudah dibaca.
5. Cara Menggunakan CSS
Ada tiga cara utama menggunakan CSS dalam HTML:
-
Inline CSS:
Langsung menambahkan atribut
style
pada elemen HTML.<p style="color: blue; font-weight: bold;">Teks biru tebal</p>
-
Internal CSS:
Menulis CSS di dalam tag
<style>
di bagian<head>
.<style> p { color: green; font-size: 18px; } </style>
-
External CSS:
Menghubungkan file CSS terpisah menggunakan tag
<link>
.<link rel="stylesheet" href="styles.css">
6. Selector CSS
Selector CSS digunakan untuk memilih elemen HTML yang ingin diberi gaya. Contoh selector yang umum:
-
Selector Tag:
Memilih semua elemen dengan tag tertentu, misal
p
untuk semua paragraf. -
Selector Class:
Memilih elemen dengan atribut class tertentu, misal
.highlight
. -
Selector ID:
Memilih elemen dengan atribut id tertentu, misal
#header
.
p { color: red; } .highlight { background-color: yellow; } #header { font-size: 24px; }
Dengan selector, kamu bisa mengatur gaya elemen secara spesifik dan terorganisir.
7. Pengenalan JavaScript
JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web menjadi interaktif. Dengan JavaScript, kamu bisa membuat tombol yang bisa diklik, form yang validasi otomatis, animasi, dan banyak lagi.

JavaScript berjalan di browser dan bisa berinteraksi dengan elemen HTML dan CSS.
8. Variabel dan Tipe Data
Variabel adalah tempat untuk menyimpan data. Di JavaScript, kamu bisa membuat variabel dengan
let
,
const
, atau
var
.
let nama = "Budi"; const umur = 20; var isStudent = true;
Tipe data umum di JavaScript antara lain:
- String: Teks, misal "Halo Dunia".
- Number: Angka, misal 10, 3.14.
- Boolean: true atau false.
- Array: Kumpulan data dalam satu variabel.
- Object: Data dengan properti dan nilai.
9. Fungsi dan Event
Fungsi adalah blok kode yang bisa dipanggil berulang kali. Event adalah aksi yang terjadi, seperti klik tombol atau input teks.
function sapa() { alert("Halo, selamat datang!"); } document.getElementById("btnSapa").addEventListener("click", sapa);
Contoh di atas membuat fungsi
sapa
yang menampilkan pesan, dan menghubungkannya dengan event klik pada tombol dengan id
btnSapa
.
10. Membuat Website Pertamamu
Sekarang kita akan membuat website sederhana yang menampilkan judul, paragraf, gambar, dan tombol interaktif.
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <title>Website Pertamaku</title> <style> body { font-family: Arial, sans-serif; padding: 20px; background-color: #f9fafb; } h1 { color: #4f46e5; } button { background-color: #4f46e5; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; } button:hover { background-color: #4338ca; } </style> </head> <body> <h1>Selamat Datang di Website Pertamaku</h1> <p>Ini adalah paragraf pertama saya yang dibuat dengan HTML.</p> <img src="https://placehold.co/600x300/png?text=Gambar+Website+Pertama" alt="Gambar ilustrasi website pertama dengan latar belakang biru dan teks selamat datang" /> <br><br> <button id="btnClick">Klik Saya</button> <script> document.getElementById("btnClick").addEventListener("click", function() { alert("Terima kasih sudah mengklik tombol!"); }); </script> </body> </html>
Kamu bisa salin kode di atas dan coba jalankan di browser untuk melihat hasilnya.
